//<![CDATA[
// global variables
var sidebar_html;
var gmarkers = [];
var htmls = [];
var htabs = [];
var i = 0;
var map;
var bounds;
var baseIcon;
var max_listings_per_map = 100;
var default_lat_pos = 33.5464685;
var default_lon_pos = -117.775497;
var default_zoom_level = 11;
var firstLoad = true;

var mainIconImage = "/res/images/maps/house-main.png";

var favIconImage = "/res/images/maps/house-fav.png";
var favTitle = 'Favorite Listing: ';

var sitelistingIconImage = "/res/images/maps/house-hot.png";
var sitelistingTitle = 'Our Listing: ';

Event.observe( window, 'load', function() {	
	loadUser();
	addOnLoad()
} );

function addOnLoad(){
	$("mapOverlay").show();
	setUpOverlay();
	checkUser();
	initiateMap();
}

function setUpOverlay() {

	if (readCookie('siMapFirstLoad')) {
		if (readCookie('siMapFirstLoad') == "false") {
			firstLoad = false;
		} else {
			firstLoad = true;
		}
	} else {
		firstLoad = true;
	}
	
	//firstLoad = true;
	//alert('first Load: ' + firstLoad);
}

function hideOverlay() {
	$('mapOverlay').hide();
}


// start code for Map Results area

function zoomout(){
map.zoomOut();map.zoomOut();map.zoomOut();
}
function zoomin(){
map.zoomIn();map.zoomIn();map.zoomIn();
}
//
// Creates Tabbed marker for the map
//
function createTabbedMarker(latlng,label,mhtmls,labels,listingid,fav,sitelisting,price,sqft,beds,baths,address) {
	
	var marker;
	var listingAddress = address;
	var icon = new GIcon(baseIcon);
	
	var favTip = favTitle + listingAddress
	favTip = capitalize(favTip);
	
	var sitelistingTip = sitelistingTitle + listingAddress
	sitelistingTip = capitalize(sitelistingTip);	
	
	var mainTip = capitalize(listingAddress);
	
	if (fav == '1') {
		icon.image = favIconImage;
	} else if (sitelisting == '1') {
		icon.image = sitelistingIconImage;		
	} else {
		icon.image = mainIconImage;
	}

	if (fav == '1') {
		gmarkers[i] = new GMarker(latlng, { icon: icon, title: favTip});
	} else if (sitelisting == '1') {
		gmarkers[i] = new GMarker(latlng, { icon: icon, title: sitelistingTip});	
	} else {
		gmarkers[i] = new GMarker(latlng, { icon: icon, title: mainTip});
	}
	
	marker = gmarkers[i];

	GEvent.addListener(gmarkers[i], "click", function() {
	  // adjust the width so that the info window is large enough for this many tabs
	  if (mhtmls.length > 2) {
	    mhtmls[0] = '<div style="width:'+mhtmls.length*88+'px">' + mhtmls[0] + '</div>';
	  }
	  //alert(i+': '+mhtmls[0]);
	  var tabs = [];
	  for (var j=0; j<mhtmls.length; j++) {
	    tabs.push(new GInfoWindowTab(labels[j],mhtmls[j]));
	  }
	  //alert(tabs);
	  marker.openInfoWindowTabsHtml(tabs);
	});
	
	// setup hot tabs data
   	if (mhtmls.length > 2) {
	   mhtmls[0] = '<div style="width:'+mhtmls.length*88+'px">' + mhtmls[0] + '</div>';
	}
	htabs[i] = new Array(2);
	for (var j=0; j<mhtmls.length; j++) {
	    htabs[i][j]= new GInfoWindowTab(labels[j],mhtmls[j]);
	}	
	//alert(htabs[i]);
	 
	var rowcolor;
	if (i % 2 == 1) { rowcolor = "1"; } else {rowcolor = "2";}

	//sidebar_html += '<tr bgcolor="' + rowcolor + '"><td align=left valign=center>' +(i+1)+ ' <a href="javascript:onMap(' + i + ')" onmouseover="mymouseover('+i+')" onmouseout="mymouseout('+i+')">On Map</a> ' + label + '</td><td>' + price + '</td><td>' + sqft + '</td><td>' + beds + '</td><td>' + baths + '</td><td>' + address + '</td><td><a href="javascript: showDetailPage('+listingid+');" align=center>Details</a></td></tr>';

sidebar_html += '<tr>					<td class="mapsdata_'+rowcolor+'" valign="top"><a href="javascript: onMap('+i+');">On Map</a></td>					<td class="mapsdata_'+rowcolor+'" valign="top">' + price + '</td>					<td class="mapsdata_'+rowcolor+'" valign="top">' + sqft + '</td>	<td class="mapsdata_'+rowcolor+'" valign="top">' + beds + '</td>					<td class="mapsdata_'+rowcolor+'" valign="top">' + baths + '</td>				<td class="mapsdata_'+rowcolor+'" valign="top">' + address + '</td>	<td class="mapsdata_'+rowcolor+'" valign="top" align="center"><a href="javascript: showDetailPage('+listingid+');">View Details</a></td>					</tr>';

	i++;
	
	return marker;
}
//
// This function picks up the click and opens the corresponding info window
//
function onMap(i) {
	gmarkers[i].openInfoWindowTabsHtml(htabs[i]);
}
//
// These functions dynamically switch the marker when a listing is added to or removed from the Favorites
//    
function showFavIcon(i) {
	if (i == '') {i = 0}
	gmarkers[i].setImage(favIconImage);
}

