// Bits of code taken from:
// http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
// for some of the style sheet - fluid DIVs

var pubArray = new Array();
// pubArray is a global array to keep pub info in. Structure:
//0 - name
//1 - latitude
//2 - longitude
//3 - address
//4 - nearest Tube station
//5 - order that we visited the pub in
//6 - description
//7 - link to a picture
var pubMarkers = new Array(); //store markers
var current = -1; //keep track of what is highlighted
var map; //make map global
var bounds = new google.maps.LatLngBounds();

var defaultMarkerImage = new google.maps.MarkerImage('images/marker.png', new google.maps.Size(20, 34));
var hoverMarkerImage = new google.maps.MarkerImage('images/marker_black.png', new google.maps.Size(20, 34));
var currentMarkerImage = new google.maps.MarkerImage('images/marker_yellow.png', new google.maps.Size(20, 34));

//process the pub data that has been sent as json from pubinfo.php
function processPubs(pubData) {
	for (i = 0; i < pubData.length; i++) {
		pubArray[i] = new Array(pubData[i][1], pubData[i][2], pubData[i][3], pubData[i][4], pubData[i][6], pubData[i][7], pubData[i][8], pubData[i][9]);

		var markerPosition = new google.maps.LatLng(pubArray[i][1], pubArray[i][2]);
		bounds.extend(markerPosition);
		createMarker(markerPosition, i);
	}
	
	map.fitBounds(bounds);

	//now create list of pubs to display next to map
	var pubList = "";
	for (var i=0; i < pubArray.length; i++) {
		pubList += "<span id='name"+i+"' class='namelink'><a href='#' onclick='javascript:displayInfo("+i+");return false;'>" + pubArray[i][0] + "</a></span><br/>";
	}
		
	$("#listDiv").html(pubList);

}

//this function creates a marker object
function createMarker(markerPosition, number) {
	var createdMarker = new google.maps.Marker({
		position: markerPosition,
		icon: defaultMarkerImage,
		map: map,
		zIndex: number
	});

	pubMarkers[number] = createdMarker;
	
	google.maps.event.addListener(createdMarker, 'click', function() {
		displayInfo(number);
	});
	
	//these two Listeners handle the marker being hovered over by the mouse - not happy with this, is there a better way?
	google.maps.event.addListener(createdMarker, 'mouseover', function() {
		pubMarkers[number].setIcon(hoverMarkerImage);
	});
	google.maps.event.addListener(createdMarker, 'mouseout', function() {
		if (number == current) {
			pubMarkers[number].setIcon(currentMarkerImage);		
		} else {
			pubMarkers[number].setIcon(defaultMarkerImage);
		}
	});
}

//this function is called if either a marker is clicked or the pub name is clicked
function displayInfo(markerNumber) {
	map.panTo(pubMarkers[markerNumber].getPosition());
	 
	if (current > -1) {
		$("#name"+current).css({'font-weight':'normal'});
		pubMarkers[current].setIcon(defaultMarkerImage);
		pubMarkers[current].setZIndex(current);
	}
	$("#name"+markerNumber).css({'font-weight':'bold'});
	pubMarkers[markerNumber].setIcon(currentMarkerImage);
	pubMarkers[markerNumber].setZIndex(50);
	
	pubName = pubArray[markerNumber][0];
	pubPicture = pubArray[markerNumber][7];
	
	var pubPic = "<a class='pubpic lightbox-enabled' onclick='$(this).lightbox({start:true,events:false}); return false;' href='" + pubPicture +"' title='" + pubName + "'><img src='" + pubPicture + "?imgmax=150' alt='" + pubName + "' style='border-style: none' /><span class='zoom-icon'><img src='images/zoom.png' width='20' height='20' alt='Zoom' style='border-style: none'></span></a>";	
	$("#picDiv").html(pubPic);

	var pubInfo = "Name: " + pubName + "<br/>";
	pubInfo += "Address: " + pubArray[markerNumber][3] + "<br/>";
	pubInfo += "Nearest Tube station: "+ pubArray[markerNumber][4] + "<br/>";
	pubInfo += "Order visited: " + pubArray[markerNumber][5] + "<br/>";
	pubInfo += "Notes: " + pubArray[markerNumber][6] + "<br/>";
	$("#detailsDiv").html(pubInfo);
	
	current = markerNumber;
}

//call this function when page loaded
function initialize() {
	//set up Google Maps options and instantiate map
	var latlng = new google.maps.LatLng(51.51544625, -0.127716064);

	var myOptions = {
		zoom: 12,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("mapDiv"), myOptions);
	
 	//get pub info - will go from here to processPubs
	$.getScript("http://www.samsmithschallenge.co.uk/pubinfo.php");
}