// +------------------------------------------------------------------------+
// | Affichage des image en plein écran
// +------------------------------------------------------------------------+
// | Javascript
// | 
// | @author		 		Xuan Nguyen (xuxu.fr_at_gmail.com)
// | @version 				1.7
// | Last update			2007/04/18
// | Modified by 			Stanislas Ormières (stan_at_laruiss.org)
// |
// | Licensed under the Creative Commons Attribution 3 License - http://creativecommons.org/licenses/by-sa/3.0/
// +------------------------------------------------------------------------+

// TDL :
// - Ajouter les commentaires en anglais

// Distance en pixel entre le haut de l'image et le top.
var margin_top = 40;
// Distance en pixel entre la droite de l'image et le right si l'image dépasse du body initial.
var margin_right = 40;
// Distance en pixel entre le bas de l'image et le bottom si l'image dépasse du body initial.
var margin_bottom = 40;
// Distance en pixel entre la gauche de l'image et le right si l'image dépasse du body initial.
var margin_left = 40;
// Tableau comprenant les groupes d'images
var splash_groups = new Array();
// Tableau comprenant les liens splashed
var splash_as = new Array();
// Variable contenant le timeout
var slide_timeout;
// Variable contenant le timeout de la disparition de la notification de play/pause
var slide_timeout_notification;
// Durée timeout pour le slide
var slide_timeout_value = 4000;
// Groupe courant
var current_group;
// Position actuelle de l'image dans le groupe
var current_position;
// Drapeau du diaporama : actif (true) ou non (false)
var is_sliding = false;

// Default message are in english
defaultSplashImageMessages = {
	'nextImage': 'Jumpt to next image',
	'previousImage': 'Jumpt to previous image',
	'closeSplash': 'Close the splash',
	'startSlide': 'Start the slide',
	'stopSlide': 'Stop the slide',
	'slidingOrNot': 'Sliding (or not)',
	'handlerAttachmentError': 'Handler could not be attached'
}

// Cross-browser function to get an HTML Element from its id attribute
function getObj(ID) {
	var obj = null;
	if (document.getElementById) {
		obj = document.getElementById(ID);
	}
	if ( obj == null ) {
		if (document.all){
			obj = document.all(ID);
		}
	}
	if ( obj == null ) {
		obj = eval('document.' + ID);
	}
	return obj;
}

// -----------------------------------------------------------------------------------
//  Affiche l'image concernée en plein écran
function splash_image(a) {
	obj_body = document.getElementsByTagName('body').item(0);
	// Initialisation de la variable current_group si cette image fait partie d'un groupe
	val = a.rel.replace('splash.image|', '');
	if (val != 'splash.image' && splash_groups[val].length > 0) {
		current_group = val;
		current_position = in_array(splash_groups[val], a.href);
	}
	if (!getObj('splash_screen')) {
		//Création du fond
		obj_splash_screen = document.createElement('a');
		obj_splash_screen.id = 'splash_screen';
		obj_splash_screen.title = splashImageMessages.closeSplash; // 'Close the splash'
		array_page_size = getPageSize();
		obj_splash_screen.style.width = '100%';
		obj_splash_screen.style.height = array_page_size[1]+'px';
		obj_splash_screen.onclick = function() { splash_bye(); return false; }
		obj_body.appendChild(obj_splash_screen);
	
		//Création du container image et du loading
		obj_content = document.createElement('div');
		obj_content.id = 'image_content';
		obj_content.style.width = '200px';
		obj_content.style.height = '200px';
		obj_content.className = 'ajax-loading';
		obj_body.appendChild(obj_content);
	
		//Positionnement
		array_page_scroll = getPageScroll();
		// array_page_size = getPageSize(); // SO Why repeat this ?
		obj_content.style.top = array_page_scroll[1]+margin_top+'px';
		obj_content.style.left = array_page_size[0]/2-(parseInt(obj_content.style.width)/2)+'px';
	} else {
		obj_splash_screen = getObj('splash_screen');
		obj_content = getObj('image_content');
		obj_content.removeChild(getObj('splash_img'));
		obj_content.className = 'ajax-loading';
	}
	//Supprime la navigation si elle existe
	if (getObj('splash_previous')) {
		obj_content.removeChild(getObj('splash_previous'));
		obj_content.removeChild(getObj('splash_next'));
		if (getObj('splash_notification')) { obj_content.removeChild(getObj('splash_notification')); }
		what = (is_sliding) ? 'splash_pause' : 'splash_play';
		obj_content.removeChild(getObj(what));
	}
	//Charge l'image
	ini_image(a);
}

