//dimenciones disponibles
WDimForVisor = {
	maxWidth: (screen.availWidth - 100),
	maxHeight: (screen.availHeight - 250)
};

function getResizedSrc(path)
{
	if(typeof(path) != 'string')
		path = $(path).src;
	
	if(path.indexOf('i=') > -1)
	{
		path = path.substring((path.indexOf('i=') + 2));
		path = path.substring(0,path.indexOf('&'));
	}
	
	if(path.indexOf('/thumbs/') > -1)
		path = path.replace('/thumbs/','/');

	return path;
}

function thumbnailAddToVisor(t)
{
	Event.observe(t,'click',function(){
		visor.View(getVisorPath(getResizedSrc(this)));
	});
}

function getVisorPath(p)
{
	return 'resizetomax.php?i='+ p +'&anchomax='+ WDimForVisor.maxWidth +'&altomax='+ WDimForVisor.maxHeight;
}

function thumbnail(src,size)
{
	return getImage('thumb.php?i='+ src +'&s='+ (size || 290));
}


/*
	jsViewer
	
	Crea un visor de imagenes para las paginas.
	
	Metodos:
	
	View(Ruta de la imagen);
		- Recibe como parametro la ruta de la imagen que se va a mostrar
*/
function jsViewer()
{
	this.IE = (window.attachEvent && navigator.userAgent.indexOf('Opera') === -1);
	this._div = getElement('div');
	this._imageDiv = getElement('div');
	this._cargandoDiv = getElement('div');
	var cargandoImg = getElement('img');
	var cerrarDiv = getElement('div');
	var arribaIzquierdaDiv = getElement('div');
	var arribaDiv = getElement('div');
	var arribaDerechaDiv = getElement('div');
	var derechaDiv = getElement('div');
	var abajoDerechaDiv = getElement('div');
	var abajoDiv = getElement('div');
	var abajoIzquierdaDiv = getElement('div');
	var izquierdaDiv = getElement('div');
	
	this._div.setStyle({
		position: 'fixed',
		top: '0px',
		right: '0px',
		bottom: '0px',
		left: '0px',
		background: 'url(imagenes/componentes/visor-fondo-transparente.png)',
		display: 'none',
		zIndex: 1000
	});
	
	this._imageDiv.setStyle({
		position: 'absolute',
		width: '400px',
		height: '300px',
		background: '#FFF'
	});
	
	this._cargandoDiv.setStyle({
		position: 'relative',
		margin: 'auto',
		top: '45%',
		width: '31px',
		height: '31px'
	});
	
	cargandoImg.src = 'imagenes/componentes/ajax-loader.gif';
	
	cerrarDiv.setStyle({
		position: 'absolute',
		top: '-29px',
		right: '0px',
		width: '62px',
		height: '15px',
		cursor: 'pointer',
		background: 'url(imagenes/componentes/visor-cerrar.png) no-repeat'
	});
	
	arribaIzquierdaDiv.setStyle({
		position: 'absolute',
		top: '-14px',
		left: '-14px',
		width: '14px',
		height: '14px',
		background: 'url(imagenes/componentes/visor-esquina-arriba-izquierda.png) no-repeat'
	});
	
	arribaDiv.setStyle({
		position: 'absolute',
		top: '-14px',
		left: '0px',
		right: '0px',
		height: '14px',
		background: '#FFF'
	});
	
	arribaDerechaDiv.setStyle({
		position: 'absolute',
		top: '-14px',
		right: '-14px',
		width: '14px',
		height: '14px',
		background: 'url(imagenes/componentes/visor-esquina-arriba-derecha.png) no-repeat'
	});
	
	derechaDiv.setStyle({
		position: 'absolute',
		top: '0px',
		bottom: '0px',
		right: '-14px',
		width: '14px',
		background: '#FFF'
	});
	
	abajoDerechaDiv.setStyle({
		position: 'absolute',
		bottom: '-14px',
		right: '-14px',
		width: '14px',
		height: '14px',
		background: 'url(imagenes/componentes/visor-esquina-abajo-derecha.png) no-repeat'
	});
	
	abajoDiv.setStyle({
		position: 'absolute',
		bottom: '-14px',
		left: '0px',
		right: '0px',
		height: '14px',
		background: '#FFF'
	});
	
	abajoIzquierdaDiv.setStyle({
		position: 'absolute',
		bottom: '-14px',
		left: '-14px',
		width: '14px',
		height: '14px',
		background: 'url(imagenes/componentes/visor-esquina-abajo-izquierda.png) no-repeat'
	});
	
	izquierdaDiv.setStyle({
		position: 'absolute',
		top: '0px',
		bottom: '0px',
		left: '-14px',
		width: '14px',
		background: '#FFF'
	});
	
	/*
		Metodos
	*/
	this.goToScreenCenter = function()
	{
		this._imageDiv.setStyle({
			width: '400px',
			height: '300px'
		});
		
		this._imageDiv.setStyle({
			top: ((screen.availHeight / 2) - 220) +'px',
			left: ((screen.availWidth / 2) - 200) +'px'
		});
	}
	
	this.setSize = function(width,height)
	{	
		var pX = width / 4;
		var pY = height / 3;
		
		new Effect.Parallel([
			new Effect.Scale(this._imageDiv,pX,{scaleY:false,scaleContent:false,scaleFromCenter:true}),
			new Effect.Scale(this._imageDiv,pY,{scaleX:false,scaleContent:false,scaleFromCenter:true})
		],{
			duration: 0.5
		});
	}
	
	this.View = function(path)
	{
		this.goToScreenCenter();
		this.createViewerImage();
		this._cargandoDiv.show();
		this.Show();
		path += (path.indexOf('?') > 0 ? '&v=' : '?v=') + Math.random();
		this._viewerImg.src = path;
	}
	
	this.Show = function()
	{
		this._div.appear({
			duration: 0.5
		});
	}
	
	this.Hide = function()
	{
		this._div.fade({
			duration: 0.5
		});
	}
	
	this.createViewerImage = function()
	{
		if(this._viewerImg)
			this._viewerImg.remove();
		
		this._viewerImg = getElement('img');
		this._viewerImg.style.visibility = 'hidden';
		this._viewerImgID = this._viewerImg.identify();
		Event.observe(this._viewerImg,'load',function(){
			viewer.showImage();
		});
		this._imageDiv.appendChild(this._viewerImg);
	}
	
	this.showImage = function()
	{
		this._cargandoDiv.hide();
		this.setSize(this._viewerImg.getWidth(),this._viewerImg.getHeight());
		this._viewerImg.hide();
		this._viewerImg.style.visibility = 'visible';
		setTimeout("$('"+ this._viewerImgID +"').appear({duration:0.4})",500);
	}
	
	/*
		Registro de eventos
	*/
	var viewer = this;
	Event.observe(cerrarDiv,'click',function(){
		viewer.Hide();
	});
	
	/*
		Agregamos los elementos a DOM
	*/
	this._cargandoDiv.appendChild(cargandoImg);
	this._imageDiv.appendChild(this._cargandoDiv);
	this._imageDiv.appendChild(cerrarDiv);
	this._imageDiv.appendChild(arribaIzquierdaDiv);
	this._imageDiv.appendChild(arribaDiv);
	this._imageDiv.appendChild(arribaDerechaDiv);
	this._imageDiv.appendChild(derechaDiv);
	this._imageDiv.appendChild(abajoDerechaDiv);
	this._imageDiv.appendChild(abajoDiv);
	this._imageDiv.appendChild(abajoIzquierdaDiv);
	this._imageDiv.appendChild(izquierdaDiv);
	
	this._div.appendChild(this._imageDiv);
	document.body.appendChild(this._div);
}

/********************************************************************
|
|	Events
|
********************************************************************/

var onReady = {
	functions: [],
	
	exeAll: function()
	{
		for(var i=0;i<onReady.functions.length;i++)
			onReady.functions[i]();
	},
	
	exe: function(f)
	{
		this.functions.push(f);
	}
};

Event.observe(window,'load',function(){
	visor = new jsViewer();
	onReady.exeAll();
});

/********************************************************************
|
|	Elements
|
********************************************************************/

function getElement(tagName)
{
	return $(document.createElement(tagName));
}

function getImage(src)
{
	var img = getElement('img');
	img.src = src;
	return img;
}

function getText(text)
{
	return $(document.createTextNode(text));
}

/*
	clear
	
	Elimina todos los hijos de un elemento
*/
function clear(e)
{
	e = $(e);
	while(e.hasChildNodes())
		e.removeChild(e.firstChild);
}