URL_ISF_LOGO = "logo_isf_25.gif";
URL_ISF_LOGO_SOMBRA = "logo_isf_25s.gif"

var clicked = false;
var clickedLoc;
var linkVolver;

function load() {
	if (GBrowserIsCompatible()) {
		map_t = new GMap2(document.getElementById("map_isf"));
		map_t.setCenter(new GLatLng(CENTER_INI_LAT, CENTER_INI_LONG), ZOOM_INI);
		//map_t.addControl(new GLargeMapControl());
		//map_t.addControl(new GOverviewMapControl());
		map_t.enableScrollWheelZoom();
		map_t.disableDoubleClickZoom();
		map_t.enableContinuousZoom();
		map_t.setMapType(G_PHYSICAL_MAP);
		map_t.addControl(new GSmallMapControl());

		// También posible usar G_HYBRID_MAP

		// Para mapas que no queremos que muevan: map_t.disableDragging();

		var mgrOptions = { borderPadding: 50, maxZoom: 9, trackMarkers: false };
		mgr = new MarkerManager(map_t, mgrOptions);

		GEvent.addListener(map_t, "zoomend", function(oldLevel, newLevel) {
			if (newLevel > ZOOM_MAX) map_t.setZoom(ZOOM_MAX);
			else if (newLevel < ZOOM_MIN) map_t.setZoom(ZOOM_MIN);
			// Zoom In
			else if (newLevel > oldLevel && clickedLoc && clickedLoc.zoomin && newLevel < clickedLoc.zoom[1] + 1) map_t.zoomIn(clickedLoc.ciudad, true, true);
			else if (newLevel > oldLevel && clickedLoc && clickedLoc.zoomin && newLevel == clickedLoc.zoom[1] + 1) {clickedLoc = null; clicked = false;}
		});

		cargaMapa();
	}
}

function fullZoomOut() {map_t.setCenter(new GLatLng(CENTER_INI_LAT, CENTER_INI_LONG), ZOOM_INI); return false;}

function cargaMapa() {
	// Despejo el mapa
	map_t.clearOverlays();
	mgr.clearMarkers();
    // Cargo los signos correspondientes
	for (i = 0; i < ISF_enElMundo.length; i += 1) {
		carga(ISF_enElMundo[i]);
	}
        linkVolver = document.getElementById("map_isf_volver");
        if (linkVolver) linkVolver.onclick = fullZoomOut;
}


function carga(loc) {
	var ISFIcon = new GIcon();
	ISFIcon.image = URL_ISF_LOGO;
	ISFIcon.iconSize = new GSize(25, 25);
	ISFIcon.iconAnchor = new GPoint(12, 12);
	//ISFIcon.shadow = URL_ISF_LOGO_SOMBRA;
	//ISFIcon.shadowSize = new GSize(25, 31);
	ISFIcon.infoWindowAnchor = new GPoint(0, 0);

	// Set up our GMarkerOptions object
	markerOptions = { icon:ISFIcon };


	var ciudad = new GLatLng(loc.coordenadas[0], loc.coordenadas[1]);
	var marker = new GMarker(ciudad, markerOptions);
	
	mgr.addMarker(marker, loc.zoom[0], loc.zoom[1]);

	var zoomIn = loc.zoomin;
	var zoomOut = loc.zoomout;
	var maxZoom = loc.zoom[1];

	var html = "";
	html += "<b>" + loc.nombre + "</b><br />"
	html += loc.descripcion;

	var ToolTipOptions;
	if (loc.zoomin) ToolTipOptions = {
		"content": "<b>" + loc.nombre + "</b><br />" + loc.descripcion,
		"offsetHorizontal": 5,
		"offsetVertical": -40,
		"height": 50,
		"width": 160,
		"className": "tooltip"
	};
	else ToolTipOptions = {
		"content": "<b>" + loc.nombre + "</b>",
		"offsetHorizontal": 5,
		"offsetVertical": -20,
		"height": 20,
		"width": 60,
		"className": "tooltip"
	};


	var fullInfoBoxOptions = {
		"content": html,
		"offsetHorizontal": 10,
		"offsetVertical": -75,
		"height": 150,
		"width": 200,
		"className": "infoBox"
	};

	var infoBox;

	// OnMouseOver ponemos el tooltip sólo con las temperaturas
	GEvent.addListener(marker, "mouseover", function () {
		if (!clicked) {
			toolTip = new ToolTip(ciudad, ToolTipOptions);
			marker.tooltip = toolTip;
			map_t.tooltip = marker.tooltip;
			map_t.addOverlay(map_t.tooltip);
		}
	});

	// Y OnMouseOut lo quitamos
	GEvent.addListener(marker, "mouseout", function () {
		if (map_t.tooltip)
			map_t.removeOverlay(map_t.tooltip);
	});

	// OnClick mostramos la caja de información completa
	GEvent.addListener(marker, "click", function () {
		// Quitamos la caja que haya abiertas
		if (map_t.tooltip) {
			map_t.removeOverlay(map_t.tooltip);
		}
		if (map_t.infoBox) {
			clicked = false;
			map_t.removeOverlay(map_t.infoBox);
		}
		// Recordamos que hay una caja abierta
		clicked = true;
		clickedLoc = loc;
		// Mostramos la caja
		if (! zoomIn) {
			infoBox = new InfoBox(ciudad, fullInfoBoxOptions);
			marker.infoBox = infoBox;
			map_t.infoBox = marker.infoBox;
			map_t.addOverlay(map_t.infoBox);
		}

		if (zoomIn) {
			//map_t.setCenter(ciudad, maxZoom +1);
			if (map_t.getZoom() < maxZoom + 1) map_t.zoomIn(ciudad, true, true);
		} else {		
		// Centramos en la caja de texto
		var ciudad_xy = map_t.fromLatLngToContainerPixel(ciudad);
		var nuevoCentro = new GPoint(ciudad_xy.x + fullInfoBoxOptions.offsetHorizontal + fullInfoBoxOptions.width / 2, ciudad_xy.y + fullInfoBoxOptions.offsetVertical + fullInfoBoxOptions.height / 2);
		map_t.panTo(map_t.fromContainerPixelToLatLng(nuevoCentro));
		}

                if (linkVolver && zoomOut) {
		        linkVolver.onclick = function() {
				if (map_t.tooltip) map_t.removeOverlay(map_t.tooltip);
				if (map_t.infoBox) {clicked = false; map_t.removeOverlay(map_t.infoBox);}
				map_t.setCenter(new GLatLng(zoomOut[1], zoomOut[2]), zoomOut[0]);
				return false;
			};
		}
	});

}
    

