// Create markers to display retailers store locations by using Google Map API and ClusterMarker API  

var map;
var xmlDoc;
var marker;
var cluster;

//var map_canvas = document.getElementById("map_canvas");

function initialize() {
  if (GBrowserIsCompatible()) {
	map = new GMap2(document.getElementById("map_canvas"));
	//map.setCenter(new GLatLng(37.09024, -95.71289), 4);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.enableDoubleClickZoom();
	// bind a search control to the map, suppress result list
	map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,20)));
	
	showLoader();
	
	GDownloadUrl("/data/all_store.xml", function(data,responseCode) {
		
	if(responseCode == 200) {
		
		var xml = GXml.parse(data);
		var xmlMarkers = xml.documentElement.getElementsByTagName("marker");
		
		var markersArray = [];
		var bestBuyArray = [];
		var bjsArray = [];
		var londonArray = [];
		var appleArray = [];
		var staplesArray = [];
	 
		for (var i = 0; i < xmlMarkers.length; i++) {
		  
		  var theMarkerChild = xmlMarkers[i].childNodes;
		  
		  for( var k = 0; k < theMarkerChild.length; k++ ){
			if( theMarkerChild[k].nodeName == "storetype"){
				var type = theMarkerChild[k].firstChild.nodeValue;
			}
			if( theMarkerChild[k].nodeName == "storename"){
				var name = theMarkerChild[k].firstChild.nodeValue;
			}
			if( theMarkerChild[k].nodeName == "address"){
				var address = theMarkerChild[k].firstChild.nodeValue;
			}
			if( theMarkerChild[k].nodeName == "city"){
				var city = theMarkerChild[k].firstChild.nodeValue;
			}
		  };
		 
		  var latlng = new GLatLng(parseFloat(xmlMarkers[i].getAttribute("lat")),
								  parseFloat(xmlMarkers[i].getAttribute("lng")));
		  
		  marker = newMarker(latlng, type, name, address, city);
		  	if(type == "Target"){
		  		markersArray.push(marker);
			}else if(type == "Best Buy") {
				bestBuyArray.push(marker);
			}else if(type == "BJ's" ){
				bjsArray.push(marker)	
			}else if(type == "London Drugs" ){
				londonArray.push(marker)	
			}else if(type == "Apple Store" ){
				appleArray.push(marker)	
			}else if(type == "Staples Store" ){
				staplesArray.push(marker)	
			}
		}
		
		var targetClusterIcon=new GIcon();
		targetClusterIcon.image='/images/icons/target_marker_cluster.png';
		targetClusterIcon.iconSize=new GSize(32, 32);
		targetClusterIcon.iconAnchor=new GPoint(9, 31);
		targetClusterIcon.infoWindowAnchor=new GPoint(9, 31);
		targetClusterIcon.shadow='http://www.google.com/intl/en_us/mapfiles/arrowshadow.png';
		targetClusterIcon.shadowSize=new GSize(0, 0);
		
		targetcluster = new ClusterMarker(map, { markers:markersArray, clusterMarkerIcon:targetClusterIcon });
		targetcluster.fitMapToMarkers();
		
		var bbyClusterIcon=new GIcon();
		bbyClusterIcon.image='/images/icons/bestbuy_marker_cluster.png';
		bbyClusterIcon.iconSize=new GSize(36, 26);
		bbyClusterIcon.iconAnchor=new GPoint(9, 31);
		bbyClusterIcon.infoWindowAnchor=new GPoint(9, 31);
		bbyClusterIcon.shadow='http://www.google.com/intl/en_us/mapfiles/arrowshadow.png';
		bbyClusterIcon.shadowSize=new GSize(0, 0);
		
		bestbuycluster = new ClusterMarker(map, { markers:bestBuyArray, clusterMarkerIcon:bbyClusterIcon });
		bestbuycluster.fitMapToMarkers();
		
		var bjsClusterIcon=new GIcon();
		bjsClusterIcon.image='/images/icons/bjs_marker_cluster.png';
		bjsClusterIcon.iconSize=new GSize(36, 26);
		bjsClusterIcon.iconAnchor=new GPoint(9, 31);
		bjsClusterIcon.infoWindowAnchor=new GPoint(9, 31);
		bjsClusterIcon.shadow='http://www.google.com/intl/en_us/mapfiles/arrowshadow.png';
		bjsClusterIcon.shadowSize=new GSize(0, 0);
		
		bjscluster = new ClusterMarker(map, { markers:bjsArray, clusterMarkerIcon:bjsClusterIcon });
		bjscluster.fitMapToMarkers();
		
		var londonClusterIcon=new GIcon();
		londonClusterIcon.image='/images/icons/londondrug_marker_cluster.png';
		londonClusterIcon.iconSize=new GSize(50, 21);
		londonClusterIcon.iconAnchor=new GPoint(9, 31);
		londonClusterIcon.infoWindowAnchor=new GPoint(9, 31);
		londonClusterIcon.shadow='http://www.google.com/intl/en_us/mapfiles/arrowshadow.png';
		londonClusterIcon.shadowSize=new GSize(0, 0);
		
		londoncluster = new ClusterMarker(map, { markers:londonArray, clusterMarkerIcon:londonClusterIcon });
		londoncluster.fitMapToMarkers();
		
		var appleClusterIcon=new GIcon();
		appleClusterIcon.image='/images/icons/apple_marker_cluster.png';
		appleClusterIcon.iconSize=new GSize(33, 33);
		appleClusterIcon.iconAnchor=new GPoint(9, 31);
		appleClusterIcon.infoWindowAnchor=new GPoint(9, 31);
		appleClusterIcon.shadow='http://www.google.com/intl/en_us/mapfiles/arrowshadow.png';
		appleClusterIcon.shadowSize=new GSize(0, 0);
		
		applecluster = new ClusterMarker(map, { markers:appleArray, clusterMarkerIcon:appleClusterIcon });
		applecluster.fitMapToMarkers();
		
		var staplesClusterIcon=new GIcon();
		staplesClusterIcon.image='/images/icons/staples_marker_cluster.png';
		staplesClusterIcon.iconSize=new GSize(50, 21);
		staplesClusterIcon.iconAnchor=new GPoint(9, 31);
		staplesClusterIcon.infoWindowAnchor=new GPoint(9, 31);
		staplesClusterIcon.shadow='http://www.google.com/intl/en_us/mapfiles/arrowshadow.png';
		staplesClusterIcon.shadowSize=new GSize(0, 0);
		
		staplescluster = new ClusterMarker(map, { markers:staplesArray, clusterMarkerIcon:staplesClusterIcon });
		staplescluster.fitMapToMarkers();
		
		map.savePosition();
		// enables the large map control center button to return the map to initial view
	  
	  	hideLoader();
	  	// get rid of the wait gif
	  
	  }else if(responseCode == -1) {
		alert("Data request timed out. Please try later.");
	  } else { 
		alert("Request resulted in error. Check XML file is retrievable.");
	  }/**/

	 });/*End of GDownloadUrl*/
	
  } 
}


