//<![CDATA[
var map = null;
var mgr = null;
var batch = [];
// this variable will collect the html which will eventually be placed in the side_bar
var markerinfo= [];
var loading = false;
var lookurl=null;
var bounds = null;
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var markers = null;
var gicon = new GIcon();
var bhicon = new GIcon();
var opening = false;
var toWidth = 893;
var ptype='residential';
var initsrch=null;

Event.observe(window, 'load', Gload);
Event.observe(window, 'unload', GUnload);

function Gload(){
if (GBrowserIsCompatible()) {

for( i = 0; i < document.mapsearchform.elements['property_type[]'].length; i++ )
{
if( document.mapsearchform.elements['property_type[]'][i].checked == true ){switchOptions(document.mapsearchform.elements['property_type[]'][i].value);}
}

map = new GMap2($("map"));
//map.addControl(new GSmallMapControl());
map.addControl(new MyCustomControl());
map.setCenter(new GLatLng(35.58, -82.550), 12);
map.addMapType(G_PHYSICAL_MAP);
map.addControl(new GMapTypeControl());
//map.setMapType(G_HYBRID_MAP);
//dragged = GEvent.addListener(map, "dragend", function() {updateMap();});
//zoomed = GEvent.addListener(map, "zoomend", function() {updateMap();});

  gicon.image = "/images/mapsearch/map_icon_red.png";
  gicon.iconSize = new GSize(10, 18);
  gicon.iconAnchor = new GPoint(5, 18);
  gicon.infoWindowAnchor = new GPoint(5, 1);
  
  bhicon.image = "/images/mapsearch/map_icon_black.png";
  bhicon.iconSize = new GSize(10, 18);
  bhicon.iconAnchor = new GPoint(5, 18);
  bhicon.infoWindowAnchor = new GPoint(5, 1);


if (IEE){
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) 
   {
         var img = document.images['mcontrol']
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText 
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
            img.outerHTML = strNewHTML
   }    
}
initsrch=true; 
updateMap();
}
}

function updateMap(){
if (loading){return;}
loading=true;
//if (moved){GEvent.removeListener(moved);}
map.clearOverlays();
batch = [];
markerinfo= [];
//mgr = new GMarkerManager(map);
map.disableDragging();
if (!initsrch){lookurl = $('mapsearchform').serialize();}else{lookurl="newmapsearch=1";}
loading=true;
$("busyoverlay").style.visibility = 'visible';
$("searching").style.visibility = 'visible';
GDownloadUrl("/mapsearch/searchresults?"+lookurl, function(data, responseCode) {
  var xml = GXml.parse(data);
  markers = xml.documentElement.getElementsByTagName("marker");
  bounds = new GLatLngBounds();
   for (var i = 0; i < markers.length; i++) {
	if (!isNaN(parseFloat(markers[i].getAttribute("lat"))) && !isNaN(parseFloat(markers[i].getAttribute("lng")))){
		var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
								parseFloat(markers[i].getAttribute("lng")));
		var markerinfoin = [];
		markerinfoin['lat'] = markers[i].getAttribute("lat");
		markerinfoin['lng'] = markers[i].getAttribute("lng");
		markerinfoin['upd'] = markers[i].getAttribute("upd");
		markerinfoin['name'] = markers[i].getAttribute("name");
		markerinfoin['city'] = markers[i].getAttribute("city");
		markerinfoin['price'] = markers[i].getAttribute("price");
		markerinfoin['img'] = markers[i].getAttribute("img");
		markerinfoin['beds'] = markers[i].getAttribute("beds");
		markerinfoin['baths'] = markers[i].getAttribute("baths");
		markerinfoin['sqft'] = markers[i].getAttribute("sqft");
		markerinfoin['acre'] = markers[i].getAttribute("acre");
		markerinfoin['bhlisting'] = markers[i].getAttribute("bhlisting");
		markerinfoin['type'] = markers[i].getAttribute("type");
		markerinfoin['ihtml'] = markers[i].childNodes[0].childNodes[0].nodeValue;
		markerinfo.push(markerinfoin);
		bounds.extend(point);
		var marker = creatMarker(point,batch.length);
		map.addOverlay(marker);
		batch.push(marker);
	}
  }
  loading=false;
  if (map.getBoundsZoomLevel(bounds) > 0 && markerinfo.length > 0){
	map.setCenter(bounds.getCenter());
	map.setZoom(map.getBoundsZoomLevel(bounds));
	createListHTML();
	}else if (markerinfo.length==0){alert('No properties were found matching your search.\nPlease change your criteria and try again.');}
  map.enableDragging();
  $("searching").style.visibility = 'hidden';
  $("busyoverlay").style.visibility = 'hidden';
});//end gdownload markers
}
function showInfoWin(id){
	$("menu_bar_infowin").innerHTML = markerinfo[id]['ihtml'];
	$("menu_bar_infowin").style.display = 'inline'; }
	
