//------------------------------------
//Load and control custom icons
var icon = new GIcon();
icon.image = "images/marker1.png";
icon.shadow = "images/marker1s.png";
icon.iconSize = new GSize(12, 12);
icon.shadowSize = new GSize(15, 15);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 10)
//--------------------------------------
function initializePoint(pointData) {
	var point = new GLatLng(pointData.latitude, pointData.longitude);
	var marker = new GMarker(point, icon);
	var listItem = document.createElement('li');
	var listItemLink = listItem.appendChild(document.createElement('a'));
	var visible = false;

	listItemLink.href = "#";
// Formatting for the listings text (change to listItemLink.innerHTML) to make the whole box clicable - links wont work due to liseners 
	listItem.innerHTML = '<table width="518" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><tr><td width="211" height="5"></td><td width="10"></td><td width="263"></td><td width="10"></td></tr><tr><td width="211" rowspan="2" align="right"><div align="right"><a href="ga-wed.property.details.asp?adId='+pointData.adId+'"><img src="'+pointData.image+'" alt="'+pointData.propname+'" width="210" height="150" border="0"></a></div></td><td width="10">&nbsp;&nbsp;&nbsp;</td><td width="263" class="ListingsText"><strong>'+pointData.propname+'</strong><br><span class="ListingsText"><em>Sleeps:</em>&nbsp;'+pointData.type+'<br>'+pointData.text+'</span><span class="smallwhite"></span></td><td width="10" class="ListingsText">&nbsp;</td></tr><tr><td width="10">&nbsp;</td><td colspan="2" align="left" valign="top"><span class="smallwhite"><br><br></span><table width="280" border="0" align="right" cellpadding="0" cellspacing="0"><tr><td width="90" align="center" valign="top"></td><td width="10">&nbsp;</td><td width="90" align="right"><form name="propdetails" method="get" action="ga-wed.property.details.asp"><div align="right"><input type="hidden" name="adId" value="'+pointData.adId+'"/><input type="hidden" name="x_url" value="'+pointData.sURL+'" /><input type="submit" name="" value="" class="ShortListButtonDetails"></div></form></td><td width="5">&nbsp;</td> <td width="90"><form name="addtobasket" method="post" action="ga-wed.basket.asp"><input type="hidden" name="LadId" value="'+pointData.adId+'"/><input type="hidden" name="x_url" value="'+pointData.sURL+'" /><input type="submit" name="" value="" class="ShortListButtonAdd"></form></td></tr></table></td></tr><tr><td height="5"></td><td width="10" height="5"></td><td width="263" height="5"></td><td width="10"></td></tr><tr bgcolor="C66C85"> <td height="1" colspan="4"></td></tr></table>';
	
//----------------------------------------

// not sure if this is needed??
	var focusPoint = function() {
		deselectCurrent();
		listItem.className = 'current';
		deselectCurrent = function() { listItem.className = ''; 
		}
//---------------------------

// Formating for the pop up bubble thing
		marker.openInfoWindowHtml('<table width=350><tr><td width=90 valign=top><a href="ga-wed.property.details.asp?adId='+pointData.adId+'"><a href="ga-wed.property.details.asp?adId='+pointData.adId+'"><img src="'+pointData.image+'" alt="'+pointData.propname+'" width=83 height=62 border="0"></a></td><td valign=top><span class=messageboxheading><a href="ga-wed.property.details.asp?adId='+pointData.adId+'" class="messageboxheading">'+pointData.propname+'</a><br></span><span class=messageboxheading>Sleeps: '+pointData.type+'<br></span><span class=messageboxtext>'+pointData.text+'</span><br><br><table width="260" border="0" cellspacing="0" cellpadding="0"><tr><td><form name="addtobasket" method="post" action="ga-wed.basket.asp"><div align="left"><input type="hidden" name="MadId" value="'+pointData.adId+'"/><input type="hidden" name="x_url" value="'+pointData.sURL+'" /><input type="SUBMIT" class="searchbox-header" value="ADD TO SHORT LIST >>" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal;font-weight:Bold; color: #666666; Length: 200px; background:#FFFFFF none; border: none; cursor: pointer; cursor: hand;"></div></form></td><td><form name="propdetails" method="get" action="ga-wed.property.details.asp"><div align="left"><input type="hidden" name="adId" value="'+pointData.adId+'"/><input type="SUBMIT" value="DETAILS >>" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal;font-weight:Bold; color: #666666; background:#FFFFFF none; border: none; cursor: pointer; cursor: hand;"></div></form></td></tr></table></td></tr></table>');

//-------------------------------------------		
		map.panTo(point);
		return false;
	}

	GEvent.addListener(marker, 'click', focusPoint);	
	listItemLink.onclick = focusPoint;

	pointData.show = function() {
		if (!visible) {
			document.getElementById('sidebar-list').appendChild(listItem);
			map.addOverlay(marker);
			visible = true;
		}
	}
	pointData.hide = function() {
		if (visible) {
			document.getElementById('sidebar-list').removeChild(listItem);
			map.removeOverlay(marker);
			visible = false;
		}
	}

	pointData.show();
}

