var nbColonnesMini = 5;
var margesVignette = 17; //( 2x5 de marge ) + 5 ( marge inter-image ) + 2 ( bordures)
var largeurBlocVignette = largeurVignette + margesVignette;
var colGauche = 130 + 35; // 130 = largeur portrait, 35 = espace inter-colonnes
var margesVisionneuse = 60 + 2 + 5; // 60 = 2 btns de 30, 2 = bordures visio, 5 = marge droite
var largeurMiniEcran = largeurImage + margesVisionneuse + colGauche; // largeur écran minimale nécessaire
//var largeurPageMini = (largeurBlocVignette * nbColonnesMini) + colGauche; // largeur mini avec déclenchement ascenceur Hz
var largeurPageMini = 800; // largeur mini avec déclenchement ascenceur Hz
var rapportImage = hauteurImage/largeurImage; // besoin si rétrécissement image (si écran trop petit)

$(document).ready(function() {
	var visionneuse = $('#visionneuse'); // zone + infos + boutons
	var visioZone = $('#blocImage'); // zone image seule
	
	// -------------- correction largeur image agrandie (contenu visionneuse) si nécessaire (si écran trop petit)
	if (screen.availWidth != undefined) {
		if (screen.availWidth < largeurMiniEcran) {
			//alert('largeurMiniEcran=' + largeurMiniEcran + '    screen.availWidth=' + screen.availWidth);/////
			largeurImage = screen.availWidth - margesVisionneuse - colGauche - 20; //20 = 2*10 de marges
			retreciImage(largeurImage);
		}
	}else{
		if (largeurImage > 800) {
			largeurImage = 800; // secu si "screen.availWidth" non dispo
			retreciImage(largeurImage);
		}
	}
	
	// ---------------------------------------------------------------------------------- transitionBox plugin
	var transitionBoxApi = visioZone.transitionBox({
		"width": largeurImage,
		"height": hauteurImage,
		"fadeOut": false,
		"image": '../../_pix/blanc.gif' // pour SAF : permet de ne pas afficher une image vide lors de l'affichage de la page
	});
	
	// ---------------------------------------------------------------------------------- resize
	$("#main").css("minWidth", largeurPageMini + 'px');
	resizeVisionneuse();
	
	// ---------------------------------------------------------------------------------- binds
	$(window).bind("resize",resizeVisionneuse);
	
	$("ul.planche li").click(function() {
		var idLigne = $(this).attr("id");
		var idImage = getIdImageFromLigne(idLigne);
		actionVignette(idImage);
	});
	$("#btnNext").bind("click",nextImg);
	$("#btnPrev").bind("click",prevImg);
	$("#btnClose").click(function() {
		closeVisionneuse();
	});
	transitionBoxApi.getImage().css("cursor", "pointer").click(function() {
		closeVisionneuse();
	});
	
	// ---------------------------------------------------------------------------------- fonctions
	// ------------------------------------------------ resize
	function retreciImage(newLargeur) {
		hauteurImage = Math.floor(largeurImage * rapportImage);
		$("#blocImage").css("width", (newLargeur - margesVisionneuse) + 'px');
		$("#infosImage").css("width", (newLargeur - margesVisionneuse) + 'px');
	}
	
	// ------------- placement boutons Prev et Next
	var hauteurBtns = Math.floor(hauteurImage / 2) - (30 / 2) + 5; // 30 = hauteur d'un btn, 5 = marge haut
	$("#btnPrev").css("top", hauteurBtns + 'px');
	$("#btnNext").css("top", hauteurBtns + 'px');
	// --------------
	
	function resizeVisionneuse() {
		// ------------- calcul de la largeur de la visionneuse en fonction du nombre de colonnes de vignettes actuel
		var nbColonnes = Math.floor($("#rightColumn").width() / largeurBlocVignette); // nombre de colonnes actuel
		var largeurVisioCols = (nbColonnes * largeurBlocVignette) - 5 - 2; // 5 = marge inter-image, 2 = bordures de la visionneuse
		// ------------- calcul de la largeur de la visionneuse en fonction de son contenu (image agrandie)
		var largeurVisioImage = largeurImage + margesVisionneuse;
		//alert('largeurVisioCols=' + largeurVisioCols + '   largeurVisioImage=' + largeurVisioImage + '   largeurImage=' + largeurImage + '   margesVisionneuse=' + margesVisionneuse);/////
		// ------------- affectation largeur visionneuse
		var largeurVisionneuse = Math.max(largeurVisioCols,largeurVisioImage);
		visionneuse.width(largeurVisionneuse + 'px');
	}
	
	// ------------------------------------------------ actions images
	
	// ------------------------------------- ouverture ou MAJ visionneuse
	function actionVignette(idImage) {
		if (typeof(idImage) == undefined) {
			idImage = 1; // 1ere image par défaut
		}else if (idImage > 999) { // dernière
			var idLigne = $('ul.planche li:last').attr('id');
			idImage = getIdImageFromLigne(idLigne);
		}
		
		var pointeur = $('ul.planche li[id=li_' + idImage + '] img');
		if (pointeur.length > 0) { // l'image existe
			$('ul.planche li.currentVignette').removeClass('currentVignette');
			pointeur.parent('li').addClass('currentVignette');
			var infosImage = getInfos(pointeur.attr('src'));
			if (!visionneuse.is(':visible')) {
				afficheImage(infosImage,idImage);
			}else{
				cliqueVignette(infosImage,idImage);
			}
		}else{
			alert("Unable to find image ID " + idImage + ".");
		}
	}
	
	// ------------------------------------- 1er affichage visionneuse et image avec effet
	function afficheImage(infosImage,id) {
		window.scrollTo(0,0);
		visionneuse.slideDown(400,function() {
			transitionBoxApi.show(infosImage.nomFichier,'slidetop',600,'easeInOutCubic',true,function() {
				afficheInfos(infosImage,id);
			});
		});
	}
	// ------------------------------------- clic sur vignette planche avec visionneuse déjà affiché : MAJ de la visionneuse
	function cliqueVignette(infosImage,id) {
		var imgActuelle = transitionBoxApi.image();
		var imgSuivante = infosImage.nomFichier;
		if (imgSuivante != imgActuelle) {
			window.scrollTo(0,0);
			transitionBoxApi.show(imgSuivante,'stretchTop',600,'easeInOutCubic',false,function() {
				afficheInfos(infosImage,id);
			});
		}
	}
	
	function nextImg() {
		$("#btnNext").html('...');
		
		var imgActuelle = transitionBoxApi.image();
		var liActuelle = $("li.currentVignette");
		if (liActuelle.length == 1) {
			var liSuivante = (liActuelle.next("li").size() != 0)? $("li.currentVignette").next("li") : $("ul.planche li:first");
			liActuelle.removeClass("currentVignette");
			liSuivante.addClass("currentVignette");
			var imgSuivante = liSuivante.children("img");
			var infosImage = getInfos(imgSuivante.attr("src"));
			var idImage = getIdImageFromLigne(liSuivante.attr('id'));
			transitionBoxApi.show(infosImage.nomFichier,'slideLeft',700,'easeInOutCubic',false,function() {
				afficheInfos(infosImage,idImage);
				$("#btnNext").html('&gt;');
			});
		}else{
			alert("Unexpected error: unable to get current picture.");
		}
	}
	
	function prevImg() {
		$("#btnPrev").html('...');
		
		var imgActuelle = transitionBoxApi.image();
		var liActuelle = $("li.currentVignette");
		if (liActuelle.length == 1) {
			var liSuivante = (liActuelle.prev("li").size() != 0)? $("li.currentVignette").prev("li") : $("ul.planche li:last");
			liActuelle.removeClass("currentVignette");
			liSuivante.addClass("currentVignette");
			var imgSuivante = liSuivante.children("img");
			var infosImage = getInfos(imgSuivante.attr("src"));
			var idImage = getIdImageFromLigne(liSuivante.attr('id'));
			transitionBoxApi.show(infosImage.nomFichier,'slideRight',700,'easeInOutCubic',false,function() {
				afficheInfos(infosImage,idImage);
				$("#btnPrev").html('&lt;');
			});
		}else{
			alert("Unexpected error: unable to get current picture.");
		}
	}
	
	function closeVisionneuse() {
		afficheInfos({"nomFichier": "", "titre": ""},0);
		transitionBoxApi.hide('slideBottom',400,'easeInOutCubic',true,function() {
			visionneuse.slideUp(300);
			$("li.currentVignette").removeClass("currentVignette");
		});
	}
	
	// -------------------------------------- appel page avec agrandissement d'une image passée en parametre (voir PHP)
	if (idImageChargement != '') actionVignette(idImageChargement);
	
	// -------------------------------------- bindings fleches clavier
	$(document).keydown(function(event) {
		var keyCode = event.keyCode || event.which;
		
		if (keyCode == 37) { // gauche
			if (!visionneuse.is(':visible')) {
				actionVignette(1);
			}else{
				prevImg();
			}
			return false;
		}else if (keyCode == 38) { // haut
			actionVignette(1);
			return false;
		}else if (keyCode == 39) { // droite
			if (!visionneuse.is(':visible')) {
				actionVignette(1);
			}else{
				nextImg();
			}
			return false;
		}else if (keyCode == 40) { // bas
			actionVignette(1000);
			return false;
		}
	});
});

