if (GBrowserIsCompatible()) {
	// global array to hold copies of the markers used by the sideBar
	var gmarkers = [];
	// counter for the above
	var ii = 0;
	// empty var for our sideBar html
	var sideBar = '';
	var priceinfo;
	
	var directionsloaded = false;
	
	function createMarkerWithTabs(point, infoTabs, name) {
		var marker = new GMarker(point, icon);
		marker.tooltip = '<div class="tooltip">' + name + '</div>';
		GEvent.addListener(marker, "click", function() { marker.openInfoWindowTabsHtml(infoTabs); });
		GEvent.addListener(marker,"mouseover", function() { showTooltip(marker); });        
		GEvent.addListener(marker,"mouseout", function() { tooltip.style.display = "none"; });
		gmarkers[ii] = marker;
		ii++;
		bounds.extend(point);
		return marker;
	}			
	function addVenue(lat, lng, tab1, name) {
  		var point = new GLatLng(lat, lng);
		var tab2 = '<div id="getHere' + (ii-1) + '" class="directions"><p>Get driving directions <strong>to</strong> this venue from:</p><form action="#" style="margin-top: 0;" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false"><input type="hidden" id="toAddress" name="to" value="' + point.y + ',' + point.x + '"/><br /><label for="fromAddress">&nbsp;</label><input onfocus="this.value=\'\';" type="text" size="25" id="fromAddress" name="from" value="Enter a town or city" /><br /><input type="hidden" id="locale" name="locale" value="en" /><input name="submit" type="submit" value="Get Directions!" /><br /></form><p class="toggle"><a href="#" onclick="toggleDirections(' + (ii-1) + ');">Get directions <strong>from</strong> this venue</a></p></div><div id="getBack' + (ii-1) + '" style="display: none;" class="directions"><p>Get driving directions <strong>from</strong> this venue to:</p><form action="#" style="margin-top: 0;" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false"><input type="hidden" id="fromAddress" name="from" value="' + point.y + ',' + point.x + '"/><br /><label for="toAddress">&nbsp;</label><input onfocus="this.value=\'\';" type="text" size="25" id="toAddress" name="to" value="Enter a town or city" /><br /><input type="hidden" id="locale" name="locale" value="en" /><input name="submit" type="submit" value="Get Directions!" /><br /></form><p class="toggle"><a href="#" onclick="toggleDirections(' + (ii-1) + ');">Get directions <strong>to</strong> this venue</a></p></div>';
		var infoTabs = [
			new GInfoWindowTab("Info", tab1),
		  	new GInfoWindowTab("Directions", tab2)
		];
  		map.addOverlay(createMarkerWithTabs(point, infoTabs, name));
	}	
	function loadHotels() {
		var request = GXmlHttp.create();
		
	    request.open("GET", xml_src, true);
	    request.onreadystatechange = function() {
			if (request.readyState == 4) {
				displayHotels(request.responseXML);
			}
		};
		request.send(null);
	}	
	function displayHotels(xmlDoc) {
		
		var hotels = xmlDoc.documentElement.getElementsByTagName("hotel");
		sideBar += '<p>(Availability from ' + laterooms_pretty_date + ')</p>';
		for (var i=0; i<hotels.length; i++) {
			try{
			priceinfo = '';
			var point = new GLatLng(parseFloat(hotels[i].getElementsByTagName('lat')[0].firstChild.nodeValue), parseFloat(hotels[i].getElementsByTagName('long')[0].firstChild.nodeValue));
			if (hotels[i].getElementsByTagName('rate').length > 0) {
				priceinfo += '<h4>Room Pricing</h4>';
				for (var n=0; n<hotels[i].getElementsByTagName('rate').length; n++) {
					priceinfo += '<p>' + hotels[i].getElementsByTagName('rate')[n].getElementsByTagName("formatted_date")[0].firstChild.nodeValue + ':  &pound;' + hotels[i].getElementsByTagName('rate')[n].getElementsByTagName("price")[0].firstChild.nodeValue + '</p>';
				}
			}
			
			// Changes to trim whitespace off the end of what laterooms send
			var hotelUrl = hotels[i].getElementsByTagName('hotel_link')[0].firstChild.nodeValue;
			hotelUrl = hotelUrl.replace(/\s*/g,"");
			var bookinglink = '<p><a href="' + hotelUrl + '?n=1&amp;d=' + laterooms_date + '" onclick="window.open(this.href, \'_blank\'); return false;">More info/book now</a></p>';

			var tab2 = '<div id="getHere' + (ii-1) + '" class="directions"><p>Get driving directions <strong>to</strong> this venue from:<p><form action="#" style="margin-top: 0;" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false;"><input type="hidden" id="toAddress" name="to" value="' + point.y + ',' + point.x + '"/><br /><label for="fromAddress">&nbsp;</label><input onfocus="this.value=\'\';" type="text" size="25" id="fromAddress" name="from" value="Enter a town or city" /><br /><input type="hidden" id="locale" name="locale" value="en" /><input name="submit" type="submit" value="Get Directions!" /><br /></form><p class="toggle"><a href="#" onclick="toggleDirections(' + (ii-1) + ');">Get directions <strong>from</strong> here</a></p></div><div id="getBack' + (ii-1) + '" style="display: none;" class="directions"><p>Get driving directions <strong>from</strong> this venue to:</p><form action="#" style="margin-top: 0;" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false"><input type="hidden" id="fromAddress" name="from" value="' + point.y + ',' + point.x + '"/><br /><label for="toAddress">&nbsp;</label><input onfocus="this.value=\'\';" type="text" size="25" id="toAddress" name="to" value="Enter a town or city" /><br /><input type="hidden" id="locale" name="locale" value="en" /><input name="submit" type="submit" value="Get Directions!" /><br /></form><p class="toggle"><a href="#" onclick="toggleDirections(' + (ii-1) + ');">Get directions <strong>to</strong> this venue</a></p></div>';
			
			var hotel_description = '';
			if ( hotels[i].getElementsByTagName('hotel_description')[0].firstChild != null )
				hotel_description = hotels[i].getElementsByTagName('hotel_description')[0].firstChild.nodeValue;
				
			var infoTabs = [
				new GInfoWindowTab("Info", "<h4>" + hotels[i].getElementsByTagName('hotel_name')[0].firstChild.nodeValue + " (" + hotels[i].getElementsByTagName('hotel_star')[0].firstChild.nodeValue + ")</h4><p>" + hotels[i].getElementsByTagName('hotel_address')[0].firstChild.nodeValue + "</p>" + priceinfo + bookinglink),
			  	new GInfoWindowTab("About", '<h4>Hotel Description</h4><p class="hotel-descr">' + hotel_description + '</p>' + bookinglink),
				new GInfoWindowTab("Directions", tab2)
			];
			var marker = createMarkerWithTabs(point, infoTabs, hotels[i].getElementsByTagName('hotel_name')[0].firstChild.nodeValue);
			map.addOverlay(marker);
			// build our sidebar text
			if (i<(hotels.length-1)) {
				sideBar += '<div class="hotel">';
			}
			else {
				sideBar += '<div class="hotel last">';
			}
			sideBar += '<h3 class="hotel"><a href="#" onclick="showInfo(' + (ii-1) + ');" onmouseover="toolOver(' + (ii-1) + ')" onmouseout="toolOut()">' + hotels[i].getElementsByTagName('hotel_name')[0].firstChild.nodeValue + '</a><span class="normal"> (Rating:&nbsp;' + hotels[i].getElementsByTagName('hotel_star')[0].firstChild.nodeValue + ')</span></h3>';
			//sideBar += '<p>Rating: ' + hotels[i].getElementsByTagName('hotel_star')[0].firstChild.nodeValue + '</p>';
			sideBar += '<div class="hotelinfo"><p>Distance: ' + hotels[i].getElementsByTagName('hotel_distance')[0].firstChild.nodeValue + ' miles (approx)';
			sideBar += '<h3>Pricing</h3>';
			sideBar += '<p>Prices from: &pound;' + hotels[i].getElementsByTagName('prices_from')[0].firstChild.nodeValue + '</p></div>';
			sideBar += '<p><a href="' + hotels[i].getElementsByTagName('hotel_link')[0].firstChild.nodeValue + '?n=1&amp;d=' + laterooms_date + '" onclick="window.open(this.href, \'_blank\'); return false;">More info/book now</a>';		
			sideBar += '</div>';
			}
			catch(err){
			}
		}
		document.getElementById("accom").innerHTML = sideBar;
		map.setZoom(map.getBoundsZoomLevel(bounds));
		map.setCenter(bounds.getCenter());
	}	
	function showInfo(i) {
    	GEvent.trigger(gmarkers[i], "click");
  	}
	function showTooltip(marker) {
		tooltip.innerHTML = marker.tooltip;
		var point = map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
		var offset = map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
		var anchor = marker.getIcon().iconAnchor;
		var width = marker.getIcon().iconSize.width;
		var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width,- offset.y + point.y +anchor.y)); 
		pos.apply(tooltip);
		tooltip.style.display = "block";
		//alert(tooltip.innerHTML);
	}
	function toolOver(i) {
		showTooltip(gmarkers[i])
	}	
	function toolOut() {
		tooltip.style.display = "none";
	}
	function handleErrors() {
		document.getElementById("drivingdirections").style.display = 'block';
		document.getElementById("toggle-d").innerHTML = 'Hide Panel';
		document.getElementById("closeDirections").style.display = 'block';
		document.getElementById("accom").style.display = 'none';
		document.getElementById("toggle-ac").innerHTML = 'Show Panel';
		document.getElementById("venues").style.display = 'none';
		document.getElementById("toggle-v").innerHTML = 'Show Panel';
		document.getElementById("weather").style.display = 'none';
		
		directionsloaded = true;
		
		var postCodeWarning = "<strong>If you are entering a post code, just enter the first part (e.g. \'W12\' NOT \'W12 8QT\')</strong><br /><br />";
		if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
			document.getElementById("drivingdirections").innerHTML = postCodeWarning + "No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect. Error code: " + gdir.getStatus().code;
		else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
		    document.getElementById("drivingdirections").innerHTML = postCodeWarning + "A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known. Error code: " + gdir.getStatus().code;
		else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
		    document.getElementById("drivingdirections").innerHTML = postCodeWarning + "The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input. Error code: " + gdir.getStatus().code;
		else if (gdir.getStatus().code == G_GEO_BAD_KEY)
		    document.getElementById("drivingdirections").innerHTML = postCodeWarning + "The given key is either invalid or does not match the domain for which it was given. Error code: " + gdir.getStatus().code;
		else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
		    document.getElementById("drivingdirections").innerHTML = postCodeWarning + "A directions request could not be successfully parsed. Error code: " + gdir.getStatus().code;
		else document.getElementById("drivingdirections").innerHTML = postCodeWarning + "An unknown error occurred.";

	}
	function onGDirectionsLoad(){
		document.getElementById("closeDirections").style.display = 'block';
		document.getElementById("drivingdirections").innerHTML = '';
	    document.getElementById("drivingdirections").style.display = 'block';
		directionsloaded = true;
		// hide other nodes just in case
		document.getElementById("accom").style.display = 'none';
		document.getElementById("toggle-ac").innerHTML = 'Show Panel';
		document.getElementById("venues").style.display = 'none';
		document.getElementById("toggle-v").innerHTML = 'Show Panel';
		document.getElementById("weather").style.display = 'none';
	}
	function setDirections(fromAddress, toAddress, locale) {
		if ((fromAddress == '') || (fromAddress == 'Enter a town or city')) { alert('Please enter the address you\'re\ntravelling from'); return; }
		else if ((toAddress == '') || (toAddress == 'Enter a town or city')) { alert('Please enter the address you\'re\ntravelling to'); return;}
		else { gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": locale }); }
	}
	function closeDirections() {
		gdir.clear();
		directionsloaded = false;
		document.getElementById("closeDirections").style.display = 'none';
		
		if ( ((ceremony_lat == '') && (ceremony_lng =='')) || ((reception_lat == '') && (reception_lng =='')) || ((ceremony_lat == reception_lat) && (ceremony_lng == reception_lng))) {
			document.getElementById("drivingdirections").innerHTML = 'For directions to map marker locations click on a marker or on the item in the menu, select the \'directions\' tab and fill in the form. Your directions will be loaded automatically both here and on the map.</p>';
		}
		else {
			document.getElementById("drivingdirections").innerHTML = '<p>To display directions from the ceremony to the reception just click here:</p><form action="#" style="margin-top: 0;" onsubmit="setDirections(\'' + ceremony_lat + ',' + ceremony_lng + '\', \'' + reception_lat + ',' + reception_lng + '\', \'en\'); return false;"><input name="submit" type="submit" value="Get Directions!" /><br /></form><p>For directions to other locations click on the map marker or on the item in the menu, select the \'directions\' tab and fill in the form. Your directions will be loaded automatically both here and on the map.</p>';
		}
	}
	function toggleDirections(id) {
		if(document.getElementById("getHere" + id).style.display == 'none') {
			document.getElementById("getHere" + id).style.display = 'block';
			document.getElementById("getBack" + id).style.display = 'none';
		}
		else {
			document.getElementById("getHere" + id).style.display = 'none';
			document.getElementById("getBack" + id).style.display = 'block';
		}
	}
  	function toggleAccom() {
		if(document.getElementById("accom").style.display == 'none') {
			map.setZoom(map.getBoundsZoomLevel(bounds));
			map.setCenter(bounds.getCenter());
			document.getElementById("accom").style.display = 'block';
			document.getElementById("toggle-ac").innerHTML = 'Hide Panel';			
			document.getElementById("venues").style.display = 'none';
			document.getElementById("toggle-v").innerHTML = 'Show Panel';
			document.getElementById("weather").style.display = 'none';
			document.getElementById("drivingdirections").style.display = 'none';
			document.getElementById("toggle-d").innerHTML = 'Show Panel';
			document.getElementById("closeDirections").style.display = 'none';
		}
		else {
			document.getElementById("accom").style.display = 'none';
			document.getElementById("toggle-ac").innerHTML = 'Show Panel';
		}
	}
	function toggleVenues() {
		if(document.getElementById("venues").style.display == 'none') {
			
			if ( show_reception == 'true' ) {
				map.setCenter(new GLatLng(reception_lat, reception_lng), 14);
			}
			else {
				map.setCenter(new GLatLng(ceremony_lat, ceremony_lng), 14);
			}
			document.getElementById("venues").style.display = 'block';
			document.getElementById("toggle-v").innerHTML = 'Hide Panel';
			document.getElementById("weather").style.display = 'block';
			
			document.getElementById("accom").style.display = 'none';
			document.getElementById("toggle-ac").innerHTML = 'Show Panel';
			document.getElementById("drivingdirections").style.display = 'none';
			document.getElementById("toggle-d").innerHTML = 'Show Panel';
			document.getElementById("closeDirections").style.display = 'none';
		}
		else {
			document.getElementById("venues").style.display = 'none';
			document.getElementById("toggle-v").innerHTML = 'Show Panel';
			document.getElementById("weather").style.display = 'none';
		}
	}
	function toggleDrivingDirections() {
		if(document.getElementById("drivingdirections").style.display == 'none') {
			document.getElementById("drivingdirections").style.display = 'block';
			document.getElementById("toggle-d").innerHTML = 'Hide Panel';
			if (directionsloaded == true) {			
				document.getElementById("closeDirections").style.display = 'block';
			}
			document.getElementById("accom").style.display = 'none';
			document.getElementById("toggle-ac").innerHTML = 'Show Panel';
			document.getElementById("venues").style.display = 'none';
			document.getElementById("toggle-v").innerHTML = 'Show Panel';
			document.getElementById("weather").style.display = 'none';
		}
		else {
			document.getElementById("drivingdirections").style.display = 'none';
			document.getElementById("toggle-d").innerHTML = 'Show Panel';
			document.getElementById("closeDirections").style.display = 'none';
		}
	}
	
	var icon = new GIcon();
	icon.shadow = "http://static.weddingpath.co.uk/paths/templates/planning/maps/images/shadow.png";
	icon.iconSize = new GSize(25.0, 43.0);
	icon.shadowSize = new GSize(47.0, 43.0);
	icon.iconAnchor = new GPoint(12.0, 21.0);
	icon.infoWindowAnchor = new GPoint(12.0, 21.0);

	var bounds = new GLatLngBounds();
	
 	var map;
	map = new GMap2(document.getElementById("map"));
 	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.addControl(new google.maps.LocalSearch());		
		
	if ( show_reception == 'true' ) {
		map.setCenter(new GLatLng(reception_lat, reception_lng), 14);
	}
	else {
		map.setCenter(new GLatLng(ceremony_lat, ceremony_lng), 14);
	}
			
	//tooltips
	var tooltip = document.createElement("div");
	document.getElementById("map").appendChild(tooltip);
	tooltip.style.display = "none";

	var venues = '';
	var formattedDate = '';
	// add venues - wedding
	if (ceremony_date != '') { formattedDate = ' - ' + ceremony_date; }
	if ((ceremony_lat != '') && (ceremony_lng != '')) {
		icon.image = "http://static.weddingpath.co.uk/paths/templates/planning/maps/images/ceremony.png";
		addVenue(ceremony_lat, ceremony_lng, ceremony_blurb, 'Ceremony');
		venues += '<div class="venue"><h3 class="ceremony">Ceremony' + formattedDate + '</h3><p class="address">' + ceremony_address + '</p>';
		venues += '<p><a href="#" onclick="showInfo(' + (ii-1) + ');" onmouseover="toolOver(' + (ii-1) + ')" onmouseout="toolOut()">show me the ceremony location on the map</a></div>';
	}
	else {
		venues += '<div class="venue"><h3 class="ceremony">Ceremony' + formattedDate + '</h3><p class="address">Information not provided</p>';
	}
	// add venues - reception
	if ((reception_lat != '') && (reception_lng != '')) {
		icon.image = "http://static.weddingpath.co.uk/paths/templates/planning/maps/images/reception.png";
		addVenue(reception_lat, reception_lng, reception_blurb, 'Reception');
		venues += '<div class="venue no-border"><h3 class="reception">Reception</h3><p class="address">' + reception_address + '</p>';
		venues += '<p><a href="#" onclick="showInfo(' + (ii-1) + ');" onmouseover="toolOver(' + (ii-1) + ')" onmouseout="toolOut()">show me the reception location on the map</a></div>';
	}
	else {
		venues += '<div class="venue"><h3 class="reception">Reception</h3><p class="address">Information not provided</p>';
	}
	// add venue details to our sideBar
	document.getElementById("venues").innerHTML += venues;     	
	// add directions
	gdir = new GDirections(map, document.getElementById("drivingdirections"));
	GEvent.addListener(gdir, "load", onGDirectionsLoad);
	GEvent.addListener(gdir, "error", handleErrors);
	// load hotel data
	icon.image = "http://static.weddingpath.co.uk/paths/templates/planning/maps/images/hotel.png";
	loadHotels(map);
	
	closeDirections();
}
else { 
	alert("PLEASE make sure the web address you are typing in is a maps.weddingpath.co.uk address and NOT maps.weddingpath.com!!!.\nYou will then be able to see this map page.");
}