<?php
/******************************************
# Auteur : Julien Theler - www.twiip.ch
# Contact : julien.theler@twiip.ch
# Licence : CC-by-nc
******************************************/
	
	/****** Configuration ******/
	define('IMAGES_DIR', null); //Dossier à parcourir sous la forme '/dir/dir' (si null : dossier courant)
	define('GALLERY_TITLE', null); //Titre affiché en haut de la page (si null : chemin du dossier affiché)
	
	define('USE_OPACITY_LOOP_DEFAULT', 1); //Détermine si par défaut les transitions se font avec opacité progressive (1) ou non (0)
	
	define('MAX_WIDTH', 800); //Largeur maximale de l'affichage des images
	define('MAX_HEIGHT', 600); //Hauteur maximale de l'affichage des images
	define('MINIS_WIDTH', 60); //Largeur des miniatures
	define('MINIS_HEIGHT', 50); //Hauteur des miniatures
	
	define('USE_DIAPORAMA', 1); //Détermine si les visiteurs ont la possibilité d'activer le défilement d'image (1) ou non (0)
	define('DIAPORAMA_SPEED', 3); //Nombre de secondes durant lesquelles les images sont affichées lors de l'utilisation du diaporama
	
	//Extensions autorisées
	$array_extensions = array('jpg', 'png', 'gif');
	/****** Fin de la configuration ******/

	
	
	//Liste des images du dossier
	$dir_path = (IMAGES_DIR ? IMAGES_DIR : dirname($_SERVER['PHP_SELF']));	
	$images = array();
	$dir = $_SERVER['DOCUMENT_ROOT'].$dir_path;
	@$dir_open = opendir($dir) or die('Impossible de parcourir le dossier <b>'.$dir_path.'</b>');

	while($file = readdir($dir_open)){
		if(is_file($dir.'/'.$file)){
			$extension = strtolower(substr($file, strpos($file, '.')+1, strlen($file)));
			if(in_array($extension, $array_extensions)){
				$images[] = (IMAGES_DIR ? IMAGES_DIR : dirname($_SERVER['PHP_SELF'])).'/'.$file;
			}
		}
	}
	closedir($dir_open);
	
	if(!count($images)){
		die('Aucune image trouvée dans le dossier <b>'.$dir_path.'</b>');
	}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="author" content="Julien Theler" />
		<title>Galerie d'images<?php echo (GALLERY_TITLE ? ' - '.GALLERY_TITLE : '') ?></title>
		<script language="javascript" content="text/javascript">
			var clientPC = navigator.userAgent.toLowerCase(); // Navigateur
			var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));
			
			var display_image_id = 0; //id de l'image affichée
			var use_diaporama = 0; //Détermine si le défilement est activé ou non
			var switch_mode = 'opacity'; //Détermine si les transitions se font avec opacité progressive
			
			var images = new Array(<?php
				for($i=0; $i<count($images); $i++){
					list($width, $height, $type, $attr) = getimagesize($_SERVER['DOCUMENT_ROOT'].$images[$i]);
					if($width > MAX_WIDTH){
						$height = $height*(MAX_WIDTH/$width);
						$width = MAX_WIDTH;
					}
					if($height > MAX_HEIGHT){
						$width = $width*(MAX_HEIGHT/$height);
						$height = MAX_HEIGHT;
					}
					
					echo "\n\t\t\t\t".'new Array(\''.$images[$i].'\', '.ceil($width).', '.ceil($height).')'.($i+1 != count($images) ? ', ' : '');
				}
				?>);
			
			function displayImage(img_id, sens, diaporama){
				//Si la fonction a été appelée par le diaporama et qu'il a été interrompu depuis, on ne passe pas à l'image suivante
				if(diaporama && !use_diaporama || (img_id && !images[img_id])){
					useDiaporama();
					return false;
				}
			
				var image = document.getElementById('image');
				
				<?php if(USE_OPACITY_LOOP_DEFAULT){ ?>
					if(switch_mode == 'opacity'){
						//Duplication de l'image affichée
						var image_x = findPos(image)[0]+(is_ie ? 1 : 0);
						var image_y = findPos(image)[1]+(is_ie ? 1 : 0);
						var temp_image = document.createElement('img');
						temp_image.src = image.src;
						temp_image.style.width = image.style.width;
						temp_image.style.height = image.style.height;
						temp_image.style.position = 'absolute';
						temp_image.style.left = image_x+'px';
						temp_image.style.top = image_y+'px';
						temp_image.id = 'temp_image';
						document.body.appendChild(temp_image);
						
						//Lancement de la boucle réduisant progressivement l'opacité de l'image temporaire
						opacity('temp_image');
					}
				<?php } ?>
				
				if(sens){
					img_id = display_image_id+sens;
				}
				var img = images[img_id][0];
				var img_width = images[img_id][1];
				var img_height = images[img_id][2];
				image.style.display = 'none';
				image.style.marginTop = ((<?php echo MAX_HEIGHT+10; ?>-img_height)/2)+'px';
				image.style.width = img_width+'px';
				image.style.height = img_height+'px';
				image.src = img;
				image.style.display = '';
				
				//Gestion de la bordure de la miniature de l'image affichée
				for(i=0; i<images.length; i++){
					document.getElementById('mini'+i).className = (i==img_id ? 'display' : '');
				}
				
				//Gestion des liens de navigation (liens affichés uniquement si le diaporama est désactivé)
				if(!use_diaporama){
					document.getElementById('right').style.visibility = 'visible';
					document.getElementById('left').style.visibility = 'visible';
					if(img_id+1 == images.length){
						document.getElementById('right').style.visibility = 'hidden';
					}
					if(img_id == 0){
						document.getElementById('left').style.visibility = 'hidden';
					}
				}
				
				//Gestion de l'id affiché de l'image
				document.getElementById('image_id').innerHTML = (img_id+1)+'/'+images.length;
				
				display_image_id = img_id;
				
				if(use_diaporama){
					setTimeout('displayImage('+(img_id+1)+', 1, 1)', <?php echo (DIAPORAMA_SPEED*1000); ?>);
				}
			}
			
			function opacity(id, varopacity){
				varopacity = (varopacity ? varopacity : 100);
				varopacity = varopacity-(20);
				var element = document.getElementById(id);
				element.style.opacity = (varopacity/100);
				element.style.filter = 'alpha(opacity='+varopacity+')';
				if(varopacity > 0){
					setTimeout('opacity("'+id+'", '+varopacity+')', 10);
				}
				else{
					document.body.removeChild(element);
				}
			}
			
			function useDiaporama(use){
				if(use){
					use_diaporama = 1;
					displayImage((display_image_id+1));
					document.getElementById('right').style.visibility = 'hidden';
					document.getElementById('left').style.visibility = 'hidden';
				}
				else{
					use_diaporama = 0;
					document.getElementById('right').style.visibility = 'visible';
					document.getElementById('left').style.visibility = 'visible';
					if(display_image_id+1 == images.length){
						document.getElementById('right').style.visibility = 'hidden';
					}
					if(display_image_id == 0){
						document.getElementById('left').style.visibility = 'hidden';
					}
					
					document.getElementById('diaporama').checked = false;
				}
			}
			
			function setSwitchMode(opacity){
				if(opacity){
					switch_mode = 'opacity';
				}
				else{
					switch_mode = 0;
				}
			}
			
			function loader(text, points){
				if(document.getElementById('loader')){				
					points = (points ? points : 0);
					points = (points+1 > 3 ? 0 : points+1);
					
					if(!text){
						text = document.getElementById('loader').childNodes[0].innerHTML;
					}
					
					var text_suspensions = text;
					for(i=0; i<points; i++){
						text_suspensions += '.';
					}
					
					document.getElementById('loader').childNodes[0].innerHTML = text_suspensions;
					setTimeout('loader("'+text+'", '+points+')', 500);
				}
			}
			
			function findPos(obj){
				var curleft = curtop = 0;
				if (obj.offsetParent) {
					curleft = obj.offsetLeft
					curtop = obj.offsetTop
					while (obj = obj.offsetParent) {
						curleft += obj.offsetLeft
						curtop += obj.offsetTop
					}
				}
				return [curleft,curtop];
			}
		</script>
		<style content="text/css">
			body{
				font-family: Verdana;
				font-size: 90%;
			}
			
			h1{
				text-align: center;
				font-size: 120%;
			}
			
			img{
				border: 1px solid #000000;
			}
			
			div#options{
				display: block;
				text-align: center;
				margin-bottom: 2px;
			}
				div#options label{
					margin: 0px 4px 0px 4px;
				}
					div#options input{
						vertical-align: middle;
						margin: 0px 3px 0px 0px;
					}
			
			div#content{
				margin: auto;
				width: <?php echo MAX_WIDTH+10; ?>px;
				height: <?php echo MAX_HEIGHT+10; ?>px;
				border: 1px solid black;
				border-bottom: 0px;
				text-align: center;
				background-color: #EFEFEF;
			}

			div#navig{
				width: <?php echo MAX_WIDTH; ?>px;
				margin: auto;
				border-left: 1px solid black;
				border-right: 1px solid black;
				padding: 0px 5px 0px 5px;
				height: 20px;
				text-align: center;
				background-color: #EFEFEF;
			}
				div#navig a{
					text-decoration: none;
					color: black;
					font-weight: bold;
				}
				div#navig a:hover{
					text-decoration: underline;
					color: black;
				}
					div#navig a#left{
						float: left;
					}
					div#navig a#right{
						float: right;
					}

			div#gallery{
				width: <?php echo MAX_WIDTH+10; ?>px;
				height: auto;
				!height: <?php echo MINIS_HEIGHT+24; ?>px; /*24px pour la hauteur de la barre de scroll sur IE*/
				margin: auto;
				overflow: auto;
				border: 1px solid black;
				border-top: 0px;
				background-color: #EFEFEF;
			}
				div#gallery table{
					margin: 0px 2px 0px 2px;
				}
					div#gallery a img{
						border: 1px solid #1F1F1F;
						vertical-align: top;
						margin: 2px;
						width: <?php echo MINIS_WIDTH; ?>px;
						height: <?php echo MINIS_HEIGHT; ?>px;
					}
						div#gallery a img:hover, div#gallery a img.display{
							border: 2px solid #EF6B00;
							margin: 1px;
						}
						
			div#loader{
				height: 100%;
				width: 100%;
				position: fixed;
				top: 0px;
				left: 0px;
				background-color: #FFFFFF;
				opacity: 0.5;
				filter: alpha(opacity=50);
				z-index: 1;
			}
				div#loader div{
					width: 220px;
					margin: auto;
					margin-top: 330px;
					font-weight: bold;
				}
		</style>
	</head>
	<body onLoad="document.body.removeChild(document.getElementById('loader'));">
		<!-- Div affichée durant le chargement -->
		<div id="loader"><div>Chargement des images</div></div>
		<script language="javascript" content="text/javascript">
			loader();
		</script>
		
		<?php
		//Titrede la page
		echo '<h1>'.(GALLERY_TITLE !== null ? GALLERY_TITLE  : 'Images du dossier '.$dir_path).'</h1>';
		?>
		
		<div id="options">
			<?php
			//Checkbox permettant d'activer le diaporama
			if(USE_DIAPORAMA){ 	
				echo '<label><input type="checkbox" id="diaporama" onClick="useDiaporama(this.checked);" />Faire défiler</label>';
			} 
			?>
			<label><input type="checkbox" onClick="setSwitchMode(this.checked);" <?php echo (USE_OPACITY_LOOP_DEFAULT ? 'checked' : ''); ?>/>Transitions progressives</label>
		</div>
		
		<div id="content">
			<?php
			//Affichage de la première image
			list($width, $height, $type, $attr) = getimagesize($_SERVER['DOCUMENT_ROOT'].$images[0]);
			if($width > MAX_WIDTH){
				$height = $height*(MAX_WIDTH/$width);
				$width = MAX_WIDTH;
			}
			if($height > MAX_HEIGHT){
				$width = $width*(MAX_HEIGHT/$height);
				$height = MAX_HEIGHT;
			}
			echo '<img src="'.$images[0].'" id="image" style="width: '.ceil($width).'px; height: '.ceil($height).'px; margin-top: '.(((MAX_HEIGHT+10)-$height)/2).'px" />';
			?>
			
		</div>
		<div id="navig">
			<a href="javascript:displayImage(false, -1);" id="left" style="visibility: hidden;">Précédente</a>
			<a href="javascript:displayImage(false, 1);" id="right" style="visibility: visible;">Suivante</a>
			<span id="image_id">1/<?php echo count($images); ?></span>
		</div>
		<div id="gallery">
			<table cellspacing="0" cellpadding="0">
				<tr><?php
					//Affichage des images
					$image_id = 0;
					foreach($images as $image){
						echo "\n\t\t\t\t\t".'<td><a href="javascript:displayImage('.$image_id.');" title="'.($image_id+1).'/'.count($images).'"><img src="'.$images[$image_id].'" id="mini'.$image_id.'"'.($image_id == 0 ? ' class="display"' : '').'></a></td>';
						$image_id++;
					}
					echo "\n\t\t\t\t";
					?></tr>
			</table>
		</div>
		
		<strong style="color: #3F3F3F; font-weight: normal; font-size: 70%; display: block; margin-top: 2px; text-align: center;">
			Script développé par Julien Theler - <a href="http://www.twiip.ch" target="blank" style="color: #3F3F3F;">www.twiip.ch</a> - 2008
		</strong>
	</body>
</html>