var pubArray = new Array(); //store all pub details
var pubMarkers = new Array(); //store markers
var previous; //keep track of what is highlighted
var map; //make map object global

//This defines the standard marker size
var markerIcon = new GIcon();
markerIcon.iconSize = new GSize(20, 30);
markerIcon.iconAnchor = new GPoint(6, 20);
markerIcon.infoWindowAnchor = new GPoint(5, 1);
markerIcon.infoShadowAnchor = new GPoint(9, 13);

//this function is standard across all pages on keanei.com
$(document).ready(function() {
	$("div.menuitem").corner("9px");
	$("div.menuitem").hover( function(){$(this).css("background-color","#AAAAFF"); }, 
							 function(){$(this).css("background-color","#F4F5FC"); } 
	); 
	
	$("div.menuitem").mouseup(function(event) {
		event.preventDefault();
		if (event.which == 2 | event.ctrlKey | event.shiftKey) {
			window.open( $(this).attr("url") );
		} else if (event.which == 1) {
			window.location = $(this).attr("url");
		}
	})
	 		 .hover(function(){
					$(this).addClass("cursor_pointer");},
				function(){
					$(this).removeClass("cursor_pointer");
				} 
	);
	
	$("#heading").corner("9px");
});

//this handles when a marker is clicked, or if a pub name is clicked. It builds output for the
//description field and displays the picture (with lightbox function)
function displayPubInfo(pubNum) {
	pubName = pubArray[pubNum][0];
	pubInfo = "Name: " + pubName + "<br/>";
	pubInfo += "Address: " + pubArray[pubNum][1] + "<br/>";
	pubInfo += "Nearest Tube station: "+ pubArray[pubNum][2] + "<br/>";
	pubInfo += "Order visited: " + pubArray[pubNum][3] + "<br/>";
	pubInfo += "Notes: " + pubArray[pubNum][4] + "<br/>";
	$("#pubdesc").html(pubInfo);
	pubPic = "<a class='pubpic' href='"+pubArray[pubNum][5]+"?imgmax=576' title='" + pubName + "'><img src='" + pubArray[pubNum][5] + "?imgmax=200' alt='" + pubName + "' style='border-style: none' /><span class='zoom-icon'><img src='samsmiths/zoom.png' width='20' height='20' alt='Zoom' style='border-style: none'></span></a>";
	$("#pubpic").html(pubPic);
	$("#pubpic a").lightBox();
}

//when a marker or pub name is clicked, this function is called. It changes the colour of the marker
//makes the pub name bold in the pub list, and displays the name of the pub in the 'message' div overlay.
//It then calls displayPubInfo to display the photo and notes at the bottom of the page.
function displayMarker(markerNumber) {
	pubMarkers[markerNumber].setImage(pubMarkers[markerNumber].getIcon().imageOn);
	pubMarkers[markerNumber].getIcon().current = pubMarkers[markerNumber].getIcon().imageOn;
	map.panTo(pubMarkers[markerNumber].getPoint());
	if (previous != undefined) {
		pubMarkers[previous].getIcon().current = pubMarkers[previous].getIcon().imageOut;
		pubMarkers[previous].setImage(pubMarkers[previous].getIcon().imageOut);
	}
	$("#name"+previous).css({'font-weight':'normal'});
	previous = markerNumber;
	var markerOffset = map.fromLatLngToDivPixel(pubMarkers[markerNumber].getPoint());
	var messageX = markerOffset.x - 15;
	var messageY = markerOffset.y + 15;
	$("#message").text(pubArray[markerNumber][0]);
	$("#message").show().css({ top:messageY, left:messageX });
	$("#name"+markerNumber).css({'font-weight':'bold'});
	displayPubInfo(markerNumber);
}

//this function creates marker objects, and adds the marker to the pubMarkers array, which is needed to keep track
//of what colour the marker is 
function createMarker(point, markerNumber) {
	var markerOpts = {};
	var nIcon = new GIcon(markerIcon);

	nIcon.imageOut = "http://www.keanei.com/samsmiths/marker.png";
	nIcon.imageOver = "http://www.keanei.com/samsmiths/marker_black.png";
	nIcon.imageOn = "http://www.keanei.com/samsmiths/marker_yellow.png";
	//set current colour to default - red
	nIcon.current = nIcon.imageOut;
	nIcon.image = nIcon.imageOut;

	markerOpts.icon = nIcon;
	markerOpts.title = "";
	
	var marker = new GMarker(point, markerOpts);
	//add marker to array
	pubMarkers[markerNumber] = marker;
	//set up Listener event, which will call the displayMarker function when marker is clicked
	GEvent.addListener(marker, "click", function() {
		marker.setImage(marker.getIcon().imageOn);
		displayMarker(markerNumber);
	});
	//these two Listeners handle the marker being hovered over by the mouse
	GEvent.addListener(marker, "mouseover", function() {
		marker.setImage(marker.getIcon().imageOver);
	});
	GEvent.addListener(marker, "mouseout", function() {
		marker.setImage(marker.getIcon().current);
	});
	return marker;
}

//Ronseal. This is called in the <body> onload part of the main page.
function initialize() {
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng( 51.51544625,-0.127716064), 12);
		map.setUIToDefault();
		map.removeMapType(G_PHYSICAL_MAP);
		var bounds = new GLatLngBounds();
		//This adds the 'message' div to the map, to allow the pub name to be displayed
		//without using an InfoWindow which is quite big
		$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

		//Get the data
		GDownloadUrl("samsmiths/pubs.xml", function(data, responseCode) {
			var xml = GXml.parse(data);
			//retrieve all <pub> elements
			var pubs = xml.documentElement.getElementsByTagName("pub");
			for (var i=0; i < pubs.length; i++) {
				var pub = pubs[i];
				var pubName = pub.getElementsByTagName("name")[0].firstChild.data;
				var pubLat = parseFloat(pub.getElementsByTagName("latitude")[0].firstChild.data);
				var pubLong = parseFloat(pub.getElementsByTagName("longitude")[0].firstChild.data);
				var pubAddr = pub.getElementsByTagName("address")[0].firstChild.data;
				var pubTube = pub.getElementsByTagName("tube")[0].firstChild.data;
				var pubOrder = pub.getElementsByTagName("order")[0].firstChild.data;
				var pubDesc = pub.getElementsByTagName("description")[0].firstChild.data;
				var pubPic = pub.getElementsByTagName("picture")[0].firstChild.data;
				//store pub details in pubArray
				pubArray[i] = new Array(pubName, pubAddr, pubTube, pubOrder, pubDesc, pubPic);

				var point = new GLatLng(pubLat, pubLong);
				var marker = createMarker(point, i);
				//after the marker is created, add it to the map
				map.addOverlay(marker);
				bounds.extend(point);
			}
			pubList = "";
			//create the list of pub names to display on the right of the map
			for (var i=0; i < pubArray.length; i++) {
				pubList += "<span id='name"+i+"' class='namelink'><a href='#' onclick='javascript:displayMarker("+i+");return false;'>" + pubArray[i][0] + "</a></span><br/>";
			}
			document.getElementById("pubs").innerHTML = pubList;
			map.setZoom(map.getBoundsZoomLevel(bounds));
			map.setCenter(bounds.getCenter());
		});
	}
}