//fonction pour afficher l'image (contenue dans un div)
//valeur globale pour le plus haut z-index de la page
var index_haut=2;
var epaisseur_select = 1;
var couleur_select = "white";
var legende_vieux_id = "";
var lien_legende_vieux_id = "";
var tab_menus = new Array ();

var temp_serie;
var	temp_key;
var temp_width;
	
tab_menus[0] = "menu";
tab_menus[1] = "liens";
tab_menus[2] = "contact";
tab_menus[3] = "clients";

function affiche_legende_photo (serie, key){
	if (document.getElementById ('legende_affichee')){
		var vieille_legende = document.getElementById ('legende_affichee');
		vieille_legende.id = legende_photo_vieux;
		vieille_legende.style.display = "none";
	}
	var prefixe = tab_javascript[serie][key]['nom_id']
	var id =  prefixe+"_legende";
	legende_photo_vieux = id;
	if (document.getElementById(id)) {
		var legende_photo = document.getElementById(id);
		legende_photo.style.display="block";
		//on vérifie si légende en cours et si oui on lui redonne son id d'origine
		legende_photo.id = "legende_affichee";
		}
	
}

function ouvre_site(href, target) {
	//window.open('portfolio.php', 'ey', 'titlebar=no, scrollbars=no, height=1200px, width=2000px, left=0px, top=0px, status=no, resizable=no');
	window.open(href,target,'resizable=yes, scrollbars=no, left=0px, top=0px, personalbar=no, status=no, menubar=no,titlebar=no, toolbar=no, location=no');
	}


function menus_derriere() {
	var menus = document.getElementById('menus');
	menus.style.zIndex = "1";
}

function legendes() {
 var legendes ="";
 for (var serie in tab_legendes_javascript) {
	legendes += serie+" \n\t"+tab_legendes_javascript[serie]+"\n\n";
 }
 alert(legendes);
}

function tab() {
var tableau = "";
for (var id1 in tab_javascript) {
		tableau += id1+" \n ";
		for (var id2 in tab_javascript[id1]){
			tableau += id2+" : ";
			for (var id3 in tab_javascript[id1][id2]){
				tableau += tab_javascript[id1][id2][id3]+" - ";
			}
			tableau += "\n";
		}
	}
	alert(tableau);
}

function affiche_serie(serie) {
	
	//on modifie le style du lien
	var lien_serie = document.getElementById(serie);
	lien_serie.className = "menu_visible";
	
	
	//alert(id);
	//on parcoure la case de notre tableau général correspondant à la série cliquée
	for (var key in tab_javascript[serie]) {
		onglet_id = tab_javascript[serie][key]['nom_id'];
		var onglet = document.getElementById(onglet_id);
		
		onglet.style.display = "block";
	}
	lien_serie.onclick = function () {
		cache_serie(serie);
	}
	
}


function cache_serie(serie) {
	//on modifie le style du lien
	var lien_serie = document.getElementById(serie);
	lien_serie.className = "menu_cache";

	//on va s'occuper du lien ici
	var lien_serie = document.getElementById (serie);
	lien_serie.onclick = function () {
		affiche_serie(serie);
	}
	//alert(id);
	//on parcoure la case de notre tableau général correspondant à la série cliquée
	for (var key in tab_javascript[serie]) {
		onglet_id = tab_javascript[serie][key]['nom_id'];
		var onglet = document.getElementById(onglet_id);
		
		onglet.style.display = "none";
	}
	
}


function ouvre_rubrique(id, barre_id) {
	//on ferme tout d'aborde toutes les autres rubriques
	for (var id_menu in tab_menus) {
		if (id_menu != id) {
		ferme_rubrique (tab_menus[id_menu], "barre_"+tab_menus[id_menu]);
		}
	}
	var rubrique = document.getElementById(id);
	rubrique.style.display = "block"
	var barre_rubrique = document.getElementById(barre_id);
	barre_rubrique.onclick = function () {
		ferme_rubrique(id, barre_id);
	}
}
function ferme_rubrique(id, barre_id) {
	var rubrique = document.getElementById(id);
	rubrique.style.display = "none";
	var barre_rubrique = document.getElementById(barre_id);
	barre_rubrique.onclick = function () {
		ouvre_rubrique (id, barre_id);
		}
		
	}

