var lightboxVar = new Array();

function lightbox(urls, index){
	if(lightboxVar['grey']){
		return false;
	}

	if(typeof(urls) == 'string') urls = [urls];
	lightboxVar['urls'] = urls;
	lightboxVar['index'] = (index ? index : 0);

	//récupération de l'url du dossier lightbox
	lightboxVar['dir'] = getJsDir('lightbox.js');

	//On grise l'écran
	var grey = document.createElement('div');
	grey.style.height = '100%';
	grey.style.width = '100%';
	grey.style.position = 'fixed';
	grey.style.top = '0px';
	grey.style.left = '0px';
	grey.style.backgroundColor = '#000000';
	grey.style.opacity = '0.2';
	grey.style.filter = 'alpha(opacity=20)';
	grey.style.zIndex = '1';
	document.body.appendChild(grey);
	lightboxVar['grey'] = grey;
	
	for(var i=1; i<4; i++){
		var opacity = (10*i+20);
		setTimeout((function(grey, opacity){
			return function(){
				grey.style.opacity = (opacity/100);
				grey.style.filter = 'alpha(opacity='+opacity+')';
			}
		})(grey, opacity), i*50);
	}
	
	//Préparation des éléments nécessaires
	var div = document.createElement('div');
	div.style.textAlign = 'center';
	div.style.zIndex = '2';
	div.style.position = 'fixed';
	div.style.top = '50%';
	div.style.marginTop = '-25px';
	div.style.left = '50%';
		
	var count = document.createElement('div');
	count.style.textAlign = 'right';
	count.style.color = '#FFFFFF';
	count.style.fontFamily = 'Arial Black';
	count.style.fontSize = '90%';
	count.style.visibility = 'hidden';
	if(lightboxVar['urls'].length > 1){
		count.innerHTML = (lightboxVar['index']+1)+'/'+lightboxVar['urls'].length;
	}
	else{
		count.innerHTML = '&nbsp;'
	}
	div.appendChild(count);
	
	
	var imagebg = document.createElement('div');
	var image = document.createElement('img');
	image.style.display = 'block';
	image.src = lightboxVar['dir']+'white.png';
	image.style.border = '4px solid #FFFFFF';
	image.style.width = '0px';
	image.style.height = '0px';
	image.style.cursor = 'pointer';
	imagebg.appendChild(image);
	div.appendChild(imagebg);
	
	var links = document.createElement('div');
	var left = document.createElement('a');
	left.href = '#';
	left.style.backgroundImage = 'url('+lightboxVar['dir']+'arrowleft.png)';
	left.style.width = '16px';
	left.style.height = '13px';
	left.style.marginTop = '2px';
	left.style.cursor = 'pointer';
	left.style.display = 'inline-block';
	left.style.cssFloat = 'left';
	left.style.styleFloat = 'left';
	left.style.visibility = 'hidden';
	links.appendChild(left);
	var right = document.createElement('a');
	right.style.backgroundImage = 'url('+lightboxVar['dir']+'arrowright.png)';
	right.href = '#';
	right.style.width = '16px';
	right.style.height = '13px';
	right.style.marginTop = '2px';
	right.style.cursor = 'pointer';
	right.style.display = 'inline-block';
	right.style.cssFloat = 'right';
	right.style.styleFloat = 'right';
	right.style.visibility = 'hidden';
	links.appendChild(right);
	var close = document.createElement('a');
	close.style.textDecoration = 'none';
	close.style.color = '#FFFFFF';
	close.style.fontFamily = 'Arial Black';
	close.innerHTML = 'fermer';
	close.href = '#';
	close.style.display = 'none';
	links.appendChild(close);
	div.appendChild(links);	
	document.body.appendChild(div);	
	
	lightboxVar['count'] = count;
	lightboxVar['imagebg'] = imagebg;
	lightboxVar['image'] = image;
	lightboxVar['links'] = links;
	lightboxVar['left'] = left;
	lightboxVar['right'] = right;
	lightboxVar['close'] = close;
	lightboxVar['div'] = div;
	
	//Ajout de la fermeture sur le close
	close.onclick = image.onclick = function(){
		closeLightbox();
		return false;
	};
	
	//Ajout des actions sur les liens de navigation
	left.onclick = function(){
		lightboxVar['index']--;
		if(lightboxVar['urls'][lightboxVar['index']]){		
			slideImage();
		} else closeLightbox();
		return false;
	}
	right.onclick = function(){
		lightboxVar['index']++;
		if(lightboxVar['urls'][lightboxVar['index']]){		
			slideImage();
		} else closeLightbox();
		return false;
	}
			
	//On lance le préchargement et l'affichage de la première image
	preloadImage();
}

function slideImage(){
	for(var i=0; i<10; i++){
		var opacity = (9-i)*10;
		setTimeout((function(opacity){
			return function(){
				lightboxVar['image'].style.opacity = (opacity/100);
				lightboxVar['image'].style.filter = 'alpha(opacity='+opacity+')';
				if(opacity == 0){
					lightboxVar['image'].src = lightboxVar['dir']+'white.png';
					lightboxVar['count'].innerHTML = (lightboxVar['index']+1)+'/'+lightboxVar['urls'].length;
					preloadImage();
				}
			}
		})(opacity), i*25);
	}
}

