// This Javascript code Has been Modified By MPEternelll@HGI.
// It is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/   
// http://econym.org.uk/gmap/



// this variable will collect the html which will eventualkly be placed in the side_bar
//var side_bar_html = "<option>Select a HGI Location</option>";
var side_bar_html = "<select  onchange=\"eval(this.value)\"><option>-- Select a Location --</option>";

// arrays to hold copies of the markers used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];

// Zoom Level Reset When User Clicks Marker or Select Menu Option.
var zoomLevel = 12;	

// This function picks up the click and opens the corresponding info window or Drop Down Menu Option
function myclick(i) {
	GEvent.trigger(gmarkers[i], "click");
}

//Loads Google Map API
function load() {
	// create the map
	var map = new GMap2(document.getElementById("map"));
	map.setCenter(new GLatLng(40.7439, -100.9098),4); //SLC
	map.setUIToDefault();
	map.addControl(new GLargeMapControl());
	map.addControl(new GOverviewMapControl());

      	// Read the data from example.xml
      	GDownloadUrl("xml/GoogleMapData1.xml", function(doc) {
        	var xmlDoc = GXml.parse(doc);
        	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 name = markers[i].getAttribute("name");
			var address = markers[i].getAttribute("address");
			var address1 = markers[i].getAttribute("address1");
			var phone = markers[i].getAttribute("phone");
			var phone1 = markers[i].getAttribute("phone1");
			var fax = markers[i].getAttribute("fax");
			var type = markers[i].getAttribute("type");
			var email = markers[i].getAttribute("email");
	
			// Build INFO WINDOW
			var html = "<div id='infoWindow'><h2>" + name + "</h2><br/>" + address + "<br/>" + address1 + "<br/><br/>Toll Free Phone:&nbsp;&nbsp;" + phone + "<br/>Local Phone:&nbsp;&nbsp;" + phone1 + "<br/>Fax:&nbsp;&nbsp;" + fax + "<br/><br/>Email:&nbsp;&nbsp;" + "<a href='mailto:" + email +"?subject=Hartung-glass.com%20Questions%20or%20Comments'>" + email + "</a></div>";
			// create the marker
			var newIcon = MapIconMaker.createMarkerIcon({width: 32, height: 32, primaryColor: "#00ff00"});
			var marker = createMarker(point,name,address,label,html, type, email );
			map.addOverlay(marker);
			
        	}

		// put the assembled side_bar_html contents into the side_bar select box
        	document.getElementById("side_bar").innerHTML = side_bar_html; + "</select>";
		
		// put the assembled side_bar_html contents into the side_bar div
		//document.getElementById("side_bar").innerHTML = side_bar_html;

	});

	// A function to create the marker and set up the event window
	function createMarker(point,name,address,label,html, type, email) {
		var newIcon = MapIconMaker.createMarkerIcon({width: 32, height: 32, primaryColor: "#00ff00"});
		var marker = new GMarker(point, {icon: newIcon, title:name});
	
		GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml(html);
			map.setCenter(point,zoomLevel);
		});
	
		// save the info we need to use later for the side_bar
		gmarkers.push(marker);
		
		// add a line to  HREF Link in the DIV side_bar html
		//side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
		
		// add content to HTML Form drop box
		side_bar_html += '<option value="myclick(' + (gmarkers.length-1) + ')">' +name +'</option>';
	
		//alert(side_bar_html);
		return marker;
	}
	
}