function hideInfoWin(){$("menu_bar_infowin").style.display = 'none';}

function showSrchWin(){
	map.closeInfoWindow();
	$("srchbar").style.display = 'block';
	$("resbar").style.display = 'none';
	$("tab_mapsearch").setAttribute("class", "active");
	$("tab_mapsearch").setAttribute("className", "active");
	$("tab_mapresults").setAttribute("class", "inactive");
	$("tab_mapresults").setAttribute("className", "inactive");
	}
	
function showResWin(){
	$("srchbar").style.display = 'none';
	$("resbar").style.display = 'inline';
	$("tab_mapsearch").setAttribute("class", "inactive");
	$("tab_mapsearch").setAttribute("className", "inactive");
	$("tab_mapresults").setAttribute("class", "active");
	$("tab_mapresults").setAttribute("className", "active");
	}
	
function hideSrchWin(){$("srchbar").style.display = 'none';}

function showDetailWin(id){document.location.href='/search/detail/'+markerinfo[id]['upd']; }

function switchOptions(n){
	switch(n)
	{
	case 'residential':
	  $("mhomes").style.display = 'none';
	  $("acre").style.display = 'block';
	  $("homes").style.display = 'block';
	  break;    
	case 'multi_family':
	  $("homes").style.display = 'none';
	  $("acre").style.display = 'none';
	  $("mhomes").style.display = 'block';
	  break;
	case 'land':
	  $("homes").style.display = 'none';
	  $("mhomes").style.display = 'none';
	  $("acre").style.display = 'block';
	}
}



function creatMarker(point,id) {
        if (markerinfo[id]['bhlisting']=='true'){var marker = new GMarker(point,bhicon);}else{var marker = new GMarker(point,gicon);}
		GEvent.addListener(marker, "mouseover", function() {showInfoWin(id);});
		GEvent.addListener(marker, "mouseout", function() {hideInfoWin();});
		GEvent.addListener(marker, "click", function() {showDetailWin(id);});
		return marker;
}

function listrowOn(lr,id){
	//map.removeOverlay(polyline);map.removeOverlay(polyline2);
	lr.style.backgroundColor='#ffff99';
	var winhtml="<div style='width:290px;height:140px;'>";
	winhtml+="<span class='infowin_title'><a href='/search/detail/"+markerinfo[id]['upd']+"'>"+markerinfo[id]['name']+", "+markerinfo[id]['city']+"</a></span>";
	winhtml+="<table><tr><td><a href='/search/detail/"+markerinfo[id]['upd']+"'><img src='"+markerinfo[id]['img']+"' class='infowin_img' style='width:130px;'></a></td><td>";
	winhtml+="<br> List Price:<span class='infowin_price'>$"+markerinfo[id]['price']+"</span>";
	winhtml+="<br> Bedrooms: "+markerinfo[id]['beds'];
	winhtml+="<br> Bathrooms: "+markerinfo[id]['baths'];
	winhtml+="<br> Sq. Ft.: "+markerinfo[id]['sqft'];
	winhtml+="<br> Acreage: "+markerinfo[id]['acre'];
	winhtml+="</td></tr></table></div>";
	batch[id].openInfoWindow(winhtml);
}
function listrowOut(lr){lr.style.backgroundColor='#F6F4E8';}

function createListHTML(){
	var lhtml = '';
	var openlink='<div class="listopen"><a href="javascript:openTable()"><img src="/images/mapsearch/expand.gif" style="border:none;"></a></div>';
	if (markerinfo.length==100){
	lhtml += "<div class='listwarn'>"+openlink+"<span style='color:red'>Showing the first 100 listings only!</span><br>Click the search tab above to refine your search</div>";
	}else{
	lhtml += "<div class='listnum'>"+openlink+"Your search found "+markerinfo.length+" listings.<br><a href='javascript:showSrchWin()'>Refine Your Search</a></div>";
	}
	lhtml += "<br style='clear:both'><table class='listtable'>";
	lhtml += "<THEAD><tr class='listhead'><td>Address:</td><td>List Price:</td><td>Beds:</td><td>Baths:</td><td>Sq. Ft:</td><td>Acreage:</td><td>MLS #:</td></tr></THEAD>";
	//for (var xx in markerinfo){
	for (var xx = 0; xx < markerinfo.length; xx++) {oldclick=xx;
		lhtml += "<tr class='listrow' onmouseout='listrowOut(this);' onmouseover='listrowOn(this,"+ xx +");' >";
		lhtml += "	<td class='listname'><a href='/search/detail/"+markerinfo[xx]['upd']+"'>" + markerinfo[xx]['name'] +"</a></td>";
		lhtml += "	<td class='listprice'>$" + markerinfo[xx]['price'] +"</td>";
		lhtml += "	<td class='listmls'>" + markerinfo[xx]['beds'] +"</td>";
		lhtml += "	<td class='listmls'>" + markerinfo[xx]['baths'] +"</td>";
		lhtml += "	<td class='listmls'>" + markerinfo[xx]['sqft'] +"</td>";
		lhtml += "	<td class='listmls'>" + markerinfo[xx]['acre'] +"</td>";
		lhtml += "	<td class='listmls'>" + markerinfo[xx]['upd'] +"</td>";
		lhtml += "</tr>";
	}
	lhtml += "</table><div id='thumbnail'><img id='timage' src='/images/mapsearch/spinner_on_black.gif'></div>";	
	$("resbar").innerHTML = lhtml;
	if (initsrch==false){
		showResWin();
	}else{initsrch=false;}
}

