var imgPlanoP_01;
var imgPlanoM_01;
var imgPlanoG_01;
var imgPlanoP_02;
var imgPlanoM_02;
var imgPlanoG_02;
var imgPlanoP_03;
var imgPlanoM_03;
var imgPlanoG_03;

var time=null;
var transparency = 0;

var zoomActual="p";

// Dimensiones Mapa Pequeño: 1000 x 1281 (width x height)
// Dimensiones Mapa Mediano: 1700 x 2178 (width x height)
// Dimensiones Mapa Grande : 2530 x 3242 (width x height)
var dimPWidth = 1000;
var dimPHeight = 1281;
var dimMWidth = 1700;
var dimMHeight = 2178;
var dimGWidth = 2530;
var dimGHeight = 3242;

// Left de la barra del zoom: 
// Mapa Grande: 158px
// Mapa Mediano: 121px
// Mapa Pequeño: 85px
var leftG = 158;
var leftM = 121;
var leftP= 85;

function preCarga(){
	// Mapa_01
  imgPlanoP_01 = new Image();
  imgPlanoP_01.src = "galeria/planos/imgPlanoP_01.jpg";
  imgPlanoM_01= new Image();
  imgPlanoM_01.src = "galeria/planos/imgPlanoM_01.jpg";	
  imgPlanoG_01= new Image();
  imgPlanoG_01.src = "galeria/planos/imgPlanoG_01.jpg";	
  // Mapa_02
  imgPlanoP_02 = new Image();
  imgPlanoP_02.src = "galeria/planos/imgPlanoP_02.gif";
  imgPlanoM_02= new Image();
  imgPlanoM_02.src = "galeria/planos/imgPlanoM_02.gif";	
  imgPlanoG_02= new Image();
  imgPlanoG_02.src = "galeria/planos/imgPlanoG_02.gif";	
  // Mapa_03
  imgPlanoP_03 = new Image();
  imgPlanoP_03.src = "galeria/planos/imgPlanoP_03.gif";
  imgPlanoM_03= new Image();
  imgPlanoM_03.src = "galeria/planos/imgPlanoM_03.gif";	
  imgPlanoG_03= new Image();
  imgPlanoG_03.src = "galeria/planos/imgPlanoG_03.gif";	
}


function ayudaCallejero(visibilidad) {

	var divMapaAyuda=document.getElementById("divMapaAyuda");
	
	if (visibilidad=="v") {
		divMapaAyuda.style.visibility="visible";
	} else {
	 	divMapaAyuda.style.visibility="hidden";
	}
}

function inicializaOpcionesCallejero(){
	var mostrarCallejero=document.getElementById("mostrarCallejero");
	var mostrarFotosCallejero=document.getElementById("mostrarFotosCallejero");
	
	mostrarCallejero.checked=true;
	mostrarFotosCallejero.checked=true;	
}

function mapaCargando() {
	var divMapaLoad= document.getElementById("divMapaLoad");
	
	divMapaLoad.style.zIndex=1;
	divMapaLoad.style.visibility='hidden';
	/*divMapaLoad.style.left=-1000+"px";
	divMapaLoad.style.top=-1000+"px";*/
}	

function inicializaMapaParam() {
	if ((pardim=='p') || (pardim=='m') || (pardim=='g')) {
	   inicializaMapa(pardim);	
	}
}

function inicializaMapa(dimension) {		
	switch(dimension)
  {
   	 case "p":
				zoomActual='m';
				zoom('menos');      
        break;
 	   case "m":
				zoomActual='p';
				zoom('mas');      
       	break;
	 	case "g":
					zoomActual='m';
				zoom('ma');      
       	break;
 	}
}

function callejero(){
	 var mostrarCallejero=document.getElementById("mostrarCallejero");
	 if (mostrarCallejero.checked==true){
	    muestraMapa('divMapa_02');
	 }else{
		  ocultaMapa('divMapa_02');
   }
}

function fotosCallejero(){
	 var mostrarFotosCallejero=document.getElementById("mostrarFotosCallejero");
	 if (mostrarFotosCallejero.checked==true){
	    muestraMapa('divMapa_03');
	 }else{
		  ocultaMapa('divMapa_03');
   }
}

function zoom(dimension) {

	
	var divZoomBarra=document.getElementById("divZoomBarra");
	
	switch(dimension)
  {
     case "mas":
        switch(zoomActual)
        {
           case "p":
              zoomActual="m";
              modificarZoom("m");
              divZoomBarra.style.left=leftM+"px";
              
              break;
           case "m":
              zoomActual="g";
              modificarZoom("g");
              divZoomBarra.style.left=leftG+"px";
              break;
        }
        break;
     case "menos":
        switch(zoomActual)
        {
           case "g":
              zoomActual="m";
              modificarZoom("m");
              divZoomBarra.style.left=leftM+"px";
              break;
           case "m":
              zoomActual="p";
              modificarZoom("p");
              divZoomBarra.style.left=leftP+"px";
              break;
        }
        break;
  }	
}