// -----------------------------------------------------------------------------------
//  Charge l'image
function ini_image(a) {
	//Objet image pour récupérer la taille de l'image
	img = new Image();
	img.src = a.href;

	//Si l'image n'est pas encore chargée
	if (!img.complete) {
		img.onload = function() {
			image_display(a);
		}
	} else { //Si l'image a déjà été chargée une fois
		image_display(a);
	}
}

// -----------------------------------------------------------------------------------
// Affiche l'image
function image_display(a) {
	obj_body = document.getElementsByTagName('body').item(0);
	obj_content = getObj('image_content');
	
	//Création image
	obj_image = document.createElement('img');
	obj_image.id = 'splash_img';
	obj_image.onclick = function() { splash_bye(); return false; }
	obj_content.appendChild(obj_image);

	//Resize du container de l'image
	obj_content.style.width = img.width + 'px';
	obj_content.style.height = img.height + 'px';
	
	// Création du conteneur des titres des photos
	if (!getObj('img_title')) {
		var obj_img_title = document.createElement('div');
		obj_img_title.className = 'img_title';
	} else {
		var obj_img_title = getObj('img_title');
	}
	obj_img_title.innerHTML = a.title;
	obj_content.appendChild(obj_img_title);

	//Replacement du conteneur de l'image
	array_page_scroll = getPageScroll();
	array_page_size = getPageSize();
	obj_content.style.top = array_page_scroll[1]+margin_top+'px';
	obj_content.style.left = array_page_size[0]/2-(parseInt(img.width)/2)+'px';

	obj_img_title.style.position = 'absolute';
	obj_img_title.style.top = parseInt(obj_content.style.height+margin_top)+'px';
	obj_img_title.style.width = obj_content.style.width;

	//On affiche l'image
	obj_splash_screen = getObj('splash_screen');
	obj_content = getObj('image_content');
	obj_content.className = '';
	obj_image.src = a.href;
	obj_image.style.display = 'block';
	
	//Resize le fond si l'image est trop grande
	array_page_size = getPageSize();
	total_width = margin_left+parseInt(obj_content.style.width)+margin_right;
	if (total_width > array_page_size[0]) { obj_splash_screen.style.width = total_width+'px'; obj_content.style.left = margin_left+'px'; };
	total_height = margin_top+parseInt(obj_content.style.top)+parseInt(obj_image.height)+margin_bottom;
	if (total_height > array_page_size[1]) { obj_splash_screen.style.height = total_height+'px'; };

	//Initialise la navigation si l'image fait partie d'un groupe   !!!!!!!!!!! Modifié !!!!!!!!!! pour restaurer la navigation : supprimer "//" sur la ligne ci-dessous !!!!!!
	//ini_nav(a);

}

