/*
	Author: Kurt Kellens
	Date: 	05/02/2009
	Description: Google Map Implementation
	Goolge API: V2
	How to: call googlemap function on pageonload or document.ready event (JQuery)
*/
	function googleMap(xmlPath,mapItem){
		/*extend the String object*/	
		String.prototype.ltrim = function () { return this.replace(/^ */,""); } 
		String.prototype.rtrim = function () { return this.replace(/ *$/,""); } 
		String.prototype.trim = function () { return this.ltrim().rtrim(); }
		
		function UndefinedToString(field){
			return field==undefined?"":field
		}

		if (GBrowserIsCompatible()) {
	
			var initCountryCode = 'gb';
			var initStateAreaCode = '';
			var gmarkers = [];
			var i=0;
			var map = new GMap2(document.getElementById(mapItem));
			map.addControl(new GLargeMapControl());
			map.addControl(new GMapTypeControl());
			map.setCenter(new GLatLng(51, -0.1), 5);

			//Get markers (marker tags)
			var getMarkers = function(){
				gmarkers = [];
				i = 0;
				$.get(xmlPath, function(data) {
					$(data).find('country[@code='+ initCountryCode +']').each(function(){
						$(this).find('marker').each(function(){
							var $marker = $(this);
							/*Google -- add markers*/
							var lat = parseFloat($marker.attr("lat"));
							var lng = parseFloat($marker.attr("lng"));
							var point = new GLatLng(lat,lng);
							var name = UndefinedToString($marker.attr("name"));
							var phone = UndefinedToString($marker.attr("phone"));
							var url = UndefinedToString($marker.attr("url"));
							var address = UndefinedToString($marker.attr("address"));
							var city = UndefinedToString($marker.attr("city-location"));
							var zip = UndefinedToString($marker.attr("zip"));
							var loc_state = UndefinedToString($marker.attr("state"));
							// create the marker
							var marker = createMarker(point,name,phone,url,name,address,city,zip,loc_state);
							map.addOverlay(marker);
							i++;
						})
					});
				});
			};
			
			//Fill Country dropdown (country tags)
			$.get(xmlPath, function(data) {
				var attribSelected;
				var lat;
				var lng;
				var zl;
				var html = '<option>Please select a country</option>';
				$(data).find('country[lng!=""][lat!=""][code!=""]').each(function(){
					var $country = $(this);
					if($country.attr('code') == initCountryCode){
						attribSelected = 'selected="selected"';
						lat = parseFloat($country.attr('lat'));
						lng = parseFloat($country.attr('lng'));
						zl = parseFloat($country.attr('zoomlevel'));
						setMapCenter(new GLatLng(lat,lng),zl);
					}
					else{
						attribSelected = '';
					}
					html += '<option value="' + $country.attr('code') + '" lat="' + $country.attr('lat') +'" lng="' + $country.attr('lng') + '" zl="' + $country.attr('zoomlevel') + '" ' + attribSelected + '>' + $country.attr('name') + '</option>';
				})
				$('#ddlCountry').html(html);
				initDdlStateCity();
			});
			
			//Initialize Dropdown StateCity
			var  initDdlStateCity = function(){
				
				$.get(xmlPath, function(data) {
					var $crs = $(data).find('country[code='+initCountryCode+'] > cityregionstate');
					if($crs.size() > 0){
						//add dropdonwlist city-state-region
						var html='<option value="">Please select a state/region</option>';
						$crs.each(function(){
							html += '<option value="' + $(this).attr('code') + '">' + $(this).attr('code') + '</option>';
						})
						$('#ddlStateCity').html(html);
						$('#phRegion').show();
						$('#phLocation').hide();
					}
					else{
						$('#phRegion').hide();
					}
				});
			};
		
			//trigger function to initialize ddlLocation
			getMarkers();
        
		//Dropdown Country onChange event
		$('#ddlCountry').change(function(){
			map.clearOverlays();
			$("#ddlCountry option:selected").each(function(){
				code = $(this).attr('value');
				if(code!=''){
					initCountryCode = code;
					initStateAreaCode='';
					var lat = parseFloat($(this).attr('lat'));
					var lng = parseFloat($(this).attr('lng'));
					var zl = parseFloat($(this).attr('zl'));
					var mapCenterPoint = new GLatLng(lat, lng);
					setMapCenter(mapCenterPoint, zl);
				}
			});
			initDdlStateCity();
			getMarkers();
		});
		
		//Dropdown StateCity onChange event
		$('#ddlStateCity').change(function(){
			$("#ddlStateCity option:selected").each(function(){
				initStateAreaCode = $(this).attr('value');
			});
			initDdlLocations();
		});
		
		var initDdlLocations = function(){
			if(initStateAreaCode !=''){
				$.get(xmlPath, function(data) {
					strHTMLlocations = '<option>Select a location</option>';
					i=0;
					$(data).find('cityregionstate[@code='+ initStateAreaCode +']').each(function(){
						$(this).find('marker').each(function(){
							var $marker = $(this);
							
									
									/*Google -- add markers*/
									var lat = parseFloat($marker.attr("lat"));
									var lng = parseFloat($marker.attr("lng"));
									var point = new GLatLng(lat,lng);
									var name = UndefinedToString($marker.attr("name"));
									var phone = UndefinedToString($marker.attr("phone"));
									var url = UndefinedToString($marker.attr("url"));
									var address = UndefinedToString($marker.attr("address"));
									var city = UndefinedToString($marker.attr("city-location"));
									var zip = UndefinedToString($marker.attr("zip"));
									var loc_state = UndefinedToString($marker.attr("state"));
									
									var code = (lat +""+ lng + "" + name).replace(" ","");
									strHTMLlocations += '<option value="' + code + '">' + $marker.attr('name') + '</option>';
									// create the marker
									
									var marker = createMarker(point,name,phone,url,name,address,city,zip,loc_state);
									//map.addOverlay(marker);
									
									i++;
								})
							});
							$("#ddlLocation").html(strHTMLlocations);
							$("#phLocation").show()
						});
					}
					else{
						$("#phLocation").hide()
					}
				}
		
		$('#ddlLocation').change(function(){
			var code = '';
			$("#ddlLocation option:selected").each(function(){
				code = $(this).attr('value');
			});
			if(code !=''){
				//marker_click(code);
				$.get(xmlPath, function(data) {
					$(data).find('country[@code='+ initCountryCode +']').each(function(){
						var i=0;
						$(this).find('marker').each(function(){
							var $marker = $(this);
							if(($marker.attr('lat') + $marker.attr('lng') + $marker.attr('name')).replace(" ","") == code){
								marker_click(i);
							}
							i++;
						});
					});
				});
			}	
		});
		
		
		
		
		
		
		function setMapCenter(point,zoomlevel){
			map.setCenter(point, zoomlevel);
		}
      // A function to create the marker and set up the event window
      function createMarker(point,name,phone,url,name,address,city,zip,loc_state) {
	 	/*var myIcon = new GIcon();
		myIcon.image = markerImagePath;
		myIcon.iconSize = new GSize(20,20);
		myIcon.iconAnchor = new GPoint(5, 34);
		myIcon.infoWindowAnchor = new GPoint(5, 2);
*/
        var marker = new GMarker(point);
        var i = gmarkers.length;
		
		
		
        GEvent.addListener(marker, "click", function() { 
			
			map.setCenter(this.getLatLng(), 14);
			marker.openInfoWindow("<strong>" + name + "</strong><br/>" + zip + " " + city);
			var html = '';
			html += (name).trim()!=''?'<span class="title">Name: </span><span class="bold">' + name + '</span><br/>':'';
			html += (address).trim()!=''?'<span class="title">Address: </span>' + address + '<br/>':'';
			html += (zip).trim()!=''?'<span class="title">Zip: </span>' + zip + '<br/>':'';
			html += (city).trim()!=''?'<span class="title">City: </span>' + city + '<br/>':'';
			
			html += (loc_state).trim()!=''?'<span class="title">State: </span>' + loc_state + '<br/>':'';
			html += (phone).trim()!=''?'<span class="title">Phone: </span>' + phone + '<br/>':'';
			$('#markerInfo').html(html);
		});
		gmarkers.push(marker);
		return marker;
      }
		
		/*GEvent.addListener(map, "click",function(){
			document.getElementById("center").value = map.getCenter();
			document.getElementById("zoom").value = map.getZoom();
		});*/
		

      // This function picks up the click and opens the corresponding info window
      function marker_click(i) {
        map.setCenter(gmarkers[i].getPoint(), 14);
        GEvent.trigger(gmarkers[i], "click");
      }
	  
	  
		
    }
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
	}