$(document).ready(function(){
	// Oculto los componentes de una de las fotos.
	$(".tituloTerminalUbicacion:not(:first)").hide();
	$(".imagenTerminalGrande:not(:first)").hide();
	$(".pieFotoTerminal:not(:first)").hide();
	// Oculto la mascara en la segunda foto.
	$("#mascaraSur").hide();
	// Responder al evento click del boton superior:
	$("div.botonSuperiorUbicacion").click(function(){
		// Borrar texto pie de foto en foto clickiada.
		$("p#norte").hide()
		// Poner mascara en el boton clickiado y ocultar la otra.
		$("#mascaraSur").hide();
		$("#mascaraNorte").show();
		// Cambiar imagen de terminal grande.
		$(".tituloTerminalUbicacion:not(:first)").hide();
		$(".imagenTerminalGrande").css({ backgroundImage : "url(./imagenes/terminalNorte.jpg)" });
		$(".imagenTerminalGrande:not(:first)").hide();
		$(".pieFotoTerminal:not(:first)").hide();
		$(".tituloTerminalUbicacion:first").show();
		$(".imagenTerminalGrande:first").show();
		$(".pieFotoTerminal:first").show();		
		// Poner texto pie de foto en foto no clickiada.
		$("p#sur").show()		
		return false;
	});
	// Responder al evento click del boton inferior:
	$("div.botonInferiorUbicacion").click(function(){
		// Borrar texto pie de foto en foto clickiada.
		$("p#sur").hide();
		// Poner mascara en el boton clickiado.
		$("#mascaraNorte").hide();
		$("#mascaraSur").show();
		// Cambiar imagen de terminal grande.
		$(".tituloTerminalUbicacion:first").hide();
		$(".imagenTerminalGrande").css({ backgroundImage : "url(./imagenes/terminalSur.jpg)" });
		$(".imagenTerminalGrande:first").hide();
		$(".pieFotoTerminal:first").hide();		
		$(".tituloTerminalUbicacion:not(:first)").show();
		$(".imagenTerminalGrande:not(:first)").show();
		$(".pieFotoTerminal:not(:first)").show();
		// Poner texto pie de foto en foto no clickiada.
		$("p#norte").show();
		return false;
	});
	// Responder al evento rollover para cualquier punto en el mapa.
	$(".nodoTooltip").hover(function(e){
		// Definimos la distancia entre el tooltip y el cursor.
		xOffset = 10;
		yOffset = 20;
		this.descripcion = this.title;
		this.title = "";
		var imagen = $(this).next(".contenedorTooltip").attr("title");
//		alert("<p id='contenedorTooltipFlotante'><img src='./imagenes/"+ imagen +"' alt='lugar iconico' /><br/>"+ descripcion +"</p>");
		$(this).after("<p id='contenedorTooltipFlotante'><img src='./imagenes/"+ imagen +"'/><br/>"+ this.descripcion +"</p>");
		$("#contenedorTooltipFlotante")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");
	},
	function(){
		this.title = this.descripcion;
		$("#contenedorTooltipFlotante").remove();
	});
});