function returnto() { map.returnToSavedPosition(); }
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.blue=new GIcon(baseIcon, '../images/mm_20_blue.png');
		icons.green=new GIcon(baseIcon, '../images/mm_20_green.png');
		icons.purple=new GIcon(baseIcon, '../images/mm_20_purple.png');
		var myClusterIcon=new GIcon(baseIcon, '../images/mm_20_white.png');
		
		var marker, category;
		
		for (var i=0; i<json.length; i++) {
			if(json[i].acreage == '0 - 10'){category='red';} 
			if(json[i].acreage == '10 - 50'){category='blue';}
			if(json[i].acreage == '50 - 100'){category='green';}
			if(json[i].acreage == '100 - plus'){category='purple';}

			marker=newMarker(new GLatLng(json[i].lat, json[i].lng), json[i].id, json[i].thumb, json[i].quick, json[i].address, json[i].county, json[i].size, json[i].price, json[i].watermark2, json[i].name, json[i].acreage, 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.fitMapMaxZoom=10;
		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">TOGGLE ACREAGE:</br><img src=../images/mm_20_red.png>0 - 10:&nbsp;<input type="checkbox" checked="checked" onclick="toggleMarkers(this, \'red\')" /><br /><img src=../images/mm_20_blue.png>10 - 50:&nbsp;<input type="checkbox" checked="checked" onclick="toggleMarkers(this, \'blue\')" /><br /><img src=../images/mm_20_green.png>50 - 100:&nbsp;<input type="checkbox" checked="checked" onclick="toggleMarkers(this, \'green\')" /><br /><img src=../images/mm_20_purple.png>100 - Plus:&nbsp;<input type="checkbox" checked="checked" onclick="toggleMarkers(this, \'purple\')" /></div>';
		var control=new HtmlControl(html);
		map.addControl(control, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,7)));
		
		
				var html='<input type="button" id="btn_load" value="RESET VIEW" onClick="returnto();" />';
		var control=new HtmlControl(html);
		map.addControl(control, new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(7,7)));
		
	}
}

function newMarker(markerLocation, markerId, markerThumb, markerQuick, markerAddress, markerCounty, markerSize, markerPrice, markerWatermark2, markerName, markerAcreage, category) {
	var marker=new GMarker(markerLocation, {icon:icons[category], title:'['+markerName+']: '+ markerSize +' in '+ markerCounty +' County'});
	marker.category=category;
	GEvent.addListener(marker, 'click', function() {
		marker.openInfoWindowHtml('<table width=460><tr><td><a href=http://www.ohiolandconnection.com/property1.php?category_id='+markerId+'><div id=watermark_box><img src=http://www.ohiolandconnection.com/'+markerThumb+' height=110 border=0/><img src=http://www.ohiolandconnection.com/photos/'+markerWatermark2+' class=watermark height=110/></div></a></td><td valign=top><table cellpadding=0 cellspacing=0 border=0><tr><td valign=top><a href=http://www.ohiolandconnection.com/property1.php?category_id='+markerId+'><h2><font color=#a15a2c>'+markerName+'</font></h2></a></td></tr><tr><td width=210><b>'+markerQuick+'</b>  <a href=http://www.ohiolandconnection.com/property1.php?category_id='+markerId+'>MORE</a></td></tr><tr><td valign=bottom><table width=250><tr><td bgcolor=#CCCCCC>Address:</td><td bgcolor=#EEEEEE width=200>'+markerAddress+'</td></tr><tr><td bgcolor=#CCCCCC>County:</td><td bgcolor=#EEEEEE>'+markerCounty+'</td></tr><tr><td bgcolor=#CCCCCC>Size:</td><td bgcolor=#EEEEEE>'+markerSize+'</td></tr><tr><td bgcolor=#CCCCCC>Price:</td><td bgcolor=#EEEEEE>'+markerPrice+'</td></tr></table></td></tr></table></td></tr></table>');
	});
	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();
}