// Definable Parameters
// Google Map functions
var map;

// this variable will collect the html which will eventualkly be placed in the sidebar
var sidebar_html = "";
// arrays to hold copies of the markers and html used by the sidebar
// because the function closure trick doesnt work there
var gmarkers = [];
var htmls = [];
var i = 0;
// arrays to hold variants of the info window html with get direction to open
var to_htmls = [];

// === Create an associative array of GIcons() ===
var gicons = [];
var imagePath= "/images/";
		
		gicons["blueFlag"] = new GIcon(G_DEFAULT_ICON, imagePath + "blueFlag.png");
		gicons["blueFlag"].iconSize = new GSize(31, 35);
		gicons["blueFlag"].shadow = imagePath + "flagShadow.png";
		gicons["blueFlag"].shadowSize = new GSize(31, 35);
		gicons["blueFlag"].iconAnchor = new GPoint(4, 34);
		gicons["blueFlag"].infoWindowAnchor = new GPoint(4, 7);
		gicons["blueFlag"].printImage = imagePath + "blueFlag.gif";
		gicons["blueFlag"].mozPrintImage = imagePath + "blueFlag_mozprint.png";
		gicons["blueFlag"].printShadow = imagePath + "flagShadow.gif";
		gicons["blueFlag"].transparent = imagePath + "blueFlag_transparent.png";

// A function to create the marker and set up the event window
function createMarker(point,label,html,icon,street,city,desc,precinct) {
	var marker = new GMarker(point, gicons[icon]);
	// The info window version with the "to here" form open
	to_htmls[i] = html + '<div id="story"><strong>Directions:</strong>' +   
	   '<br>Enter Your Address:<br><span class="text10px"><em>Example:</em> 1234 Main St., Castle Rock, CO 80104</span><br>' +
	   '<form action="http://maps.google.com/maps" method="get" target="_blank">' +
	   '<input type="text" SIZE=30 MAXLENGTH=60 name="saddr" id="saddr" value="" />' +
	   '<INPUT value="GO" TYPE="SUBMIT">' +
	   '<input type="hidden" name="daddr" value="' + street + ' ' + city + ',' + 'CO' + 
			  // "(" + label + ")" + 
	   '"/></div>';
	
	// The inactive version of the direction info
	html += '<div id="story"><p><a href="javascript:tohere('+i+')">Get Directions &raquo;</a></p></div>';
	
	GEvent.addListener(marker, "click", function() {
	  marker.openInfoWindowHtml(html);
	});
	// save the info we need to use later for the sidebar
	gmarkers[i] = marker;
	htmls[i] = html;
	// add a line to the sidebar html
	//sidebar_html += '<a href="javascript:myclick(' + i + ')">' + label + '</a><br>';
	if (i==0) {
		sidebar_html += '<table width="740" cellpadding="3" cellspacing="0" class="tableOne"><tr><th scope="col" colspan="2">Location</th><th scope="col" colspan="2">Address</th></tr>';
	}	

	var styleClass = ' class="lightGrey"';
	
	if (i % 2) {
		styleClass = "";
	}

	sidebar_html += '<tr' + styleClass + '>' +
		'<td align="center"><img width="20" height="22" src="/images/' + icon + '.gif"></td>' +
		'<td class="text11px"><strong><a href="#top" onclick="javascript:myclick(' + i + ')">' + label + '</a></strong></td>' +
		'<td class="text11px">' + street + '</td>' +
		'<td class="text11px">' + city + '</td>' +
		'</tr>';
	i++;
	return marker;
}	

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

// functions that open the directions forms
function tohere(i) {
	gmarkers[i].openInfoWindowHtml(to_htmls[i]);
}

function zoomTo(lat, lon, zoomLevel) {
	if (GBrowserIsCompatible()) {
		map.setCenter(new GLatLng(lat, lon), zoomLevel);
	}
}

function onMapLoad(){
	//<![CDATA[

    if (GBrowserIsCompatible()) {      
      // create the map
      map = new GMap2(document.getElementById("map"));
      map.addControl(new GSmallMapControl());
      map.setCenter(new GLatLng(39.457098913067726,-104.88510131835938), 10);

      // Read the data from example.xml
      var request = GXmlHttp.create();
      request.open("GET", "/clerk/elections/coordinates_MBDL.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 icon = markers[i].getAttribute("icon");
			var street = markers[i].getAttribute("street");
			var city = markers[i].getAttribute("city");
			var desc = markers[i].getAttribute("desc");
			var precinct = markers[i].getAttribute("precinct");

	    	// TODO: Update HTML formatting below
            var html = '<div id="story"><img src="/images/' + icon + '.gif" align="absbottom"><h1>' + label + '</h1><p>' + street + '<br>' +  city + ', ' + 'CO' + ' ' + '<br><em>' + desc + '</em></p><h3>Drop Off Times:</h3><p><strong>' + precinct + '</strong></p><p>Ballot drop off sites will be open from October 13 through November 3, 2008 during regular office hours and from 7:00 a.m. until 7:00 p.m. on November 4, 2008.</p></div>';

	    	// create the marker
            var marker = createMarker(point, label, html, icon, street, city, desc, precinct);
            map.addOverlay(marker);
          }
          // put the assembled sidebar_html contents into the sidebar div
          document.getElementById("sidebar").innerHTML = sidebar_html;
        }
      }
      request.send(null);
    }
    //]]>		
}