//
var map = null;
var label = null;
var control = null;
var i = 0;
//
var baseIcon = null;
var Icon = null;
//
var gobjects = [];
var gmarkers = [];
var images   = [];
var htmls    = [];
var labels   = [];
var new_markers = [];
var new_html;
var itt_num = 0;
//

function generateMap () {

  /* Load Map */
  if (GBrowserIsCompatible()) {
      map = new GMap(document.getElementById("map-container-inner"));
      map.enableDoubleClickZoom();
      map.centerAndZoom(new GPoint(setLongitude, setLatitude), setZoom);
      map.setMapType(setMapType);
  }

  baseIcon            = new GIcon(G_DEFAULT_ICON);
  HouseIcon = new GIcon(baseIcon, '/map-search/img/map-icons/house-icon.png');
  HouseIcon.shadow = '/map-search/img/map-icons/shadow-icon.png';
  HouseIcon.iconSize   = new GSize(32, 28);
  HouseIcon.shadowSize = new GSize(32,28);
  HouseIcon.iconAnchor = new GPoint(12, 27);

  /* Add Map Controls */
  map.addControl(new GLargeMapControl());
  //map.addControl(new GOverviewMapControl());
  map.addControl(new GMapTypeControl());

  /* Custom Map Controls */
  control = new BpControl(setLoadingMsg, null, G_ANCHOR_TOP_RIGHT, 'noborder');
  map.addControl(control);

  /* Tooltip Label */
  label = new BpLabel(map.getCenter(), '', 'map-label', 'nw', true);
  label.setOpacity(100);
  map.addOverlay(label);

  /* Add Drag End Listener */
  GEvent.addListener(map, "dragend", function() {
      search();
  });

  /* Add Zoom End Listener */
  GEvent.addListener(map, "zoomend", function(oldLevel, newLevel) {
      search();
  });

  /* Search Listings */
  search();

}


function search () {
  // hide search message
  $('p#search_message').html('Loading Search Results...');
  /* Show Loading Control */
  control.show();
  /* Build Query String */
  queryString  = getQueryString() + '&';
  queryString += $("#search_form").formSerialize();
  /* Get Results */
  $.getJSON("/map-search/search.php" + queryString, function (jsonData) { process_it(jsonData) });

}

function search_new (city) {
  // hide search message
  $('p#search_message').html('Loading Search Results...');
  $('div#map-listings-container-inner').html(' ');
  /* Show Loading Control */
  control.show();
  /* Clear Results */
  gmarkers = [];
  /* Clear Overlays */
  map.clearOverlays();
  /* Add BpLabel */
  map.addOverlay(label);
  if (city == true && $("#search_form :input[@name=search_city]").fieldValue() != '')
  {
      queryString  = '?' + $("#search_form").formSerialize();
  }
  else
  {
      queryString  = getQueryString() + '&';
      queryString += $("#search_form").formSerialize();
  }
  //queryString += "&longitude=" + map.getCenter().lng() + "&latitude=" + map.getCenter().lat();
  $.getJSON("/map-search/search.php" + queryString, function (jsonData) { process_it(jsonData) });

}

