//<![CDATA[

function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(41.8600, -87.6900), 10);

	// Create a base icon for all of our markers that specifies the
	// shadow, icon dimensions, etc.
	var baseIcon = new GIcon();
	baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
	baseIcon.infoShadowAnchor = new GPoint(18, 25);

    // Creates a marker for each location
	function createMarker(point, html, mCode) {
	  var icon = new GIcon(baseIcon);
	  icon.image = "/images/map-" + mCode + ".png";
	  var marker = new GMarker(point, icon);

      GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

    // Load location data xml file and generate info window html
	var request = GXmlHttp.create();
	request.open("GET", "/garagesxml", true);
	request.onreadystatechange = function() {
	  if (request.readyState == 4) {
	    	var xmlDoc = request.responseXML;
			var xLocations = xmlDoc.documentElement.getElementsByTagName("Location");
			for (var i = 0; i < xLocations.length; i++) {
            var point = new GPoint(parseFloat(xLocations[i].getAttribute("Longitude")),
                                   parseFloat(xLocations[i].getAttribute("Latitude")));

            var mName = xLocations[i].getAttribute("Name");
            var mAddress = xLocations[i].getAttribute("Address");
            var mCode = xLocations[i].getAttribute("Code");
			var mCapacity = xLocations[i].getAttribute("Capacity");
			var mAssigned = xLocations[i].getAttribute("Assigned");

            var html = '<div class="mapinfo">';
            html += '<h3>' + mName + '</h3>';
			html += '<table cellspacing="0"><tr><th>Address:</th><td>' + mAddress + '</td></tr>';
            html += '<tr><th>Garage Code:</th><td>' + mCode + '</td></tr>';
			html += '<tr><th>Bus Capacity:</th><td>' + mCapacity + '</td></tr>';
			html += '<tr><th>Buses Assigned:</th><td>' + mAssigned + '</td></tr>';
			html += '<tr><th>Routes Assigned:</th><td><a href="/garage/' + mCode + '">View Routes</a></td></tr></table>';
            html += '</div>';

            createMarker(point, html, mCode);
			map.addOverlay(createMarker(point, html, mCode));
          }
	  }
	}
	request.send(null);
	
	

  }
}

//]]>