//<![CDATA[

  if (GBrowserIsCompatible()) {
    /* this variable will collect the html which will eventually be placed in the sidebar */
    var sidebar_html = "";
  
    /* arrays to hold copies of the markers and html used by the sidebar because the function closure trick doesn't work there */
    var gmarkers = [];
    var htmls = [];
    var i = 0;
  
    /* arrays to hold variants of the info window html with get direction forms open */
    var to_htmls = [];
    var from_htmls = [];
    var near_htmls = [];
  
  /* Changing icons on rollover*/
  var hotIcon = new GIcon();
    hotIcon.image = "google_marker_yellow.png";
    hotIcon.shadow = "../Content/Images/shadow.png";
    hotIcon.iconSize = new GSize(23, 28);
    hotIcon.shadowSize = new GSize(38, 26);
    hotIcon.iconAnchor = new GPoint(9, 34);
    hotIcon.infoWindowAnchor = new GPoint(9, 2);
    hotIcon.infoShadowAnchor = new GPoint(18, 25);
  
    var coldIcon = new GIcon(hotIcon);
    coldIcon.image = "../Content/Images/google_marker.jpg";

 /*There are now two arrays of markers, one for cold icons and one for hot */
    var cmarkers = [];
    var hmarkers = [];
  
    /* A function to create the marker and set up the event window */
function createMarker(point, sidebarName, tabs) {
	var marker = new GMarker(point, coldIcon);
	//var sidebarTabs = [];
      /* The info window version with the "to here" form open */
	to_htmls[i] = tabs[0][1] + '<br>Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' +
         '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
         '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
         '<INPUT value="Get Directions" TYPE="SUBMIT">' +
         '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
              /*  "(" + name + ")" + */
         '"/>';
      /* The info window version with the "to here" form open */
	from_htmls[i] = tabs[0][1] + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' +
         '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
         '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
         '<INPUT value="Get Directions" TYPE="SUBMIT">' +
         '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
              /* "(" + name + ")" + */
         '"/>';
         /* The info window version with the "to here" form open */
	near_htmls[i] = tabs[0][1] + '<br>Directions: <a href="javascript:nearhere(' + i + ')">Nearby</a> - <b>To here</b> - <b>From here</b>' +
         '<br>Search Nearby:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
         '<input type="text" SIZE=40 MAXLENGTH=40 name="naddr" id="naddr" value="" /><br>' +
         '<INPUT value="Get Directions" TYPE="SUBMIT">' +
         '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
              /* "(" + name + ")" + */
         '"/>';
      /* The inactive version of the direction info */
	tabs[0][1] += '<p id="directions">Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a></p>';
	
	GEvent.addListener(marker, "click", function() {
		/*if (tabs.length > 2) {
			tabs[0][1] = '<div style="width:' + tabs[0][1].length * 8 + 'px">' + tabs[0][1] + '</div>';
		}*/
		
		var gTabs = new Array(tabs.length);

		for (var i = 0; i < tabs.length; i++) {
			gTabs[i] = new GInfoWindowTab(tabs[i][0], tabs[i][1]);
		}
		for(var x = 0; x < tabs.length; x++){
			//alert("Title: " + tabs[x][0] + "\nHTML: " + tabs[x][1]);
		}
		marker.openInfoWindowTabsHtml(gTabs);
	});
	/* save the info we need to use later for the sidebar */
	gmarkers[i] = marker;
	htmls[i] = tabs[0][1];

	/* save two markers for each point, one with each of the possible icons */
      cmarkers[i] = marker;
      hmarkers[i] = new GMarker(point,hotIcon);
      /* add a line to the sidebar html, with click, mouseover and mouseout event handlers */
      sidebar_html += '<div><a href="javascript:openLocation(' + i + ')" onmouseover="mymouseover('+i+')" onmouseout="mymouseout('+i+')">' + sidebarName + '</a></div>';
	i++;
	return marker;
}

    /* This function picks up the click and opens the corresponding info window */
	function openLocation(i) {
		GEvent.trigger(gmarkers[i], "click");
	}

    /* functions that open the directions forms */
    function tohere(i) {
      gmarkers[i].openInfoWindowHtml(to_htmls[i]);
    }
    function fromhere(i) {
      gmarkers[i].openInfoWindowHtml(from_htmls[i]);
    }
    function nearhere(i) {
      gmarkers[i].openInfoWindowHtml(near_htmls[i]);
    }

	/* This function is invoked when the mouse goes over an entry in the sidebar
		It deletes the cold Icon marker and replaces it with the hot Icon marker  */    
    function mymouseover(i) {
   //   map.removeOverlay(cmarkers[i]);
   //   map.addOverlay(hmarkers[i]);
    }
    /* This function is invoked when the mouse leaves an entry in the sidebar
    	It deletes the hot Icon marker and replaces it with the cold Icon marker */  
    function mymouseout(i) {
    //  map.removeOverlay(hmarkers[i]);
    //  map.addOverlay(cmarkers[i]);
    }
    /* create the map */
    var map = new GMap2(document.getElementById("map"));
    //map.addControl(new GLargeMapControl());
	map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(39.76, -104.954453), 10);

    /* Read the data from example.xml */
    var request = GXmlHttp.create();
    request.open("GET", "STG.xml", true);

    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        var xmlDoc = request.responseXML;
		
        /* obtain the array of markers and loop through it */
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        
        for (var i = 0; i < markers.length; i++) {
			
			var point = new GLatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng"));
			var sidebarName = markers[i].getAttribute("sidebarName");
			
			var tabsHTML = markers[i].getElementsByTagName("html");
			//alert(markers[1].getAttribute("sidebarName") + ": " + tabsHTML.length + " html tags")
			var tabsLabel = markers[i].getElementsByTagName("label");
			//alert(markers[1].getAttribute("sidebarName") + ": " + tabsLabel.length + " label tags")
			var tabs = new Array(tabsHTML.length);
			
			for(var j = 0; j < tabs.length; j++){
				tabs[j] = new Array(2);
			}
			
			for (var k = 0; k < tabsLabel.length; k++){
				var lID = parseInt(tabsLabel[k].getAttribute("id")) - 1;
				//alert('SETING tabs['+lID+'][0] to '+tabsLabel[k] );
				tabs[lID][0] = tabsLabel[k].childNodes[0].nodeValue;
			}	
			for (var l = 0; l < tabsHTML.length; l++){
				var hID = parseInt(tabsHTML[l].getAttribute("id")) - 1;
				//alert("hID: " + hID);
				tabs[hID][1] = tabsHTML[l].childNodes[0].nodeValue;
			}		
		
			/* create the marker */
			var marker = createMarker(point, sidebarName, tabs);
			map.addOverlay(marker);
		
        }
        /* put the assembled sidebar_html contents into the sidebar div */
        document.getElementById("sidebar").innerHTML = sidebar_html;
      }
    }
    request.send(null);
  }

  else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
  }

  //]]>