var map;

$(document).ready(function () {		
	$('#examples').cluetip({width: '250px'});
  $('#_region').change(onSelectChange);
  load_map();
});

function load_map() {
	var lat = parseFloat($('#lat').attr("value"));
	var lng = parseFloat($('#lng').attr("value"));
  var zoom = parseInt($('#zoom').attr("value"));

	if (GBrowserIsCompatible()) {    	
		map = new GMap2(document.getElementById("map"), { size: new GSize(500,380) });	
		map.setMapType(G_HYBRID_MAP);
    var pt = new GLatLng(lat,lng);
		map.setCenter(pt,zoom);				  	
		var topLeft1 = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,40))
		map.addControl(new GSmallMapControl(), topLeft1);	
		var topLeft2 = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,10));
		map.addControl(new GMapTypeControl(), topLeft2);
    fetch_for_bounds(map);	
        
		GEvent.addListener(map, "moveend", function() {
		  var gbounds = map.getBounds();
		  fetch_for_bounds();
		});	
	}
}

function fetch_for_bounds() {
	var bnd = map.getBounds().toString();	
	$.ajax({
		url: "/slips",
		dataType: "json",
		type: "GET",
		data: { bounds:bnd },					
		beforeSend: function(xhr) {
			xhr.setRequestHeader("Accept", "application/json");				
		},
		success: function(json) {									
		   	friendly_num = 1;
			for (var i = 0; i < json.length; i++) {										
				var id = json[i].id;
				var title = json[i].title;
				var lat1 = json[i].lat;
				var lng1 = json[i].lng;
				var latlng = new GLatLng(lat1,lng1);
		
				//Map
				var icon = new GIcon();
				icon.image = '/images/greencircle_2.png';
				icon.iconSize = new GSize(24,24);
				icon.iconAnchor = new GPoint(11,12);
				icon.infoWindowAnchor = new GPoint(25, 7);

				opts = {
					"pk": id,
					"fid": friendly_num,
					"icon": icon,
					"clickable": true,
					"title": title,
					"labelText": friendly_num.toString(),
					"labelOffset": new GSize(-4, -10)
				};
        
				var marker = new LabeledMarker(latlng, opts);
        var handler = createMarkerClickHandler(id);
        
				GEvent.addListener(marker, "click", handler); 
				map.addOverlay(marker);
				friendly_num += 1;				
			}							
    }
	  });	
}

function createMarkerClickHandler(id) {
  return function() {
    window.location.href = "/slips/" + id;
  };
}

function onSelectChange() {
  var selected = $('#_region option:selected');
  var name = selected.text();

  if (name == "--SEARCH--") {
    window.location.href = "/slips";
  } else {
    $.ajax({
      url: "/regions/" + escape(name),
      dataType: "json",
      type: "GET",
      beforeSend: function(xhr) {
        xhr.setRequestHeader("Accept", "application/json");				
      },
      success: function(json) {									
        $("#lat").attr("value",json.lat);
        $("#lng").attr("value",json.lng);
        $("#zoom").attr("value",json.zoom);
        load_map();
      }							
    });	
  }
}