// 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 = [];
var gmarkers1 = [];

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

function myclick1(i) {
	GEvent.trigger(gmarkers1[i], "click");
}


var locations = {};

function load() {
	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());

	GDownloadUrl("xml/GoogleMapData.xml", function(data) {
		var xml = GXml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		for (var i = 0; i < markers.length; i++) {
			var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("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 email = markers[i].getAttribute("email");
			var type = markers[i].getAttribute("type");
			
			var store = { latlng: latlng, name: name, address: address, phone:phone, phone1:phone1, fax:fax, address1:address1, email:email, type:type};
			var latlngHash = (latlng.lat().toFixed(6) + "" + latlng.lng().toFixed(6));
			latlngHash = latlngHash.replace(".","").replace(".", "").replace("-","");
			if (locations[latlngHash] == null) {
				locations[latlngHash] = []
			}
			locations[latlngHash].push(store);
		}
		
		for (var latlngHash in locations) {
			var stores = locations[latlngHash];
			if (stores.length > 1) {
				map.addOverlay(createClusteredMarker(stores));
			} else {
				map.addOverlay(createMarker(stores));
			}
		}
		
		// put the assembled side_bar_html contents into the side_bar select box
		document.getElementById("side_bar").innerHTML = side_bar_html; + "</select>";

	});

	function createMarker(stores) {
		var store = stores[0];
		var newIcon = MapIconMaker.createMarkerIcon({width: 32, height: 32, primaryColor: "#00ff00"});
		var marker = new GMarker(store.latlng, {icon: newIcon});
		var html = "<div id='infoWindow'><h2>" + store.name + "</h2>" + store.address + ", " + store.address1 + "<br/>Toll Free Phone:&nbsp;&nbsp;" + store.phone + "<br/>Local Phone:&nbsp;&nbsp;" + store.phone1 + "<br/>Fax:&nbsp;&nbsp;" + store.fax + "<br/>Email:&nbsp;&nbsp;" + "<a href='mailto:" + store.email +"?subject=Hartung-glass.com%20Questions%20or%20Comments'>" + store.email + "</a></div>";
		
		GEvent.addListener(marker, 'click', function() {
			marker.openInfoWindowHtml(html);
			map.setCenter(store.latlng, 12);	
		});
		
		// save the info we need to use later for the side_bar
		gmarkers.push(marker);
		
		// add content to HTML Form drop box
		side_bar_html += '<option value="myclick(' + (gmarkers.length-1) + ')">' +store.name +'</option>';
		
		return marker;
	}
	
	function createClusteredMarker(stores) {
		var newIcon = MapIconMaker.createMarkerIcon({width: 32, height: 32, primaryColor: "#000000"});
		var marker = new GMarker(stores[0].latlng, {icon: newIcon});
		var html = "";
		
		for (var i = 0; i < stores.length; i++) {
			html += "<div id='infoWindow'><h2>" + stores[i].name + "</h2>" + stores[i].address + ", " + stores[i].address1 + "<br/>Toll Free Phone:&nbsp;&nbsp;" + stores[i].phone + "<br/>Local Phone:&nbsp;&nbsp;" + stores[i].phone1 + "<br/>Fax:&nbsp;&nbsp;" + stores[i].fax + "<br/>Email:&nbsp;&nbsp;" + "<a href='mailto:" + stores[i].email +"?subject=Hartung-glass.com%20Questions%20or%20Comments'>" + stores[i].email + "</a><br/></div>";
	   		
			// save the info we need to use later for the side_bar
			gmarkers1.push(marker);
			
			// add content to HTML Form drop box
			side_bar_html += '<option value="myclick1(' + (gmarkers1.length-1) + ')">' +  stores[i].name +'</option>';
	   	}
		
		GEvent.addListener(marker, 'click', function() {
			marker.openInfoWindowHtml(html);
			map.setCenter(stores[0].latlng, 12);
		});
		
		return marker;
	}
}







/*// 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/GoogleMapData.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>";

	});

	// 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 content to HTML Form drop box
		side_bar_html += '<option value="myclick(' + (gmarkers.length-1) + ')">' +name +'</option>';
	
		//alert(side_bar_html);
		return marker;
	}
	
	
	
}*/