/* Movimiento v1.0 */
/* ©2008 */
/* www.housetic.com */
/* Software licenced */

//-----------------------------------------------------------------
var retardo=1;		//Tiempo entre pasos
var escala=2.5; 	//Escala de ampliación
var factor=1;		//Factor de ampliación 1 a escala
var paso_in=0.2;	//Incremento del factor en cada paso de ampliación
var paso_out=0.3;	//Decremento del factor en cada paso de reducción
var img_an_ini;		//Ancho inicial de la imagen
var img_al_ini;		//Alto inicial de la imagen
var ca_x_ini;		//Posición  Left inicial de la capa
var ca_y_ini;		//Posición  Top inicial de la capa
var estado=0;		//Estado del Zoom

var id; //número identificativo de la imagen, capas caja y iconos
var z; 	//imagen a ampliar
var c; 	//capa contenedor

var tx_an_ini = "160px";	//Ancho inicial de la capa de texto

var ip = 40; 	//Incremento de pixels en cada movimiento
var rx;			//Desplazamiento X para poner la imagen en el centro
var ry;			//Desplazamiento Y para poner la imagen en el centro
var dirx; 		//Dirección del movimiento X
var diry; 		//Dirección del movimiento Y
var ipx;		//Incremento de pixels en cada movimiento X
var ipy;		//Incremento de pixels en cada movimiento Y

var eImgDes;	//Imagen Botón desplazar
var eImgCan;	//Imagen Botón cancelar

//Icono desplazar
var BotDes_act = new Image();	//Activo
BotDes_act.src = "/images/BotDes_act.png";
var BotDes_des = new Image();	//Desactivo
BotDes_des.src = "/images/BotDes_des.png";

//Icono cancelar
var BotCan_act = new Image();	//Activo
BotCan_act.src="/images/BotCan_act.png";
var BotCan_des = new Image();	//Desactivo
BotCan_des.src="/images/BotCan_des.png";

//Imagen transparente
var ImgTrans = new Image();
ImgTrans.src = "/images/t10x10.gif";

//-----------------------------------------------------------------

//Acción de icono Cancelar
function evBotCancel(){
	zoom(z,'out');
}

//Acción del icono Desplazar
function evBotDespla(e){
	setOpacity(z,6); //Pomer transparente la imagen
	dragStart(e, c.id);
}

//Botón desplazar activo
function evBotDes_act(){
	if (browser.isIE){
		//Caso del IE
		//Poner la imagen PNG con el filtro del IE
		eImgDes.className = "mov_imgdes_act";
	}else{
		//Resto de Browsers
		//Poner la imagen PNG
		eImgDes.src = BotDes_act.src;		
		}
}

//Botón desplazar desactivo
function evBotDes_des(){
	if (browser.isIE){
		//Caso del IE
		//Poner la imagen PNG con el filtro del IE
		eImgDes.className = "mov_imgdes_des";	
	}else{
		//Resto de Browsers
		//Poner la imagen PNG
		eImgDes.src = BotDes_des.src;	
		}
}

//Botón cancelar activo
function evBotCan_act(){
	if (browser.isIE){
		//Caso del IE
		//Poner la imagen PNG con el filtro del IE
		eImgCan.className = "mov_imgcan_act";
	}else{
		//Resto de Browsers
		//Poner la imagen PNG
		eImgCan.src = BotCan_act.src;		
		}
}

//Botón cancelar desactivo
function evBotCan_des(){
	if (browser.isIE){
		//Caso del IE
		//Poner la imagen PNG con el filtro del IE
		eImgCan.className = "mov_imgcan_des";	
	}else{
		//Resto de Browsers
		//Poner la imagen PNG
		eImgCan.src = BotCan_des.src;	
		}
}