function affiche_lien_legende(serie, key) {
	var width = tab_javascript[serie][key]['img_width'];
	var height = tab_javascript[serie][key]['img_height'];
	
	var height_lien = parseInt(height);
	height_lien += 50;
	
	//si un lien légende est activ, on le remet à son état d'origine
	if (document.getElementById('lien_visible')) {
		var lien_visible = document.getElementById('lien_visible');
		lien_visible.id = lien_legende_vieux_id;
	}
	var lien_legende = document.getElementById("lien_legende_"+serie);
	lien_legende.style.visibility = "visible";
	lien_legende_vieux_id = lien_legende.id;
	lien_legende.id = "lien_visible";
	lien_legende.style.top = height_lien+"px";
	lien_legende.onclick = function () {
		
		affiche_legende (serie, key, width);
		
	}
	var right_num = parseInt(width);
	var right_margin = right_num+28;
	lien_legende.style.right = right_margin +"px";
	lien_legende.style.top = height_lien+"px";
}

function cache_lien_legende() {
	if (document.getElementById('lien_visible')) {
		lien_legende_visible = document.getElementById('lien_visible');
		lien_legende_visible.style.visibility = "hidden";
		lien_legende_visible.id = lien_legende_vieux_id;
		
		//on place le lien de la légende
		
	}
}

function affiche_legende (serie, key, width) {
	
	temp_serie = serie;
	temp_key = key;
	temp_width = width;
	
	
	if (document.getElementById('visible')) {
		var legende_visible = document.getElementById('visible');
		legende_visible.style.visibility = "hidden";
		
		
		legende_visible.id = legende_vieux_id;
	}
	var lien_legende = document.getElementById('lien_visible');
	
	lien_legende.onclick = function () {
		cache_legende (serie, key, width);
	}
	var id = "legende_"+serie;
	
	var legende = document.getElementById(id);
	var right_num = parseInt (width);
	var right_margin = right_num+50;
	legende.style.right = right_margin +"px";
	legende.style.top = "40px";

	legende.style.visibility = "visible";
	legende_vieux_id = legende.id;
	legende.id = "visible";
}

function cache_legende () {
	if (document.getElementById('visible')) {
	
		var legende_visible = document.getElementById('visible');
		legende_visible.style.visibility = "hidden";
		legende_visible.id = legende_vieux_id;
		
		var lien_legende = document.getElementById('lien_visible');
		lien_legende.onclick = function () {
			affiche_legende(temp_serie, temp_key, temp_width);
		
		}
	}
}

function suite(serie, key, cible) {
	var img =document.getElementById(cible);
	img.width = tab_javascript[serie][key]['img_width'];
	img.height = tab_javascript[serie][key]['img_height'];	
	img.style.display = "block";
}

//on lui passe les dimensions de la nouvelle image, l'image a changer dans la page (name) et le lien de la nouvelle image (src)
function replace_img (serie, key, cible) {
	var img =document.getElementById(cible);
	img.style.display = "none";
	img.src = "img/sablier3.gif";
	
	//setTimeout("suite(serie, key, cible)", 10);
	//suite(serie, key, cible);
	img.width = tab_javascript[serie][key]['img_width'];
	img.height = tab_javascript[serie][key]['img_height'];	
	img.style.display = 'block';
		
		
	
	
	
	//img.style.display = "none";
	
	//on affiche le fond noir:
	var cache_noir = document.getElementById('cache');
	cache_noir.style.display = "block";
	cache_noir.style.zIndex = "1999";
	
	//on attend que l'image soit la pour redimensionner et rendre visible à nouveau 
	//afin d'éviter une déformation des images pendant le chargement
	
	//on crée donc un objet Image() pour lequel on va charger (hors écran) l'image que l'on veut afficher
	var img_loaded = new Image();
	//on assigne la fonction visible (donc pas de parenthèses) à la propriété onload de notre nouvel objet
	//ceci avant de charger l'image sinon l'action n'est pas forcément exécutée
	img_loaded.onload = visible;
	img_loaded.src = tab_javascript[serie][key]['img_src'];
	
	function visible () {
		img.src = "img/sablier3.gif";
		img.style.display = "block";
		img.src = tab_javascript[serie][key]['img_src'];
	}
	
}

function cache_grosse (id) {
	//var image = 'document.'+name;
	//var img = eval(image);
	var img = document.getElementById(id);
	img.src = "img/transp.gif";
	img.style.display = "none";
	
	//on cache le fond noir:
	var cache_noir = document.getElementById('cache');
	cache_noir.style.display = "none";
	cache_noir.style.zIndex = "0";
	
	
}

var id_vieux ="";
var id_img_vieux ="";
var height_vieux="";
var width_vieux="";
var id_cible_vieux="";
var src_vieux="";
var legende_photo_vieux = "";


function juste_devant (id) {
	var element = document.getElementById(id);
	element.style.zIndex = index_haut;
	index_haut++;
}