function newMarker(markerLocation, markerType, markerName, markerAddress, markerCity) {
	var icon_target = new GIcon(G_DEFAULT_ICON);
	icon_target.image = "/images/icons/target_marker.png";
	icon_target.iconSize=new GSize(23, 35);
	icon_target.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	icon_target.shadowSize = new GSize(0, 0);
	
	var icon_bby = new GIcon(G_DEFAULT_ICON);
	icon_bby.image = "/images/icons/bestbuy_marker.png";
	icon_bby.iconSize=new GSize(23, 35);
	icon_bby.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	icon_bby.shadowSize = new GSize(0, 0);
	
	var icon_bj = new GIcon(G_DEFAULT_ICON);
	icon_bj.image = "/images/icons/bjs_marker.png";
	icon_bj.iconSize=new GSize(23, 35);
	icon_bj.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	icon_bj.shadowSize = new GSize(0, 0);
	
	var icon_london = new GIcon(G_DEFAULT_ICON);
	icon_london.image = "/images/icons/londondrug_marker.png";
	icon_london.iconSize=new GSize(37, 35);
	icon_london.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	icon_london.shadowSize = new GSize(0, 0);
	
	var icon_apple = new GIcon(G_DEFAULT_ICON);
	icon_apple.image = "/images/icons/apple_marker.png";
	icon_apple.iconSize=new GSize(23, 35);
	icon_apple.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	icon_apple.shadowSize = new GSize(0, 0);
	
	var icon_staples = new GIcon(G_DEFAULT_ICON);
	icon_staples.image = "/images/icons/staples_marker.png";
	icon_staples.iconSize=new GSize(37, 35);
	icon_staples.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	icon_staples.shadowSize = new GSize(0, 0);
	
	if( markerType == "Target"){
		var marker = new GMarker(markerLocation, {icon: icon_target});
	}else if( markerType == "Best Buy" ){
		var marker = new GMarker(markerLocation, {icon: icon_bby});
	}else if( markerType == "BJ's" ){
		var marker = new GMarker(markerLocation, {icon: icon_bj});
	}else if( markerType == "London Drugs" ){
		var marker = new GMarker(markerLocation, {icon: icon_london});
	}else if( markerType == "Apple Store" ){
		var marker = new GMarker(markerLocation, {icon: icon_apple});
	}else if( markerType == "Staples Store" ){
		var marker = new GMarker(markerLocation, {icon: icon_staples});
	}
	
	var theType = markerType;
	var theName = markerName;
	var theAddress = markerAddress;
	var theCity = markerCity;
	GEvent.addListener(marker, 'click', function() {
		marker.openInfoWindowHtml('<div style="line-height:20px;"><b>' + theType + '</b>: ' + theName + '</div>'  
								  + '<div style="text-transform: capitalize;">' + theAddress + '<br/>' 
								  + theCity + '</div>');
	});
	
	return marker;
}

function showLoader() {
	document.getElementsByClassName("map_loader")[0].innerHTML = '<img src="/images/retailers/spinner.gif"/>';  
}

function hideLoader() {
	document.getElementsByClassName("map_loader")[0].innerHTML = '';
}


GSearch.setOnLoadCallback(initialize);