var ventanaModal 	= new Object();
var idVentada	 	= 1;
var CSS			 	= document.createElement("link");
CSS.rel			= "stylesheet"
CSS.type		= "text/css"
CSS.href		= "/Libs/JS/Modal Window/ventanaModal.css";
var CSSagregado = false;

function opacityModal(id, opacStart, opacEnd, millisec , idVentana ) {
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;
	changeOpacModal(opacEnd, id, idVentana);
	//determine the direction for the blending, if start and end are the same nothing happens
	/*if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("changeOpac(" + i + ",'" + id + "','" + idVentana + "')",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++)
			{
			setTimeout("changeOpac(" + i + ",'" + id + "','" + idVentana + "')",(timer * speed));
			timer++;
		}
	}*/
}

function changeOpacModal(opacity, id , idVentana ) {
	var object = document.getElementById(id).style; 
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
	//IMPORTANTE: la ventana modal, cuando realiza el fadeIn, su rango debe comenzar como minimo en 2 para no generar posibles interferencias con esta funcion
	if ( opacity == 1 ){
		if ( document.getElementById("ventanaModal" + idVentana) ){
			document.getElementById("ventanaModal" + idVentana).style.display = "none";
		}
		if ( document.getElementById("backModalWindow" + idVentana) )
			document.getElementById("backModalWindow" + idVentana).style.display = "none";
	}
}

ventanaModal.inicializar = function(width , height , positionLeft , positionTop , idElemento , encabezado , imageBack , imageClose , textoEncabezado , cubrirFondo ){
	if ( CSSagregado == false ){
		(document.getElementsByTagName('Head')[0]).appendChild(CSS);
		CSSagregado = true;
	}
	this.id = idVentada;
	idVentada++;
	this.width			= (width)			? width			: "550"; 	//Interpretadas como pixeles
	this.height			= (height)			? height 		: "300"; 	//Interpretadas como pixeles
	this.positionLeft	= (positionLeft)	? positionLeft	: 3; 		//alineacion ejeX  1 = top 	2 = top/center	3 = center	4 = bottom/center	5 = bottom (DEFAULT center)
	this.positionTop	= (positionTop) 	? positionTop	: 3; 		//alineacion ejeY  1 = left	2 = left/center	3 = center	4 = rigth/center	5 = rigth    (DEFAULT center)
	this.encabezado 	= (encabezado) 		? encabezado 	: false;
	this.idElemento 	= (idElemento) 		? idElemento 	: false;	
	this.imageBack		= (imageBack)		? imageBack	 	: "url(/Libs/JS/Modal Window/FondoLigthing.png)";
	this.imageClose		= (imageClose)		? imageClose 	: "/Libs/JS/Modal Window/IconoCerrar.png";
	this.textoEncabezado= (textoEncabezado)	? textoEncabezado : "";
	this.cubrirFondo	= (cubrirFondo)		? cubrirFondo	: true;
	this.Yscroll		= 0;
	this.lastYscroll	= 0; //Indica la ultima posicion Y obtenida del scroll para centrar la ventana
	this.addModalWindow();
	this.addBackModalWindow();
}

