﻿/******************************************
Name:			findaretailer.js
Description:	Use to navigate between the options of the Find A Retailer system.
Date:			07/05/2009
Author:			Andrei Vais
******************************************/

//instanciate GoogleMap
if (GBrowserIsCompatible())
{
    if(document.getElementById && document.getElementById("LocationMap"))
    {
	    var mapContainer = document.getElementById("LocationMap");
    	
	    var map = new GMap2(mapContainer);	
	    var defaultMapLat = 55.9;
	    var defaultMapLng = -4.25;
	    var defaultMapZoomFactor = 5;
    	
	    //setup default latitude (North) and longitude (East)
	    var defaultMapLocation = new GLatLng(defaultMapLat, defaultMapLng);
	    //set map type - 0 (map), 1 (satellite), 2 (hybrid)
	    var mapType = G_DEFAULT_MAP_TYPES[0];
	    //add panning, zooming controls
	    map.addControl(new GLargeMapControl());
	    //add map type (map, sattelite, hybrid) control
	    map.addControl(new GMapTypeControl());

	    map.setCenter(defaultMapLocation, defaultMapZoomFactor, mapType);

	    var actual;
	    var icon = new GIcon();
	    icon.image = "http://www.google.com/mapfiles/marker.png";


	    //first create the master array for all retailer
        if(document.getElementById("Stockists"))
        {
	        var vcards = getElementsByClassName(document.getElementById("Stockists"), "div", "vcard");
	        //console.log("basic setup done");
	        //console.log("vcards.length: " + vcards.length);
	        //on inital load there will no vcards so no point in going through the whole map setup
	        if (vcards.length != 0)
	        {
		        //console.log("start full setup");
		        var retailerID = 0;
		        var retailerHRef = "";
		        var retailerName = "";
		        var retailerAddress = "";
		        var retailerLNG = 0;
		        var retailerLTD = 0;
		        var retailerTelephone = "";
        		
		        //now let's transform the array into a two dimensional one with the following setup
		        //[i][0] - Retailer ID
		        //[i][1] - Retailer HRef link
		        //[i][2] - Retailer Name
		        //[i][3] - Retailer Address
		        //[i][4] - Retailer Latitude
		        //[i][5] - Retailer Longitude
		        //[i][6] - Retailer Contact Telephone

		        //console.log("before loop");
		        //console.log("retailerID childNodes: " + vcards[0].childNodes.length);
		        for(var i = 0;  i <vcards.length; i++)
		        {
			        //get Retailer ID
			        if (vcards[i].childNodes[0].childNodes[0].getAttribute("rel") != null)
			        {
				        retailerID = vcards[i].childNodes[0].childNodes[0].getAttribute("rel");
			        }

			        //get Retailer HRef link
			        if (vcards[i].childNodes[0].childNodes[0].getAttribute("href") != null)
			        {
				        retailerHRef = vcards[i].childNodes[0].childNodes[0].getAttribute("href");
			        }

        			
			        //get Retailer Name
			        if (vcards[i].childNodes[0].childNodes[0].childNodes[0].nodeValue != null)
			        {
				        retailerName = "<h5>" + vcards[i].childNodes[0].childNodes[0].childNodes[0].nodeValue + "</h5>";
			        }

			        //get Retailer Address
			        for(var j = 0; j < vcards[i].childNodes[1].childNodes.length; j++)
			        {
				        if (vcards[i].childNodes[1].childNodes[j].childNodes[0].nodeValue != null)
				        {
					        retailerAddress += vcards[i].childNodes[1].childNodes[j].childNodes[0].nodeValue + ", <br />";
				        }
			        }
			        if (retailerAddress.lastIndexOf(", <br />") != -1)
			        {
				        retailerAddress = retailerAddress.substring(0,retailerAddress.length - 8);
			        }

			        //get Retailer Latitude
			        if (vcards[i].childNodes[1].childNodes[5].childNodes[0].getAttribute("title") != null)
			        {
				        retailerLNG = vcards[i].childNodes[1].childNodes[5].childNodes[0].getAttribute("title");
			        }

			        //get Retailer Longitude
			        if (vcards[i].childNodes[1].childNodes[5].childNodes[1].getAttribute("title") != null)
			        {
				        retailerLTD = vcards[i].childNodes[1].childNodes[5].childNodes[1].getAttribute("title");
			        }

			        //get Retailer Contact Telephone
			        for(var k = 0; k < vcards[i].childNodes[2].childNodes.length; k++)
			        {
				        if (vcards[i].childNodes[2].childNodes[k].childNodes[0].nodeValue != null)
				        {
					        retailerTelephone += vcards[i].childNodes[2].childNodes[k].childNodes[0].nodeValue + " ";
				        }
			        }
			        if (retailerTelephone.lastIndexOf(" ") != -1)
			        {
				        retailerTelephone = retailerTelephone.substring(0,retailerTelephone.length - 1);
			        }
        			
			        vcards[i] = new Array(retailerID, retailerHRef, retailerName, retailerAddress, retailerLNG, retailerLTD, retailerTelephone);
			        //console.log(vcards[i][0], " :: ", vcards[i][1], " :: ", vcards[i][2], " :: ", vcards[i][3], " :: ", vcards[i][4], " :: ", vcards[i][5], " :: ", vcards[i][6]);
			        //alert(vcards[i][0] + "\n :: " + vcards[i][1] + "\n :: " + vcards[i][2] + "\n :: " + vcards[i][3] + "\n :: " + vcards[i][4] + "\n :: " + vcards[i][5] + "\n :: " + vcards[i][6]);
        			
			        //we need to reset the address and telephone to avoid appending multiple addresses/telephone numbers together
			        retailerAddress = "";
			        retailerTelephone = "";
		        }
		        //console.log("end full setup");
	        }

	        //removes temporary backogrund image now tha the map has fully loaded
	        removeMapBackground(mapContainer);
	    }
	}
}

