var map;
var loadedMarkerIds = {};

function load(center_lat, center_lot, sw_lat, sw_lng, ne_lat, ne_lng) {
  map = new GMap2(document.getElementById("map"));
  geocoder = new GClientGeocoder();

  //adding controls
  map.addControl(new GScaleControl());
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.setMapType(G_HYBRID_MAP);

  
  // setting zoom
  var sw_latlng = new GLatLng(parseFloat(sw_lat), parseFloat(sw_lng));
  var ne_latlng = new GLatLng(parseFloat(ne_lat), parseFloat(ne_lng));
  var zoom_size = map.getBoundsZoomLevel(new GLatLngBounds(sw_latlng, ne_latlng));
  
  // setting center point & zoom
  //map.setCenter(new GLatLng(parseFloat(center_lat), parseFloat(center_lot)), zoom_size+1);
  map.setCenter(new GLatLng(47.92088631651711, 106.90298080444336), 14);
  
  addMarkers();
    
  GEvent.addListener(map, "moveend", function() {
    addMarkers();
  });
}


function addMarkers(){
  //map.clearOverlays();

  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  
  //add realestate markers
  loadRealestateMarker(southWest.lat(), northEast.lat(), southWest.lng(), northEast.lng());
}


function loadRealestateMarker(southLat, northLat, southLng, northLng){
  var queryString = '?southLat='+southLat+'&northLat='+northLat+'&southLng='+southLng+'&northLng='+northLng;
  new Ajax.Updater('nb_result', '/addRealestateMarker'+queryString, {asynchronous:true, evalScripts:true, onComplete:function(request, json){Element.hide('map_indicator')}, onLoading:function(request, json){Element.show('map_indicator')}});
}


function addRealestateMarker(id, lat, lot, html, link, icon){
  if (typeof loadedMarkerIds[id] == 'undefined'){
    map.addOverlay(createRealestateMarker(new GLatLng(lat, lot), html, link, icon));
  }
  loadedMarkerIds[id] = true;
}


function createRealestateMarker(point, html, link, icon){
  // Create our "tiny" marker icon
  var customIcon = new GIcon();
  customIcon.image = icon;
  //customIcon.iconSize = new GSize(24, 24);
  customIcon.iconAnchor = new GPoint(6, 20);
  customIcon.infoWindowAnchor = new GPoint(5, 1);


  var marker = new GMarker(point, { icon: customIcon });
  
  GEvent.addListener(marker, "click", function() {
    map.panTo(point);
    location.href = link;
  });
  
  GEvent.addListener(marker, "mouseover", function() {
    marker.openInfoWindowHtml('<div style="color: #377FD9;">' +  html + '</div>');
  });
  
  GEvent.addListener(marker, "mouseout", function() {
    marker.closeInfoWindow();
  });
  return marker;
}