function process_it(jsonData) {

  var side_listings_html = '';
itt_num++;
  /* Center Map */
  map.setCenter(jsonData.center);

  /* Parser Marker Data  */
  for (var i = 0; i < jsonData.markers.length; i++) {
      /* Check for Cached Marker */
      var markerIndex = markerInArray(jsonData.markers[i].id);
      if (markerIndex === false && jsonData.markers[i].point != undefined) {

          /* Create Marker */
          var marker = createMarker(jsonData.markers[i].point, jsonData.markers[i].label, jsonData.markers[i].html);
          marker.details = createDetails(
                                jsonData.markers[i].id,
                                jsonData.markers[i].image,
                                jsonData.markers[i].price,
                                jsonData.markers[i].bedrooms,
                                jsonData.markers[i].bathrooms,
                                jsonData.markers[i].link
                                );
          //map.addOverlay(marker);
          new_markers.push(marker);

          /* Add Data To Colle\ctions */
			var index = gmarkers.length;
			gmarkers[index]           = [];
			gmarkers[index]['id']     = jsonData.markers[i].id;
			gmarkers[index]['marker'] = marker;
          images[marker.getId()]   = jsonData.markers[i].image;
          htmls[marker.getId()]    = jsonData.markers[i].html;
          labels[marker.getId()]   = jsonData.markers[i].label;

          //
          gobjects[marker.getId()] = new Object();
          gobjects[marker.getId()].mls_number = jsonData.markers[i].id;
          gobjects[marker.getId()].price      = jsonData.markers[i].price;
          gobjects[marker.getId()].bedrooms   = jsonData.markers[i].bedrooms;
          gobjects[marker.getId()].bathrooms  = jsonData.markers[i].bathrooms;
      }
  }

//  while (gmarkers.length > maxMappedListings) {
//    removeMarker();
//  }

  //$('div#map-listings-container-inner').html('&nbsp;');
//  new_html = '';
//  	for (var i = gmarkers.length - 1; i > 0; i--) {
//  	    new_html += gmarkers[i].marker.details;
//	   	$('div#map-listings-container-inner').append(gmarkers[i].marker.details);
//  	}


  addNextMarker();

//  addNextHTML();



  /* Hide Loading Control */
  control.hide();

    $('#search_message').html(jsonData.message);

}

function addNextHTML()
{
    if (new_html.length == 0) return;
    $('div#map-listings-container-inner').append(new_html.shift());
    setTimeout(addNextHTML,0);
}

function addNextMarker()
{
    if (new_markers.length == 0)
    {
//        $('div#map-listings-container-inner').hide();
//        $('div#map-listings-container-inner').html(new_html);
//        $('div#map-listings-container-inner').fadeIn('slow');
        return;
    }
    var marker = new_markers.shift();
    map.addOverlay(marker);
    $('div#map-listings-container-inner').prepend(marker.details);
    /* Add Evem Listeners To Marker */
    var target = marker.getEventTarget();
    GEvent.bindDom(target, 'click', marker, onMouseClick);
    GEvent.bindDom(target, 'mouseover', marker, onMouseOver);
    GEvent.bindDom(target, 'mouseout', marker, onMouseOut);
    if (gmarkers.length > maxMappedListings)
    {
        removeMarker();
    }
    setTimeout(addNextMarker,0);
}

function createMarker(point, name, html) {
  /* Create & Return BpMarker */

  var marker = new BpMarkerLight(point, { icon: HouseIcon });
  //var marker = new BpMarkerLight(point);
  marker.setTooltip(label);
  return marker;
}

function createDetails(id, image, price, bedrooms, bathrooms, link) {
    var html = '<div class="idx-listing clearfix" id="side-listing-'+id+'">'
    + '<div class="imgset"><a href="' + image + '" onclick="resultClick(\'' + id + '\');return false;"><img src="' + image + '" class="thumb"></a></div>'
    + '<div class="idx-datagrp"><div class="idx-dataset"><div class="idx-data price"><span class="key">Price:</span><span class="val"> ' + price + '</span></div></div>'
    + '<div class="idx-dataset"><div class="idx-data mls"><span class="key">MLS#:</span><span class="val"> ' + id + '</span></div></div>';

	if (bedrooms != 0) {
		html = html + '<div class="idx-dataset"><span class="idx-data beds"><span class="key">Beds:</span><span class="val"> ' + bedrooms + '</span></span> ';
		html = html + '<span class="idx-data baths"><span class="key">Baths:</span><span class="val"> ' + bathrooms + '</span></span></div>';
	}


    html = html + '<div class="btnset"><a href="' + link + '" target="_blank">View Details</a></div>'
    + '</div></div>' + "\n";

    return html;
}

function onMouseOver() {
  //this.setImage('http://www.gmaptools.com/images/marker_yellow.png');
  // get tooltip text
  ilabel = labels[this.getId()];
  // show tooltip
  label.setHtml(ilabel);
  label.setPoint(this.getTooltipPoint());
  label.show();
}

