<!--
    //<![CDATA[
			   
	// arrays to hold copies of the markers and html used by the side bar
    // because the function closure trick doesnt work there
	var myBranches = [];
	var homePoint;
    var map;
	var localSearch = new GlocalSearch();
	   	  
	// Create a constructor to hold the branch data
	function branchLocation(name, distance, marker) {
		this.Name = name;
		this.Distance =  parseFloat(distance);
		this.Marker = marker;
	}

	// Sort the branches by distance for the side bar
	function sortByDistance(a, b) {
		var x = a.Distance;
		var y = b.Distance;
		return ((x < y) ? -1 : ((x > y) ? 1 : 0));
	}
	  
    function load() {
      if (GBrowserIsCompatible()) {
       // var map = new GMap2(document.getElementById("map"));
       // map.setCenter(new GLatLng(53.9646, -2.0119), 16);
	   map = new GMap(document.getElementById("map"));
	   map.addControl(new GSmallMapControl());
	   map.addControl(new GMapTypeControl());
	   //map.setCenter(new GLatLng(53.9646, -2.0119), 13); 
	   map.setCenter(new GLatLng(53.9646, -2.0119), 5); 
   
	  // displayIcons(map);
      }
    }
	
	// Display the icons for the locations
	function displayIcons(map)
	{
		var rand_no = Math.random();
		// Reset the list in the side bar
		myBranches = [];

		// Get the center of the map, used for distance.
	   	getMapCenter(map);

		// Download the data in data.xml and load it on the map, append random number to force a download
		// and not use the local cached file.
		
		// G Code for testing the dynamic data file as an XML data source.
		GDownloadUrl("data.xml?" + rand_no, function(data, responseCode) {  
		//GDownloadUrl("branchDataXML.aspx?" + rand_no, function(data, responseCode) {  
			var xml = GXml.parse(data);  
			
			var markers = xml.documentElement.getElementsByTagName("marker");
			var side_bar_html = "";

			for (var i = 0; i < markers.length; i++) {
			    var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),                         
								        parseFloat(markers[i].getAttribute("lng")));
                
				if (markers[i].getAttribute("district") != "")
					var district = markers[i].getAttribute("district") + "<br />";
				else
					var district = "";

				if (markers[i].getAttribute("county") != "")
					var county = markers[i].getAttribute("county") + "<br />";
				else
					var county = "";
					
				var address = "<table style=\"width:300px\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">&nbsp;</td></tr>";
											
				address += "<tr>" 
						  +    "<td width=\"50%\"><img src=\"/Branches/images/"+markers[i].getAttribute("img") +"\" width=\"150\" height=\"100\" align=\"left\"></td>"	
						  +    "<td width=\"50%\"><strong>" + markers[i].getAttribute("subbranch") + "</strong><br />" + markers[i].getAttribute("street") + "<br />"
							+ district
							+ markers[i].getAttribute("town") + "<br />"
							+ county
							+ markers[i].getAttribute("postcode") + "<br />"
						  + "</tr>"									
						  + "<tr>" 
						  +    "<td width=\"50%\">Telephone:</td>"	
						  +    "<td width=\"50%\">" + markers[i].getAttribute("telephone") 
						  + "</tr>"
						  + "<tr>" 
						  +    "<td width=\"50%\">Fax:</td>"	
						  +    "<td width=\"50%\">" + markers[i].getAttribute("fax") 
						  + "</tr>"						  
						  + "</table>";
				
				var days = markers[i].getElementsByTagName("day"); 
				
				var openingTimes = "<table style=\"width:300px\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">&nbsp;</td></tr>";
				
				openingTimes += "<tr>" 
							 +	"<td width=\"50%\">&nbsp;</td>"
							 +  "<td width=\"25%\">From</td>" 
							 +  "<td width=\"25%\">To</td>" 
							 +  "</tr>";

                									
				for (var x = 0; x < days.length; x++) {
					openingTimes += "<tr>" 
								 +  "<td>" + days[x].getAttribute("name") + "</td>" 
								 +  "<td>" + days[x].getAttribute("open") + "</td>"
								 +  "<td>"+ days[x].getAttribute("close") + "</td>"
								 +  "</tr>";
				}
				
				openingTimes += "</table>";

				var marker = createMarker(point, markers[i].getAttribute("name"), markers[i].getAttribute("postcode"), address, openingTimes);
				var point = marker.getPoint();

				
				var mfromhome = convertKmToMiles(point.distanceFrom(homePoint));

				myBranches[myBranches.length++] = new branchLocation (markers[i].getAttribute("name"), mfromhome, marker);
				
				map.addOverlay(marker); 
			}
			
			/*side_bar_html += '<form name="form1" method="post" action="#">'
	      				  +	 'Town/City <input type="text" name="city" onFocus="form1.zip.value=''"> or'
		   				  +  'Postcode <input type="text" name="zip" onFocus="form1.city.value=''">'
			   			  +  '<input name="submit" type="button" value="Search" onclick="updateLocation()">'
    					  +  '</form>';
						*/  
			if (document.getElementById("ctl00_ContentPlaceHolder2_BranchesCallToAction_txtPhrase").value != '') {
				side_bar_html += '<br /><h2>Closest matches:</h2><ol>';
				
				myBranches.sort(sortByDistance);
				
				for (var x = 0; x < 10; x++) { 
					side_bar_html += '<li><a href="javascript:myclick(' + x + ')">' + myBranches[x].Name + '</a><br />(' + myBranches[x].Distance + ' Miles) </li>';
				}
				side_bar_html += '</ol>';
			}
			
			document.getElementById("locations").innerHTML = side_bar_html;
			
			// Go to first result
			myclick(0);
		});
		
		 
	}
	
	// This function picks up the click and opens the corresponding info window
   	function myclick(i) {
    	GEvent.trigger(myBranches[i].Marker, "click");
        var mapCenter = myBranches[i].Marker.getPoint();
		   
		var homePoint = new GLatLng(parseFloat(mapCenter.y), parseFloat(mapCenter.x));
        panoramaOptions = { latlng:homePoint };
        var myPano = new GStreetviewPanorama(document.getElementById("streetView"), panoramaOptions);
   	}
	
	// Creates a marker at the given point with the given number label
	function createMarker(point, branch, postcode, address, openingTimes) {  
	   	// Create our "tiny" marker icon
	   	var icon = new GIcon();
	   	icon.image = "http://www.skipton.co.uk/images/logo.png";
	   	//icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	   	icon.iconSize = new GSize(25, 20);
	   	icon.shadowSize = new GSize(22, 20);
	   	icon.iconAnchor = new GPoint(6, 20);
	   	icon.infoWindowAnchor = new GPoint(5, 1);




	   	// Our info window content
	  	var infoTabs = [ new GInfoWindowTab("Address", "<strong>" + branch + "</strong><br />" + address),
           					new GInfoWindowTab("Times", "<strong>" + branch + "</strong><br />" + openingTimes),
                        //new GInfoWindowTab("Street View", "<strong>" + branch + "</strong><br />" + streetMap),
						new GInfoWindowTab("Directions", '<form name="direction" action="http://maps.google.com" method="get" target="_blank"><strong>Get directions to ' + branch + '</strong><br /><label for="saddr">Starting postcode </label><input type="text" name="saddr" id="saddr" size="8" value="'+ document.getElementById("ctl00_ContentPlaceHolder2_BranchesCallToAction_txtPhrase").value +'" /><input type="hidden" name="daddr" value="'+postcode+'" /><input type="hidden" name="hl" value="en" /><input type="hidden" name="f" value="d" /> <input type="submit" value="lookup" /></form>')];
	   	   
		var marker = new GMarker(point, icon);  
		
		GEvent.addListener(marker, "click", function() {  
			marker.openInfoWindowTabsHtml(infoTabs);
		}); 

		return marker;
	}
	
	// Get the Lat and Long for the center of the map
	function getMapCenter(map) {
		var mapCenter = map.getCenterLatLng();
		   
		homePoint = new GLatLng(parseFloat(mapCenter.y), parseFloat(mapCenter.x));
            /// - GRW
    var streetMap = "<div name=\"pano\" id=\"pano\" style=\"width: 300px; height: 150px\"></div>";
				
				panoramaOptions = { latlng:homePoint };
                var myPano = new GStreetviewPanorama(document.getElementById("streetView"), panoramaOptions);
                //GEvent.addListener(myPano, "error", handleNoFlash);
                /// - End GRW
	}
	
	// Convert distance to miles
	function convertKmToMiles(kilometers) {
		return Math.round(((kilometers/1000) * 0.621371192) * 10)/10;
	}
	
	function findLocation(field) {
	    var phrase = encodeURIComponent(document.getElementById(field).value);

	    if (phrase != null)
	    {
	        if (phrase.toUpperCase() == "NEWBY")
	            usePointFromPostcode("YO12 6SF", setCenterToPoint);
            else if (phrase.toUpperCase() == "HATFIELD")
	            usePointFromPostcode("DN7 6QD", setCenterToPoint);
            else if (phrase.toUpperCase() == "MORETON")
	            usePointFromPostcode("CH46 6AD", setCenterToPoint);
	        else
                usePointFromPostcode(phrase, setCenterToPoint);
	    }
	}
	
	function usePointFromPostcode(postcode, callbackFunction) {
    
	localSearch.setSearchCompleteCallback(null, 
		function() {
			
			if (localSearch.results[0])
			{		
				var resultLat = localSearch.results[0].lat;
				var resultLng = localSearch.results[0].lng;
				var point = new GLatLng(resultLat,resultLng);
				callbackFunction(point);
			}else{
				alert("Location not found!");
			}
			
		});	

	localSearch.execute(postcode.replace(/%20/g, " ") + ", UK");
    }
    
    function setCenterToPoint(point)
    {
        map = new GMap(document.getElementById("map"));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());

	    map.setCenter(point, 17);

		displayIcons(map);
    }
    //]]>
//-->
