// JavaScript Document
 //<![CDATA[
    var map = null;
	Event.observe(window, 'load', load);
	Event.observe(window, 'unload', GUnload);
	
	function load() {
		if (GBrowserIsCompatible()) {
		
		  var i = 0;
	
		  // Create the map
		  // Make sure this element has the same ID as your div
		  map = new GMap2(document.getElementById("googlemap"));
		  // Add controls for moving and zooming the map.  Use GSmallMapControl for small maps
		  map.addControl(new GLargeMapControl());
		  // Add controls for switching between regular and satellite views
		  map.addControl(new GMapTypeControl());
		  // Set the starting position and zoom level when the map loads
		  //map.setCenter(new GLatLng(38.895222, -77.036758), 13);
		  map.setCenter(new GLatLng(40.433691, -79.941892), 12);
	
	
		  // Read the data from XML
		  var request = GXmlHttp.create();
		  // Open the XML file
		  //request.open("GET", "map-markers.xml", true);
		  request.open("GET", "http://www.post-gazette.com/pg/xml/200903/shootings.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++) {
				// Obtain the attribues of each marker
				var lat = parseFloat(markers[i].getAttribute("lat"));
				var lng = parseFloat(markers[i].getAttribute("lng"));
				var point = new GLatLng(lat,lng);
				var label = markers[i].getAttribute("label");
				var age = markers[i].getAttribute("age");
				var street = markers[i].getAttribute("street");
				var neighborhood = markers[i].getAttribute("neighborhood");
				var date = markers[i].getAttribute("date");
				var race = markers[i].getAttribute("race");
				var gender = markers[i].getAttribute("gender");
				var cause = markers[i].getAttribute("cause");
				var image = markers[i].getAttribute("image");
				var alt = markers[i].getAttribute("alt");
				var link1 = markers[i].getAttribute("link1");
				var link1hed = markers[i].getAttribute("link1hed");
				var link2 = markers[i].getAttribute("link2");
				var link2hed = markers[i].getAttribute("link2hed");
				var link3 = markers[i].getAttribute("link3");
				var link3hed = markers[i].getAttribute("link3hed");
				var height = markers[i].getAttribute("height");
				// Call the function to create the marker
				var marker = createMarker(point,label,age,street,neighborhood,date,race,gender,cause,image,alt,link1,link1hed,link2, link2hed, link3,link3hed, height);
				map.addOverlay(marker);
			  }
			}
		  }
		  request.send(null);
		  
		  // Function to create the marker and set up the event window
		  function createMarker(point,label,age,street,neighborhood,date,race,gender,cause,image,alt,link1,link1hed,link2, link2hed, link3,link3hed, height) {
		  	// Create the HTML text based on the values passed in from XML
			var markerhtml = "";
			if (label != "") markerhtml += "<div style='width: 250px;font-family: Arial, Helvetica, sans-serif; font-size:80%;'><strong>Victim:</strong> " + label + "<br>";
			markerhtml += "<strong>Age:</strong> " + age + "<br>";
			markerhtml += "<strong>Street: </strong>" + street + "<br>";
			markerhtml += "<strong>Neighborhood: </strong>" + neighborhood + "<br>";
			markerhtml += "<strong>Date: </strong>" + date + "<br>";
			markerhtml += "<strong>Race: </strong>" + race + "<br>";
			markerhtml += "<strong>Gender: </strong>" + gender + "<br>";
			markerhtml += "<strong>Cause: </strong>" + cause + "<br>";
			if (link1 != "") { markerhtml += "<ul><li><a href='" + link1 + "' target='_blank'>" + link1hed + "</a></li></ul>"; }
			if (link2 != "") { markerhtml += "<ul><li><a href='" + link2 + "' target='_blank'>" + link2hed + "</a></li></ul>"; }
			if (link3 != "") { markerhtml += "<ul><li><a href='" + link3 + "' target='_blank'>" + link3hed + "</a></li></ul>"; }
			if (image != "") {
				markerhtml += "<table><tr><td><img style='border:1px solid #4d4d4d;margin:5px;' src='" + image + "' height='" + height + "' width='160' alt='" + alt + "' title='" + alt + "' /><br><span style='font-weight:bold;font-size:80%;'>" + alt + "</span></td></tr></table>";
			
			}
			markerhtml += "</div>";
			//if (url != "") markerhtml += "<a href=\"" + url + "\">" + url + "</a>";
		    
			// Create the map marker
			var marker = new GMarker(point);
			// Add a click event to each marker which will open the HTML window
			GEvent.addListener(marker, "click", function() {
			  marker.openInfoWindowHtml(markerhtml);
			});
			i++;
			return marker;
		  }
		}
		// Javascript alert for older browsers where Google Maps isn't supported
		else {
		  alert("Sorry, the Google Maps API is not compatible with this browser");
		}
	}
    //]]>