//<![CDATA[

	// Create a base icon for all of our markers that specifies the shadow, icon
	// dimensions, etc.
	var baseIcon = new GIcon();	
	baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
	baseIcon.infoShadowAnchor = new GPoint(18, 25);

    var markers;
    var infoHtml;
    var map;



function onLoad() {
    var panel = document.getElementById('panel');		
    map = new GMap(document.getElementById("map"));
    map.addControl(new GLargeMapControl());	//add pan/zoom control
    map.addControl(new GMapTypeControl());	//add Map/Satellite buttons
    //map.setMapType( _SATELLITE_TYPE );	//set to satellite map by default

    map.centerAndZoom(new GPoint(-80.843093, 35.227142), 7);

      var request = GXmlHttp.create();
      request.open("GET", "data.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
          var markerElements = xmlDoc.documentElement.getElementsByTagName("marker");

	  markers = new Array( markerElements.length );
	  infoHtml = new Array( markerElements.length );
		var one2two = "<strong>1-2 dart boards</strong><ul>"
		var three2four = "<strong>3-4 dart boards</strong><ul>"
		var five2seven = "<strong>5-7 dart boards</strong><ul>"
		var eightplus = "<strong>8+ dart boards</strong><ul>"		
		var unknownNum = "<strong>unknown # of dart boards</strong><ul>"
		
        for (var i = 0; i < markerElements.length; i++) {
		var Region = markerElements[i].getAttribute("region");
		var Lat = parseFloat(markerElements[i].getAttribute("lat"));
		var Lng = parseFloat(markerElements[i].getAttribute("lng"));
		var Descr = markerElements[i].getAttribute("descr");
		var Url = markerElements[i].getAttribute("url");
		var Addr = markerElements[i].getAttribute("addr");
		var Phone = markerElements[i].getAttribute("phone");
		var Boards = markerElements[i].getAttribute("boards");
		var Img = markerElements[i].getAttribute("img");
		
		
		if (Region == 1)
		{
			if (Boards != null)
			{
			if (Boards == 0)
			{unknownNum += "<li><a href='javascript:opener(" + i + ")'>" + Descr + "</a> <a href='javascript:zoom(" + Lng + "," + Lat + ");'></a></li> ";}
			else if (Boards  < 3)
			{one2two += "<li><a href='javascript:opener(" + i + ")'>" + Descr + "</a> <a href='javascript:zoom(" + Lng + "," + Lat + ");'></a></li> ";}
				else if (Boards < 5)
				{three2four += "<li><a href='javascript:opener(" + i + ")'>" + Descr + "</a> <a href='javascript:zoom(" + Lng + "," + Lat + ");'></a></li> ";}
					else if (Boards  < 8)
					{five2seven += "<li><a href='javascript:opener(" + i + ")'>" + Descr + "</a> <a href='javascript:zoom(" + Lng + "," + Lat + ");'></a></li> ";}
						else if (Boards  > 7)
						{eightplus += "<li><a href='javascript:opener(" + i + ")'>" + Descr + "</a> <a href='javascript:zoom(" + Lng + "," + Lat + ");'></a></li> ";}
			}
			else
			{unknownNum += "<li><a href='javascript:opener(" + i + ")'>" + Descr + "</a> <a href='javascript:zoom(" + Lng + "," + Lat + ");'></a></li> ";}		
		}

		
		
		
		
		if (Boards == 0)
		{
			// Show the following HTML in the info window when it is clicked
			infoHtml[i] = "<strong>" + Descr + "</strong><br>" + Addr + "<br>"+ Phone + "<br><br>Unknown # of dart boards";
		}
		else
		{
			// Show the following HTML in the info window when it is clicked
			infoHtml[i] = "<strong>" + Descr + "</strong><br>" + Addr + "<br>"+ Phone + "<br><br>" + Boards + " dart boards";
		}
		
		//add url if it exists
		if (markerElements[i].getAttribute("url") != null)
		{
			infoHtml[i] += "<br><br><a href='" + Url + "' target=_new>website</a>";
		}
	
		//add photo if it exists
		//if (markerElements[i].getAttribute("img") != null)
		//{
		//	infoHtml[i] += "<br><br><img src='images/" + Img + "' width='195' height='146'>";
		//}
		
		//var icon = new GIcon(baseIcon);
  		//icon.image = "/images/googlemaps/marker_blue.png";

		markers[i] = new GMarker( new GPoint( parseFloat(Lng), parseFloat(Lat) ), baseIcon);
		GEvent.addListener( markers[i], 'click', makeOpenerCaller(i) );
		map.addOverlay( markers[i] );
		
		var html = "<a href='javascript:opener(" + i + ")'>" + Descr + "</a> <a href='javascript:zoom(" + Lng + "," + Lat + ");'></a> | ";
		//panel.innerHTML += html;
	   }
		  		one2two += "</ul>"
				three2four += "</ul>"
				five2seven += "</ul>"
				eightplus += "</ul>"				
				unknownNum += "</ul></p>"
		  	panel.innerHTML += eightplus + five2seven + three2four + one2two + unknownNum;
        }
      }
      request.send(null);

}

	// Creates a marker whose info window displays the given number
	function createMarker(point, html) {
		var marker = new GMarker(point, baseIcon);

		GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml(html);
		});

		return marker;
	}


// Open the info box for the specified marker.
function opener(i){
	markers[i].openInfoWindowHtml( infoHtml[i] );
}


// This returns a function closure that calls opener() with the specified arg.
// These shenanigans are necessary because the API left out client-data.
function makeOpenerCaller( i )
{
	return function() { opener( i ); };
}

function zoom(Lng, Lat) {
	//if already zoomed in, then pan to it
	if (map.getZoomLevel() == 4) {
		map.recenterOrPanToLatLng(new GPoint(Lng, Lat));
	} else if (map.getZoomLevel() >= 4) {
		map.centerAndZoom(new GPoint(Lng, Lat), 4);
	}
}

    
    //]]>