showBallon = true;
if(window.addEventListener){
	window.addEventListener( "load", myOnload, false );
} else {
	window.attachEvent( "onload", myOnload );
}

if(window.addEventListener){
	window.addEventListener( "unload", GUnload, false );
} else {
	window.attachEvent( "onunload", GUnload );
}
var map, cluster;


var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(20, 20);
icon.iconAnchor = new GPoint(5, 20);
icon.infoWindowAnchor = new GPoint(5, 15); 


function myOnload() {
	if (GBrowserIsCompatible()) {
		
		
		
		
			map=new GMap2(document.getElementById('map'));
			var defaultMapType = G_HYBRID_MAP;
			map.setMapType(G_HYBRID_MAP);
      		map.setUIToDefault();
		
		
		
		
//		map.removeMapType(G_SATELLITE_MAP); 

		var marker, markersArray=[];
		
		//	json data already loaded from marker_data_01.php
		
//		
		if(json.length==0)
			return true;
		
		
		for (var i=1; i<json.length; i++) {
			newIcon=new GIcon(icon,"http://labs.google.com/ridefinder/images/mm_20_green.png");  	
				
			marker=newMarker(new GLatLng(json[i].lat, json[i].lng), json[i],newIcon);
			markersArray.push(marker);
			
		}
		
		cluster=new ClusterMarker(map, { markers:markersArray } );
		cluster.fitMapToMarkers();
		
		if(json.length==2) {
			map.setZoom(13);
		}
		
		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:3px 3px 3px 3px;margin-left:100px;">Enable clustering: <input type="checkbox" checked="checked" onclick="toggleClustering()" /></div>';
		var control=new HtmlControl(html);
		map.addControl(control, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,7)));
	}
}

function newMarker(markerLocation, gmMarker,customIcon) {
	var marker=new GMarker(markerLocation, {title:gmMarker.property, icon:customIcon  });
	
	if(propertyPage == false) {
		GEvent.addListener(marker, 'click', function() {
			tooltip = '<table width="280" border="0"><tr><td valign="top" width="100">';
			tooltip += '<img src="'+gmMarker.mainPic+'" width="100" style="border:2px solid #C2D0DB" />';
			tooltip += '</td>';
			tooltip += '<td align="left" height="85" valign="top" class="info"><p><b>'+gmMarker.property+'</b><br>'+gmMarker.address+'<br>'+gmMarker.city+'  '+gmMarker.state+'   '+gmMarker.zip+'<br><p style="align:right;padding-top:5px;"><a href="'+gmMarker.link+'">Click for details</a></p></p></td>';
			tooltip += '</tr></table>';
			
				
			marker.openInfoWindowHtml(tooltip);
		});
	}
	
	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
}