// -----------------------------------------------------------------------------------
//  Affiche la navigation si l'image fait partie d'un groupe
function ini_nav(a) {
	clearTimeout(slide_timeout);
	obj_content = getObj('image_content');

	//Check si l'image fait partie d'un groupe
	val = a.rel.replace('splash.image|', '');

	if (splash_groups[val] && getObj('splash_img')) {
		//Création de l'objet splash_previous
		obj_previous = document.createElement('a');
		obj_previous.id = 'splash_previous';
		obj_previous.title = splashImageMessages.previousImage; // 'Jump to the previous image'
		obj_previous.onmouseover = function() { obj_previous.className = 'over'; }
		obj_previous.onmouseout = function() { obj_previous.className = ''; }
		obj_previous.onclick = function() { splash_previous(); }
		obj_content.appendChild(obj_previous);

		//Création de l'objet splash_next
		obj_next = document.createElement('a');
		obj_next.id = 'splash_next';
		obj_next.title = splashImageMessages.nextImage; // 'Jump to the next image'
		obj_next.onmouseover = function() { obj_next.className = 'over'; }
		obj_next.onmouseout = function() { obj_next.className = ''; }
		obj_next.onclick = function() { splash_next(); }
		obj_content.appendChild(obj_next);

		//Création de l'objet slide_play
		var obj_play = document.createElement('a');
		if (!is_sliding) {
			obj_play.id = 'splash_play';
			obj_play.title = splashImageMessages.startSlide; // 'Start the slide'
		} else {
			obj_play.id = 'splash_pause';
			obj_play.title = splashImageMessages.stopSlide // 'Pause the slide'
		}
		obj_play.onclick = function() { splash_pause(); }
		obj_play.onmouseover = function() { obj_play.className = 'over'; }
		obj_play.onmouseout = function() { obj_play.className = ''; }
		obj_content.appendChild(obj_play);

		//Resize et repositionne les flèches de navigation
		obj_previous.style.top = 0;
		obj_previous.style.left = 0;
		obj_previous.style.width = parseInt(obj_content.style.width)/2+'px';
		obj_previous.style.height = parseInt(obj_content.style.height)/2+'px';
		obj_next.style.top = 0;
		obj_next.style.right = 0;
		obj_next.style.width = parseInt(obj_content.style.width)/2+'px';
		obj_next.style.height = parseInt(obj_content.style.height)/2+'px';
		obj_play.style.left = 0;
		obj_play.style.bottom = 0;
		obj_play.style.width = parseInt(obj_content.style.width)+'px';
		obj_play.style.height = parseInt(obj_content.style.height)/2+'px';

		//
		if (is_sliding) { slide_timeout = window.setTimeout(splash_next, slide_timeout_value); }
	}
}

// -----------------------------------------------------------------------------------
// To previous image
function splash_previous() {
	current_position = (current_position-1 < 0) ? splash_groups[current_group].length-1 : current_position-1;
	splash_image(splash_as[splash_groups[current_group][current_position]]);
}

// -----------------------------------------------------------------------------------
// To next image
function splash_next() {
	current_position = (current_position+1 == splash_groups[current_group].length) ? 0 : current_position+1;
	splash_image(splash_as[splash_groups[current_group][current_position]]);
}

// -----------------------------------------------------------------------------------
// Pause the slide (ou pas)
function splash_pause() {
	if (!is_sliding) {
		is_sliding = true;
		getObj('splash_play').id = 'splash_pause'; 
		getObj('splash_pause').title = splashImageMessages.stopSlide; // 'Pause the slide'
		current_position = (current_position == splash_groups[current_group].length) ? 0 : current_position;
		slide_timeout = window.setTimeout(splash_next, slide_timeout_value/4);
	} else {
		is_sliding = false;
		getObj('splash_pause').id = 'splash_play'; 
		getObj('splash_play').title = splashImageMessages.startSlide; // 'Start the slide'
		clearTimeout(slide_timeout);
	}
}

// -----------------------------------------------------------------------------------
// Notification d'action
function notification() {
	clearTimeout(slide_timeout_notification);
	obj_content = getObj('image_content');
	if (!getObj('splash_notification')) {
		//Création du petit icone playing/paused
		obj_slide = document.createElement('a');
		obj_slide.id = 'splash_notification';
		obj_slide.title = splashImageMessages.slidingOrNot; // 'Sliding (ou pas)';
		obj_content.appendChild(obj_slide);
		obj_slide.style.top = (parseInt(obj_content.style.height)/2)-25+'px'; //25 car largeur de l'image play/pause divisée par 2
		obj_slide.style.left = (parseInt(obj_content.style.width)/2)-25+'px'; //25 car hauteur de l'image play/pause divisée par 2
		obj_slide.style.width = '50px'; // 50 largeur de l'image play/pause
		obj_slide.style.height = '50px'; // 50 hauteur de l'image play/pause
	} else {
		obj_slide = getObj('splash_notification');
	}
	if (is_sliding) {
		obj_slide.className = 'playing';
	} else {
		obj_slide.className = 'paused';
		slide_timeout_notification = setTimeout(splash_notification_bye, 2000);
	}
}

