var map;  // The google map
var theChosenMarker;  // Will contain a reference to the "chosen" marker
var mHash = new Array();	// A hash of markers
//var mCount = 0;            // How many markers are on the screen
//var mArray = new Array();  // An array of references to markers
var currentID = 0;  // The ID of the last marker selected

worldLatitude = 55;
worldLongitude = 0;
worldZoom = 0;

// longitude is negative because Tacoma roughly 122.5ºW, or -122.5ºE
downtownTacomaLatitude = 47.24730;
downtownTacomaLongitude = -122.44400;
downtownTacomaZoom = 13;

northAmericaLatitude = 39.774769;
northAmericaLongitude = -96.855468;
northAmericaZoom = 2;

southAmericaLatitude = -16.972741;
southAmericaLongitude = -68.027343;
southAmericaZoom = 2;

africaLatitude = 14.093957;
africaLongitude = 29.003906;
africaZoom = 2;

europeLatitude = 57.231502;
europeLongitude = 22.5;
europeZoom = 2;

asiaLatitude = 31.203404;
asiaLongitude = 98.789062;
asiaZoom = 2;

australiaLatitude = -14.434680;
australiaLongitude = 110.566406;
australiaZoom = 2;

homeLatitude = worldLatitude;
homeLongitude = worldLongitude;
homeZoom = worldZoom;


var bMarker = makeIcon("red"); // The default marker
var zMarker = makeIcon("yellow"); // The highlighted marker (icon should not have an empty shadow)

/* Make an icon based on the folder the icon information is in. */
function makeIcon(color) {
	var xMarker = new GIcon();
	xMarker = new GIcon();
	xMarker.image = "markers/"+color+"/marker.png";
	xMarker.iconSize = new GSize(20, 34);
	xMarker.shadow = "markers/"+color+"/shadow.png";
	xMarker.printImage = "markers/"+color+"/markerie.gif";
	xMarker.printShadow = "markers/"+color+"/shadowie.gif";
	xMarker.mozPrintImage = "markers/"+color+"/markerff.gif";
	xMarker.mozPrintShadow = "markers/"+color+"/shadowff.gif";
	xMarker.shadowSize = new GSize(37, 34);
	xMarker.iconAnchor = new GPoint(9, 34);
	return xMarker;
}

function load() {
  if (GBrowserIsCompatible()) {
	map = new GMap2(document.getElementById("map"));
	//map.addControl(new GSmallMapControl());
	map.setCenter(new GLatLng(homeLatitude, homeLongitude), homeZoom);
	GMarker.prototype.data = "";
	
	// Report the bounds, will overwrite hotspot info when map moved
	// Comment out when not using to determine where to point map
	//GEvent.addListener(map, "moveend", function () { gps(); });
	
	/* Because of the mouse-over property, you will technically be clicking on "theChosenMarker" */
	GEvent.addListener(map, "click", function(marker, point) {
		// If the user clicks on a marker (which is the chosen marker due to its
		// 'cover on hover' behavior, then update the list of custom picks
		if (marker) {
			if (theChosenMarker == null) {
				theChosenMarker = new GMarker(marker.getPoint(), {icon: zMarker});
			}
			
			if (marker == theChosenMarker) {
				// Chosen was clicked, no change needed
			} else {
				// These two lines essentially bring the chosen icon image to the front
				// of the map, overlapping the marker and appearing highlighted.
				map.removeOverlay(theChosenMarker);
				map.addOverlay(theChosenMarker);
				theChosenMarker.setPoint(marker.getPoint());
				
				// Display the hidden marker's message
				document.getElementById("result").innerHTML = makeHTML(marker.data);
				currentID = marker.data[0];
			}
		}
	});
	
	updateMarkers();
  }
}

/*
function gps() {
	var center = map.getCenter();
	var bounds = map.getBounds();
	var zoom = map.getZoom();
	document.getElementById("result").innerHTML =
		"<i>" + 
		"Center at " + center.toString() + "<br />" +
		"Zoom: " + zoom + "<br />" +
		"SW = " + bounds.getSouthWest() + "<br />" +
		"NE = " + bounds.getNorthEast() + "</i>"
		;
}
*/



function zoomWorld() {
	map.setCenter(new GLatLng(worldLatitude, worldLongitude), worldZoom);
}
function zoomNorthAmerica() {
	map.setCenter(new GLatLng(northAmericaLatitude, northAmericaLongitude), northAmericaZoom);
}
function zoomSouthAmerica() {
	map.setCenter(new GLatLng(southAmericaLatitude, southAmericaLongitude), southAmericaZoom);
}
function zoomAfrica() {
	map.setCenter(new GLatLng(africaLatitude, africaLongitude), africaZoom);
}
function zoomEurope() {
	map.setCenter(new GLatLng(europeLatitude, europeLongitude), europeZoom);
}
function zoomAsia() {
	map.setCenter(new GLatLng(asiaLatitude, asiaLongitude), asiaZoom);
}
function zoomAustralia() {
	map.setCenter(new GLatLng(australiaLatitude, australiaLongitude), australiaZoom);
}

function zoomIn() { map.zoomIn(); }
function zoomOut() { map.zoomOut(); }


function createMarker(point, data) {
	
	marker = new GMarker(point, {icon: bMarker});
	
	marker.data = data;
	
	// No mouseover behavior
	//GEvent.addListener(marker, "mouseover", function() { });
	
	return marker;
}


/* variable "data" is an array containing information in the order
 * displayed on spots.php and returns that information formatted for HTML. */
function makeHTML(data) {
	var id = data[0];
	var where_taken = data[1];
	var who_pictured = data[2];
	var where_from = data[3];
	var date_taken = data[4];
	var date_published = data[5];
	var taken_by = data[6];
	var photo = data[7];
	var why_went = data[11];
	var comments = data[8];
	var latitude = data[9];
	var longitude = data[10];
	
	var result = "";
	
	result += "<p><b>"+where_taken+"</b></p>";
	result += '<p><img src="photos/'+photo+'" alt="(Photo)" /></p>';
	result += "<p>"+"Who's pictured (left to right): "+who_pictured+"<br />"+
					"Where they're from: "+where_from+"<br />"+
					"Date the photo was taken: "+date_taken+"<br />"+
					"Date the paper was published: "+date_published+"<br />"+
					"Photo taken by: "+taken_by;
	if (why_went != "") {
		result += "<br />Why we went: "+why_went;
	}
	if (comments != "") {
		result += "<br />Other comments: "+comments;
	}
	result += "</p>";
	
	return result;
}

/* Print all markers to the map. */
function updateMarkers() {
	
	var url = "data.php";
	
	/* Information about GXmlHttp, which the Google API says simply creates an XmlHttpRequest
 	 * can be found around half way down the page, at the title "Object Properties" at...
 	 *    http://developer.apple.com/internet/webcontent/xmlhttpreq.html */
	var request = GXmlHttp.create();
	
	request.open("GET", url);
	
	request.onreadystatechange = function() {
		
		// if (request.readyState == "completed") {
		if (request.readyState == 4) {
			
			// Display markers
			var response = request.responseText;
			var rows = response.split("\n");
			for (var i=0; i<rows.length-1; i++) {
				var record = rows[i];
				var data = record.split("|");
				if (data.length == 12) {
					var point = new GLatLng(data[9],data[10]);
					var marker = createMarker(point, data);
					map.addOverlay(marker);
					mHash[data[0]] = marker;
				}
			}
			
			if (theChosenMarker != null) {
				var chosenPoint = theChosenMarker.getPoint();
				map.addOverlay(theChosenMarker);
			}
		}
	};
	
	request.send(null);
	
}