function sortDist(a, b)
{
return a[0] - b[0];
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
}

function reseticon() {
if (oldclick!=null){
var oimg=gmarkers[oldclick].getIcon().image;
gmarkers[oldclick].setImage(oimg);}
}

function openTable(){
 var delay=50;
 var delm = $("menu_bar");
 var width  = parseInt(delm.style.width);
 if (width==893 && !opening){toWidth=230;}else if (!opening){toWidth=893;}
 var change = toWidth-width;
 var total=width+Math.ceil((change/2));
 if (change==-1){total=width-1;}
 delm.style.width=total+'px';
 function c() {
       openTable();
 }
 if(change==0) {
  clearTimeout(timer);opening=false;
  return;
 }
 timer=setTimeout(c,delay);
 opening=true;
}

function toggleGroup(type) {
	  if (type=='house'){var otype='condo';}else{var otype='house';}
	  map.closeInfoWindow();
	  for (var i = 0; i < markerGroups[otype].length; i++) {
        var marker = markerGroups[otype][i];
        if (!marker.isHidden()) {marker.hide();} 
      }
	  for (var i = 0; i < markerGroups[type].length; i++) {
        var marker = markerGroups[type][i];
        if (marker.isHidden()) {marker.show();} 
      }
	  $("show"+otype).style.display = "inline";
	  $("show"+type).style.display = "none";
	  $("map_current_title").innerHTML = eval(type+"_title");
	  $("menu_bar").innerHTML = eval(type+"_html");
}

function MyCustomControl()
{
}

//Default constructor for GControl
MyCustomControl.prototype = new GControl(false,false);

// Default location for the control
MyCustomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT,new GSize(5,5));
};

MyCustomControl.prototype.initialize = function(gmapref)
{

var container=gmapref.getContainer();

var c = document.createElement("div");
c.style.width = "70px";
c.style.height = "126px";
c.style.position='relative';
c.style.backgroundImage="url(/images/mapcontrols-sm.png)";
c.innerHTML+="<div style='position: absolute; left: 22px; top: 0px; width: 18px; height: 18px; cursor: pointer;' title='Pan up' id='panu'/>";
c.innerHTML+="<div style='position: absolute; left: 3px; top: 21px; width: 18px; height: 18px; cursor: pointer;' title='Pan left' id='panl'/>";
c.innerHTML+="<div style='position: absolute; left: 39px; top: 21px; width: 18px; height: 18px; cursor: pointer;' title='Pan right' id='panr'/>";
c.innerHTML+="<div style='position: absolute; left: 22px; top: 40px; width: 18px; height: 18px; cursor: pointer;' title='Pan down' id='pand'/>";
c.innerHTML+="<div style='position: absolute; width: 18px; height: 18px; cursor: pointer; left: 21px; top: 69px;' title='Zoom In' id='zin'/>";
c.innerHTML+="<div style='position: absolute; width: 18px; height: 18px; cursor: pointer; left: 21px; top: 96px;' title='Zoom Out' id='zout'/>";
container.appendChild(c);
GEvent.addDomListener($('zout'), "click", function() {map.zoomOut();});
GEvent.addDomListener($('zin'), "click", function() {map.zoomIn();});
GEvent.addDomListener($('panl'), "click", function() {map.panDirection(1, 0);});
GEvent.addDomListener($('panr'), "click", function() {map.panDirection(-1, 0);});
GEvent.addDomListener($('panu'), "click", function() {map.panDirection(0, 1);});
GEvent.addDomListener($('pand'), "click", function() {map.panDirection(0, -1);});
return c;
}

//]]>