var map;
var xmlIsland;

/////////////////////////////////////////////////////////
// helper function to create a marker and info window
/////////////////////////////////////////////////////////
	function createMarker(point, html, iconClass) {
	// handle different icons

		var icon = new GIcon();
		icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
		icon.iconSize = new GSize(20, 34);
		icon.shadowSize = new GSize(37, 36);
		icon.iconAnchor = new GPoint(6, 20);
		icon.infoWindowAnchor = new GPoint(5, 1);


		switch(String(iconClass)){
			
			case "red":
				icon.image = "/_images/pin_red.png";				
			break;
			
			case "blue":
				icon.image = "/_images/pin_blue.png";
			break;
			
			case "green":
				icon.image = "/_images/pin_greendark.png";
			break;			

			default:
			
			break;
		
		}	

		var marker = new GMarker(point, icon);
		//var marker = new GMarker(point);

		// Show this marker''s index in the info window when it is clicked
		GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml(html);
		});

		return marker;
	}

/////////////////////////////////////////////////////////
// create the map
/////////////////////////////////////////////////////////
	
	function createMap(){

		map = new GMap(document.getElementById("map"));

		// give it a zoom control
		map.addControl(new GLargeMapControl());
		// give it the mapType toggle control
		map.addControl(new GMapTypeControl());

		// scroll map to a default location
		map.centerAndZoom(new GPoint(-121.95854187011719, 39.86231722624386), 9);

		getData();
	}
window.onload = createMap;


/////////////////////////////////////////////////////////
// body on load
/////////////////////////////////////////////////////////

	function getData(){

		var request = GXmlHttp.create();

		request.open('GET', "/_js/district.xml", true);
		request.onreadystatechange = function() {
		  if (request.readyState == 4) {
			xmlIsland = request.responseText;

			loadMap();
		  }
		}
		request.send(null);
	}


/////////////////////////////////////////////////////////
// draws markers on map
/////////////////////////////////////////////////////////

	function loadMap(){

		var xmlDom = GXml.parse(xmlIsland);
		var listings = xmlDom.getElementsByTagName("city");

		for(var i=0;i<listings.length;i++){
		
			var lng = listings[i].attributes[1].value;
			var lat = listings[i].attributes[0].value;
			var iconClass = listings[i].attributes[4].value;
			
			var htmlString = "<div style=\"width: 300px;\">";
			htmlString += listings[i].attributes[3].value;
			htmlString += "</div>";
			htmlString += "";
			htmlString += "";
			htmlString += "";

			var point = new GPoint(lng,lat);
			var marker = createMarker(point,htmlString,iconClass);
			map.addOverlay(marker);

		}

		// add polyline stuff
		var delta = 0.005; // creates offset to avoid polyline over-lap and mixing of colors
		var polyline1 = new GPolyline([ new GPoint(-122.01828002929688+delta, 39.85282948915942-delta), new GPoint(-121.34674072265625+delta, 39.94659500773898-delta), new GPoint(-121.10366821289062+delta, 39.56547053068434-delta), new GPoint(-121.37969970703125+delta, 39.527348072681455-delta), new GPoint(-121.47308349609375+delta, 39.35978526869001-delta), new GPoint(-121.61865234375+delta, 39.3279240176903-delta), new GPoint(-121.9207763671875+delta, 39.34067026099156-delta), new GPoint(-122.01828002929688+delta, 39.85282948915942-delta)], "#ff0000", 3); // red 
		var polyline2 = new GPolyline([ new GPoint(-121.9207763671875-delta, 39.34067026099156-delta), new GPoint(-122.4700927734375-delta, 39.487084981687495-delta), new GPoint(-122.67059326171875-delta, 39.89709437260048-delta), new GPoint(-122.01828002929688-delta, 39.85282948915942-delta), new GPoint(-121.9207763671875-delta, 39.34067026099156-delta)], "#0000FF", 3); // blue
		var polyline3 = new GPolyline([ new GPoint(-122.67059326171875, 39.89709437260048+delta), new GPoint(-122.78182983398438, 40.321419995934384+delta), new GPoint(-121.69281005859375, 40.419769381446194+delta), new GPoint(-121.387939453125, 40.300476079749494+delta), new GPoint(-121.34674072265625, 39.94659500773898+delta), new GPoint(-122.01828002929688, 39.85282948915942+delta), new GPoint(-122.67059326171875, 39.89709437260048+delta)], "#009900", 3); // green
		map.addOverlay(polyline1);
		map.addOverlay(polyline2);
		map.addOverlay(polyline3);	
			
	}


//		map.centerAndZoom(new GPoint(center[0].attributes[0].value,center[0].attributes[1].value), 5);