//Montar la capa de iconos con los eventos
function MostrarBotones(){
	//c = document.getElementById("fotoc_01");
	//z = document.getElementById("fotoi_01");
	
	//Montar la Capa
	var eDiv = document.createElement("div");
	eDiv.className = "mov_iconos";
	
	//Montar los Iconos de los Botones
	eImgDes = document.createElement("img");
	eImgCan = document.createElement("img");
	
	//Aplicar los estilos de tramsparencia si IE
	if (browser.isIE){
		//Caso del IE
		//Poner el img el icono transparente
		eImgDes.src = ImgTrans.src;
		eImgCan.src = ImgTrans.src;
		//Poner la imagen PNG con el filtro del IE
		eImgDes.className = "mov_imgdes_des";
		eImgCan.className = "mov_imgcan_des";	
	}else{
		//Resto de Browsers
		//Poner la imagen PNG
		eImgDes.src = BotDes_des.src;
		eImgCan.src = BotCan_des.src;		
		}
	
	//Añadir elementos a la capa
	eDiv.appendChild(eImgDes);	//Icono Desplazar
	eDiv.appendChild(eImgCan);	//Icono Cancelar
	
	//Añadir la capa a la capa de la foto
	c.appendChild(eDiv);		//Capa
	
	//Cambiar el cursor de la imagen
	z.className = "mov_curAzul";
	
	//Activar los eventos a los iconos
	if (eImgDes.addEventListener) {
		//alert("fx");
		//Para el FireFox
    	eImgCan.addEventListener('click', evBotCancel, false);		//Icono Cancelar, cancelar
    	eImgCan.addEventListener('mouseover', evBotCan_act, false);	//Icono Cancelar, activo
    	eImgCan.addEventListener('mouseout', evBotCan_des, false);	//Icono Cancelar, normal
		eImgDes.addEventListener('mousedown', evBotDespla, false);	//Icono Desplazar, desplazar
		eImgDes.addEventListener('mouseover', evBotDes_act, false);	//Icono Desplazar, activo
    	eImgDes.addEventListener('mouseout', evBotDes_des, false);	//Icono Desplazar, normal
  	} else if (eImgDes.attachEvent) {
		//alert("ie");
		//Para el IExplorer
		eImgCan.attachEvent('onclick', evBotCancel);		//Icono Cancelar, cancelar
		eImgCan.attachEvent('onmouseover', evBotCan_act);	//Icono Cancelar, activo
  		eImgCan.attachEvent('onmouseout', evBotCan_des);	//Icono Cancelar, normal
		eImgDes.attachEvent('onmousedown', evBotDespla);	//Icono Desplazar, desplazar
  		eImgDes.attachEvent('onmouseover', evBotDes_act);	//Icono Desplazar, activo
  		eImgDes.attachEvent('onmouseout', evBotDes_des);	//Icono Desplazar, normal
	}	
}

//Eliminar la capa de iconos con los eventos
function OcultarBotones(){
	//Eliminar el último elemento situado en la capa de la caja
	//que coincide con la capa de iconos
  	if (c.childNodes.length > 0) {
    	c.removeChild(c.lastChild);
		
		//Restaurar el cursor de la imagen
		z.className = "mov_curLupa";	
  	}	
}

//Flotar capa, poner en posición absoluta
function FlotarCapa(capa){
	if(capa != null){
		//Encontrar la posición del objeto
		var pos = getPosicionElemento(capa);
		//Posición inicial
		ca_x_ini = pos.x;
		ca_y_ini = pos.y;
		//Situar en la posicion
		capa.style.left=pos.x + "px";
		capa.style.top=pos.y + "px";
		//Traer al frente
                if (capa.id=="divMsg"){
                  capa.style.zIndex = 99;
                }else{
		  capa.style.zIndex = 80;
                }
		//Flotar capa
		capa.style.position="absolute";
		}
	else{
		alert("FlotarCapa ERROR");
		}
}

//Anclar capa, poner en posición relativa
function AnclarCapa(capa){
	if(capa != null){
		//Anclar capa
		capa.style.position="relative";
		//Ponerla en el origen
		capa.style.left = "0px";
		capa.style.top = "0px";
		//Poner en el fondo
                if (capa.id=="divMsg"){
                  capa.style.zIndex = 99;
                }else{
		  capa.style.zIndex = 1;
                }
		
	}else{
		alert("AnclarCapa ERROR");
		}
}

function AmpliarTexto(){
		//Encontrar la posición de la capa de texto
		var tx = document.getElementById("fotot_" + id);
		tx.style.width = "100%";
}

function ReducirTexto(){
		//Encontrar la posición de la capa de texto
		var tx = document.getElementById("fotot_" + id);
		tx.style.width = tx_an_ini;
}

//Retorna la posición left y top de un elemento en el browser
function getPosicionElemento(elem){
  var posX = 0;
  var posY = 0;             
  while(elem != null){
    posX += elem.offsetLeft;
    posY += elem.offsetTop;
    elem = elem.offsetParent;
  }                       
  return { x : posX, y : posY};
}

