/**
	JSPopViewer (javascript)
	Autor: David Ruiz
	Web: http://www.daveruiz.net
	Version: 1.1 (10/03/2011)
	
	Creatve Commons (by-nc-sa) http://es.creativecommons.org/licencia/
**/

function JSPopViewer(_name, path) {

	this.ie = false;
	this.name = _name;
	this.initialized = false;
		
	// Animation
	this.effect = "bounce";
	this.fps = 20;
	this.velocity = 0.3;
	this.bounceX = 0.3;
	this.bounceY = 0.3;
	
	this.scriptPath = path;
	
	this.visible = false;
	this.loading = false;
	this.itsvisible = false;
	this.drag = false;
	
	this.shadows = new Array();
	this.window = null;
	this.view = null;
	this.content = null;
	this.title = "";
	this.description = null;
	this.image = null;
	this.preimage = null;
	this.b_close = null;
	this.url = "";
	
	this.x = 0;
	this.y = 0;
	this.w = this.vw = 0;
	this.h = this.vh = 0;
	this.o = 0;
	this.dw = 0;
	this.dh = 0;
	
	this.nextFrame = null;
	
	if (document.all) this.ie = parseFloat(navigator.appVersion.split(";")[1].split("MSIE").join(""));
	else this.ie = false;
	
	// CSS load
	document.write('<link rel=stylesheet href="'+this.scriptPath+'/JSPopViewer.css">');
}

JSPopViewer.prototype.init = function() {
	if (this.initialized) return;
	this.getScreenDimensions();
	this.createWindow();
	
	this.start();
	this.initialized = true;
}

JSPopViewer.prototype.start = function() {
	this.stop();
	this.intervalId = setInterval(this.name+".move()", 1000/this.fps);
}
	
JSPopViewer.prototype.stop = function() {
	if (this.intervalId) clearInterval(this.intervalId);
}
	
JSPopViewer.prototype.createWindow = function() {
		
		var html =  '<div id="'+this.name+'" class="JSPopViewer" style="display:none">';
		
		if (!this.ie || this.ie > 6) {
			html += '<div class="JSPopViewer_shadow0">';
			html += '<div class="JSPopViewer_shadow1">';
			html += '<div class="JSPopViewer_shadow2">';
			html += '<div class="JSPopViewer_shadow3">';
			html += '<div class="JSPopViewer_shadow4">';
			html += '<div class="JSPopViewer_shadow5">';
			html += '<div class="JSPopViewer_shadow6">';
			html += '<div class="JSPopViewer_shadow7">';
		}

		html += '<div id="'+this.name+'_content" class="JSPopViewer_content">';
		 html += '<img style="display:none" class="JSPopViewer_img" id="'+this.name+'_img">';
		 html += '<p class="JSPopViewer_description" id="'+this.name+'_desc"></p>';
		 html += '<div id="'+this.name+'_close" class="JSPopViewer_close"><img src="'+this.scriptPath+'/visor_close.png"></div>';
		 html += '<div id="'+this.name+'_loading" class="JSPopViewer_preloader"><img src="'+this.scriptPath+'/preload.gif">Cargando imagen</div></div>';		
		html += '</div>';
		
		if (!this.ie || this.ie > 6) html += '</div></div></div></div></div></div></div></div>';
		
		html += '<img class="JSPopViewer_preimg" id="'+this.name+'_preimg">';
		
		//Incrustamos el codigo
		document.getElementsByTagName("body")[0].innerHTML += html;
		
		if (this.ie) { 
			this.window = document.all[this.name];
			this.content = document.all[this.name+"_content"];
			this.image = document.all[this.name+"_img"];
			this.description = document.all[this.name+"_desc"];
			this.preimage = document.all[this.name+"_preimg"];
			this.preloader = document.all[this.name+"_loading"];
			this.b_close = document.all[this.name+"_close"];
		} else {
			this.window = document.getElementById(this.name);
			this.content = document.getElementById(this.name+"_content");
			this.image = document.getElementById(this.name+"_img");
			this.description = document.getElementById(this.name+"_desc");
			this.preimage = document.getElementById(this.name+"_preimg");
			this.preloader = document.getElementById(this.name+"_loading");
			this.b_close = document.getElementById(this.name+"_close");
		}
		
		this.window.style.display = "none";
		
		// Eventos de raton
		// Click fuera
		var body = document.getElementsByTagName('body')[0],
			oldbodyclick = body.onclick,
			target=this;
			
		this.window.onclick = function(e) { 
			if (!e) var e = window.event;
			e.cancelBubble = true;
			if (e.stopPropagation) e.stopPropagation();
		}
		body.onclick = function() { 
			if (typeof oldbodyclick=='function') oldbodyclick(); 
			if (target.itsvisible && !target.loading) target.close();
		}
		
		// Click en X
		this.b_close.onclick = function() { target.close() };
				
	}

