var capa1, capa2;
var capaX = 0;
var capaY = 0;
var alto = 0;
var ancho = 0;
var nPasos = 50;
var pasoX, pasoY;
var _laFoto;
var actual = 0;
var siguiente = 1;
var transitando = false;

var efecto = [
	sin,		// 0
	abrirD,		// 1
	cerrarI,	// 2
	abrirI,		// 3
	cerrarD,	// 4
	abrirAba,	// 5
	cerrarArr,	// 6
	abrirArr,	// 7
	cerrarAba,	// 8
	abrirAbaI,	// 9
	cerrarAbaI,	// 10
	abrirAbaD,	// 11
	cerrarAbaD,	// 12
	abrirArrI,	// 13
	cerrarArrI,	// 14
	abrirArrD,	// 15
	cerrarArrD,	// 16
	abrirCentro,	// 17
	cerrarCentro,	// 18
	abrirH,		// 19
	cerrarH,	// 20
	abrirV,		// 21
	cerrarV,	// 22
	fundido		// último

];

function sin()	{
	_finEfecto(0);
}

function abrirI()	{
	capaX = capaX + pasoX;
	capa2.style.left = capaX + "px";
	if (capaX < ancho) setTimeout("abrirI()", 20);
	else	_finEfecto(1);
}

function cerrarI()	{
	capaX = capaX + pasoX;
	capa2.style.left = capaX + "px";
	if (capaX < 0) setTimeout("cerrarI()", 10);
	else	_finEfecto(2);
}

function abrirD()	{
	capaX = capaX - pasoX;
	capa2.style.left = capaX + "px";
	if (-capaX < ancho) setTimeout("abrirD()", 10);
	else	_finEfecto(3);
}

function cerrarD()	{
	capaX = capaX - pasoX;
	capa2.style.left = capaX + "px";
	if (capaX > 0) setTimeout("cerrarD()", 10);
	else	_finEfecto(4);
}

function abrirArr()	{
	capaY = capaY + pasoY;
	capa2.style.top = capaY + "px";
	if (capaY < alto) setTimeout("abrirArr()", 10);
	else	_finEfecto(5);
}

function cerrarArr()	{
	capaY = capaY + pasoY;
	capa2.style.top = capaY + "px";
	if (capaY < 0) setTimeout("cerrarArr()", 10);
	else	_finEfecto(6);
}

function abrirAba()	{
	capaY = capaY - pasoY;
	capa2.style.top = capaY + "px";
	if (-capaY < alto) setTimeout("abrirAba()", 10);
	else	_finEfecto(7);
}

function cerrarAba()	{
	capaY = capaY - pasoY;
	capa2.style.top = capaY + "px";
	if (-capaY < 0) setTimeout("cerrarAba()", 10);
	else	_finEfecto(8);
}

function abrirAbaI()	{
	capaY = capaY - pasoY;
	capa2.style.top = capaY + "px";
	capaX = capaX - pasoX;
	capa2.style.left = capaX + "px";
	if (-capaY < alto) setTimeout("abrirAbaI()", 10);
	else	_finEfecto(9);
}

function cerrarAbaI()	{
	capaY = capaY - pasoY;
	capa2.style.top = capaY + "px";
	capaX = capaX - pasoX;
	capa2.style.left = capaX + "px";
	if (-capaY < 0) setTimeout("cerrarAbaI()", 10);
	else	_finEfecto(10);
}

function abrirAbaD()	{
	capaY = capaY - pasoY;
	capa2.style.top = capaY + "px";
	capaX = capaX + pasoX;
	capa2.style.left = capaX + "px";
	if (-capaY < alto) setTimeout("abrirAbaD()", 10);
	else	_finEfecto(11);
}

function cerrarAbaD()	{
	capaY = capaY - pasoY;
	capa2.style.top = capaY + "px";
	capaX = capaX + pasoX;
	capa2.style.left = capaX + "px";
	if (-capaY < 0) setTimeout("cerrarAbaD()", 10);
	else	_finEfecto(12);
}

function abrirArrI()	{
	capaY = capaY + pasoY;
	capa2.style.top = capaY + "px";
	capaX = capaX - pasoX;
	capa2.style.left = capaX + "px";
	if (capaY < alto) setTimeout("abrirArrI()", 10);
	else	_finEfecto(13);
}

function cerrarArrI()	{
	capaY = capaY + pasoY;
	capa2.style.top = capaY + "px";
	capaX = capaX - pasoX;
	capa2.style.left = capaX + "px";
	if (capaY < 0) setTimeout("cerrarArrI()", 10);
	else	_finEfecto(14);
}

function abrirArrD()	{
	capaY = capaY + pasoY;
	capa2.style.top = capaY + "px";
	capaX = capaX + pasoX;
	capa2.style.left = capaX + "px";
	if (capaY < alto) setTimeout("abrirArrD()", 10);
	else	_finEfecto(15);
}

