var idDivBack ="popImg-back";
var idDivFront ="popImg-front";
var idDivElement ="popImg-element";
var idDivHeader = "popImg-header";
var idBtClose = "popImg-close";
var idDivLink = "popImg-link";
var srcLoader ="./img/circleloader.gif";

function deleteLayers()
{
	if ( $(idDivBack) && $(idDivFront))
	{
		$(idDivFront).get('tween', {property: 'opacity',duration: 'short'}).start(1, 0).chain(function(){
			$(idDivFront).destroy();
			$(idDivBack).destroy();
		});
	}
}

function popImg(_sender)
{
	var clientW =window.getWidth();
	var clientH = window.getHeight();
	
	var _url = _sender.src;
	
	// del des layers s'ils existent 
	deleteLayers();
	
	// pointeur vers body
	var myBody = $$("body")[0];
	
	var divBack = new Element('div', {
		'id':idDivBack,
	}).inject(myBody);
	
	var divFront = new Element('div', {
		'id':idDivFront,
		'events':{
			'click':function(){
				deleteLayers();
			},
		},
	}).inject(myBody);
	
	var table = new Element('table').inject(divFront);
	var tbody = new Element('tbody').inject(table);
	var tr = new Element('tr').inject(tbody);
	var td = new Element('td').inject(tr);
	
	var divHeader = new Element('div', {
		'id':idDivHeader,
		'styles':{
			'opacity':0,
		},
	}).inject(td);
	
	new Element('div', {
		'id':idBtClose,
		'html':'Fermer',
		'events':{
			'click':function(){
				deleteLayers();
			},
		},
	}).inject(divHeader);
	
	var divLink = new Element('div', {
		'id':idDivLink,
	}).inject(divHeader);
	
	new Element('a', {
		'html':'lien',
		'href': _url.replace('thumbs', 'images'),
		'target':'_blank',
		'title':'afficher en plein écran',
	}).inject(divLink);
	
	new Element('img',{
		'src':srcLoader,
		'id':idDivElement,
		'styles':{
			'border':'1px solid #8F8F8F',
			'padding':'20px',
		}
	}).inject(td).get('tween', {property: 'opacity',duration: 'long'}).start(0, 1);
	
	$(idDivElement).setStyles({'height':'', 'width':''});

	 var initImg = new Image();
	initImg.onload = function()
	{
		$(idDivElement).get('tween', {property: 'opacity',duration: 'long',}).start(1, 0).chain(function(){
			$(idDivElement).setStyle('padding','0');
			
			var ratio = initImg.height/initImg.width;
			var _height = Math.round(80*clientH/100);
			var _width = Math.round( _height/ratio );
			
			if (_width+40 >= clientW)
			{
				ratio = initImg.width/initImg.height;
				_width = Math.round( 80*clientW/100 );
				_height = Math.round( _width/ratio );
			}
			
			$(idDivElement).setStyles({
				'src':'',
				'height':_height+"px",
				'width':_width+"px",
				'border':'2px solid #FFFFFF',
			});
			
			$(idDivHeader).setStyle('width',(_width-8)+"px"); 
			
			$(idDivElement).src = initImg.src; 
			
			$(idDivHeader).get('tween', {property: 'opacity',duration: 1000}).start(0, 1);
			$(idDivElement).get('tween', {property: 'opacity',duration: 1000}).start(0, 1);
		   
			divFront.onclick=null;
		});

	}
	
	initImg.src = _url.replace('thumbs', 'images');
}