function onMouseOut() {
  //this.setImage('http://www.gmaptools.com/images/marker_red.png');
  //this.setImage('[map_icon]');
  label.hide();
}

function onMouseClick() {
  ihtml  = htmls[this.getId()];
  //iimage = images[this.getId()];
  //this.openInfoWindowHtml(ihtml);
  this.openInfoWindowTabsHtml([
      new GInfoWindowTab("Details", ihtml)
//      new GInfoWindowTab("Photo", "<img src=\"" + iimage + "\" style=\"width: 265px; height:218px\">"),
//      new GInfoWindowTab("Inquire", "<form id=\"inquireForm\" onsubmit=\"return submitInquiry(this);\"><input type=\"hidden\" name=\"id\" value=\"" + this.getId() + "\"><table width=\"275\"> <tr>  <td align=\"center\" colspan=\"2\"><b>Inquire About Listing # " + gobjects[this.getId()].mls_number + "</b></td> </tr> <tr><td colspan=\"2\">&nbsp;</td></tr> <tr>  <td align=\"center\" colspan=\"2\" id=\"inquiryResponse\">&nbsp;</td> </tr> <tr>  <td align=\"right\"><b>* Full Name:</b></td>  <td align=\"left\"><input type=\"text\" name=\"full_name\" value=\"\" /></td> </tr> <tr>  <td align=\"right\"><b>Phone:</b></td>  <td align=\"left\"><input type=\"text\" name=\"phone\" value=\"\" /></td> </tr> <tr>  <td align=\"right\"><b>* Email:</b></td>  <td align=\"left\"><input type=\"text\" name=\"email\" value=\"\" /></td> </tr> <tr>  <td align=\"right\">&nbsp;</td>  <td align=\"left\"><input type=\"submit\" name=\"submit\" value=\"Send Inquiry\"></td> </tr></table></form>")
  ]);

}

function getQueryString () {
  /* Get Map Center */
  var centerLng = map.getCenter().lng();
  var centerLat = map.getCenter().lat();
  /* Get Map Bounds */
  var southWest = map.getBounds().getSouthWest().toUrlValue();
  var northEast = map.getBounds().getNorthEast().toUrlValue();
  /* Build Query String */
  queryString  = "?longitude=" + centerLng;
  queryString += "&latitude=" + centerLat;
  queryString += '&south_west=' + southWest;
  queryString += '&north_east=' + northEast;
  //
  return queryString;
}

function removeMarker()
{
//    if (gmarkers.length < maxMappedListings) return;
    var marker = gmarkers.shift();
    var myDiv = document.getElementById('side-listing-'+marker['id']);
    myDiv.parentNode.removeChild(myDiv);
//    $('div#map-listings-container-inner').removeChild($('#side-listing-'+marker['id']));
    //$('div').remove('#side-listing-'+marker['id']);
    map.removeOverlay(marker['marker']);
    //setTimeout(removeMarker,0);
}

function markerInArray(mlsId)
{
	for (var i = 0; i < gmarkers.length; i++) {
		if (gmarkers[i].id == mlsId) {
			return i;
		}
	}

	return false;
}

function resultClick (mlsId) {

    for (var i = 0; i < gmarkers.length; i++) {
		if (gmarkers[i].id == mlsId) {
	        ihtml  = htmls[gmarkers[i].marker.getId()];
            gmarkers[i].marker.openInfoWindowTabsHtml([
                new GInfoWindowTab("Details", ihtml)
            ]);
		}
	}
}

function showExtra()
{
	document.getElementById('extra').style.display = 'block';
	document.getElementById('more-options').innerHTML = '<input type="button" onclick="void(hideExtra());" value="Less Options">';
}
function hideExtra()
{
	document.getElementById('extra').style.display = 'none';
	document.getElementById('more-options').innerHTML = '<input type="button" onclick="void(showExtra());" value="More Options">';
}

window.onload = generateMap;
window.onunload = GUnload;