//======================================
// create sleeps search
function initializeSortTab(type) {
	var listItem = document.createElement('li');
	var listItemLink = listItem.appendChild(document.createElement('a'));

	listItemLink.href = "#";
	listItemLink.innerHTML = type;
	listItemLink.onclick = function() {
		changeBodyClass('standby', 'loading');

		for(id in markers) {
			if (markers[id].type == type || 'All' == type)
				markers[id].show();
			else
				markers[id].hide();	
		}

		changeBodyClass('loading', 'standby');

		return false;
	}

	document.getElementById('filters').appendChild(listItem);
}
//-------------------------------------------------------------
// Adjust the map to fit in the GA browser size
function handleResize() {
	var height = 550;
	var width = 474;
	document.getElementById('map').style.height = height + 'px';
	//document.getElementById('map').style.width = width + 'px';
	document.getElementById('sidebar').style.height = height + 'px';
}

function changeBodyClass(from, to) {
	document.body.className = document.body.className.replace(from, to);
	return false;
}
//---------------------------------------------------------------
// initiate the map buttons and sidebar
function init() {
	var type;
	var allTypes = { 'All':[] };
// Old slidy side bar controls	
	//document.getElementById('button-sidebar-hide').onclick = function() { return changeBodyClass('sidebar-right', 'nosidebar'); };
	//document.getElementById('button-sidebar-show').onclick = function() { return changeBodyClass('nosidebar', 'sidebar-right'); };
	handleResize();
//----------------------------------------------------------------
// add map controls
	map = new GMap(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
	map.addControl(new GOverviewMapControl());
	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
//----------------------------------------------------------------
//restrict the range of Zoom Levels on current map   
      var mt = map.getMapTypes();
	  for (var i=0; i<mt.length; i++) {
        mt[i].getMinimumResolution = function() {return 7;}
        mt[i].getMaximumResolution = function() {return 11;}
      }
//----------------------------------------------------------------
// Restrict the map according to which image map region has been selected
// Add a move listener to restrict the bounds range
      GEvent.addListener(map, "move", function() {
        checkBounds();
      });

      // Line here for setting var for the allowed region which the whole map must be within
      
      // If the map position is out of range, move it back
      function checkBounds() {
        // Perform the check and return if OK
        if (allowedBounds.contains(map.getCenter())) {
          return;
        }
        // If the map has been dragged too far, find the nearest allowed point and move there
        var C = map.getCenter();
        var X = C.lng();
        var Y = C.lat();

        var AmaxX = allowedBounds.getNorthEast().lng();
        var AmaxY = allowedBounds.getNorthEast().lat();
        var AminX = allowedBounds.getSouthWest().lng();
        var AminY = allowedBounds.getSouthWest().lat();

        if (X < AminX) {X = AminX;}
        if (X > AmaxX) {X = AmaxX;}
        if (Y < AminY) {Y = AminY;}
        if (Y > AmaxY) {Y = AmaxY;}
        //alert ("Restricting "+Y+" "+X);
        map.setCenter(new GLatLng(Y,X));
      }
//---------------------------------------------------------------------








//============================================================
	/* [listing 6-21] */
	for(id in markers) {
		initializePoint(markers[id]);
		allTypes[markers[id].type] = true;
	}
// these lines initiate visable sleeps search 
//	for(type in allTypes) {
//		initializeSortTab(type);
//	}
	/* [listing 6-21 end] */

	changeBodyClass('loading', 'standby');
}

window.onresize = handleResize;
window.onload = init;