function closeLightbox(){
	document.body.removeChild(lightboxVar['div']);
	for(var i=5; i>=0; i--){
		var opacity = (10*i);
		setTimeout((function(opacity){
			return function(){
				lightboxVar['grey'].style.opacity = (opacity/100);
				lightboxVar['grey'].style.filter = 'alpha(opacity='+opacity+')';
				if(opacity == 0){
					document.body.removeChild(lightboxVar['grey']);
					lightboxVar = new Array();
				}
			}
		})(opacity), (5-i)*30);
	}
}

function displayLoader(remove){
	var loader = document.createElement('img');
	if(!remove && !lightboxVar['loader']){	
		loader.src = lightboxVar['dir']+'loader.gif';
		loader.style.borderRight = '4px solid #FFFFFF';
		loader.style.borderBottom = '4px solid #FFFFFF';
		loader.style.position = 'fixed';
		loader.style.left = '50%';
		loader.style.marginLeft = '-29px';
		loader.style.top = '50%';
		loader.style.marginTop = '-29px';
		loader.style.zIndex = '3';
		document.body.appendChild(loader);
		lightboxVar['loader'] = loader;
	}
	else{
		if(lightboxVar['loader'] && lightboxVar['loader'].offsetWidth){
			document.body.removeChild(lightboxVar['loader']);
			lightboxVar['loader'] = false;
		}
	}
}

function preloadImage(loaded){
	//Préchargement de l'image
	var preload = new Image;
	preload.src = lightboxVar['urls'][lightboxVar['index']];
	
	if(!loaded){
		if(!preload.complete){
			displayLoader();
			preload.onload = function(){
				preloadImage(true);
			}
			return false;
		}
	}
	
	//Calcul des dimensions de l'image
	var imageSize = [preload.width, preload.height];
	//si les dimensions sont plus grandes que l'écran, on les adapte
	var maxWidth = (window.innerWidth ? window.innerWidth : document.documentElement.clientWidth)-30;
	var maxHeight = (window.innerHeight ? window.innerHeight : document.documentElement.clientHeight)-60;
	if(maxWidth < imageSize[0]){
		var ratio = imageSize[0]/maxWidth;
		imageSize[0] = maxWidth;
		imageSize[1] = imageSize[1]/ratio;
	}
	if(maxHeight < imageSize[1]){
		var ratio = imageSize[1]/maxHeight;
		imageSize[1] = maxHeight;
		imageSize[0] = imageSize[0]/ratio;
	}
	
	//On lance l'étirement de l'image puis son affichage
	displayImage(imageSize);
}

function displayImage(imageSize){
	setTimeout((function(){
		return function(){
			lightboxVar['imagebg'].style.backgroundColor = '#FFFFFF';
			lightboxVar['close'].style.display = '';
			displayLinks();
			for(var i=0; i<10; i++){
				var opacity = (i+1)*10;
				setTimeout((function(opacity){
					return function(){
						lightboxVar['image'].style.opacity = (opacity/100);
						lightboxVar['image'].style.filter = 'alpha(opacity='+opacity+')';
						lightboxVar['image'].src = lightboxVar['urls'][lightboxVar['index']];
					}
				})(opacity), i*25);
			}
			displayLoader(true);
		}
	})(), 250);
	
	//On calcule l'étirement à effectuer par passage dans la boucle en fonction de la taille actuelle de l'image et de celle à atteindre
	var current_width = parseInt(lightboxVar['image'].style.width);
	var width_pro_loop = Math.ceil((imageSize[0]-current_width)/10);
	for(var i=0; i<10; i++){
		current_width = current_width+width_pro_loop;
		if(i == 9) current_width = imageSize[0];
		setTimeout((function(current_width){
			return function(){
				lightboxVar['image'].style.width = current_width+'px';
				lightboxVar['div'].style.marginLeft = -(current_width/2)+'px';
				lightboxVar['div'].style.width = current_width+8+'px';
			}
		})(current_width), i*25);
	}
	
	//Idem pour la hauteur
	var current_height = parseInt(lightboxVar['image'].style.height);
	var height_pro_loop = Math.ceil((imageSize[1]-current_height)/10);
	for(var i=0; i<10; i++){
		current_height = current_height+height_pro_loop;
		if(i == 9) current_height = imageSize[1];
		var marginTop = -(current_height/2)-25;
		setTimeout((function(current_height, marginTop){
			return function(){
				lightboxVar['image'].style.height = current_height+'px';
				lightboxVar['div'].style.marginTop = marginTop+'px';
			}
		})(current_height, marginTop), i*25);
	}
}

//Affiche les liens de navigation si nécessaire
function displayLinks(){
	lightboxVar['count'].style.visibility = 'visible';
	lightboxVar['left'].style.visibility = (lightboxVar['index'] != 0 ? 'visible' : 'hidden');
	lightboxVar['right'].style.visibility = (lightboxVar['index']+1 != lightboxVar['urls'].length ? 'visible' : 'hidden');
}

//Retourne le chemin du dossier dans lequel se trouve le fichier js demandé en paramètre
function getJsDir(js_file){
	var dir = '';
	var scripts = document.getElementsByTagName('head')[0].getElementsByTagName('script');
	for(var i=0; i<scripts.length; i++){
		var src = scripts[i].src.split('/');
		var file = src[(src.length-1)];
		if(file == js_file){
			for(var j=0; j<(src.length-1); j++){
				dir += src[j]+'/';
			}
		}
	}
	return dir;
}