var map;
var loadedMarkerIds = {};

function load(center_lat, center_lot, sw_lat, sw_lng, ne_lat, ne_lng, region_id, subregion_id) {
  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);
  map.setCenter(new GLatLng(47.92088631651711, 106.90298080444336), 14);
  
  addMarkers(region_id, subregion_id);
    
  GEvent.addListener(map, "moveend", function() {
    addMarkers(region_id, subregion_id);
  });
  
}


function addMarkers(region_id, subregion_id){
  //map.clearOverlays();

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


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


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


function createMarker(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);
  
  /*GEvent.addListener(marker, "click", function() {
    map.panTo(point);
    location.href = link;
    //marker.openInfoWindowHtml('<div style="color: #377FD9;">' +  html + '</div>');
  });*/
  
  GEvent.addListener(marker, "mouseover", function() {
    marker.openInfoWindowHtml('<div style="color: #377FD9; width: 300px;">' +  html + '</div>');
  });
  
  GEvent.addListener(marker, "mouseout", function() {
    marker.closeInfoWindow();
  });
  
  return marker;
}