function modificarZoom(dimension){	
	var anchoActual;
	var altoActual;
	var anchoFuturo;
	var altoFuturo;
	
	// Obtenemos las capas e imagenes
	var divContenedor=document.getElementById("divContenedor");
	var divMapa=document.getElementById("divMapa");
	var imgMapa = document.getElementById("imgMapa");
	
	////////////////////////////////////////////////////////////////////////
	// Paso 1 - Se obtiene La posición x,y del plano respecto del contenedor
	////////////////////////////////////////////////////////////////////////
	
	// Posicion left/right del mapa respecto del contenedor
	var posActualX = parseInt(divMapa.style.left);
	var posActualY = parseInt(divMapa.style.top);
	
	// Tamaño/2 del contenedor
	var mitadVentanaAncho = Math.floor(parseInt(divContenedor.style.width)/2);
	var mitadVentanaAlto = Math.floor(parseInt(divContenedor.style.height)/2);
	
	// Posición x,y de la imagen que está en el centro del contendor
	var centroXActual = Math.abs(posActualX)+mitadVentanaAncho;
	var centroYActual = Math.abs(posActualY)+mitadVentanaAlto;
	
	////////////////////////////////////////////////////////////////////////
	// Paso 2 - Regla de 3 - Se calcula cual sera el futuro posicion x,y centrada
	////////////////////////////////////////////////////////////////////////
  anchoActual = imgMapa.width;
	altoActual = imgMapa.height;
	
	switch(dimension)
  {
     case "p":
        anchoFuturo = dimPWidth;
	      altoFuturo = dimPHeight;   
        break;
     case "m":
        anchoFuturo = dimMWidth;
	      altoFuturo = dimMHeight;   
        break;
     case "g":
        anchoFuturo = dimGWidth;
	      altoFuturo = dimGHeight;   
        break;
  }	
	
	// Regla de 3
	var centroXFuturo = Math.floor(anchoFuturo * centroXActual / anchoActual);
	var centroYFuturo = Math.floor(altoFuturo * centroYActual / altoActual);	
	
  ////////////////////////////////////////////////////////////////////////
	// Paso 3 - Se amplia el tamaño del plano
	////////////////////////////////////////////////////////////////////////
	divMapa.style.width=anchoFuturo + "px"; 
	divMapa.style.height=altoFuturo + "px";
	
	////////////////////////////////////////////////////////////////////////
	// Paso 4 - Se centra la imagen futura en el contenedor
	////////////////////////////////////////////////////////////////////////
	var PosXFinal = -centroXFuturo+mitadVentanaAncho;
	var PosYFinal = -centroYFuturo+mitadVentanaAlto;
			
	// NO SE QUEDA CORTO POR LA DERECHA
	if ((PosXFinal+anchoFuturo)>(parseInt(divContenedor.style.width)))
	{ 
		 divMapa.style.left=PosXFinal + "px"; 
	} 
	else 
	{
		 PosXFinal = -anchoFuturo+parseInt(divContenedor.style.width);
	   divMapa.style.left=PosXFinal + "px"; 
	}
	
	// NO SE QUEDA CORTO POR LA IZQUIERDA
	if (PosXFinal<0)
	{ 
		 divMapa.style.left=PosXFinal + "px"; 
	} 
	else 
	{
		 PosXFinal = 0;
	   divMapa.style.left=PosXFinal + "px"; 
	}
	
	// NO SE QUEDA CORTO POR ARRIBA
	if (PosYFinal<0)
	{ 
	   divMapa.style.top=PosYFinal + "px";
	} 
	else 
	{
	   PosYFinal = 0;
	   divMapa.style.top=PosYFinal + "px";
	}
	
	// NO SE QUEDA CORTO POR ABAJO
	if ((PosYFinal+altoFuturo)>(parseInt(divContenedor.style.height)))
	{ 
	   divMapa.style.top=PosYFinal + "px";
	} 
	else 
	{
	   PosYFinal = -altoFuturo+parseInt(divContenedor.style.height);
	   divMapa.style.top=PosYFinal + "px";
	}
	
  ////////////////////////////////////////////////////////////////////////
	// Paso 5 - Se modifica la imagen del plano (ya está imgMapa cargado
	////////////////////////////////////////////////////////////////////////
    
  imagenPlanos(dimension);
  tamanioPlanos ();
  posicionPlanos ();
  
}

