// JavaScript Document

window.onresize =function(){
	clearTimeout(viewer.t);
	viewer.t=setTimeout("viewer.resize_pagina()",200);
}

var viewer = {
	padding:20,
	ancho:200,
	alto:200,
	margin_top:20,
	tiempo:0.5,
	t:0,
	q:0,
	tween_x:"",
	tween_y:"",
	tween_o:"",
	texto:"",
	mascara: "viewer_mascara",
	recuadro: "viewer_recuadro",
	contenedor: "viewer_img",
	contenido: "viewer_bg",
	galeria:new Array(),
	referencia:"viewer_galeria",
	browser:navigator.appName,
	init: function() {
		var objeto=document.getElementsByTagName("a");
		for (var i=0; i<objeto.length; i++){
			var rel=objeto[i].rel;
			if (rel.match(eval("/"+this.referencia+"/"))){
				var nombre_rel=this.retorna_rel(rel);
				if (!this.galeria[nombre_rel]) this.galeria[nombre_rel]=new Array();
				this.galeria[nombre_rel].push(objeto[i]);
				objeto[i].setAttribute("q", this.galeria[nombre_rel].length);
				objeto[i].setAttribute("id", nombre_rel+"_"+this.galeria[nombre_rel].length);
				objeto[i].onclick=function(){
					viewer.ampliar(this);
					return false;
				}
			}
		}
	},
	ampliar: function(source){
		this.texto="";
		var objeto=source.parentNode;
		var texto=objeto.getElementsByTagName("div");
		if (texto.length){
			if(texto[0].className=="viewer_texto"){
				this.texto='<div class="viewer_pie">'+texto[0].innerHTML+'</div>';
			}
		}
		this.titulo=source.title;
		this.titulo=(source.title) ? '<div class="viewer_pie">'+source.title+'</div>' : '';
		this.imagen=source.href;
		this.q=source.getAttribute("q");
		this.rel=this.retorna_rel(source.rel);
		this.crear_recuadro();
		this.crear_mascara();
		var viewer_img=document.createElement("img");
		viewer_img.setAttribute("id", this.contenedor);
		if (this.browser=="Microsoft Internet Explorer") viewer_img.style.filter = "alpha(opacity=" + 0 + ")";
		viewer_img.style.opacity=(0/100);
		viewer_img.style.MozOpacity = (0/100); 
		viewer_img.style.KhtmlOpacity = (0/100);
		viewer_img.style.visibility="hidden";
		document.getElementById(this.contenido).appendChild(viewer_img);
		this.anadir_evento("load", this.onload, viewer_img);
		viewer_img.src=this.imagen;
	},
	onload: function(){
		var objeto=document.getElementById(viewer.recuadro);
		var ancho=document.getElementById(viewer.contenedor).width;
		var alto=document.getElementById(viewer.contenedor).height;
		var arrpagina=viewer.pagina();
		tween_x=new Tween(objeto.style, "width", Tween.strongEaseInOut, viewer.ancho, ancho, (viewer.ancho != ancho) ? viewer.tiempo : 0.1, "px");
		tween_y=new Tween(objeto.style, "height", Tween.strongEaseInOut, viewer.alto, alto, (viewer.alto != alto) ? viewer.tiempo : 0.1, "px");
		tween_o=new OpacityTween(document.getElementById(viewer.contenedor), Tween.strongEaseInOut, 1, 100, viewer.tiempo);
		tween_x.onMotionChanged=tween_y.onMotionChanged=function() {
			var ancho_=objeto.style.width.split("px");
			ancho_=ancho_[0]/1;
			objeto.style.top=arrpagina.scrolly+viewer.margin_top+"px";
			objeto.style.left=(arrpagina.mitad_ancho_vp)-(ancho_/2)+arrpagina.scrollx+"px";
		}
		tween_x.onMotionFinished=function() {
			viewer.ancho=ancho;
			tween_y.start();
		}
		tween_y.onMotionFinished=function() {
			viewer.alto=alto;
			var objeto1=document.getElementById(viewer.contenedor);
			if (objeto1){
				objeto1.style.visibility="visible";
				tween_o.start();
			}
		}
		tween_o.onMotionFinished=function() {
			var objeto1=document.getElementById(viewer.contenido);
			if (objeto1){
				//objeto1.style.width=objeto.style.width;
				objeto1.style.backgroundImage="none";
				viewer.footer();
			}
		}
		tween_x.start();
	},
	footer:function(){
		var total=this.galeria[this.rel].length/1;
		var actual=this.q/1;
		var cadena="";
		var objeto=document.getElementById("viewer_nav");
		if (actual<=total && actual != 1){
			cadena+='<a href="javascript:void(0);" class="viewer_ant" title="Anterior" alt="Anterior" onclick="viewer.ampliar(document.getElementById(\''+this.rel+"_"+(actual-1)+'\'));">&nbsp;</a>';
		}
		if (actual>=1 && actual<total){
			cadena+='<a href="javascript:void(0);" class="viewer_sig" title="Siguiente" alt="Siguiente" onclick="viewer.ampliar(document.getElementById(\''+this.rel+"_"+(actual+1)+'\'));">&nbsp;</a>';
		}
		objeto.innerHTML=cadena;
		var objeto=document.getElementById("viewer_footer");
		if (viewer.titulo){
			objeto.innerHTML=viewer.titulo;
			objeto.style.height=objeto.offsetHeight+"px";
			objeto.style.bottom=objeto.offsetHeight+"px";
			objeto.style.width=viewer.ancho+"px";
			objeto.style.visibility="hidden";
			document.getElementById(viewer.recuadro).onmouseover=function(){
				objeto.style.visibility="visible";
			}
			document.getElementById(viewer.recuadro).onmouseout=function(){
				objeto.style.visibility="hidden";
			}
		}
		viewer.resize_pagina()
		return;
		var objeto=document.getElementById("viewer_footer");
		objeto.onmouseover=function(){
			objeto.style.visibility="visible";
		}
		objeto.onmouseout=function(){
			objeto.style.visibility="hidden";
		}
		objeto.style.width=this.ancho+"px";
		var cadena="";
		//cadena+=this.texto;
		cadena+=this.titulo;
		cadena+='<div class="viewer_info">';
		cadena+='<div class="imagenes">Imagen '+actual+' de '+total+'</div>';
		cadena+='<div class="nav">';
		if (actual<=total && actual != 1){
			cadena+='<a href="javascript:void(0);" onclick="viewer.ampliar(document.getElementById(\''+this.rel+"_"+(actual-1)+'\'));">Anterior</a>';
		}
		if (actual != 1 && actual<total){
			cadena+=' | ';
		}
		if (actual>=1 && actual<total){
			cadena+='<a href="javascript:void(0);" onclick="viewer.ampliar(document.getElementById(\''+this.rel+"_"+(actual+1)+'\'));">Siguiente</a>';
		}
		cadena+='</div>';
		cadena+='<div class="clear"></div>';
		cadena+='</div>';
		objeto.innerHTML=cadena;
		objeto.style.bottom=0+this.padding+"px";
		var img=document.getElementById(viewer.contenedor);
		img.onmouseover=function(){
			objeto.style.visibility="visible";
		}
		img.onmouseout=function(){
			objeto.style.visibility="hidden";
		}
	},
	crear_ventana: function(parametro){
		this.crear_recuadro();
		this.crear_mascara();
		var contenido=document.createElement("div");
		contenido.setAttribute("id", this.contenedor);
		if (this.browser=="Microsoft Internet Explorer") contenido.style.filter = "alpha(opacity=" + 0 + ")";
		contenido.style.opacity=(0/100);
		contenido.style.MozOpacity = (0/100); 
		contenido.style.KhtmlOpacity = (0/100);
		contenido.style.visibility="hidden";
		var alto;
		var ancho;
		if (typeof(parametro.opciones)!="undefined"){
			if (parametro.opciones["alto"]) alto=parametro.opciones["alto"];
			if (parametro.opciones["ancho"]) ancho=parametro.opciones["ancho"];
		}
		if (parametro.texto){
			document.getElementById(parametro.capa).innerHTML=parametro.texto;
			alto=(alto) ? alto : document.getElementById(parametro.capa).offsetHeight;
			ancho=(ancho) ? ancho : document.getElementById(parametro.capa).offsetWidth;
			contenido.innerHTML=parametro.texto;
			document.getElementById(parametro.capa).innerHTML="";
		}
		if (parametro.iframe) contenido.innerHTML=parametro.iframe;
		document.getElementById(this.contenido).appendChild(contenido);
		this.ampliar_recuadro(ancho, alto);
	},
	ampliar_recuadro: function(ancho, alto){
		ancho=(ancho) ? ancho : document.getElementById(this.contenedor).offsetWidth;
		alto=(alto) ? alto : document.getElementById(this.contenedor).offsetHeight;
		var objeto=document.getElementById(this.recuadro);
		var arrpagina=this.pagina();
		tween_x=new Tween(objeto.style, "width", Tween.strongEaseInOut, viewer.ancho, ancho, (viewer.ancho != ancho) ? viewer.tiempo : 0.1, "px");
		tween_y=new Tween(objeto.style, "height", Tween.strongEaseInOut, viewer.alto, alto, (viewer.alto != alto) ? viewer.tiempo : 0.1, "px");
		tween_o=new OpacityTween(document.getElementById(viewer.contenedor), Tween.strongEaseInOut, 1, 100, viewer.tiempo);
		tween_x.onMotionChanged=tween_y.onMotionChanged=function() {
			var ancho_=objeto.style.width.split("px");
			ancho_=ancho_[0]/1;
			objeto.style.top=arrpagina.scrolly+viewer.margin_top+"px";
			objeto.style.left=(arrpagina.mitad_ancho_vp)-(ancho_/2)+arrpagina.scrollx+"px";
		}
		tween_x.onMotionFinished=function() {
			viewer.ancho=ancho;
			tween_y.start();
		}
		tween_y.onMotionFinished=function() {
			viewer.alto=alto;
			var objeto1=document.getElementById(viewer.contenedor);
			if (objeto1){
				objeto1.style.visibility="visible";
				tween_o.start();
			}
		}
		tween_o.onMotionFinished=function() {
			var objeto=document.getElementById(viewer.contenido);
			if (objeto) objeto.style.backgroundImage="none";
		}
		tween_x.start();
	},
	crear_mascara: function(){
		if (document.getElementById(this.mascara)) document.body.removeChild(document.getElementById(this.mascara));
		var objeto=document.createElement("DIV");
		document.body.appendChild(objeto);
		objeto.setAttribute('id',this.mascara);
		var arrpagina=this.pagina();
		objeto.style.width=arrpagina.ancho_pagina+"px";
		objeto.style.height=arrpagina.alto_pagina+"px";
		objeto.onclick=function(){viewer.cerrar_viewer()};
	},
	crear_recuadro: function(){
		if (document.getElementById(this.recuadro)) document.body.removeChild(document.getElementById(this.recuadro));
		var objeto=document.createElement("DIV");
		document.body.appendChild(objeto);
		objeto.setAttribute('id',this.recuadro);
		var arrpagina=this.pagina();
		objeto.style.width=this.ancho-(this.padding*0)+"px";
		objeto.style.height=this.alto-(this.padding*0)+"px";
		objeto.style.top=arrpagina.scrolly+this.margin_top+"px";
		objeto.style.left=(arrpagina.mitad_ancho)-(this.ancho/2)+arrpagina.scrollx+"px";
		var cadena="";
		cadena+='<div id="'+this.contenido+'">';
		cadena+='<a href="javascript:void(0)" onclick="viewer.cerrar_viewer()" class="viewer_cerrar" title="Cerrar"></a>';
		cadena+='<div class="viewer_sup_izq"></div>';
		cadena+='<div class="viewer_sup"></div>';
		cadena+='<div class="viewer_sup_der"></div>';
		cadena+='<div class="viewer_izq"></div>';
		cadena+='<div class="viewer_inf_izq"></div>';
		cadena+='<div class="viewer_inf"></div>';
		cadena+='<div class="viewer_inf_der"></div>';
		cadena+='<div class="viewer_der"></div>';
		cadena+='</div>';
		cadena+='<div id="viewer_nav"></div>';
		cadena+='<div id="viewer_footer"></div>';
		objeto.innerHTML=cadena;
		var objeto=document.getElementById(this.contenido);
		objeto.style.backgroundImage="url(images/viewer/cargando.gif)";
	},
	cerrar_viewer: function(){
		if (this.tween_x) this.tween_x.stop();
		if (this.tween_y) this.tween_y.stop();
		if (this.tween_o) this.tween_o.stop();
		var objeto=document.getElementById(this.mascara);
		if (objeto) document.body.removeChild(objeto);
		var objeto=document.getElementById(this.recuadro);
		if (objeto) document.body.removeChild(objeto);
	},
	pagina: function(){
		this.vpx = (document.documentElement && document.documentElement.clientWidth) || window.innerWidth || self.innerWidth || document.body.clientWidth;
		this.vpy= (document.documentElement && document.documentElement.clientHeight) || window.innerHeight || self.innerHeight || document.body.clientHeight;
		this.scrollx = (document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft;
		this.scrolly = (document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop;
		this.ancho_pagina = (document.documentElement && document.documentElement.scrollWidth) ? document.documentElement.scrollWidth : (document.body.scrollWidth > document.body.offsetWidth) ? document.body.scrollWidth : document.body.offsetWidth;
		this.alto_pagina = (document.documentElement && document.documentElement.scrollHeight) ? document.documentElement.scrollHeight : (document.body.scrollHeight > document.body.offsetHeight) ? document.body.scrollHeight : document.body.offsetHeight;
		this.mitad_ancho=this.ancho_pagina/2;
		this.mitad_ancho_vp=this.vpx/2;
		return this;
	},
	resize_pagina: function(){
		var objeto=document.getElementById(this.mascara);
		if (objeto){
			this.crear_mascara();
			var arrpagina=this.pagina();
			objeto.style.width=arrpagina.ancho_pagina+"px";
			objeto.style.height=arrpagina.alto_pagina+"px";
		}
		var objeto=document.getElementById(this.recuadro);
		if (objeto){
			var arrpagina=this.pagina();
			objeto.style.top=arrpagina.scrolly+this.margin_top+"px";
			objeto.style.left=(arrpagina.mitad_ancho)-(this.ancho/2)+arrpagina.scrollx+"px";
		}
	},
	anadir_evento: function(evento, funcion, elemento){
		if (elemento.addEventListener){
			return elemento.addEventListener(evento,funcion,false);
		} else if (elemento.attachEvent) {
			return elemento.attachEvent("on"+evento, funcion);
		} else {
			try{
				elemento["on"+evento] = funcion;
			} catch(e){
				throw 'No es posible añadir evento';
			}
		}
	},
	retorna_rel: function(objeto){
		return (objeto.match(/\[(.+)\]/)) ? objeto.match(/\[(.+)\]/.exec(objeto)[1]) : this.referencia;
	}
}