var map, cluster, icons={}, markersArray=[];

function myOnLoad() {
	if (GBrowserIsCompatible()) {
		map=new GMap2(document.getElementById('map'));
		map.setCenter(new GLatLng(0, 0), 0, G_NORMAL_MAP);
		
		map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7)));
		map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 28)));
		
		var baseIcon=new GIcon();
		baseIcon.iconSize=new GSize(12, 20);
		baseIcon.iconAnchor=new GPoint(5, 18);
		baseIcon.infoWindowAnchor=new GPoint(5, 6);
		baseIcon.shadow='images/mm_20_shadow.png';
		baseIcon.shadowSize=new GSize(22, 20);
		
		icons.red=new GIcon(baseIcon, 'images/mm_20_red.png');
		icons.green=new GIcon(baseIcon, 'images/mm_20_green.png');
		var myClusterIcon=new GIcon(baseIcon, 'images/mm_20_white.png');
		
		var marker, category;
		
		for (var i=0; i<json.length; i++) {
			if(i % 2){
				category='red';
			} else {
				category='green';
			}
			marker=newMarker(new GLatLng(json[i].lat, json[i].lng), json[i].id, category);
			markersArray.push(marker);
		}
		
		//	add markers to map using traditional addOverlay method instead of letting ClusterMarker add them to map
		//	this will initialise the marker's isHidden method correctly
		for(i=markersArray.length-1; i>=0; i--){
			map.addOverlay(markersArray[i]);
		}
		
		cluster=new ClusterMarker(map, { markers:markersArray, clusterMarkerIcon:myClusterIcon } );
		cluster.fitMapToMarkers();
		
		map.savePosition();	//	enables the large map control centre button to return the map to initial view
		
		//	add an HtmlControl to enable toggling of the ClusterMarker cluster function
		//	see http://googlemapsapi.martinpearman.co.uk/htmlcontrol for more info on HtmlControl
		var html='<div class="htmlControl" style="padding:0px 3px 3px 3px">Enable clustering:&nbsp;<input type="checkbox" checked="checked" onclick="toggleClustering()" /><br />Show red markers:&nbsp;<input type="checkbox" checked="checked" onclick="toggleMarkers(this, \'red\')" /><br />Show green markers:&nbsp;<input type="checkbox" checked="checked" onclick="toggleMarkers(this, \'green\')" /></div>';
		var control=new HtmlControl(html);
		map.addControl(control, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,7)));
	}
}

function newMarker(markerLocation, markerId, category) {
	var marker=new GMarker(markerLocation, {icon:icons[category], title:'Marker['+markerId+']'});
	marker.category=category;
	GEvent.addListener(marker, 'click', function() {
		marker.openInfoWindowHtml('<p>Marker['+markerId+'] clicked.</p>');
	});
	return marker;
}

function toggleClustering() {
	cluster.clusteringEnabled=!cluster.clusteringEnabled;
	cluster.refresh(true);	//	true required to force a full update of the markers - otherwise the update would occur next time that the map is zoomed or the active markers change
}

function toggleMarkers(checkbox, category){
	if(checkbox.checked){
		for(var i=markersArray.length-1; i>=0; i--){
			if(markersArray[i].category===category){
				markersArray[i].show();
			}
		}
	} else {
		for(var i=markersArray.length-1; i>=0; i--){
			if(markersArray[i].category===category){
				markersArray[i].hide();
			}
		}
	}
	cluster.refresh();
}