function cerrarArrD()	{
	capaY = capaY + pasoY;
	capa2.style.top = capaY + "px";
	capaX = capaX + pasoX;
	capa2.style.left = capaX + "px";
	if (capaY < pasoY) setTimeout("cerrarArrD()", 10);
	else	_finEfecto(16);
}

function abrirCentro()	{
	capaY = capaY + pasoY;
	capa2.style.top = capaY + "px";
	capaX = capaX + pasoX;
	capa2.style.left = capaX + "px";
	capa2.style.width = ancho - (capaX * 2) + "px";
	capa2.style.height = (alto - (capaY * 2)).toString() + "px";
	if ((capaX + pasoX) < ancho / 2) setTimeout("abrirCentro()", 10);
	else	_finEfecto(17);
}

function cerrarCentro()	{
	capaY = capaY - pasoY;
	capa2.style.top = capaY + "px";
	capaX = capaX - pasoX;
	capa2.style.left = capaX + "px";
	if (capaX > pasoX)	{
		capa2.style.width = ancho - (capaX * 2) + "px";
		capa2.style.height = alto - (capaY * 2) + "px";
		setTimeout("cerrarCentro()", 10);
	}
	else
		_finEfecto(18);
}

function abrirH()	{
	capaY = capaY + pasoY;
	capa2.style.top = capaY + "px";
	capa2.style.height = (alto - (capaY * 2)).toString() + "px";
	if ((capaY * 2 + pasoY) <= alto) setTimeout("abrirH()", 10);
	else	_finEfecto(19);
}

function cerrarH()	{
	capaY = capaY - pasoY;
	capa2.style.top = capaY + "px";
	if (capaY > pasoY)	{
		capa2.style.height = alto - (capaY * 2) + "px";
		setTimeout("cerrarH()", 10);
	}
	else
		_finEfecto(20);
}

function abrirV()	{
	capaX = capaX + pasoX;
	capa2.style.left = capaX + "px";
	capa2.style.width = (ancho - (capaX * 2)).toString() + "px";
	if ((capaX + pasoX) < (ancho / 2)) setTimeout("abrirV()", 10);
	else	_finEfecto(21);
}

function cerrarV()	{
	capaX = capaX - pasoX;
	capa2.style.left = capaX + "px";
	if (capaX > pasoX)	{
		capa2.style.width = ancho - (capaX * 2) + "px";
		setTimeout("cerrarV()", 10);
	}
	else
		_finEfecto(22);
}

function fundido()	{
	capaX = capaX - 5;

	if (document.all && !esOpera())
		capa2.filters.alpha.opacity = capaX;
//	else	if (esOpera())	
//			capa2.style.opacity = capaX;
		else
			capa2.style.MozOpacity = capaX / 100;
	if (capaX > 0) setTimeout("fundido()", 10);
	else	_finEfecto(23);
}


function esOpera()	{
	return (navigator.userAgent.toLowerCase().indexOf("opera") >= 0);
}

function asignarFondo(capa, imagen)	{
	var salida = "url(" + imagen + ")";
	capa.style.backgroundImage = salida;
}

function crearCapa()	{
	capa = document.createElement("div");
	capa.style.backgroundPosition = "top center";
	
	capa.style.backgroundAttachment = (document.all && !esOpera()) ? "fixed": "static";
	capa.style.backgroundRepeat = "no-repeat";
	capa.style.top = "0px";
	capa.style.left = "0px";
	capa.style.width = ancho + "px";
	capa.style.height = alto + "px";
	capa.style.margin = "0";
	capa.style.overflow = "hidden";
	capa.style.position = "absolute";
	return capa;
}

function prepararCapa(id)	{
	capa = document.getElementById(id);
	capa.style.backgroundColor = "transparent";

	capa.style.backgroundPosition = "top center";
	capa.style.backgroundAttachment = (document.all && !esOpera()) ? "fixed": "static";
	capa.style.backgroundRepeat = "no-repeat";
	capa.style.overflow = "hidden";
	capa.style.position = "relative";



	ancho = parseInt(capa.style.width);
	alto = parseInt(capa.style.height);

	pasoX = parseInt(ancho / nPasos);
	pasoY = parseInt(alto / nPasos);

}