function removeFavIcon(i) {
	if (i == '') {i = 0}

	gmarkers[i].setImage(mainIconImage);	
}

function pausecomp(millis) {
	var date = new Date();
	var curDate = null;
	
	do { curDate = new Date(); }
	while(curDate-date < millis);
} 

function clearMap() {
	//sidebar_html = '';
	//$("sidebar").innerHTML = sidebar_html;
	map.clearOverlays(); 	
}

function updateMap(){

		var mapBoundsNE = map.getBounds().getNorthEast();
		var mapBoundsSW = map.getBounds().getSouthWest();
		//var pointCount = markerCountXML(mapBoundsNE,mapBoundsSW);
		
		$('mapOverlay').hide();
		if ($('mapOverlay').hasClassName('zoom')) {$('mapOverlay').removeClassName('zoom');}
		if ($('mapOverlayContent').hasClassName('zoomMessage')) {$('mapOverlayContent').removeClassName('zoomMessage');}
		if (!($('mapOverlay').hasClassName('loading'))) {$('mapOverlay').addClassName('loading')}
		if (!($('mapOverlay').hasClassName('loadingMessage'))) {$('mapOverlayContent').addClassName('loadingMessage')}			
		$('mapOverlay').show();
		$('mapOverlayContent').innerHTML='<img src="res/images/loading_big.gif" align="absmiddle">&nbsp;&nbsp;Searching for number of markers';

		$('nlat').value = mapBoundsNE.lat()
		$('slat').value = mapBoundsSW.lat()
		$('wlon').value = mapBoundsSW.lng()
		$('elon').value = mapBoundsNE.lng()
		$('zoomlevel').value = map.getZoom();
		
		var formData = Form.serialize($("frmSearch"));
		
		var pointCount = 0;
		//var mapcountURL = 'pages/mls_mapmarkerscount.asp?nlat='+mapBoundsNE.lat()+'&slat='+mapBoundsSW.lat()+'&wlon='+mapBoundsSW.lng()+'&elon='+mapBoundsNE.lng()+'';
		var mapcountURL = 'pages/mls_mapmarkerscount.asp?' + formData;
		
		//alert(mapcountURL);
		
		
		var request = GXmlHttp.create();
		request.open("GET", mapcountURL, true);		
		request.onreadystatechange = function() {
			if (request.readyState == 4) {	
				var xmlDoc = request.responseXML;
				var markers = xmlDoc.documentElement.getElementsByTagName("count");
				//alert('1. Markers in Bounds (actual): '+parseFloat(markers[0].getAttribute("value")));
				pointCount = parseFloat(markers[0].getAttribute("value"));
				
				//alert(pointCount);
				
				if (pointCount > max_listings_per_map) {
					$('markerMessage').innerHTML = pointCount + ' listings visible.<br />Zoom in or<br />narrow your search.';
					
					if (firstLoad) {
						
						//alert('first Load');
						
						if ($('mapOverlay').hasClassName('loading')) {$('mapOverlay').removeClassName('loading');}
						if ($('mapOverlayContent').hasClassName('loadingMessage')) {$('mapOverlayContent').removeClassName('loadingMessage');}
						if (!($('mapOverlay').hasClassName('zoom'))) {$('mapOverlay').addClassName('zoom')}
						if (!($('mapOverlay').hasClassName('zoomMessage'))) {$('mapOverlayContent').addClassName('zoomMessage')}
						
						$('mapOverlayContent').innerHTML = '<div style="text-align: right; margin-bottom: 10px;"><a href="javascript: hideOverlay();"><img src="/res/images/close_icon.png" border="0" alt="Close" /></a></div>'
						$('mapOverlayContent').innerHTML += 'There are ' + pointCount + ' listings in the visible area. A max of 100 can be displayed at one time.<br /><br />'
						$('mapOverlayContent').innerHTML += '<strong>Zoom in using the bar at left or just double-click any point on the map.</strong></div>'
						
						$('mapOverlay').show();
						
						//Now that the zoom message has appeared once, set cookie so that it won't appear again on reload.
						createCookie('siMapFirstLoad','false',365);
						firstLoad = false;
					} else {
						if ($('mapOverlay').hasClassName('zoom')) {$('mapOverlay').removeClassName('zoom');}
						if ($('mapOverlayContent').hasClassName('zoomMessage')) {$('mapOverlayContent').removeClassName('zoomMessage');}
						if (!($('mapOverlay').hasClassName('loading'))) {$('mapOverlay').addClassName('loading')}
						if (!($('mapOverlay').hasClassName('loadingMessage'))) {$('mapOverlayContent').addClassName('loadingMessage')}						
						
						$('mapOverlayContent').innerHTML = '<div style="float: right; width: 16px; height: 16px;"><a href="javascript: hideOverlay();"><img src="/res/images/close_icon.png" border="0" alt="Close" /></a></div>'
						$('mapOverlayContent').innerHTML += pointCount + ' listings in visible area.<br />Double-click on the map to zoom in.';

					}						
					
					//alert('4a. Too many markers (> 100): '+pointCount);
					clearMap();
				} else {
					
					if ($('mapOverlay').hasClassName('zoom')) {$('mapOverlay').removeClassName('zoom');}
					if ($('mapOverlayContent').hasClassName('zoomMessage')) {$('mapOverlayContent').removeClassName('zoomMessage');}
					if (!($('mapOverlay').hasClassName('loading'))) {$('mapOverlay').addClassName('loading')}
					if (!($('mapOverlay').hasClassName('loadingMessage'))) {$('mapOverlayContent').addClassName('loadingMessage')}	
						
					if ((pointCount==0) || (pointCount=='')) {
						
						$('markerMessage').innerHTML = 'No listings match at this location and zoom level.';
						$('mapOverlayContent').innerHTML = '<div style="font-weight: bold; text-align: center; padding: 8px 8px 8px 8px;">No listings in visible area.<br />Zoom out or change location.</div>';
						clearMap();
						
					} else{
						$('markerMessage').innerHTML='Viewing ' + pointCount + ' listings.<br />Click markers to<br />view listing info.';
						$('mapOverlayContent').innerHTML = '<div style="font-weight: bold;"><img src="res/images/loading_big.gif" align="absmiddle">&nbsp;&nbsp;Loading ' + pointCount + ' listings at this zoom level.</div>';
						//alert('4b. Show loading popup, get new markers (< 100): '+pointCount);
						
						//mapURL = 'pages/mls_mapmarkers.asp?nlat='+mapBoundsNE.lat()+'&slat='+mapBoundsSW.lat()+'&wlon='+mapBoundsSW.lng()+'&elon='+mapBoundsNE.lng()+'';
						var mapURL = 'pages/mls_mapmarkers.asp?' + formData;

						//var mapURL = 'pages/mls_mapmarkers.asp?n=38.25&s=38.21&w=-85.75&e=-85.685';
						readMap(mapURL,false);
					}
				}
				//$('loading').style.display='none';
			}
		}
		request.send(null);
		
		//alert('2. Markers in Bounds (returned) [Wait for Next Popup for Accurate Results]: '+pointCount);
		//alert('3. Markers in Bounds (used): '+pointCount);
}

