var map;

// Create our "tiny" marker icon 
var icons = new Array();
icons["red"] = new GIcon(); 
icons["red"].image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; 
icons["red"].shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; 
icons["red"].iconSize = new GSize(12, 20); 
icons["red"].shadowSize = new GSize(22, 20); 
icons["red"].iconAnchor = new GPoint(6, 20); 
icons["red"].infoWindowAnchor = new GPoint(5, 1); 
icons["red"].imageMap = [4,0,0,4,0,7,3,11,4,19,7,19,8,11,11,7,11,4,7,0]; 
icons["red"].transparent = "http://labs.google.com/ridefinder/images/mm_20_transparent.png";

function get_icon(iconColor) {
   if ((typeof(iconColor)=="undefined") || (iconColor==null)) { 
	  iconColor = "red"; 
   }
   if (!icons[iconColor]) {
	  icons[iconColor] = new GIcon(icons["red"]);
	  icons[iconColor].image = "http://labs.google.com/ridefinder/images/mm_20_"+ iconColor +".png";
   } 
   return icons[iconColor];
}

// A function to create the marker and set up the event window
 function createMarker(point,name,html,iconStr) {
	// FF 1.5 fix
	html = '<div style="white-space:nowrap;">' + html + '</div>';
	var marker = new GMarker(point);
	if (iconStr) {
		marker = new GMarker(point, get_icon(iconStr));
	}
	
	GEvent.addListener(marker, "click", function() {
	  marker.openInfoWindowHtml(html);
	});
	return marker;
  }

// This function picks up the click and opens the corresponding info window
function myclick(i) {
	gmarkers[i].openInfoWindowHtml(htmls[i]);
}

function makeMap() {
	if (GBrowserIsCompatible()) {
		// resize the map
		var m = document.getElementById("map");
		m.style.height = "410px";
		m.style.width = "620px";
		
		// create the map
		map = new GMap(document.getElementById("map"));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GOverviewMapControl());
		map.enableDoubleClickZoom();
		map.setCenter(new GLatLng(44.977565, -93.061839), 10);

		// Read the data from data.xml
		var request = GXmlHttp.create();
		var icon ="blue";
		var filename = "http://www.fhsm.com/includes/data.xml"
		request.open("GET", filename, true);
		request.onreadystatechange = function() {
			// alert("readyState ="+request.readyState);
			if (request.readyState == 4) {
				if (request.status == 200) {
					var xmlDoc = request.responseXML;
					if (xmlDoc.documentElement) {
						// obtain the array of markers and loop through it
						var markers = xmlDoc.documentElement.getElementsByTagName("marker");
						// alert("loading "+markers.length+" markers");
						for (var i = 0; i < markers.length; i++) {
							// obtain the attribues of each marker
							var lat = parseFloat(markers[i].getAttribute("lat"));
							var lng = parseFloat(markers[i].getAttribute("lng"));
							var point = new GPoint(lng,lat);
							var html = markers[i].getAttribute("html");
							var label = markers[i].getAttribute("label");
							// create the marker
							var marker = createMarker(point,label,html,icon);
							map.addOverlay(marker);
						}
					} else {
						alert("invalid xml file:"+filename);
					}
				} else {
					alert("file not found:"+filename);
				}
			}
		}
		// alert("sending null");
		request.send(null);
	}
}