var locations = {};
	
//Creamos controles personalizados
/*function TextualZoomControl() {
}
TextualZoomControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
TextualZoomControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  var zoomInDiv = document.createElement("div");
  this.setButtonStyle_(zoomInDiv);
  container.appendChild(zoomInDiv);
  zoomInDiv.appendChild(document.createTextNode("Acercar"));
  GEvent.addDomListener(zoomInDiv, "click", function() {
	map.zoomIn();
  });

  var zoomOutDiv = document.createElement("div");
  this.setButtonStyle_(zoomOutDiv);
  container.appendChild(zoomOutDiv);
  zoomOutDiv.appendChild(document.createTextNode("Alejar"));
  GEvent.addDomListener(zoomOutDiv, "click", function() {
	map.zoomOut();
  });

  map.getContainer().appendChild(container);
  return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
TextualZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

// Sets the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "underline";
  button.style.color = "#0000cc";
  button.style.backgroundColor = "white";
  button.style.font = "x-small Arial";
  button.style.border = "1px solid black";
  button.style.padding = "2px";
  button.style.marginBottom = "3px";
  button.style.textAlign = "center";
  button.style.width = "6em";
  button.style.cursor = "pointer";
}*/

function initializeMap() {
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(13.581920900545844, 10.213379), 2);
  map.addControl(new GSmallMapControl());
  
  
  GDownloadUrl("_admin/maps/markerdata.php?cache=6395ebd0f4b478145ecfbaf939454fa4", function(data) {
	var xml = GXml.parse(data);
	var markers = xml.getElementsByTagName("marker");
	for (var i = 0; i < markers.length; i++) {
	  var name = markers[i].getAttribute("name");
	  var address = GXml.value(markers[i].getElementsByTagName("descripcion")[0]);
	  var type = markers[i].getAttribute("type");
	  var link = markers[i].getAttribute("link");
	  var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
							  parseFloat(markers[i].getAttribute("lng")));
	  var store = {latlng: latlng, name: name, address: address, type: type, link: link};
	  var latlngHash = (latlng.lat().toFixed(6) + "" + latlng.lng().toFixed(6));
	  latlngHash = latlngHash.replace(".","").replace(".", "").replace("-","");
	  if (locations[latlngHash] == null) {
		locations[latlngHash] = []
	  }
	  locations[latlngHash].push(store);
	}
	for (var latlngHash in locations) {
	  var stores = locations[latlngHash];
	  if (stores.length > 1) {
		map.addOverlay(createClusteredMarker(stores));
	  } else {
		map.addOverlay(createMarker(stores));
	  }
	 }
  });
}

function createMarker(stores) {
  var icono = "";
  var store = stores[0];
	var baseIcon = new GIcon();
	//baseIcon.image = "images/iconos_maps/icono_agua.png";
	//baseIcon.image = "images/iconos_maps/"+store.type;
	//baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.image = "images/iconos_maps/icono_alcachofa.png";
	//baseIcon.shadow = "images/iconos_maps/icono_alcachofa_shadow.png";
	baseIcon.iconSize = new GSize(20, 24);
	//baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 24);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
  var newIcon = MapIconMaker.createMarkerIcon({width: 32, height: 32, primaryColor: "#00ff00"});
  var marker = new GMarker(store.latlng, {icon: baseIcon});
  var html = "<div style='font-size:8pt;font-family:Verdana;width:200px;height:auto;max-height:200px;height:100px;overflow:auto;'><b>" + store.name + "</b> - <a href='"+store.link+"' style='color:#075698'>Ver ficha</a><br/>" + store.address + "</div>";
  GEvent.addListener(marker, 'click', function() {
	marker.openInfoWindowHtml(html);
  });
  return marker;
}

function createClusteredMarker(stores) {
  var newIcon = MapIconMaker.createMarkerIcon({width: 44, height: 44, primaryColor: "#00ff00"});
  var marker = new GMarker(stores[0].latlng, {icon: newIcon});
  var html = "";
  for (var i = 0; i < stores.length; i++) {
	html += "<b>" + stores[i].name + "</b> <br/>" + stores[i].address + "<br/>";
  }
  GEvent.addListener(marker, 'click', function() {
	marker.openInfoWindowHtml(html);
  });
  return marker;
}


window.addEvent('domready', initializeMap);
window.addEvent('onunload', GUnload);