function removeMapBackground(pMapContainer)
{
	if(pMapContainer)
	{
		pMapContainer.style.background = "none";
	}
}

function DisplayRetailers()
{
	//initialiaze required Google Map Api Objects
	var mapAddress = "";
	var mapCenterLat = 0;
	var mapCenterLng = 0;
	var mapMaxLat = 0;
	var mapMinLat = 0;
	var mapMaxLng = 0;
	var mapMinLng = 0;
	var mapLatDiff = 0;
	var mapLngDiff = 0;

	
	//set map latitude (North) and longitude (East)
	for(var i = 0;  i < vcards.length; i++)
	{
		mapCenterLat += Number(vcards[i][4]);
		mapCenterLng += Number(vcards[i][5]);
		//console.log("map center at: ", mapCenterLat, ", ", mapCenterLng);

		//get the Latitude range
		if(i == 0)
		{
			mapMaxLat =  Number(vcards[i][4]);
		}
		else
		{
			if (mapMaxLat < Number(vcards[i][4]))
			{
				mapMaxLat = Number(vcards[i][4]);
			}
		}
		
		if(i == 0)
		{
			mapMinLat =  Number(vcards[i][4]);
		}
		else
		{
			if (mapMinLat > Number(vcards[i][4]))
			{
				mapMinLat = Number(vcards[i][4]);
			}
		}

		//get the Longitude range
		if(i == 0)
		{
			mapMaxLng =  Number(vcards[i][5]);
		}
		else
		{
			if (mapMaxLng < Number(vcards[i][5]))
			{
				mapMaxLng = Number(vcards[i][5]);
			}
		}
		
		if(i == 0)
		{
			mapMinLng =  Number(vcards[i][5]);
		}
		else
		{
			if (mapMinLng > Number(vcards[i][5]))
			{
				mapMinLng = Number(vcards[i][5]);
			}
		}
	}

	mapCenterLat = mapCenterLat/vcards.length;
	mapCenterLng = mapCenterLng/vcards.length;
	mapLatDiff = mapMaxLat - mapMinLat;
	mapLngDiff = mapMaxLng - mapMinLng;
	
	//console.log("map center at: ", mapCenterLat, ", ", mapCenterLng)
	//console.log("mapMaxLat: ", mapMaxLat, " - mapMinLat: ", mapMinLat, " - mapLatDiff: ", mapLatDiff);
	//console.log("mapMaxLng: ", mapMaxLng, " - mapMinLng: ", mapMinLng, " - mapLngDiff: ", mapLngDiff);
	
	mapLocation = new GLatLng(mapCenterLat, mapCenterLng, mapType);
	
	//set map zoom factor - set the zoom factor depending how "spread out" there retailers are
	var mapZoomFactor;
	
	if ((mapLatDiff < 0.1) && (mapLngDiff < 0.01))
	{
		mapZoomFactor = 13;
	}		
	else if ((mapLatDiff < 0.1) && (mapLngDiff > 0.01))
	{
		mapZoomFactor = 12;
	}			
	else if ((mapLatDiff > 0.1) && (mapLngDiff < 0.2))
	{
		mapZoomFactor = 10;
	}		
	else if ((mapLatDiff < 1) && (mapLngDiff < 1))
	{
		mapZoomFactor = 9;
	}			
	else if ((mapLatDiff > 1) && (mapLngDiff > 1))
	{
		mapZoomFactor = defaultMapZoomFactor;
	}		
	else
	{
		//if this is the case then let's reset to display the whole UK
		mapLocation = defaultMapLocation;
		mapZoomFactor = defaultMapZoomFactor;
	}
	//console.log("mapZoomFactor: ", mapZoomFactor);
	map.setCenter(mapLocation, mapZoomFactor);
	
	addIcon(icon);

	for(var i = 0;  i < vcards.length; i++)
	{
		var point = new GLatLng(vcards[i][4], vcards[i][5]);
		
		mapAddress = "<div class='infowindow'>" + vcards[i][2] + "<br />" + vcards[i][3] + "<br /><br />" + vcards[i][6] + "</div>";
		//console.log("create marker: ", i, " lat: ", vcards[i][4], " lng: ", vcards[i][5], " mapAddress: ", mapAddress);
		
		map.addOverlay(createMarker(point, icon, mapAddress, i));
		mapAddress = "";
	}


	//now we created all the points on the map let's add the functionality to the list of results:
	//- each result will have 2 links which when clicked will open the corresponding Info window on the map
	//prepareVCardLinks();
}

