var map;
var MapListContent = new Array();
// '<p>Click name to find on map.</p>';
var MarkerArray = new Array();
var InfoContent = new Array();
var Locations = new Array();

// 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);

// Alphabetically sort a two dimensional array
function CompareNames (a, b) {
	return a.name < b.name ? -1 : a.name == b.name ? 0 : 1;
}

if (GBrowserIsCompatible()) {
	function onLoad() {

		ResizeMap()
	
		// Monitor the window resize event and let the map know when it occurs
		if (window.attachEvent) {
			window.attachEvent("onresize", function() {ResizeMap()} );
		} else {
			window.addEventListener("resize", function() {ResizeMap()}, false);
		}

		map = new GMap(document.getElementById("MapWindow"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.centerAndZoom(new GPoint(-94.417288, 39.094231), 13);
		//map.setMapType(G_HYBRID_TYPE);

		var request = GXmlHttp.create();
		request.open("GET", "locations.xml", true);
		request.onreadystatechange = function() {
			if (request.readyState == 4) {
				var xmlDoc = request.responseXML;
				var locations = xmlDoc.getElementsByTagName("location");
				var points = xmlDoc.documentElement.getElementsByTagName("marker");
				var info = xmlDoc.documentElement.getElementsByTagName("info");	
	
				Locations[locations.length - 1] = '';
	
				for (var i = 0; i < locations.length; i++) {
					Locations[i] = new Array(5)
				}
	
				for (var i = 0; i < locations.length; i++) {
					Locations[i]["lat"] = parseFloat(points[i].getAttribute("lat"))
					Locations[i]["lng"] = parseFloat(points[i].getAttribute("lng"))
					Locations[i]["info"] = info[i]
					Locations[i]["locationtype"] = info[i].getElementsByTagName("type")[0].firstChild.nodeValue
					Locations[i]["name"] = info[i].getElementsByTagName("name")[0].firstChild.nodeValue
					//Locations[i]["city"] = info[i].getElementsByTagName("city")[0].firstChild.nodeValue
					//Locations[i]["state"] = info[i].getElementsByTagName("state")[0].firstChild.nodeValue
				}

				Locations.sort(CompareNames);
				for (var i = 0; i < Locations.length; i++) {
					var point = new GPoint(Locations[i]["lng"], Locations[i]["lat"]);
					var marker = createMarker(point, i, Locations[i]["locationtype"]);
					map.addOverlay(marker);
					MarkerArray[i] = marker;
					InfoContent[i] = Locations[i]["info"];
					MapListContent += '<a href="javascript:ShowLocation(' + i + ')">' + Locations[i]["name"] + '</a><p>';        
				}
			
				//document.getElementById("MapList").innerHTML = MapListContent;
			}
		}
	
		request.send(null);
	}
} else {
	alert('Unfortunately this map will not work on your browser');
}

function createMarker(point, i, locationtype) {
	var icon = new GIcon(baseIcon);
	
	if (locationtype.indexOf("Customer") > -1) {
		icon.image = "markerA.png";
	} 

	else if (locationtype.indexOf("Headquarters") > -1) {
		icon.image = "markerC.png";
        }
	else {
		icon.image = "markerB.png";
	}

	var marker = new GMarker(point, icon);

	GEvent.addListener(marker, "click", function() {
		map.centerAndZoom(point, 3);
	});

	return marker;
}

function ResizeMap() {
	var MapWindow = document.getElementById("MapWindow");
	var MapList = document.getElementById("MapList");
}