// renvoit un objet avec le nom de fichier image agrandie et son titre
function getInfos(strSource,strTitre) {
	var path = strSource.substring(0, strSource.lastIndexOf('/') + 1);
	var fileName = strSource.substring(strSource.lastIndexOf('/') + 1);
	// --------- extraction nom agrandissement si le nom du fichier passé est une vignette (commence par '_')
	fileName = (fileName.substring(0,1) == '_')? fileName.substring(fileName.indexOf('_') + 1) : fileName;
	// ---------
	if (strTitre == undefined) {
		// ------------- le titre de l'image est dans le nom du fichier
		var imgTitle = (fileName.indexOf('__') != -1) ? fileName.substring( fileName.indexOf('__') + 2, fileName.lastIndexOf('.')) : '';
		if (imgTitle.charAt(imgTitle.length - 1) == '_') imgTitle = imgTitle.substring(0,imgTitle.length - 1) + ' ' + ajoutTitreImage;
		imgTitle = imgTitle.replace(/_/g,' ');
	}else{
		var imgTitle = strTitre;
	}
	fileName = path + fileName; // reconstruction nom complet de l'agrandissement
	
	return {"chemin" : path, "nomFichier" : fileName, "titre" : imgTitle}
}

function afficheInfos(infos,numero) {
	$("#titreImage").text(infos.titre);
	$("#compteurImage").text(numero + ' / ' + nbreVignettes);
}

function getIdImageFromLigne(chaine,repChar) {
	// attention : repChar ne peut être un opérateur de regex (comme *) !
	// renvoit vide si repChar n'est pas trouvé dans la chaine
	if (repChar == undefined) repChar = '_';
	if (chaine == undefined) {
		chaine = repChar;
	}else{
		chaine = chaine.toString();
		if (chaine.indexOf(repChar,0) < 0) chaine = chaine + repChar;
	}
	var regexp = new RegExp('.*' + repChar);
	return chaine.replace(regexp,'');
}