// JavaScript Document
/************************************************************************
Funcion con librería jQuery y plugin de jQuery colorbox
************************************************************************/
$(document).ready(function(){
	
	// inicializamos colorbox para lanzar un iframe por cada zona del mapa
	$("a[rel='colorboxIframe']").colorbox({
		transition:"true",
		width:652, 
		height:472, 
		iframe:true,
		opacity:0.50,
		current: "foto: {current} / {total}"
	});
	
	// nombre de zonas del mapa que corresponden al "id" de los "enlaces" y a los "name"  de los "area"
	var ar_nombreInstalacions = new Array(
										  'js_1',
										  'js_2',
										  'js_3',
										  'js_4',
										  'js_5',
										  'js_6',
										  'js_7',
										  'js_8',
										  'js_9',
										  'js_10',
										  'js_11',
										  'js_12'
										  );
	
	// recorremos todos los nombres y añadimos eventos a cada botón
	for( var i = 0 ; i < ar_nombreInstalacions.length ; i++ ){
		
		var mapaEnlace = $("ul#menuInstalacions li a#"+ar_nombreInstalacions[i])
		var mapaArea = $("area[name='"+ar_nombreInstalacions[i]+"']");
		
		mapaEnlace.each(function(){
			this.mapaArea = mapaArea;
		});
		
		// posicionamos la flecha desde los enlaces
		mapaEnlace.hover(
			function(){
				$("#contInstalacions").prepend('<div id="mapaFlecha"></div>');
				var flecha = $("#mapaFlecha");
				var coordsX = eval("["+this.mapaArea.attr("coords")+"]")[0];
				var coordsY = eval("["+this.mapaArea.attr("coords")+"]")[1];
				$("#mapaFlecha").css({
					"top" 	: coordsY +"px",
					"left"	: coordsX +"px"
				});
			},
			function(){
				$("#mapaFlecha").remove();
			}
		);
		
		// buscamos el enlace correspondisente a su area
		mapaArea.each(function(){
			var thisArea = $(this);
			thisArea.attr({"href":"javascript:void(0);"});
			this.mapaEnlace = mapaEnlace;
		});
		
		// efecto hover del enlace al pasar por encima de area
		mapaArea.hover(
			function(e){
				this.mapaEnlace.addClass("itemActivo");
			},
			function(e){
				this.mapaEnlace.removeClass("itemActivo");
			}
		);
		
		// invocamos el event click del enlace al hacer click en el area
		mapaArea.bind("click", function(){
			this.mapaEnlace.trigger("click");
		});
		
	}
});