var map = null;
var clusterer = null;
var searchbar = null;
var geocoder = null;
var markers = [];

$(document).ready(function() {
  var api_key = $("#x_map_api_key").text();
  var map_style_id = $("#x_map_style_id").text();
  var cloudmade = new CM.Tiles.CloudMade.Web({key: api_key, styleId: map_style_id});
  map = new CM.Map('map', cloudmade);

  lat = $("#x_map_lat").text();
  lng = $("#x_map_lng").text();
  latLng = new CM.LatLng(lat, lng);

  map.setCenter(latLng, 15);


  // Sweet map controls!
  map.addControl(new CM.LargeMapControl());
  map.addControl(new CM.ScaleControl());
  // map.addControl(new CM.OverviewMapControl());

  if ($("#x_businesses").length > 0) {
    $(".x_business").each(function(index, item) {
      add_business_marker(item);
    });
  } else if ($("#x_draggable").length > 0) {
    add_draggable_marker(latLng);
  }

  //CM.Event.addListener(map, 'click', function() {
  //  window.location.href = "http://" + $("#x_site_hostname").text();
  //});

  refresh_map();

  searchbar = new CM.SearchSidebar({key: api_key});
  map.setSidebar(searchbar);

  $(".x_search_map").click(function() {
    map.toggleSidebar();
    return false;
  });
});

refresh_map = function() {
  clusterer = new CM.MarkerClusterer(map);
  clusterer.addMarkers(markers);
}

add_business_marker = function(business) { 
  var customIcon = new CM.Icon();
  if ($(business).find(".x_marker").length > 0) {
    customIcon.image = $(business).find(".x_marker").text();
    customIcon.iconSize = new CM.Size(32, 32);
  } else {
    customIcon.image = "../images/maps/map-icon-blank.png";
    customIcon.iconSize = new CM.Size(27, 38);
    customIcon.iconAnchor = new CM.Point(15, 35);
  }
  
  lat = $(business).find(".x_lat").text();
  lng = $(business).find(".x_lng").text();
  name = $(business).find(".x_name").text();
  latLng = new CM.LatLng(lat, lng);
  marker = new CM.Marker(latLng, {title: name, icon: customIcon});
  CM.Event.addListener(marker, 'click', function(lat_lng) {
    window.location.href = $(business).find(".x_url").text();
  });
  markers.push(marker);
};

add_draggable_marker = function(lat_lng) { 
  var customIcon = new CM.Icon();
  customIcon.image = "/images/maps/map-icon-blank.png";
  customIcon.iconSize = new CM.Size(38, 39);
  customIcon.iconAnchor = new CM.Point(15, 35);
  
  marker = new CM.Marker(latLng, {title: "Editing", icon: customIcon, draggable: true});
  CM.Event.addListener(marker, 'dragend', function() {
    $($("#x_drag_update_lat").text()).val(this.getLatLng().lat());
    $($("#x_drag_update_lng").text()).val(this.getLatLng().lng());
  });
  markers.push(marker);
};