// -----------------------------------------------------------------------------------
// Slide notification
function splash_notification_bye() {
	if (getObj('image_content')) {
		obj_content = getObj('image_content');
		obj_content.removeChild(getObj('splash_notification'));
	}
	clearTimeout(slide_timeout_notification);
}

// -----------------------------------------------------------------------------------
// Au revoir Splash
function splash_bye() {
	clearTimeout(slide_timeout);
	clearTimeout(slide_timeout_notification);
	is_sliding = false;
	obj_body = document.getElementsByTagName('body').item(0);
	obj_body.removeChild(getObj('splash_screen'));
	obj_body.removeChild(getObj('image_content'));
}

// -----------------------------------------------------------------------------------
// Check la touche clavier enfoncé
function key_check(e) {
	if (getObj('splash_img')) {
		clearTimeout(slide_timeout);
		what = (e == null) ? event.keyCode : e.which;
		if (in_array(new Array(27, 38, 46, 88), what) >= 0) { //Esc, Suppr, flèche haut, x
			splash_bye();
			return false;
		}
		if (splash_groups[current_group]) {
			if (in_array(new Array(13, 32, 40), what) >= 0) { //Entrée, espace, flèche bas
				splash_pause();
				notification();
				return false;
			}
			if (in_array(new Array(33, 37, 109), what) >= 0) { // Page Up , flèche gauche, -
				splash_previous();
				return false;
			}
			if (in_array(new Array(34, 39, 107), what) >= 0) { // Page Down, flèche droite, +
				splash_next();
				return false;
			}
		}
	}
}
	
// -----------------------------------------------------------------------------------
// Initialise les liens concernés
function ini_splash_images() {
	if (!splashImageMessages) {
		splashImageMessages = defaultSplashImageMessages;
	}
	splash_groups = new Array();
	splash_as = new Array();
	as = document.getElementsByTagName('a');
	for (i=0; i<as.length; i++){
		a = as[i];
		if (a.rel.match('splash.image')) {
			a.onclick = function () { splash_image(this); return false; }
			val = a.rel.replace('splash.image|', '');
			if (val != 'splash.image') {
				if (!splash_groups[val] || typeof splash_groups[val] != 'object') {
					array = new Array();
				} else {
					array = splash_groups[val];
				}
				if (a.href) {
					array[array.length] = a.href;
					splash_groups[val] = array;
					splash_as[a.href] = a;
				}
			}
		}
	}
	// -----------------------------------------------------------------------------------
	// On lance le check de la touche clavier enfoncée
	document.onkeydown = key_check;
}

// -----------------------------------------------------------------------------------
//  
// Fonctions annexes
//
// -----------------------------------------------------------------------------------

// -----------------------------------------------------------------------------------
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
// Code by Lokesh Dhakar
function getPageScroll(){
	var yScroll;
	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	}
	arrayPageScroll = new Array('',yScroll) 
	return arrayPageScroll;
}

// -----------------------------------------------------------------------------------
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Code by Lokesh Dhakar
// Edit for Firefox by pHaez
//
function getPageSize(){
	var xScroll, yScroll;
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}
	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}
	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}

// -----------------------------------------------------------------------------------
// Core code from - quirksmode.org
function addEvent(obj, evType, fn, useCapture) {
	if (obj.addEventListener) {
		obj.addEventListener(evType, fn, useCapture);
		return true;
	} else if (obj.attachEvent) {
		var r = obj.attachEvent("on"+evType, fn);
		return r;
	} else {
		alert("Handler could not be attached");
	}
}

// -----------------------------------------------------------------------------------
//  Check si val est présent dans le tableau ar
// Last update 2007-04-03
// Code by Xuan NGUYEN
function in_array (ar, val) {
	if (ar.length == 0) { return -1; }
	for (i=0; i<ar.length; i++) {
		if (ar[i] == val) { return i; }
	}
	return -1;
}

//Lance l'ini au chargement de la page
addEvent(window, 'load', ini_splash_images);