function initiateMap() {
	// create the map
	sidebar_html;
	gmarkers = [];
	hmarkers = [];
	whichMarker = [];
	htmls = [];
	//htabs = [];
	i = 0;	
	
	map = new GMap2($("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	//map.addControl(new GScaleControl());
    map.addControl(new GOverviewMapControl());
	
	if (($('nlat').value != '') && ($('slat').value != '')) {
		var lat_pos = ((parseFloat($('nlat').value) + parseFloat($('slat').value)) / 2)
		var lon_pos = ((parseFloat($('elon').value) + parseFloat($('wlon').value)) / 2)
		
		if ($('zoomlevel').value != '') {
			var zoom_level = parseFloat($('zoomlevel').value);
		} else {
			var zoom_level = default_zoom_level;
		}
		 
		map.setCenter(new GLatLng(lat_pos, lon_pos), zoom_level);
	 } else { 
		map.setCenter(new GLatLng(default_lat_pos, default_lon_pos), default_zoom_level);
	 }
	 
	//map.setCenter(new GLatLng( 38.2,-85.7), 11);
	map.enableContinuousZoom(); 

	GEvent.addListener(map, "dragend", function(){
		updateMap();
	});
	GEvent.addListener(map, "zoomend", function(){
		updateMap();
	});
	
	bounds = new GLatLngBounds();
	
	baseIcon = new GIcon();
    baseIcon.shadow = "";
    baseIcon.iconSize = new GSize(18, 19);
    baseIcon.shadowSize = new GSize(18, 19);
    baseIcon.iconAnchor = new GPoint(9, 10);
    baseIcon.infoWindowAnchor = new GPoint(9, 7);
	
	updateMap();
	
}

// A function to read the data
function readMap(url, rezoom) {
	if(rezoom==null)rezoom = true;
	var request = GXmlHttp.create();
	request.open("GET", url, true);
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			var xmlDoc = request.responseXML;
	
			// obtain the array of markers and loop through it
			var markers = xmlDoc.documentElement.getElementsByTagName("marker");
	
			// hide the info window, otherwise it still stays open where the removed marker used to be
			map.getInfoWindow().hide();
			
			// clear all existing markers
			map.clearOverlays();
	
			// empty the array
			gmarkers = [];
			gmarkers.length = 0;
	
			// reset the sidebar
			sidebar_html='<table class="mapsdata" border="0" cellspacing="1" cellpadding="0" align="center">	<tr>					<td width="9%"><img src="res/images/spacer.gif" width="1" height="1"></td>					<td width="12%"><img src="res/images/spacer.gif" width="1" height="1"></td>										<td width="12%"><img src="res/images/spacer.gif" width="1" height="1"></td>					<td width="7%"><img src="res/images/spacer.gif" width="1" height="1"></td>					<td width="15%"><img src="res/images/spacer.gif" width="1" height="1"></td>					<td width="30%"><img src="res/images/spacer.gif" width="1" height="1"></td>					<td width="22%"><img src="res/images/spacer.gif" width="1" height="1"></td>											</tr>				<tr>					<td valign="bottom" class="mapsdataheader"></td>					<td valign="bottom" class="mapsdataheader">Price</td>					<td valign="bottom" class="mapsdataheader">Sq Ft</td>					<td valign="bottom" class="mapsdataheader">Beds</td>					<td valign="bottom" class="mapsdataheader">Baths</td>										<td valign="bottom" class="mapsdataheader">Street Address</td>					<td valign="bottom" class="mapsdataheader"></td>															</tr>	';
	
			// reset bounds
			bounds = new GLatLngBounds();
			for (var i = 0; i < markers.length; i++) {
				htmls[i] = new Array(2);
				htabs[i] = new Array(2);
				// obtain the attribues of each marker
				var lat = parseFloat(markers[i].getAttribute("lat"));
				var lng = parseFloat(markers[i].getAttribute("lng"));
				var point = new GLatLng(lat,lng);
				var point_bound_up = new GLatLng(lat+.005, lng+.005);
				var point_bound_down = new GLatLng(lat-.005, lng-.005)
				//var htmls[];
				htmls[i][0] = markers[i].getAttribute("html1");
// +"Zoom: <a href=javascript:zoomin();>In</a> | <a href=javascript:zoomout();>Out</a>" 				
//alert(htmls[0]);
				htmls[i][1] = markers[i].getAttribute("html2");
				var label = markers[i].getAttribute("tooltip");
				var listingid = markers[i].getAttribute("listingid");
				var fav = markers[i].getAttribute("fav");
				var sitelisting = markers[i].getAttribute("sitelisting");
				
				//create marker info
				var marker = createTabbedMarker(point, label, htmls[i],["Details","More"],listingid,fav,sitelisting,markers[i].getAttribute("price"),markers[i].getAttribute("sqft"),markers[i].getAttribute("beds"),markers[i].getAttribute("baths"),markers[i].getAttribute("address"));
				
				// add marker
				map.addOverlay(marker);
				
				// extend bounds to include new point
				bounds.extend(point_bound_up);
				bounds.extend(point_bound_down);
			}

			// put the assembled sidebar_html contents into the sidebar div
			sidebar_html += '</table>';
			//$("sidebar").innerHTML = sidebar_html;
			
			if (rezoom) {
				// ===== determine the zoom level from the bounds =====
				map.setZoom(map.getBoundsZoomLevel(bounds));
				
				// ===== determine the centre from the bounds ======
				var clat = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat()) /2;
				var clng = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng()) /2;
				
				// this line is causing an error for some reason...
				// it's a bug that should be fixed in 2.59.  Fix is to put hideControls after it.
				map.setCenter(new GLatLng(clat,clng),map.getBoundsZoomLevel(bounds));
				
			}
			//map.hideControls();
			
			$('mapOverlay').hide();
		}
	}
	request.send(null);
}