////////////////////////////////////////////////////////////////////////////
//
// Obtenido de http://gmaps-samples.googlecode.com/svn/trunk/demo/infobox.js
//
////////////////////////////////////////////////////////////////////////////

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Object} opts Passes configuration options - content, 
 *   offsetVertical, offsetHorizontal, className, height, width
 */
function InfoBox(latlng, opts) {
  this.latlng_ = latlng;
  this.content_ = opts.content || "Hello World";
  this.offsetVertical_ = opts.offsetVertical || -5;
  this.offsetHorizontal_ = opts.offsetHorizontal || -5;

  this.className_ = opts.className || "";

  // Dejamos que la altura se ajuste sola, para coger los párrafos largos
  // OJO: TENEMOS QUE COMENTAR TODAS LAS REFERENCIAS A this.height_ PARA QUE NO HAYA NULLREFERENCES
  //this.height_ = opts.height || 100;

  this.width_ = opts.width || 300;
}

/* InfoBox extends GOverlay class from the Google Maps API
 */
InfoBox.prototype = new GOverlay();

/* Creates the DIV representing this InfoBox
 * @param {GMap2} map The map to add infobox to
 */
InfoBox.prototype.initialize = function(map) {
  // Create the DIV representing our Bar
  var div = document.createElement("div");

  // No vamos a usar clases
  //if (this.className_ != "") {
  //  div.className = this.className_;
  //} else {
    div.style.border = "2px solid #ffc062";
    div.style.position = "absolute";
    //div.style.background = "url('http://ace.imageg.net/images/WIZ_ACE_myStore/mapBubble.png')";
    div.style.backgroundColor = "#FFFFFF";
    //div.style.background = "transparent url('" + URL_FONDO_CAJA + "') repeat top left";
    div.style.padding = "3px";
    div.style.width = this.width_ + "px";
    //div.style.height = this.height_ + "px";
  //} 

  var contentDiv = document.createElement("div");
  contentDiv.innerHTML = this.content_;

  var topDiv = document.createElement("div");
  topDiv.style.textAlign = "right";
  topDiv.style.paddingRight = "3px";
  var closeImg = document.createElement("img");
  closeImg.src = "http://www.google.com/intl/en_us/mapfiles/close.gif";
  topDiv.appendChild(closeImg);

  function removeInfoBox(ib, m) {
    return function() { 
      GEvent.trigger(ib, "closeclick");
      m.removeOverlay(ib);
      clicked = false;
      clickedLoc = null;
    };
  }
  
  GEvent.addDomListener(closeImg, 'click', removeInfoBox(this, map));
 
  div.appendChild(topDiv);
  div.appendChild(contentDiv);
  div.style.display = 'none';

  map.getPane(G_MAP_MARKER_PANE).appendChild(div);

  this.map_ = map;
  this.div_ = div;
}

/* Remove the main DIV from the map pane
 */
InfoBox.prototype.remove = function() {
  this.div_.parentNode.removeChild(this.div_);
}

/* Copy our data to a new InfoBox
 * @return {InfoBox} Copy of infobox
 */
InfoBox.prototype.copy = function() {
  var opts = {};
  opts.latlng = this.latlng_;
  opts.content = this.content_;
  opts.offsetVertical = this.offsetVertical_;
  opts.offsetHorizontal = this.offsetHorizontal_;

  opts.className = this.className_ || "";  
  opts.height = this.height_;
  opts.width = this.width_;
  return new InfoBox(this.latlng, opts);
}

/* Redraw the Bar based on the current projection and zoom level
 * @param {boolean} force Helps decide whether to redraw overlay
 */
