////HMM HOW DO I MAKE THIS WORK CLIENT SIDE???
///	function get_bloginfo_url() {return <?php bloginfo('url'); ?>;}
//	function get_bloginfo_url() {return 'http://localhost/wassp';}
	function get_bloginfo_url() {return 'http://voilawebsolutions.com/wassp';}
//	function get_bloginfo_url() {return 'http://wassp.net';}
// For remote servers this should be better as an absolute path, not url, so it won't need changing for different servers
//	function get_bloginfo_url() {return '/wassp';}

    //<![CDATA[

//	google.load("search","1");
	google.load("maps","2");

	var		map;
	var		markers=[];
	var		customIcons=[];

// const didn't work?!?
	var		VENUE_CLUB=0,VENUE_LEISURE_CENTRE=1,VENUE_SCHOOL=2,VENUE_OTHER=3,VENUE_UNDEFINED=4;
	var		venues=['club','leisure centre','school','other','undefined'];
	var		mapVenuesLists=[];

	// The Google API will call this function when the page has been loaded
	function pageLoad()
	{
		if (!google.maps.BrowserIsCompatible())
			return;	// Nowt doing!

		mapVenuesLists[VENUE_CLUB]=document.getElementById('map-clubs-list');
		mapVenuesLists[VENUE_LEISURE_CENTRE]=document.getElementById('map-leisure-centres-list');
		mapVenuesLists[VENUE_SCHOOL]=document.getElementById('map-schools-list');
		mapVenuesLists[VENUE_OTHER]=document.getElementById('map-other-venues-list');

		// Create a search control
/*		var searchControl=new google.search.SearchControl();

		// Add in a full set of searchers
		var localSearch=new google.search.LocalSearch();
		searchControl.addSearcher(localSearch);

		searchControl.addSearcher(new google.search.WebSearch());
		searchControl.addSearcher(new google.search.VideoSearch());
		searchControl.addSearcher(new google.search.BlogSearch());

		// Set the Local Search center point
		localSearch.setCenterPoint("New York, NY");

		// Tell the searcher to draw itself and tell it where to attach
		searchControl.draw(document.getElementById("searchControl"));

		// Execute an inital search
		searchControl.execute("Google");
*/
		// Create a map control
		map=new google.maps.Map2(document.getElementById("map"));
//		var centre=new google.maps.LatLng(51.45,0);				// Greenwich prime meridian
		var centre=new google.maps.LatLng(53.392,-2.585);		// Central Warrington
		var	zoomLevel=12;
		map.setCenter(centre,zoomLevel);	
		map.addControl(new GSmallMapControl());
//		map.addControl(new GLargeMapControl());
//		map.setUIToDefault();
//		map.addControl(new GMapTypeControl());
		map.addControl(new GMenuMapTypeControl());
//		map.addControl(new GHierarchicalMapTypeControl());
//		map.addControl(new GOverviewMapControl());
//		map.addControl(new GNavLabelControl());
//		map.enableGoogleBar();
//		map.enableScrollWheelZoom();
		map.enableContinuousZoom();
//		map.disableDragging()

if (0)
{
		var lat=53.4	//centre.getLat();
		var lng=-2.6;	//centre.getLng();
		var latOffset=0.01;
		var lngOffset=0.01;
		var polygon=new google.maps.Polygon([
			new GLatLng(lat,lng-lngOffset),
			new GLatLng(lat+latOffset,lng),
			new GLatLng(lat,lng+lngOffset),
			new GLatLng(lat-latOffset,lng),
			new GLatLng(lat,lng-lngOffset)
			],"#f33f00",5,1,"#ff0000",0.2);
		map.addOverlay(polygon);
//		polygon.enableEditing();
		google.maps.Event.addListener(polygon,"click",function(latLng)
		{
//			alert("Inside addListener(polygon)");
		});

		google.maps.Event.addListener(map,"click",function(overlay,latLng,overlayLatLng)
		{
/*			if (overlay)
			{
				if (overlay==polygon)
					alert("You clicked the polygon.");
				else
					alert("You clicked on something?");
			}
			else
			{
				alert("You clicked the map.");
			}
*/
		});
}
	}

	// See: "Creating a Store Locator with PHP, MySQL & Google Maps" in Google Maps API: Google Code Home > Google Maps API FAQ > Articles & Tutorials
	function searchLocations()
	{
/*		var address = document.getElementById('addressInput').value;
		geocoder.getLatLng(address, function(latlng)
		{
			if (!latlng) {
				alert(address + ' not found');
			} else {
				searchLocationsNear(latlng);
			}
		});
*/
	}

	function searchMapAreas()
	{
		var		areas=['centre','north','east','south','west'];
		var		searchAreas='';

		for (var i=0; i<areas.length; ++i)
			if (document.getElementById('map-area-'+areas[i]).checked)
				searchAreas+=areas[i]+',';	// Note: Trailing comma for last item will get ignored

		// DO NOT use an absolute URL here as it won't work on servers
		// XmlHttpRequest AJAX calls must have same address as HTML document they are called from
		// therefore an absolute URL is redundant, however absolute (or relative) paths are fine
//		var 	searchUrl='/wassp/vws-map/gen-kml.php?areas='+searchAreas;

		// Hmm not sure if the above is the case now?!?
		var 	searchUrl=get_bloginfo_url()+'/vws-map/gen-kml.php?areas='+searchAreas;

		// To load pre-generated KML file (must be on a Google accessible host server [not localhost] to work!)
/*		var kmlUrl="http://voilawebsolutions.com/gen-kml.php?lat=51.45&lng=0&radius=0&v=" + Math.round(Math.random() * 10000000000);
		var kml=new GGeoXml(kmlUrl); 
		map.clearOverlays();
		map.addOverlay(kml);
*/
		// Fetch document asynchronously (here a php script document is being fetched that will be preprocessed server-side into an XML doc)
//		GDownloadUrl('/wassp/test.kml',function(data)	// Use to asynchronously download KML (XML format) file directly
		GDownloadUrl(searchUrl,function(data)
		{
			markers=[];
			map.clearOverlays();

			var xml=GXml.parse(data);
			var placemarkElements=xml.documentElement.getElementsByTagName('Placemark');

//			alert("Boo! Found "+placemarkElements.length+" placemarkElements");

			for (var i=0; i<mapVenuesLists.length; ++i)
				mapVenuesLists[i].innerHTML='';

				if (placemarkElements.length==0)
			{
//				mapSidebar.innerHTML='No results found.';
//				map.setCenter(new GLatLng(40,-100),4);
				return;
			}

////TODO: READ STYLES FROM KML <STYLE> ELEMENTS...
			// Create custom marker icons
			var	iconBlue=createCustomIcon('blue_MarkerC','mm_20_shadow');
			var	iconRed=createCustomIcon('red_MarkerL','mm_20_shadow');
			var	iconYellow=createCustomIcon('yellow_MarkerS','mm_20_shadow');
			var	iconGreen=createCustomIcon('green_MarkerO','mm_20_shadow');
			var	iconBlack=createCustomIcon('purple_MarkerU','mm_20_shadow');

			customIcons=[];
			customIcons[VENUE_CLUB]=iconBlue;
			customIcons[VENUE_LEISURE_CENTRE]=iconRed;
			customIcons[VENUE_SCHOOL]=iconYellow;
			customIcons[VENUE_OTHER]=iconGreen;
			customIcons[VENUE_UNDEFINED]=iconBlack;

			// Create map markers
			var bounds=new GLatLngBounds();

			for (var i=0; i<placemarkElements.length; i++)
			{
				// Get placemark attributes
				var id=placemarkElements[i].getAttribute('id');

				// Get placemark elements (note that even though an array is read for each, only one should present and gets used)
				var	name=GXml.value(placemarkElements[i].getElementsByTagName("name")[0]);
				var	desc=GXml.value(placemarkElements[i].getElementsByTagName("description")[0]);
				var	styleUrl=GXml.value(placemarkElements[i].getElementsByTagName("styleUrl")[0]);
				var	pointElements=placemarkElements[i].getElementsByTagName("Point");
				var	coords=GXml.value(pointElements[0].getElementsByTagName("coordinates")[0]);
				var	cats=GXml.value(placemarkElements[i].getElementsByTagName("Categories")[0]);
				var	tags=GXml.value(placemarkElements[i].getElementsByTagName("Tags")[0]);

				var	lngLat=coords.split(",");	// Break string up into its numeric components
				var	lng=parseFloat(lngLat[0]);
				var	lat=parseFloat(lngLat[1]);
				var	point=new GLatLng(lat,lng);

				var	style=styleUrl.substr(1,styleUrl.length-6);	// Omit initial # character and 'Style' at the end
				var	icon=customIcons[style];	
				var	marker=createMarker(point,icon,name,desc,cats,tags);
				map.addOverlay(marker);
				markers.push(marker);

				var	sidebarEntry=createMapSidebarEntry(marker,name,desc);
				mapVenuesLists[marker.venue].appendChild(sidebarEntry);

				bounds.extend(point);
			}

//			map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

			applyMapFilters();
		});
	}

	function applyMapFilters()
	{
		var	searchString=document.getElementById('mapSearch').value;
		var	showClubs=document.getElementById('map-venue-clubs').checked;
		var	showLeisureCentres=document.getElementById('map-venue-leisure-centres').checked;
		var	showSchools=document.getElementById('map-venue-schools').checked;
		var	showOtherVenues=document.getElementById('map-venue-other-venues').checked;

		for (var i=0; i<markers.length; ++i)
		{
			var	cats=markers[i].categories;
			var	show=(
				(showClubs && markers[i].venue==VENUE_CLUB) ||
				(showLeisureCentres && markers[i].venue==VENUE_LEISURE_CENTRE) ||
				(showSchools && markers[i].venue==VENUE_SCHOOL) ||
				(showOtherVenues && markers[i].venue==VENUE_OTHER));

			if (show && searchString!='')
			{
				// Search all tags to see if searchString is contained within any of them
				var	tags=','+markers[i].tags;	// Put delimiter at start so can check for ',<searchString>' to ensure always matches from beginning of tags (not within)
				show=(tags.indexOf(','+searchString)!=-1);
			}

			if (show)
				markers[i].show();
			else
				markers[i].hide();
		}
	}

	function createMarker(point,icon,name,desc,cats,tags)
	{
//		alert("Placemark name="+name+" desc="+desc+" point="+point.lat()+","+point.lng());

		var	venue=VENUE_UNDEFINED;
		for (var i=0; i<venues.length; ++i)
			if (cats.indexOf(venues[i])!=-1)
				{venue=i; break;}

//		var	marker=new GMarker(point,icon);	// Don't use passed in 'styleUrl' icon for now as the server PHP script doesn't properly set this up
		var	venueIcon=customIcons[venue];
		var	marker=new GMarker(point,venueIcon);

		marker.venue=venue;
		marker.categories=cats;
		marker.tags=tags;
//alert("TO DO: USE MAPINFOTAB / CONTENT/ TITLE HERE...");
		var	labels=[];
//		labels.push('<span style="color: #f00;"><strong>'+name+'</strong></span>');
		labels.push(''+name+'');
		labels.push("Label 2");
		labels.push("Label 3");
		var	htmls=[];
//		htmls.push('<span style="width: 400px; height: 200px;">'+ '<b>'+name+'</b><br/>'+ 'Needs a short description here!' + '</span>');
		htmls.push(''+desc+'');
//		htmls.push('<span style="color: #0ff;">content 2</span>');
		htmls.push('content 2');
		htmls.push('content 3');

		GEvent.addListener(marker,'click',function()
		{
//			marker.openInfoWindowHtml(html);

			// Adjust width so that info window is large enough for this many tabs
//			if (htmls.length > 2)
//				htmls[0]='<div style="width:'+htmls.length*88+'px">' + htmls[0] + '<\/div>';

			var infoWindowTabs=[];
			for (var i=0; i<htmls.length; i++)
				infoWindowTabs.push(new GInfoWindowTab(labels[i],htmls[i]));

			marker.openInfoWindowTabsHtml(infoWindowTabs);
//			map.openInfoWindowTabsHtml(point,infoWindowTabs);
		});

		return marker;
	}

	function createCustomIcon(image,shadow)
	{
		var	icon=new GIcon();
		icon.image=get_bloginfo_url()+'/vws-map/images/markers/'+image+'.png';
		icon.shadow=get_bloginfo_url()+'/vws-map/images/markers/'+shadow+'.png';
//		icon.iconSize=new GSize(12,20);
//		icon.shadowSize=new GSize(22,20);
//		icon.iconAnchor=new GPoint(6,20);
//		icon.infoWindowAnchor=new GPoint(5,1);
		icon.iconSize=new GSize(12+6,20+10);
		icon.shadowSize=new GSize(22+11,20+10);
		icon.iconAnchor=new GPoint(6,20);
		icon.infoWindowAnchor=new GPoint(5,1);
		return icon;
	}

	function createMapSidebarEntry(marker,name,desc)
	{
		var	div=document.createElement('div');
//		var	html=''+name+desc;
		var	venueIconUrl=customIcons[marker.venue].image;
		var	html='<img src="'+venueIconUrl+'" style="color: #000; width: 12px; height: 18px; position: relative; top: 6px;" alt=""/> '+name;
		div.innerHTML=html;
		div.style.cursor='pointer';
		div.style.marginBottom='5px';
		GEvent.addDomListener(div,'click',function() {GEvent.trigger(marker,'click');});
		GEvent.addDomListener(div,'mouseover',function() {div.style.color='#c0c';});
		GEvent.addDomListener(div,'mouseout',function() {div.style.color='#000';});
		return div;
	}

// HS From Google Maps API docs: Using this function [GUnload] has virtually eliminated Internet Explorer memory leaks in Google Maps, though you should test for memory leaks on your own site using tools like Drip if you are noticing memory consumption problems
	function pageUnload()
	{
		google.maps.Unload();
	}

//	google.setOnLoadCallback(OnLoad);
    //]]>