function passe_devant (serie, key) {
	var id = tab_javascript[serie][key]['nom_id']
	var selection = document.getElementById(id);
	var selection_img = document.getElementById(id+"_img");
	
	
	
	//on annule les effets de bords pour l'objet selection
	selection_img.onmouseover = function () {}
	selection_img.onmouseout = function () {}
	selection.style.zIndex = index_haut;
	index_haut++;
	
	//on change le onclick pour l'élément selectionné
	selection.onclick = function () {
		//agrandissement
		replace_img(serie, key, 'vision');
		
		//pour afficher les onglets de navigation
		affiche_navigation (serie, key, 'vision');
		
		
		//on affiche le lien vers la légende
		affiche_lien_legende(serie, key);
		
		//si la légende de la photo existe, on l'affiche dans la légende de la série
		var prefixe = tab_javascript[serie][key]['nom_id']
		var id_legende_photo = prefixe+"_legende";
		if (document.getElementById(id_legende_photo)){affiche_legende_photo (serie, key);}
		
		//on remet le thumb a son état initial
		selection_img.style.border = "solid black 1px";
		selection_img.onmouseover = function () {bord_blanc(id+"_img")}
		selection_img.onmouseout = function() {pas_de_bord(id+"_img")}
		//on attribue l'ancien onclick
		
		selection.onclick = function () {
			cache_legende();
			passe_devant (serie, key);
			
			}
		}
	selection.onmouseout = function () {
		//on remet le thumb a son état initial
		selection_img.style.border = "solid black 1px";
		selection_img.onmouseover = function () {bord_blanc(id+"_img")}
		selection_img.onmouseout = function() {pas_de_bord(id+"_img")}
		//on attribue l'ancien onclick
		
		selection.onclick = function () {
			cache_legende();
			passe_devant (serie, key);
			
			}
	}
	//on met en évidence la sélection
	selection_img.style.border = "solid white 1px";

	
}
function img_precedente(serie, key, cible) {
	cache_grosse('vision');
	//si la case précédente existe
	var key_num = parseInt(key);
	var prev_key = key_num - 1;
	//if (!isNaN (tab_javascript[serie].length)) {alert ("c'est un nombre : "+tab_javascript[serie].length);}
	if (prev_key < 0) {
			prev_key = tab_javascript[serie].length-1;
			cache_grosse('vision');
			replace_img (serie, prev_key, cible);
			//on retourne à 0
		}
			
	else {
		replace_img(serie, prev_key, cible);
		
	}
	//on bouge le lien de la légende (l'élément à bouger s'appelle actuellement "lien_visible" !)
	var lien_legende_serie = document.getElementById("lien_visible");
	var width = tab_javascript[serie][prev_key]['img_width'];
	var num_width = parseInt(width);
	var right = num_width + 30;
	lien_legende_serie.style.right = right+"px";
	//on actualise les boutons
	affiche_navigation (serie, prev_key, cible);
	affiche_lien_legende (serie, prev_key);
	if (document.getElementById('visible')){
		affiche_legende (serie, prev_key, width);
		
		}
	affiche_legende_photo(serie, prev_key);
	
	}
	
function img_suivante(serie, key, cible) {	
	cache_grosse('vision');
	//si la case suivante existe
	var key_num = parseInt(key);
	var next_key = key_num + 1;
	if (tab_javascript[serie][next_key] == undefined) {
			replace_img (serie, 0, cible)
			//on retourne à 0
			next_key = 0;
		}
	else {
		replace_img(serie, next_key, cible)
	}
	var lien_legende_serie = document.getElementById("lien_visible");
	var width = tab_javascript[serie][next_key]['img_width'];
	var num_width = parseInt(width);
	var right = num_width + 28;
	lien_legende_serie.style.right = right+"px";
	//on actualise les boutons
	affiche_navigation (serie, next_key, cible);
	affiche_lien_legende (serie, next_key);
	//si la légende est affichée, on "écrase" pour redéfinir sa position
	if (document.getElementById('visible')){
		affiche_legende (serie, next_key, width);
		}

	//et on réaffiche la légende de la bonne image sous la légende de la série
	affiche_legende_photo(serie, next_key);
	
	
}

function affiche_navigation(serie, key, cible) {
	var navig_gauche = document.getElementById('navig_gauche');
	var navig_droite = document.getElementById('navig_droite');
	//on va récupérer les références de l'image suivant "id" dans la série "serie"
	//alert ("serie  : "+serie+"    id : "+id);
	//on fouille le tableau à la recherche de notre id
	
	
	navig_droite.onclick = function () { img_suivante(serie, key, cible);}	
	navig_gauche.onclick = function () { img_precedente(serie, key, cible);}	
	
	var height = tab_javascript[serie][key]['img_height'];
	var navig_height = parseInt(height);
	navig_height += 50;
	//navig_gauche.style.top = navig_height+"px";
	//navig_droite.style.top = navig_height+"px";
	
	navig_gauche.style.top = navig_height+"px";
	navig_droite.style.top = navig_height+"px";
	navig_gauche.style.right = "55px";
	navig_droite.style.right = "40px";
	navig_gauche.style.visibility = "visible";
	navig_droite.style.visibility = "visible";
}