//Ampliar la imagen
function zoom(imagen, accion){	
	//SI se selecciona otro elemento poner en posición normal
	if(estado != 0 && imagen.id != z.id){
		OcultarBotones();
		setOriginal();
		AnclarCapa(c);
		estado=0;
	}
	var original_time = retardo;
	//Inicio del Zoom in
	if(accion == "in" && estado == 0){
		//Asignar la imagen a z
		z = imagen;
		//Extraer el número del id de la imagen y capa
		id = imagen.id.substring(imagen.id.length - 2, imagen.id.length); 
		//Encontrar la capa que contiene la imagen
		c = document.getElementById("fotoc_" + id);
		setOpacity(c,6); //Pomer transparente la imagen
		img_an_ini = z.width;
		img_al_ini = z.height;
		estado=1; 		// Pasar al estado 1
		factor=1; 		// Factor de zoom a 1
		FlotarCapa(c);
		zoom_centro_pre();
		zoom_paso();	//Arrancar el zoom
		}
	//Inicio del Zoom out
	if(accion == "out" && estado == 2){
		estado=3;
		OcultarBotones();
		ReducirTexto();
		zoom_origen_pre();
		zoom_paso(); //Arrancar el zoom
	 }
}

//Ampliar la imagen
function zoom_ampliar(){
	if(factor > escala) return 1; //Fin de la ampliación
	else{
		factor += paso_in;
		if(factor > escala) return 1;
		else{
			z.width = img_an_ini * factor;
			z.height = img_al_ini * factor;
			return 0;
		}	
	} 
}
function zoom_reducir(){
	if(factor < 1) return 1;	//Fin de la reducción
	else{
		factor -= paso_out;
		if(factor < 1) return 1;
		else{
			z.width=img_an_ini*factor;
			z.height=img_al_ini*factor;
			return 0;
		}	
	} 
}

//Ampliar o reducir la imagen
function zoom_paso(){
	switch(estado){
		//Estado 0 Reposo
		case 0:	break;
		//Estado 1 Ampliación
		case 1:	es = zoom_ampliar();
				es += zoom_centro();
				if(es==2){
					estado=2;
					setOpacity(c,10);
					MostrarBotones();
					AmpliarTexto();	
					}
				else{
					setTimeout("zoom_paso()",retardo);					
				}
				break;
		//Estado 2 Reposo Ampliado		
		case 2:	break;
		//Estado 3 Reducción
		case 3:	es = zoom_reducir();
				es += zoom_origen();
				if(es == 2){
					setOriginal();
					AnclarCapa(c);
					estado=0;
					factor=1;
					}
				else{
					setTimeout("zoom_paso()",retardo);
					}
				break;
		}
}

//Información de las medidas del Browser
function clientInfo(){
	var iebody = document.compatMode && document.compatMode != "BackCompat" 
		? document.documentElement : document.body;
	
	this.width = browser.isIE ? iebody.clientWidth : self.innerWidth;
	this.height = browser.isIE ? iebody.clientHeight : self.innerHeight;
	this.scrollLeft = browser.isIE ? iebody.scrollLeft : pageXOffset;
	this.scrollTop = browser.isIE ? iebody.scrollTop : pageYOffset;
	this.cX = this.scrollLeft + this.width / 2;
	this.cY = this.scrollTop + this.height / 2;
} 

//Vector de desplazamiento para el zoom centro
function zoom_centro_pre(){
	var pos = getPosicionElemento(z);
	var cen = new clientInfo();
	var cix = pos.x + (z.width*escala) / 2;	//Centro X de la imagen
	var ciy = pos.y + (z.height*escala) / 2; //Centro Y de la imagen
	var	cpx = cen.cX;	//Centro X de la pantalla
	var	cpy = cen.cY;	//Centro Y de la pantalla
	rx = cpx - cix;	//Desplazamiento X
	ry = cpy - ciy;	//Desplazamiento Y
	//Dirección del movimiento
	if(rx >= 0) dirx = 1;
	else{
		dirx = -1;
		rx *= dirx;
		}
	if(ry >= 0) diry = 1;
	else{
		diry = -1;
		ry *= diry;
		}
}
//Poner la imagen en el centro
function zoom_centro(){
	//Pasos por cada movimiento
	var npa;	//Número de pasos
	if(rx > ry){
		npa = rx / ip;
		ipx = ip;
		ipy = ry / npa;
	}
	else{
		npa = ry / ip;
		ipy = ip;
		ipx = rx / npa;
	}		
	//Dar un paso
	rx -= ipx;
	if(rx > 0){
		c.style.left = ((parseInt(c.style.left) + ipx * dirx)) + "px";
	}
	ry -= ipy;
	if(ry > 0){
		c.style.top = ((parseInt(c.style.top) + ipy * diry)) + "px";
	}
	if(rx <= 0 && ry <=0){
		return 1;
	}
	else{
		return 0;
	}
}