function iniciaEfecto(sitio, imagen, fondo, ef)	{
	if (transitando)	return;
	transitando = true;
	//window.status = imagen;
	capa1 = eval(sitio);
	capa2 = crearCapa();
	capa2.style.backgroundColor = fondo;
	capa2.style.width = ancho + "px";
	capa2.style.height = alto + "px";
	capa2.style.left = "0px";
	capa2.style.top = "0px";
	capa1.appendChild(capa2);
	asignarFondo(capa2, imagen);

	switch(ef)	{
		case 1:
		case 3:
		case 5:
		case 7:
		case 9:
		case 11:
		case 13:
		case 15:
		case 17:
		case 19:
		case 21:
			capaX = 0; capaY = 0;
			var temp = capa1.style.backgroundImage;
			capa1.style.backgroundImage = capa2.style.backgroundImage;
			capa2.style.backgroundImage = temp;

			temp = capa1.style.backgroundColor;
			capa1.style.backgroundColor = capa2.style.backgroundColor;
			capa2.style.backgroundColor = temp;

			capa2.style.visibility = "visible";

			break;
		case 2: // cerrar desde la izquierda
			capaX = -(pasoX * nPasos);
			capa2.style.left = capaX + "px";
			break;

		case 4: // cerrar desde la derecha
			capaX = (pasoX * nPasos);
			capa2.style.left = capaX + "px";
			break;
		case 6: // cerrar desde arriba
			capaY = -(pasoY * nPasos);
			capa2.style.top = capaY + "px";
			break;
		case 8: // cerrar desde abajo
			capaY = (pasoY * nPasos);
			capa2.style.top = capaY + "px";
			break;
		case 10:
			capaY = nPasos * pasoY;
			capa2.style.top = capaY + "px";
			capaX = nPasos * pasoX;
			capa2.style.left = capaX + "px";
			capa2.style.visibility = "visible";
			break;
		case 12:
			capaY = nPasos * pasoY;
			capa2.style.top = capaY + "px";
			capaX = -nPasos * pasoX;
			capa2.style.left = capaX + "px";
			capa2.style.visibility = "visible";
			break;
		case 14:
			capaY = -nPasos * pasoY;
			capa2.style.top = capaY + "px";
			capaX = nPasos * pasoX;
			capa2.style.left = capaX + "px";
			capa2.style.visibility = "visible";
			break;
		case 16:
			capaY = -nPasos * pasoY;
			capa2.style.top = capaY + "px";
			capaX = -nPasos * pasoX;
			capa2.style.left = capaX + "px";
			capa2.style.visibility = "visible";
			break;
		case 18:
			capaY = (alto + (alto % (pasoY * 2))) / 2;
			capa2.style.top = capaY + "px";
			capaX = (ancho + (ancho % (pasoX * 2))) / 2;
			capa2.style.left = capaX + "px";
			capa2.style.visibility = "visible";
			break;
		case 20:
			capaY = (alto + (alto % (pasoY * 2))) / 2;
			capa2.style.top = capaY + "px";
			capa2.style.visibility = "visible";
			break;
		case 22:
			capaX = (ancho + (ancho % (pasoX * 2))) / 2;
			capa2.style.left = capaX + "px";
			capa2.style.visibility = "visible";
			break;
		case 23: // fundido
			capaX = 100;
			var temp = capa1.style.backgroundImage;
			capa1.style.backgroundImage = capa2.style.backgroundImage;
			capa2.style.backgroundImage = temp;

			temp = capa1.style.backgroundColor;
			capa1.style.backgroundColor = capa2.style.backgroundColor;
			capa2.style.backgroundColor = temp;

			capa2.style.visibility = "visible";
			if (document.all)	capa2.style.filter = "alpha(opacity=100)";
			else			capa2.style.MozOpacity = "1";
			break;
		otherwise
			break;
	}
	efecto[ef]();
}


function _finEfecto(n)	{
	switch(n)	{
		case 0:
		case 2:
		case 4:
		case 6:
		case 8:
		case 10:
		case 12:
		case 14:
		case 16:
		case 18:
		case 20:
		case 22:
			capa1.style.backgroundImage = capa2.style.backgroundImage;
			break;
		otherwise
			break;
	}
	transitando = false;
	capa1.removeChild(capa2)
}

function _transitar(sitio, imagen, fondo, tiempo, efecto)	{
	var _x = new transitar(sitio, imagen , fondo, tiempo, efecto);
	_x.empezar()
}

function transitar(sitio, imagen, fondo, tiempo, efecto)	{

	this.lugar = sitio;
	this.laImagen = imagen;
	this.imagen = new Image();
	this.imagen.src = imagen;
	this.fondo = fondo;
	this.tiempo = tiempo;
	this.nEfecto = efecto ;

	this.continuar = function()	{
		if (this.imagen.complete)	this.transito();
		else	{
			setTimeout("new transitar(\"" + sitio + "\", '" + imagen + "', '" + fondo + "', 0, " + efecto + ").continuar()", 100);
		}
	}
	this.empezar = function()	{
		if (this.tiempo > 0)	{
			var t = this.tiempo;
			this.tiempo = 0;
			setTimeout("_transitar('" + sitio + "', '" + imagen + "', '" + fondo + "', 0, " + efecto + ")", t);
		}
		else this.continuar();
	}
	this.transito = _iniciaEfecto;
}