function cache_navigation ()  {
	var navig_gauche = document.getElementById('navig_gauche');
	var navig_droite = document.getElementById('navig_droite');
	navig_gauche.style.visibility = "hidden";
	navig_droite.style.visibility = "hidden";
}

function passe_derriere () {
	var derriere = document.getElementById(id1);
	var derriere_img = document.getElementById(id_img);
	
	derriere.onclick = function () {stocker_onclick;};
	derriere_img.style.border = "solid black 1px";
	//derriere_img.onmouseout =  stocker_onmouseout;
	
}

function alerrt () {
	alert("Image déjà visionnée!");
}

function bord_blanc (id) {
	var img = document.getElementById(id);
	img.style.borderStyle = "solid";
	img.style.borderColor = couleur_select;
	img.style.borderWidth = epaisseur_select + "px";
	//on bouge l'image pour qu'il n'y ait pas de décalage à cause du border ajouté
	var decalage_x = parseInt(img.style.left)-epaisseur_select;
	var decalage_y = parseInt(img.style.top)-epaisseur_select;
	//devant.style.left = decalage_x +"px";
	//devant.style.top = decalage_y +"px";
}

function pas_de_bord (id) {
	var img = document.getElementById(id);
	img.style.borderColor = "black";
	img.style.borderWidth = "1px";
	var decalage_x = parseInt(img.style.left)+epaisseur_select;
	var decalage_y = parseInt(img.style.top)+epaisseur_select;
	//devant.style.left = decalage_x +"px";
	//devant.style.top = decalage_y +"px";
}


function secouer (id) {
	var image = document.getElementById(id);
	
	
	var left = parseInt(image.style.left);
	var right = parseInt(image.style.right);
	var top = parseInt(image.style.top);
	var bottom = parseInt(image.style.bottom);
	
	

	//on calcule des valeurs aléatoires pour déplacer les éléments dans n'importe quelle direction
	var side_rand = Math.random() * 100;
	var vertical_rand = Math.random() * 100;
	side_rand = 30 * Math.cos(3*side_rand);
	vertical_rand = 30 * Math.cos(3*vertical_rand);
		
	var id2 = id;
	//on anime la vignette
	var compteur = 0;
	alert(id);
	setTimeout("deplace(image)", 20);
	
	
	
}

function cache (id) {

	var image = document.getElementById(id);
	image.style.display = "none";
	
}

function affiche(id) {	
	
	var image = document.getElementById(id);
	image.style.display = "block";
	
}

function affiche_visibility(id) {	
	
	var image = document.getElementById(id);
	image.style.visibility = "visible";
	
}


//drag and drop -----------------------------------------------------------------------
//repris du livre "Javascript - La référence, aux Editions O'Reilly"

function beginDrag(elementToDrag, event) {
	
	
	//Rcherche la position courante de l'élément
	var x = parseInt(elementToDrag.style.left);
	var y = parseInt(elementToDrag.style.top);
	
	//calcule la distance entre ce point et la point du clic de la souri
	//la fonction emboîtée moveHandler a besoin de ces valeurs
	var deltaX = event.clientX - x;
	var deltaY = event.clientY - y;
	
	document.addEventListener("mousemove", moveHandler, true);
	document.addEventListener("mouseup", upHandler, true);
	
	event.stopPropagation();
	event.preventDefault();
	
	//déplacement de l'élément
	function moveHandler(event) {
	//Déplace l'élément à la postiiton courante de la souris, ajustée si nécessaire par le décalage du clic de souris initial.
	elementToDrag.style.left = (event.clientX - deltaX) + "px";
	elementToDrag.style.top = (event.clientY - deltaY) + "px";
	
	//pour ne laisser personne d'autre voir cet événement
	event.stopPropagation();

	}

	//gestionnaire qui capture l'élément final mouseup qui survient à la fin d'un déplacement.
	function upHandler(event) {
		//Désenregistre les gestionnaires d'évéenements de capture
		document.removeEventListener ("mouseup", upHandler, true);
		document.removeEventListener ("mousemove", moveHandler, true);
		
		//na pas lasisser l'événement se propager plus loin.
		event.stopPropagation();
	}
}

// ----------------------------------------------------------------------------------------
//