function mapsvalidateLPrice()
{
		
	var lPrice = $('qslprice');
	var uPrice = $('qsuprice');
	
	var minPrice = parseInt(lPrice.options[lPrice.selectedIndex].value);
	var maxPrice = parseInt(uPrice.options[uPrice.selectedIndex].value);
	
	if(isNaN(maxPrice))
	{
		maxPrice = 0;
	}
	var newSelected = false;

	var newMax = lPrice.options[lPrice.selectedIndex + 1].value;
	if(maxPrice > newMax)
	{
		newMax = maxPrice;
	}
	
	for (var i=1;i<lPrice.options.length; i++)
	{
	
		if(parseInt(lPrice.options[i].value) < minPrice)
		{
			//alert("Set it grey");			
			//lPrice.options[i].style.color='#999999';
		}
		else if(parseInt(lPrice.options[i].value) <= newMax)
		{
			lPrice.options[i].style.color='#000000';
		}
		else
		{
			break;
		}
	}

	for (var i=uPrice.options.length - 1;i>=0; i--) {
		if(parseInt(uPrice.options[i].value) < minPrice)
		{
			//uPrice.options[i].disabled = true;					
			//alert(i);
			//alert(uPrice.options[i].style.color);
			//uPrice.options[i].style.color = '#CCCCCC';
			//alert(uPrice.options[i].style.color);
			if(!newSelected && maxPrice < minPrice)
			{
				if( (i + 2) < uPrice.options.length)
				{					
					if(uPrice.selectedIndex != 0)
					{
						uPrice.options[i + 2].selected = true;
					}
					newSelected = true;
				}
			}
			//uPrice.remove(i);
		}
		else
		{
			uPrice.options[i].style.color='#000000';
			//uPrice.options[i].disabled = false;
		}
	}
}

