var map;			// GMap2 - The google map
var chosenMarker;	// GMarker - The glowing marker which overlaps the original marker
var data = new Array(); // Stores information about skate parks, generated by JS-PHP

// longitude is negative because Tacoma roughly 122.5ºW, or -122.5ºE
homeLatitude = 47.250339;
homeLongitude = -122.307832;
homeZoom = 10;

var normalIcon = makeIcon("red");
var selectIcon = makeIcon("gray");

/* 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() {
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.setCenter(new GLatLng(homeLatitude, homeLongitude), homeZoom);
	
	chosenMarker = new GMarker(new GLatLng(0,0), {icon: selectIcon});
	
	// Use prototype to provide a location to store extra information within GMarker
	GMarker.prototype.id = 0;
	
	GEvent.addListener(map, "click", function(marker, point) {
		// If the user has clicked on a marker...
		if (marker && marker != chosenMarker) {
			// Move the highlighting marker to overlap the clicked marker
			map.removeOverlay(chosenMarker);
			chosenMarker.setPoint(marker.getPoint());
			map.addOverlay(chosenMarker);
			
			// Display the data on the right
			document.getElementById("result").innerHTML = makeHTML(data[marker.id]);
		}
	});
	
	showAllMarkers();
}

function makeHTML(data) {
	var id = data[0];
	var title = data[1];
	var address = data[2];
	var open_year = data[3];
	var size_sqft = data[4];
	var amenities = data[5];
	var skill_level = data[6];
	var hours = data[7];
	var security = data[8];
	var designer = data[9];
	var police_reports = data[10];
	
	var result = "";
	if (title) {
		result += "<b>"+title+"</b>";
	}
	
	if (address) {
		result += "<p>Address: "+address+"</p>";
	}
	
	if (open_year) {
		result += "<p>Opening Year: "+open_year+"</p>";
	}
	
	if (size_sqft) {
		result += "<p>Size: "+size_sqft+" sq. ft.</p>";
	}
	
	if (amenities) {
		result += "<p>Amenities: "+amenities+"</p>";
	}
	
	if (skill_level) {
		result += "<p>Skill Level: "+skill_level+"</p>";
	}
	
	if (hours) {
		result += "<p>Hours: "+hours+"</p>";
	}
	
	if (security) {
		result += "<p>Security: "+security+"</p>";
	}
	
	if (designer) {
		result += "<p>Designers: "+designer+"</p>";
	}
	
	if (police_reports) {
		result += "<p>Police Reports Generated: "+police_reports+"</p>";
	}
	
	return result;
}

function addMarker(latitude, longitude, id) {
	var marker = new GMarker(new GLatLng(latitude, longitude), {icon: normalIcon});
	marker.id = id;
	map.addOverlay(marker);
}