//Vector de desplazamiento para el zoom origen
function zoom_origen_pre(){
	var pos = getPosicionElemento(z);
	//var cen = new clientInfo();
	var cix = pos.x + img_an_ini / 2;	//Centro X de la imagen
	var ciy = pos.y + img_al_ini / 2; //Centro Y de la imagen
	var	cpx = ca_x_ini + img_an_ini / 2;	//Centro X inicial de la capa 
	var	cpy = ca_y_ini + img_al_ini / 2;	//Centro Y inicial de la capa
	rx = cpx - cix;	//Desplazamiento X
	ry = cpy - ciy;	//Desplazamiento Y
	//Dirección del movimiento
	if(rx >= 0) dirx = 1;
	else{
		dirx = -1;
		rx *= dirx;
		}
	if(ry >= 0) diry = 1;
	else{
		diry = -1;
		ry *= diry;
		}
}

//Poner la imagen en la posición inicial
function zoom_origen(){
	//Pasos por cada movimiento
	var npa;	//Número de pasos
	if(rx > ry){
		npa = rx / ip;
		ipx = ip;
		ipy = ry / npa;
	}
	else{
		npa = ry / ip;
		ipy = ip;
		ipx = rx / npa;
	}
	rx -= ipx;
	if(rx > 0){
		c.style.left = ((parseInt(c.style.left) + ipx * dirx)) + "px";
	}
	ry -= ipy;
	if(ry > 0){
		c.style.top = ((parseInt(c.style.top) + ipy * diry)) + "px";
	}
	if(rx <= 0 && ry <=0){
		return 1;
	}
	else{
		return 0;
	}
}

//Tamaño original de la imagen
function setOriginal(){
	z.width = img_an_ini;
	z.height = img_al_ini;
}

//Establecer la opacidad de un elemento
function setOpacity(objs, value) {
	var obj = document.getElementById("fotoa_" + id);
	if(value == 10){
		obj.style.opacity = 1;
		obj.style.filter = "";
	}
	else{
		obj.style.opacity = value / 10;
		obj.style.filter = "alpha ( opacity = " + value * 10 + ")";
	}
}

//==========================================================

// Determine browser and version.

function Browser() {
  
  var ua, s, i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}

var browser = new Browser();

// Global object to hold drag information.

var dragObj = new Object();
dragObj.zIndex = 3;

function dragStart(event, id) {

  var el;
  var x, y;

  // If an element id was given, find it. Otherwise use the element being
  // clicked on.

  if (id)
    dragObj.elNode = document.getElementById(id);
  else {
    if (browser.isIE)
      dragObj.elNode = window.event.srcElement;
    if (browser.isNS)
      dragObj.elNode = event.target;

    // If this is a text node, use its parent element.

    if (dragObj.elNode.nodeType == 3)
      dragObj.elNode = dragObj.elNode.parentNode;
  }

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Save starting positions of cursor and element.

  dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;
  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;

  // Update element's z-index.

  if (dragObj.elNode.id == "divMsg"){
    dragObj.elNode.style.zIndex = 99;
  }else{
    dragObj.elNode.style.zIndex = ++dragObj.zIndex;
  }

  // Capture mousemove and mouseup events on the page.

  if (browser.isIE) {
    document.attachEvent("onmousemove", dragGo);
    document.attachEvent("onmouseup",   dragStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS) {
    document.addEventListener("mousemove", dragGo,   true);
    document.addEventListener("mouseup",   dragStop, true);
    event.preventDefault();
  }
}

function dragGo(event) {

  var x, y;

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Move drag element by the same amount the cursor has moved.

  dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";

  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS)
    event.preventDefault();
}

function dragStop(event) {

  if(z!=null) setOpacity(z,10); //Pomer transparente la imagen

  // Stop capturing mousemove and mouseup events.

  if (browser.isIE) {
    document.detachEvent("onmousemove", dragGo);
    document.detachEvent("onmouseup",   dragStop);
  }
  if (browser.isNS) {
    document.removeEventListener("mousemove", dragGo,   true);
    document.removeEventListener("mouseup",   dragStop, true);
  }
}