InfoBox.prototype.redraw = function(force) {
  // We only need to redraw if the coordinate system has changed
  if (!force) return;

  // Calculate the DIV coordinates of two opposite corners of our bounds to
  // get the size and position of our Bar
  var pixPosition = this.map_.fromLatLngToDivPixel(this.latlng_);

  // Now position our DIV based on the DIV coordinates of our bounds
  this.div_.style.width = this.width_ + "px";
  this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";
  //this.div_.style.height = this.height_ + "px";
  this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
  this.div_.style.display = 'block';

/* VAMOS A PASAR POR AHORA DE CENTRAR EN LA CAJA SI NOS SALIMOS
  // if we go beyond map, pan map
  var mapWidth = this.map_.getSize().width;
  var mapHeight = this.map_.getSize().height;
  var bounds = this.map_.getBounds();
  var boundsSpan = bounds.toSpan();
  var longSpan = boundsSpan.lng();
  var latSpan = boundsSpan.lat();
  var degWidth = (this.width_/mapWidth) * longSpan;
  var degHeight = (this.height_/mapHeight) * latSpan;

  if (this.latlng_.lng() + degWidth > bounds.getNorthEast().lng()) {
    this.map_.panTo(this.latlng_);
  }   

  var bottompt = new GLatLng( (this.latlng_.lat() - degHeight), this.latlng_.lng());
  if (!bounds.contains(bottompt)) {
    this.map_.panTo(this.latlng_);
  }
*/  
}


///////////////////////////////////////////////////////////////////////////////
//
// A partir de InfoBox, hacemos unos cambios para mostrar un ToolTip sin cierre
//
///////////////////////////////////////////////////////////////////////////////

/* An InfoBox (InfoToolTip) is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Object} opts Passes configuration options - content, 
 *   offsetVertical, offsetHorizontal, className, height, width
 */
function ToolTip(latlng, opts) {
  this.latlng_ = latlng;
  this.content_ = opts.content || "Hello World";
  this.offsetVertical_ = opts.offsetVertical || -5;
  this.offsetHorizontal_ = opts.offsetHorizontal || -5;

  this.className_ = opts.className || "";

  // Dejamos que la altura se ajuste sola, para coger los párrafos largos
  // OJO: TENEMOS QUE COMENTAR TODAS LAS REFERENCIAS A this.height_ PARA QUE NO HAYA NULLREFERENCES
  //this.height_ = opts.height || 100;

  this.width_ = opts.width || 300;
}

/* InfoBox (ToolTip) extends GOverlay class from the Google Maps API
 */
ToolTip.prototype = new GOverlay();

/* Creates the DIV representing this InfoBox
 * @param {GMap2} map The map to add infobox to
 */
ToolTip.prototype.initialize = function(map) {
  // Create the DIV representing our Bar
  var div = document.createElement("div");

  // No vamos a usar clases
  //if (this.className_ != "") {
  //  div.className = this.className_;
  //} else {
    div.style.border = "2px solid #333333";
    div.style.position = "absolute";
    //div.style.background = "url('http://ace.imageg.net/images/WIZ_ACE_myStore/mapBubble.png')";
    div.style.backgroundColor = "#ffc062";
    //div.style.background = "transparent url('" + URL_FONDO_CAJA + "') repeat top left";
    div.style.padding = "3px";
    div.style.width = this.width_ + "px";
    //div.style.height = this.height_ + "px";
  //} 

  var contentDiv = document.createElement("div");
  contentDiv.innerHTML = this.content_;

  function removeToolTip(tt, m) {
    return function() { 
      m.removeOverlay(tt);
    };
  }
  
  div.appendChild(contentDiv);
  div.style.display = 'none';

  map.getPane(G_MAP_MARKER_PANE).appendChild(div);

  this.map_ = map;
  this.div_ = div;
}

/* Remove the main DIV from the map pane
 */
ToolTip.prototype.remove = function() {
  this.div_.parentNode.removeChild(this.div_);
}

/* Copy our data to a new InfoBox
 * @return {InfoBox} Copy of infobox
 */
ToolTip.prototype.copy = function() {
  var opts = {};
  opts.latlng = this.latlng_;
  opts.content = this.content_;
  opts.offsetVertical = this.offsetVertical_;
  opts.offsetHorizontal = this.offsetHorizontal_;

  opts.className = this.className_ || "";  
  opts.height = this.height_;
  opts.width = this.width_;
  return new InfoBox(this.latlng, opts);
}

/* Redraw the Bar based on the current projection and zoom level
 * @param {boolean} force Helps decide whether to redraw overlay
 */
ToolTip.prototype.redraw = function(force) {
  // We only need to redraw if the coordinate system has changed
  if (!force) return;

  // Calculate the DIV coordinates of two opposite corners of our bounds to
  // get the size and position of our Bar
  var pixPosition = this.map_.fromLatLngToDivPixel(this.latlng_);

  // Now position our DIV based on the DIV coordinates of our bounds
  this.div_.style.width = this.width_ + "px";
  this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";
  //this.div_.style.height = this.height_ + "px";
  this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
  this.div_.style.display = 'block';
}