/**
* The map DIV must contain a hidden input field containing that JSON encoded
* string of the POI being plotted.
*
* @param string Map container ID
* @return void
*/
function renderPoiMap(mapId, options) {

	// Check compatibility
	var mapEl = $('#'+mapId);
	if(!GBrowserIsCompatible()) {
		mapEl.html("Sorry, your browser does not support google maps.");
		return false;
	}

	// Extract POI data
	var points = $.evalJSON($('#'+mapId+' input[type=hidden]').val());

	// Calculate a bounding box to show all markers initially
	var compass = {n:null, s:null, e:null, w:null};
	for(var i=0; i<points.length; i++) {
		points[i].longitude = parseFloat(points[i].longitude);
		points[i].latitude = parseFloat(points[i].latitude);
		compass.n = compass.n===null ? points[i].longitude : Math.max(points[i].longitude, compass.n);
		compass.e = compass.e===null ? points[i].latitude : Math.max(points[i].latitude, compass.e);
		compass.s = compass.s===null ? points[i].longitude : Math.min(points[i].longitude, compass.s);
		compass.w = compass.w===null ? points[i].latitude : Math.min(points[i].latitude, compass.w);
	}
	var ne = new GLatLng(compass.e+0.01, compass.n+0.01);
	var sw = new GLatLng(compass.w-0.01, compass.s-0.01);
	var bb = new GLatLngBounds(sw, ne);

	// Create the map and center
	var map = new GMap2(document.getElementById(mapId));
	var mapUi = new GMapUIOptions(new GSize(mapEl.width, mapEl.height()));
	//var mapType = new GMapType();
	map.setUI(mapUi);
	map.setCenter(bb.getCenter(), map.getBoundsZoomLevel(bb));
	map.setMapType(G_SATELLITE_MAP);

	// Create a base icon for all markers
	var baseIcon = new GIcon(G_DEFAULT_ICON);
	baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);

	// Plot all points
	var markerPool = {};
	for(var i=0; i<points.length; i++) {
		var point = points[i];
		var plot = new GLatLng(parseFloat(point.latitude), parseFloat(point.longitude));

		// Create a lettered icon for this point using our icon class
		var letter = String.fromCharCode("A".charCodeAt(0) + i);
		var letteredIcon = new GIcon(baseIcon);
		letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";

		// Set up our GMarkerOptions object
		var marker = new GMarker(plot, {
			icon: letteredIcon,
			title: point.label,
			letter: letter,
			pointData: point
		});
		marker.bindInfoWindowHtml('<p><strong>'+($('<p></p>').html(point.label).html())+'</strong></p>'+point.summary, {
			maxWidth: 400
		});
		if(options && options.click) {
			GEvent.addListener(marker, 'click', options.click);
		}
		/*GEvent.addListener(marker, 'click', function() {
			var letter = this.$.letter;
			self.location = '#plot'+letter;
			return false;
		});*/

		// Add click handler to marker
		//GEvent.addListener(marker, "click", function() {
		//	this.openInfoWindow();
		//});

		// Add marker to the map
		map.addOverlay(marker);

		// Add to pool
		if(!markerPool[point.latitude+','+point.longitude]) {
			markerPool[point.latitude+','+point.longitude] = [];
		}
		markerPool[point.latitude+','+point.longitude].push(marker);
	}

	// Some hackery to un-overlap markers with the same coords
	GEvent.addListener(map, 'zoomend', function(oldLvl, newLvl) {
		spacifyMarkers(markerPool, newLvl);
	});
	spacifyMarkers(markerPool, map.getZoom());
}

function spacifyMarkers(markers, zoom) {
	var scale = [20, 40, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000, 20000, 50000, 100000, 200000, 500000, 1000000, 2000000, 2000000, 2000000];
	var mag = 19-zoom;
	for(var i in markers) {
		if(markers[i].length>1) {
			for(var j=0; j<markers[i].length; j++) {
				markers[i][j].setLatLng(new GLatLng(markers[i][j].$.pointData.latitude, markers[i][j].$.pointData.longitude+(j*0.000001*scale[mag])));
			}
		}
	}
}