function ocultaMapa (capa) {
	var divCapa=document.getElementById(capa);
	
	if ((time == null) && (divCapa.style.visibility=="visible")){
	   transparency = 100;
		 time = setInterval('fade("desaparecer","'+capa+'")',10);		
  }
}

function muestraMapa (capa) {
	var divCapa=document.getElementById(capa);
	
	if ((time == null) && (divCapa.style.visibility=="hidden")){
	   transparency = 0;
		 time = setInterval('fade("aparecer","'+capa+'")',10);		
  }
}


function ocultaFotosCallejero () {
  var mostrarCallejero=document.getElementById("mostrarFotosCallejero");
	if (mostrarCallejero.checked==false){
		ocultaMapa("divMapa_03");
  }		
}


function imagenPlanos(dimension){
	var imgMapa = document.getElementById("imgMapa");
	var imgMapa_01=document.getElementById("imgMapa_01");
  var imgMapa_02=document.getElementById("imgMapa_02");
  var imgMapa_03=document.getElementById("imgMapa_03");
  	
	switch(dimension)
  {
     case "p":
        imgMapa_01.src = imgPlanoP_01.src;  
        imgMapa_02.src = imgPlanoP_02.src;  
        imgMapa_03.src = imgPlanoP_03.src;  
        break;
     case "m":
        imgMapa_01.src = imgPlanoM_01.src;  
        imgMapa_02.src = imgPlanoM_02.src;  
        imgMapa_03.src = imgPlanoM_03.src;  
        break;
     case "g":
        imgMapa_01.src = imgPlanoG_01.src;  
        imgMapa_02.src = imgPlanoG_02.src;  
        imgMapa_03.src = imgPlanoG_03.src;  
        break;
  }
}


function tamanioPlanos(){
   var divMapa=document.getElementById("divMapa");
   var divMapa_01=document.getElementById("divMapa_01");
   var divMapa_02=document.getElementById("divMapa_02");
   var divMapa_03=document.getElementById("divMapa_03");
   
   divMapa_01.style.width=divMapa.style.width;
   divMapa_01.style.height=divMapa.style.height;
   
   divMapa_02.style.width=divMapa.style.width;
   divMapa_02.style.height=divMapa.style.height;
   
   divMapa_03.style.width=divMapa.style.width;
   divMapa_03.style.height=divMapa.style.height;
}

function posicionPlanos(){
	 var divMapa=document.getElementById("divMapa");
   var divMapa_01=document.getElementById("divMapa_01");
   var divMapa_02=document.getElementById("divMapa_02");
   var divMapa_03=document.getElementById("divMapa_03");

   divMapa_01.style.left=divMapa.style.left;
   divMapa_01.style.top=divMapa.style.top;
   
   divMapa_02.style.left=divMapa.style.left;
   divMapa_02.style.top=divMapa.style.top;
   
   divMapa_03.style.left=divMapa.style.left;
   divMapa_03.style.top=divMapa.style.top;
}


function fade(accion,capa) {
	// SE OBTIENE LA CAPA
	var obj=document.getElementById(capa);
	///////////////////////////////////////////////////
	//             MODIFICAR ESTOOOO!!!!           ////
	///////////////////////////////////////////////////
	var incremento=50;
	///////////////////////////////////////////////////
  ///////////////////////////////////////////////////

	
	// SE RELLAMA A LA FUNCION
  if (accion=="aparecer") {
    transparency += incremento; 	//incrementamos el valor
    
    //si termino la transicion borramos el intervalo y mostramos la capa
    if (transparency == 100){
       clearInterval(time);
       obj.style.visibility = "visible";
    	 time=null;
    }else{
    	 transparency = transparency; 
    }
  } else {
    transparency -= incremento; 	//decrementamos el valor
  
    //si termino la transicion borramos el intervalo y ocultamos la capa      
    if (transparency == 0){
       clearInterval(time);
       obj.style.visibility = "hidden";
    	 time=null;
    }else{
    	 transparency = transparency; 
    }
  }
  
  //se programa cada navegador por separado
  if (document.all){ 
    //esto es para IE, como siempre hay q programarlo a parte
    obj.style.filter = 'alpha(opacity='+transparency+')';
  }else{
    // Safari 1.2, posterior Firefox y Mozilla, CSS3
    obj.style.opacity = transparency /100;
    
    // anteriores Mozilla y Firefox
    obj.style.MozOpacity = transparency /100;
    
    // Safari anterior a 1.2, Konqueror
    obj.style.KHTMLOpacity = transparency /100;  
  } 
  
};