//variables
var screenHeight;
var screenWidth;
var horizPos;
var vertPos;
//capa negra
var background=document.createElement('DIV');
//capa blanca que contiene la imagen
var container=document.createElement('DIV');
//imagen a cargar
var img=document.createElement('IMG');
container.appendChild(img);

$(function(){
	screenHeight=document.body.offsetHeight;
	screenWidth=document.body.offsetWidth;
	horizPos=parseInt(screenWidth/2)-50;
	vertPos=parseInt(screenHeight/2)-50;
	$(background).css({'height' : screenHeight+'px', 'width' : screenWidth+'px', 'background' : 'black', 'position' : 'absolute', 'top' : '0', 'left' : '0', 'filter' : 'alpha(opacity=60)', 'opacity' : '0.6'});
	$(container).css({'position' : 'absolute', 'top' : vertPos+'px', 'left' : horizPos+'px', 'width' : '100px', 'height' : '100px', 'background' : 'white', 'overflow' : 'hidden', 'cursor' : 'pointer'});
	$(container).click(function(){closeImg();});
	$(img).attr('title', 'ocultar imagen');
	$(img).css({'visibility' : 'hidden', 'margin' : '10px'});
	$(img).load(function(){imgLoad()});
	
	function closeImg(){
		//restauro los valores iniciales y oculto las capas
		document.body.removeChild(container);
		$(img).css({'visibility' : 'hidden'});
		$(container).css({'top' : vertPos+'px', 'left' : horizPos+'px', 'width' : '100px', 'height' : '100px'});
		document.body.removeChild(background);
		$(document.body).css('overflow', 'auto');
	}
	
	function imgLoad(){
		var imgHeight=img.offsetHeight;
		var imgWidth=img.offsetWidth;
		$(img).css({'display' : 'none', 'visibility' : 'visible'});
		//ejecuto la animacion
		$(container)
			.animate({'width' : imgWidth+20, 'left' : parseInt(screenWidth/2)-parseInt(imgWidth/2)}, 800)
			.animate({'height' : imgHeight+20, 'top' : parseInt(screenHeight/2)-parseInt(imgHeight/2)}, 800, function(){
				$(img).fadeIn('slow');
		});
	}
	
	
});

function zoomImg(imgPath){
	//aņado las capas a visionar
	$(document.body).css('overflow', 'hidden');
	document.body.appendChild(background);
	document.body.appendChild(container);
	//cargo la imagen
	img.src=imgPath;
}