// JavaScript Document
//<![CDATA[
	var map = null;
	Event.observe(window, 'load', load);
	Event.observe(window, 'unload', GUnload);
	var newIcon;
	
	var queryString = window.top.location.search.substring(1);
	var searchParam = queryString.substring(queryString.indexOf("=") + 1, queryString.length);
	
	
	
    function load() {
		if (GBrowserIsCompatible()) {
			
			function switchStyle(style1, style2, style3) {
				
				$(style1).style.display = "block";
				$(style2).style.display = "none";	
				$(style3).style.display = "none";	
			}
			function switchColor(view1, view2, view3) {
				
				$(view1).style.backgroundColor = "#A7CC95";	
				$(view2).style.backgroundColor = "#e6e6e6";
				$(view3).style.backgroundColor = "#e6e6e6";
			}
		  if (searchParam=="race") {
			  	switchStyle("legend-race", "legend-cause", "legend-gender");
			  	switchColor("viewRace", "viewGender", "viewCause");
			  	
		   } else 
		    if (searchParam=="gender") {
				switchStyle("legend-gender", "legend-cause", "legend-race");
			  	switchColor("viewGender", "viewRace", "viewCause");
			  	
		   } else {
			    switchStyle("legend-cause", "legend-race", "legend-gender");
			  	switchColor("viewCause", "viewGender", "viewRace");
			  	
		   }
			
		   var i = 0;
		  // Create the map
		  // Make sure this element has the same ID as your div
		  var map = new GMap2(document.getElementById("homicide2009map"));
		  // Add controls for moving and zooming the map.  Use GSmallMapControl for small maps
		  map.addControl(new GLargeMapControl());
		  //map.addControl(new GSmallMapControl());
		  // 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(40.4401357, -80.0065613), 12);
		  //map.setMapType(G_SATELLITE_MAP); 
		  
		  
  
		  // 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/200911/homicides2009.xml", true);
		 //request.open("GET", "http://cofaxserver/homicides2009/homicides2009.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");
			  //alert(markers.length);
			  //numHomicides.innerHTML = "30 homicides total";
			  
			  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>" + label + "</strong><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 += "<img style='border:1px solid #4d4d4d;margin:5px;' src='" + image + "' width='160' height='" + height + "' alt='" + alt + "' title='" + alt + "' /><br><span style='font-weight:bold;font-size:80%;line-height:103%; display:block;'>" + alt + "</span>";
			
			}
			markerhtml += "</div>";
			
		    if (searchParam == "gender") {
				if ((gender == "Male") || (gender=="Male (all)")){
					newIcon = MapIconMaker.createMarkerIcon({width: 30, height: 30, primaryColor: "#6779C2", cornerColor: "#6779C2"});
				} else
				if ((gender == "Female") || (gender=="Female (both)") || (gender=="Female (all)")){
					newIcon = MapIconMaker.createMarkerIcon({width: 30, height: 30, primaryColor: "#FFF200", cornerColor: "#FFF200"});
				}
				else {
					newIcon = MapIconMaker.createMarkerIcon({width: 30, height: 30, primaryColor: "#FFFFFF", cornerColor: "#FFFFFF"});
				}
				
				
			} else
			
			if (searchParam == "race") { //5BC236 = green/Asian B96A9A = purple/Hispanic
				if ((race == "White") || (race == "White (all)")){ //brick
					newIcon = MapIconMaker.createMarkerIcon({width: 30, height: 30, primaryColor: "#D34328", cornerColor: "#D34328"});
					} else //blue 
				if ((race == "Black") || (race=="Black (both)")){
					newIcon = MapIconMaker.createMarkerIcon({width: 30, height: 30, primaryColor: "#3964C3", cornerColor: "#3964C3"});
					} else 
					
					if (race == "Asian") {
						newIcon = MapIconMaker.createMarkerIcon({width: 30, height: 30, primaryColor: "#5BC236", cornerColor: "#5BC236"});
					} else
					if (race == "Hispanic") {
						newIcon = MapIconMaker.createMarkerIcon({width: 30, height: 30, primaryColor: "#B96A9A", cornerColor: "#B96A9A"});
					} 
					else //orangy-yellow
					{
					newIcon = MapIconMaker.createMarkerIcon({width: 30, height: 30, primaryColor: "#F4A817", cornerColor: "#F4A817"});	
					}
				
			} else { //AE00A8 002C91 B8AB06 AE8973
				if ((cause == "Shooting") || (cause == "Shooting (by police)")){ //green
					//newIcon = MapIconMaker.createMarkerIcon({width: 25, height: 25, primaryColor: "#9E0B0E", cornerColor: "#9E0B0E"});
					newIcon = MapIconMaker.createMarkerIcon({width: 30, height: 30, primaryColor: "#6BB430", cornerColor: "#6BB430"});
					}
				if (cause == "Stabbing") { //blue  0795C0
					//newIcon = MapIconMaker.createMarkerIcon({width: 25, height: 25, primaryColor: "#2E3192", cornerColor: "#2E3192"});
					newIcon = MapIconMaker.createMarkerIcon({width: 30, height: 30, primaryColor: "#1E90FF", cornerColor: "#1E90FF"});
					}
				if (cause == "Strangulation") { //red
					//newIcon = MapIconMaker.createMarkerIcon({width: 25, height: 25, primaryColor: "#303030", cornerColor: "#303030"});
					newIcon = MapIconMaker.createMarkerIcon({width: 30, height: 30, primaryColor: "#FF001D", cornerColor: "#FF001D"});
					}
				if ((cause == "Blunt force trauma") || (cause == "Head trauma")) { //yellow
					newIcon = MapIconMaker.createMarkerIcon({width: 30, height: 30, primaryColor: "#FBFF65", cornerColor: "#FBFF65"});
					}
					//#FF8A00 orange
				if (cause == "Undetermined") {
					newIcon = MapIconMaker.createMarkerIcon({width: 30, height: 30, primaryColor: "#FF8A00", cornerColor: "#FF8A00"});
				}
			}// end else loop for mapiconmaker
					
					
			// Create the map marker
			
			var marker = new GMarker(point, {icon: newIcon});
			// Add a click event to each marker which will open the HTML window
			GEvent.addListener(marker, "click", function() {
			   										 
			  marker.openInfoWindowHtml(markerhtml);
			});
			
			GEvent.addListener(marker, 'infowindowclose', function(){
			   var point = marker.getLatLng();           
			   map.panTo(point);
			 });

			
			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");
		}
	}

    //]]>