function mapsvalidateUPrice()
{	

	var lPrice = $('qslprice');
	var uPrice = $('qsuprice');
	
	var minPrice = parseInt(lPrice.options[lPrice.selectedIndex].value);
	var maxPrice = parseInt(uPrice.options[uPrice.selectedIndex].value);
	
	if(isNaN(minPrice))
	{
		minPrice = 0;
	}
	uPrice.options[uPrice.selectedIndex].style.color = '#000000';
	//var newSelected = false;
	for (var i=lPrice.options.length - 1;i>=0; i--) {
		if(parseInt(lPrice.options[i].value) >= maxPrice)
		{
			//lPrice.options[i].style.color='#CCCCCC';
			//lPrice.options[i].disabled = true;
			//lPrice.options[i].style.display = "none"
			//lPrice.remove(i);
			if( minPrice > maxPrice)
			{
				lPrice.options[i - 1].selected = true;	
				lPrice.options[i - 1].style.color = '#000000';
			}
		}	
		else if(parseInt(lPrice.options[i].value) >= minPrice)
		{
			lPrice.options[i].style.color='#000000';
			//lPrice.options[i].disabled = false;
		}
	}
}

function capitalize(thisString) {
var thisArray = thisString.split(' ');
var newString = '';
for (var n=0; n<thisArray.length; n++) {
  var firstChar = thisArray[n].charAt(0).toUpperCase();
  var theRest = thisArray[n].substring(1, thisArray[n].length);
  newString += firstChar+theRest+' ';
  }
return newString.substring(0, newString.length - 1);
}
//]]>