ventanaModal.inicializar.prototype = {
	addModalWindow		:	function (){
		//Generamos los elementos
		var divModal 						= document.createElement("div");
		divModal.className 					= "ventanaModal";
		divModal.id 						= "ventanaModal" + this.id;
		divModal.style.width				= this.width + "px";
		divModal.style.height				= this.height + "px";
		
		if ( this.positionLeft == 1 )
			divModal.style.left			= "0px";
		else if ( this.positionLeft == 2 )
			divModal.style.left			= ((( screen.availWidth  - this.width  ) / 7 ) * 2);
		else if ( this.positionLeft == 4 )
			divModal.style.right		= ((( screen.availWidth  - this.width  ) / 7 ) * 2);
		else if ( this.positionLeft == 5 )
			divModal.style.right		= "0px";
		else
			divModal.style.left			= (( screen.availWidth  - this.width  ) / 2 );
		
		if ( this.positionTop == 1 )
			divModal.style.top			= "0px";
		else if ( this.positionTop == 2 ){
			divModal.style.top			= ((( screen.availHeight - this.height ) / 10 ) * 2);
			this.Yscroll				= divModal.style.top;
		}
		else if ( this.positionTop == 4 ){
			divModal.style.bottom		= ((( screen.availHeight - this.height ) / 10 ) * 2);	
			this.Yscroll				= divModal.style.top;			
		}
		else if ( this.positionTop == 5 ){
			divModal.style.bottom		= "0px";
			this.Yscroll				= divModal.style.top;
		}
		else{
			divModal.style.top			= ( ( screen.availHeight - this.height ) / 3 );
			this.Yscroll				= divModal.style.top;
		}
		
		divModal.style.display 				= "none";
		divModal.style.backgroundImage		= this.imageBack;
		
		if ( this.encabezado ){
			var divModalHeader 				= document.createElement("div");
			divModalHeader.className 		= "ventanaModal_Encabezado";
			divModalHeader.id				= "ventanaModalHeader" + this.id;
			
			var textoEncabezado				= document.createElement("div");
			textoEncabezado.className		= "ventanaModal_Encabezado_titulo";
			textoEncabezado.id				= "ventanaModal_Encabezado_Titulo_" + this.id;
			textoEncabezado.appendChild(
				document.createTextNode(this.textoEncabezado)
			);
			
			var imgModalCerrar 				= document.createElement("img");
			imgModalCerrar.className 		= "ventanaModal_Encabezado_cerrar";
			imgModalCerrar.src 				= this.imageClose;
			imgModalCerrar.style.left		= this.width - 30 + "px";
			imgModalCerrar.id				="OIGA";
			imgModalCerrar.onclick			= function(){
				var idVentana 	= this.parentNode.parentNode.id;
				idVentana		= idVentana.substring(12);
				if ( document.getElementById("ventanaModal" + idVentana) ){
					finished = true;
					opacityModal("ventanaModal" + idVentana , 100 , 1 , 1000 ,  idVentana );
					/*document.getElementById("ventanaModal" + idVentana).style.display = "none";
					if ( document.getElementById("backModalWindow" + idVentana) )
					document.getElementById("backModalWindow" + idVentana).style.display = "none";*/
				}
				else{
					if ( document.getElementById("backModalWindow" + idVentana) )
						document.getElementById("backModalWindow" + idVentana).style.display = "none";
				}
				try{
					setContinueDownloading ( false );
				}
				catch(e){}
				//(document.getElementsByTagName('Body')[0]).style.overflow = "auto";
			}
		}
		
		var divModalCuerpo 			= document.createElement("div");
		divModalCuerpo.className 	= "ventanaModal_Contenido";
		divModalCuerpo.id 			= "ventanaModalContenido" + this.id;
		if ( this.encabezado ){
			divModalCuerpo.style.top 	= "10%";
			divModalCuerpo.style.height = "270px";
		}
		else{
			divModalCuerpo.style.top = "0%";
			divModalCuerpo.style.height = "99%";
		}

		if ( this.encabezado ){
			divModalHeader.appendChild(imgModalCerrar);		
			divModalHeader.appendChild(textoEncabezado);			
			divModal.appendChild(divModalHeader);
		}
		divModal.appendChild(divModalCuerpo);
		var contenedor = false;
		if ( this.idElemento )
			contenedor = document.getElementById(this.idElemento);
		if ( contenedor )
			contenedor.appendChild(divModal);
		else
			(document.getElementsByTagName('Body')[0]).appendChild(divModal);
	},
	addBackModalWindow	:	function (){
		var divBack 			= document.createElement("div");
		divBack.className		= "backModalWindow";
		divBack.id 				= "backModalWindow" + this.id;
		divBack.style.display 	= "none";
		var contenedor 			= false;
		if ( this.idElemento ){
			contenedor = document.getElementById(this.idElemento);
		}
		if ( contenedor ){
			contenedor.appendChild(divBack);
		}
		else
			(document.getElementsByTagName('Body')[0]).appendChild(divBack);
	},
	showModal			:	function (){
		document.body.scrollTop = 0;
		if ( this.cubrirFondo ){
			//(document.getElementsByTagName('Body')[0]).style.overflow = "hidden";
			if ( document.getElementById("backModalWindow" + this.id) )
			document.getElementById("backModalWindow" + this.id ).style.display = "block";
		}				
		if ( document.getElementById("ventanaModal" + this.id) ){
			changeOpacModal(0,"ventanaModal" + this.id);
			document.getElementById("ventanaModal" + this.id).style.display = "block";
			opacityModal("ventanaModal" + this.id , 2 , 100 , 1000);			
		}
	},
	hideModal			:	function (){
		if ( document.getElementById("ventanaModal" + this.id) ){
			finished = true;
			opacityModal("ventanaModal" + this.id , 100 , 1 , 1000 ,  this.id );
/*			document.getElementById("ventanaModal" + this.id).style.display = "none";
			if ( document.getElementById("backModalWindow" + this.id) )
			document.getElementById("backModalWindow" + this.id).style.display = "none";*/
		}
		else{
			if ( document.getElementById("backModalWindow" + this.id) )
				document.getElementById("backModalWindow" + this.id).style.display = "none";
		}
		
		//document.style.scroll = "auto";
		//(document.getElementsByTagName('Body')[0]).style.overflow = "auto";
	},
	clearBody			:	function(){
		var body = document.getElementById("ventanaModalContenido" + this.id);
		while ( body.hasChildNodes() ){
			body.removeChild(body.lastChild);
		}
	},
	clearTitulo			:	function(){
		var titulo = document.getElementById("ventanaModal_Encabezado_Titulo_" + this.id);
		while ( titulo.hasChildNodes() ){
			titulo.removeChild(titulo.lastChild);
		}
	},
	obtenerNodoVentanaModal	:	function(){
		return document.getElementById("ventanaModal" + this.id);
	},
	obtenerNodoVentanaModalHeader	:	function(){
		if ( this.encabezado )
			return document.getElementById("ventanaModalHeader" + this.id);
	},
	obtenerNodoVentanaModalCuerpo	:	function(){
		return document.getElementById("ventanaModalContenido" + this.id);
	},
	obtenerIdNodoVentanaModalCuerpo	:	function(){
		return "ventanaModalContenido" + this.id;
	},
	obtenerIdNodoVentanaModal		:	function(){
		return "ventanaModal" + this.id;
	},
	obtenerIdNodoVentanaModalHeader	: function(){
		if ( this.encabezado )
			return "ventanaModalHeader" + this.id;
	},
	obtenerIdNodoTituloEncabezado		: function(){
		return "ventanaModal_Encabezado_Titulo_" + this.id;
	},
	showWindowProperty				: function(){
		alert(	"Resolution    : " + screen.availWidth + " x " + screen.availHeight
		+"\n" + "Configuracion : " + this.width + " x " + this.height);
	}
}