function addIcon(icon)
{ // Add icon attributes

	icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	icon.iconSize = new GSize(20, 34);
	icon.shadowSize = new GSize(37, 34);
	icon.iconAnchor = new GPoint(10, 34);
	icon.infoWindowAnchor = new GPoint(14, 34);
}

function createMarker(pPoint, pIcon, pAddress)
{
	// Set draggable markers
	var marker = new GMarker(pPoint, {icon:pIcon});

	GEvent.addListener(marker, "click", function()
	{
		// Open infowindow only if it's closed or the mouse moves over another marker
		if(map.getInfoWindow().isHidden() || actual != marker )
		{ 
			marker.openInfoWindowHtml(pAddress);
		}
		/* You can only open one info window at a time.
		* Store the marker of this info window.
		*/
		actual = marker;
	});

	return marker;
}

function prepareVCardLinks()
{    
    if(!document.getElementById) return false;
    if(!document.getElementById("contentpage")) return false;
	var retailerVCardLinks = getElementsByClassName(document.getElementById("contentpage"), "a", "RetailerLink");

	//console.log("retailerVCard: " + retailerVCardLinks.length);
	for(var i = 0;  i <retailerVCardLinks.length; i++)
	{
		retailerVCardLinks[i].onclick = function()
		{
			showMarker(this);
			return false;
		}
	}	
}

function showMarker(pLink)
{
	//console.log(pLink.getAttribute("rel"));
	for(var i = 0;  i < vcards.length; i++)
	{
		if (vcards[i][0] == pLink.getAttribute("rel"))
		{
			//console.log("get info for link at ", i);
			//get the details of the selected retailer
			//[i][0] - Retailer ID
			//[i][1] - Retailer HRef link
			//[i][2] - Retailer Name
			//[i][3] - Retailer Address
			//[i][4] - Retailer Latitude
			//[i][5] - Retailer Longitude
			//[i][6] - Retailer Contact Telephone
			var selectedRetailerID = vcards[i][0];
			var selectedRetailerAddress = "<div class='infowindow'>" + vcards[i][2] + "<br />" + vcards[i][3] + "<br /><br />" + vcards[i][6] + "</div>";
			var selectedRetailerLAT = vcards[i][4];
			var selectedRetailerLNG = vcards[i][5];

			//reset center of the map to the Lat/Lng coordinates of the selected retailer
			map.closeInfoWindow();
			mapLocation = new GLatLng(selectedRetailerLAT, selectedRetailerLNG, map.getCurrentMapType());
			map.panTo(mapLocation);

			var marker = new GMarker(mapLocation, {icon:icon});
			addIcon(icon);

			//console.log(marker.getLatLng());
			//map.clearOverlays();
			//map.addOverlay(createMarker(mapLocation, icon, selectedRetailerAddress, i));
		
			if(map.getInfoWindow().isHidden() || actual != marker ) { 
				//console.log("inside if");
				//console.log(selectedRetailerAddress);
				//console.log(marker);
				//map.getInfoWindow().show();
				//marker.openInfoWindowHtml("test");
			}
			actual = marker;
			
		}
	}
}