// show an  array or xml file of property markers
var marr = new Array();
var map;
var ovmap;
var clusterer;
var sidebar_html;
var bounds;
var baseIcon = new GIcon();

function load_map(arr)
{
	show_markers(arr);
}
function show_markers(arr)
{
		// Create the map
		// if arr is defined then arr.lat and arr.lng must exist

	zoom = 6;
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	if (arr)
	{
		if (typeof(arr.zoom) != 'undefined')
			zoom = arr.zoom;
		map.setCenter(new GLatLng(arr.lat, arr.lng), zoom);
	}
	else
		map.setCenter(new GLatLng(27.74166457713348, -81.5), zoom);
	ovmap = new GOverviewMapControl();
	map.addControl(ovmap);
	ovmap.hide(true);
	bounds = new GLatLngBounds();

		// map.addControl(new GOverviewMapControl());
	clusterer = new Clusterer(map);
		// set the clusterer parameters if you dont like the defaults
	clusterer.maxVisibleMarkers = 100;
	clusterer.gridSize = 20;
	clusterer.minMarkersPerClusterer = 5;
	clusterer.maxLinesPerInfoBox = 6;

		// Global variables
	sidebar_html = "";
		
		// Create the "tiny" marker base icon
	baseIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
	baseIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	baseIcon.iconSize = new GSize(12, 20);
	baseIcon.shadowSize = new GSize(22, 20);
	baseIcon.iconAnchor = new GPoint(6, 20);
	baseIcon.infoWindowAnchor = new GPoint(5, 1);
}		
function xml_markers(file,bound)
{
		// Download the xml create the html,caption etc.  for the infowindow
	if (!file)
		file='/ggmarkers.php3';			// this goes with show_markers.js
	GDownloadUrl(file, function(data, responseCode)
	{
		var xml = GXml.parse(data);
		
		var markers = xml.documentElement.getElementsByTagName("marker");
		var	cluster='';
		if (markers.length > 100)
			cluster='Y';
		for (var i = 0; i < markers.length; i++)
		{
			var	mar = new Object();
			mar.lat = parseFloat(markers[i].getAttribute("lat"));
			mar.lng = parseFloat(markers[i].getAttribute("lng"));
			var point = new GLatLng(mar.lat,mar.lng);
	
			mar.house = markers[i].getAttribute("house_id");
			mar.sleeps = markers[i].getAttribute("sleeps");
			mar.html = markers[i].getAttribute("html");
			mar.name = markers[i].getAttribute("name");
			mar.image = markers[i].getAttribute("image");
			mar.caption = markers[i].getAttribute("caption");
			mar.type = markers[i].getAttribute("type");
			mar.video = markers[i].getAttribute("video");
				// Create the markers
				//var marker = createTabbedMarker(point,html1,html2);
			var marker = createTabbedMarker(point,mar);
							// Swap below to bring in Clusterer
			if (cluster == 'Y')
				clusterer.AddMarker(marker,mar.caption);
			else
				map.addOverlay(marker,mar.caption);
		}
		if (typeof(bound) != 'undefined')
		{
			set_bounds();
		}
	
		// Write the html to the sidebar
		document.getElementById("sidebar").innerHTML = '<table class="smalltext1blk" id="t1" ><tr><th>&nbsp;</th><th align="left">Town</th><th align="left">Type</th><th>Sleeps</th></tr>' + sidebar_html + '</table>';
	});	
}	
function set_bounds()
{
	//map.setCenter(mid_marker.getPoint());
	//point = map.getCenter();
	map.setCenter(bounds.getCenter());
//var	zoom;
	var zoom = map.getBoundsZoomLevel(bounds);
	if (zoom > 10) zoom = 10;
	if (zoom > 5)
		zoom = zoom -1;
	map.setZoom(zoom);
}
function createTabbedMarker(point,mar)
{
	tl = 'Sleeps '+mar.sleeps+' in '+mar.caption;
	var marker = new GMarker(point, { icon:baseIcon, title:tl} );

			// build an array of objects for use by myclick etc.
	mar.marker = marker;
	var i = marr.push(mar) -1;
	
	//  open the tabbed info window when clicking the sidebar links
	// A function to create a tabbed marker and setup the event window
	GEvent.addListener(marker, "click", function()
	{
		myWindow(mar);
	});

	bounds.extend(point);

	sidebar_html += '<tr><td><a href="javascript:myclick(' + i + ')"><img src="http://labs.google.com/ridefinder/images/mm_20_red.png" style="border:none; padding:0px;"></a></td>';
	sidebar_html += '<td style="width:125px;"><a href="javascript:myclick(' + i + ')" style="text-decoration:none; font-size:12px">' + mar.caption + '</a></td>';
	sidebar_html += '<td>' + mar.type + '</td>';
	sidebar_html += '<td align="center">' + mar.sleeps + '</td></tr>';
	return marker;
}
		
function myclick(i)
{
	var mar = marr[i];
	myWindow(mar);
}
function myWindow(mar)
{
	tab1 = '<table width="320px"><tr><td width="100px" height="120px">' + mar.image + '</td><td width="200px">Sleeps: ' + mar.sleeps + ' in ' + mar.caption + '<br><br>Click the "image" for full details<br><br>' + mar.name + '</td></tr></table>';
	tab2 = '<table width="320px"><tr><td width="320px">' + mar.html + '</td></tr></table>';
	tab3h = 'Images';
			// next calls a frame which calls ajax repeatedly
			//  alternatives are
			//  1. call a frame once as in JS/inner.htm (test on mozilla fails)
			//			Adv. Faster as only one call
			//  2. call a fram which does next/prev to itself.
			//     		Adv. Simpler - Disadv. Slower as repeated frame calls
			//  3. store array in a session variable - no need to rebuild
			//			Adv. No file test on image.


	tab3 = '<object type="text/html"  data="/gg_inner.php3?imid='+mar.house+'" height="140px" width="250px"></object>';
	//	iframe fails in mozilla
	//tab3 = '<iframe src="/gg_inner.php3?imid='+mar.house+'" height="120px" width="320px" frameborder="no"></iframe>';
	mar.marker.openInfoWindowTabsHtml([new GInfoWindowTab('Summary',tab1), new GInfoWindowTab('Info',tab2), new GInfoWindowTab(tab3h,tab3)]);
}