JSPopViewer.prototype.open = function(obj, title) {

	if (!this.initialized) this.init();

	var url;
	
	if (typeof(obj) == "string") url = obj;
	else url = obj.src;
	
	if (!url) {
		this.close();
		return;
	}

	if (url != this.url) {
	
		this.getScreenDimensions();

		this.window.style.display = "block";
		this.window.style.position = "absolute";
		this.visible = true;
		this.loading = true;
		this.url = url;
		this.preloader.style.display = "block";
		this.description.style.display = "none";
		if (!this.itsvisible) {
			this.image.style.display = "none";
			this.w = this.content.offsetWidth;
			this.h = this.content.offsetHeight;
			this.vw = this.vh = 0;
			this.b_close.style.display = "none";
		} else {
			this.image.style.opacity = .5;
			//this.window.style.filter="alpha(opacity:50)";
		}
		this.dw = this.content.offsetWidth;
		this.dh = this.content.offsetHeight;
		this.itsvisible = true;	
		
		this.title = title || obj.title || "";
		
		this.move( true );
	}
	
	// IE necesita esperar
	var target = this;
	this.nextFrame = function() { 
		target.preimage.src = target.url;
		if (target.preimage.complete) target.loadComplete();
		else target.preimage.onload = function() { target.loadComplete() };
	}
}
	
JSPopViewer.prototype.close = function() {
	this.visible = false;
	this.url = "";
}

JSPopViewer.prototype.getScreenDimensions = function() {
	this.stageWidth = window.innerWidth || document.body.offsetWidth;
	this.stageHeight = window.innerHeight || document.body.offsetHeight;
	this.middleWidth = (this.ie?document.body.scrollLeft:window.pageXOffset) + this.stageWidth/2;
	this.middleHeight = (this.ie?document.body.scrollTop:window.pageYOffset) + this.stageHeight/2;
}
	
JSPopViewer.prototype.loadComplete = function() {
		this.loading = false;
			
		this.getScreenDimensions();

		this.dw = this.preimage.width;
		this.dh = this.preimage.height;
		
		this.image.src = this.url;
		this.image.style.opacity = 1;
		//this.window.style.filter="alpha(opacity:100)";
		this.image.style.display = "block";
		this.b_close.style.display = "block";
		
		this.preloader.style.display = "none";
		this.description.innerHTML = this.title;
		this.description.style.display = "block";
		
		this.move();
	}
	
JSPopViewer.prototype.selectImageTag = function(ext) {
		if (this.ie) this.image = document.all[this.name+"_"+ext];
		else this.image = document.getElementById(this.name+"_"+ext);
	}
	
JSPopViewer.prototype.startDrag = function() {
	this.drag = true;
}

JSPopViewer.prototype.stopDrag = function() {
	this.drag = false;
	this.close();
}
	
JSPopViewer.prototype.move = function() {

	// POSICION Y ESCALA
	if (this.window && this.itsvisible) {
	
		this.dw = this.preimage.width;
		this.dh = this.preimage.height;
				
		// Tamanyo
		if (!this.loading) {
			if (this.effect == "bounce") {
				this.vw = this.vw * this.velocity + (this.dw - this.w) * this.bounceX;
				this.vh = this.vh * this.velocity + (this.dh - this.h) * this.bounceY;
				this.w += Math.round(this.vw);
				this.h += Math.round(this.vh);
			} else {
				this.w += (this.dw - this.w) * this.velocity;
				this.h += (this.dh - this.h) * this.velocity;
			}
			
			this.image.style.width = Math.round(this.w)+"px";
			this.image.style.height = Math.round(this.h)+"px";
		} else {
			this.image.style.width = "auto";
			this.image.style.height = "auto";
		}
		
		// Posicion
		this.x = this.middleWidth - this.w/2;
		this.y = Math.max(30, this.middleHeight - this.h/2);
		this.window.style.left = Math.round(this.x)+"px";
		this.window.style.top = Math.round(this.y)+"px";
		
		// OPACIDAD
		if (this.visible) {
			this.itsvisible = true;
			if (this.o < 1) {
				this.o += .2;
				this.window.style.display = "block";
				if (!this.ie) this.window.style.opacity=this.o;
				//else this.window.style.filter="alpha(opacity:"+Math.round(this.o*100)+")";
			}
		} else {
			if (this.o > 0 && !this.ie) {
				this.o -= .2;
				if (!this.ie) this.window.style.opacity=this.o;
				//else this.window.style.filter="alpha(opacity:"+Math.round(this.o*100)+")";
			} else {
				// CIERRE
				this.itsvisible = false;
				this.image.src = null;
				this.preimage.src = null;
				this.image.style.width = "0px";
				this.image.style.height = "0px";
				this.image.style.display = "none";
				this.preloader.style.display = "block";
				this.window.style.display = "none";
				this.w = 0;
				this.h = 0;
			}
		}
	}
	
	if (typeof(this.nextFrame) == "function") {
		var todo = this.nextFrame;
		this.nextFrame = null;
		todo();
	}
}

JSPopViewer.prototype.getName = function() { return this.name; }