var nav = document.all?"IE":"FF"; //sert à repérer si IE ou FF

var hauteur;
var largeurM;

var imgActive = 0;
var actu = 0;
var galerieEncour = 1;
var inter;

///////////////////////////////////////////////////////////////
//initialisation de la galerie
///////////////////////////////////////////////////////////////
function galerie()
{
	hauteur = 78; //hauteur galerie
	
	//detection clique sur les fleches de navigation
	document.getElementById("gauche").onclick = defileG; 
	document.getElementById("droite").onclick = defileD;
	document.getElementById("gauche2").onclick = defilePG; 
	document.getElementById("droite2").onclick = defilePD;
	
	document.getElementById("agrandi").onmousemove=fleches2;
	//Detection clic sur les miniatures
	var panneau = document.getElementById('panneau');
	var images = panneau.getElementsByTagName('img');
	var nbImages = images.length;
	for(i=0;i<nbImages;i++)
	{
		images[i].onclick = afficheIMG;
	}
}

///////////////////////////////////////////////////////////////
//defilement ver la gauche
///////////////////////////////////////////////////////////////
function defileG()
{
	//annulation des evenements de navigation le temps que celui-ci soit traiter
	document.getElementById("gauche").onclick = null;
	document.getElementById("droite").onclick = null;
	
	//position de l'element "coulissant"
	var top = document.getElementById("panneau").style.top.substring(0, document.getElementById("panneau").style.top.length-2)-0;
	
	if(top <= -hauteur)//si element "coulissant" plus haut que postion d'affichage (donc top n&eacute;gatif) il y a quelque chose à faire defiler
	{
		top += hauteur;
		document.getElementById("panneau").style.top = top+"px";
		document.getElementById("droite").style.cursor = "pointer";
		galerieEncour-=6;
		if(top>-hauteur) document.getElementById("gauche").style.cursor = "default"; //si apres il n'y a plus a faire defiler, la fleche gauche n'affiche plus le pointer en rollover
	}
	else //sinon la fleche gauche n'affiche pas le pointer en rollover
	{
		document.getElementById("gauche").style.cursor = "default";
	}
	
	//remise en place des evenements
	document.getElementById("droite").onclick = defileD;
	document.getElementById("gauche").onclick = defileG;
}

///////////////////////////////////////////////////////////////
//defilement ver la droite
///////////////////////////////////////////////////////////////
function defileD() //pr commentaire internes, meme principe que au dessus
{
	document.getElementById("gauche").onclick = null;
	document.getElementById("droite").onclick = null;
	
	var top = document.getElementById("panneau").style.top.substring(0, document.getElementById("panneau").style.top.length-2)-0;
	var height = document.getElementById("panneau").clientHeight;
	
	if(top+height > hauteur)
	{
		top -= hauteur;
		
		var position = Math.ceil(-top/hauteur)+1;
		var premiere = 1+6*(position-1);
		var derniere = premiere+5;
		var images = document.getElementById("panneau").childNodes;
		var nbImg = images.length;
		for(i=0;i<nbImg;i++)
		{
			if((i>=premiere-1 && i<=derniere-1) && images[i].nodeName=='SPAN')
			{
				var src = (images[i].innerText) ? images[i].innerText : (images[i].textContent) ? images[i].textContent : "";
				var alt = images[i].id;
				var img = document.createElement("IMG");
				img.alt = alt;
				img.src = src;
				document.getElementById("panneau").insertBefore(img, images[i]);
				document.getElementById("panneau").removeChild(images[i+1]);
				images[i].onclick = afficheIMG;
			}
		}
		galerieEncour+=6;
		document.getElementById("panneau").style.top = top+"px";
		document.getElementById("gauche").style.cursor = "pointer";
		if(top+height < hauteur) document.getElementById("droite").style.cursor = "default";
	}
	else
	{
		document.getElementById("droite").style.cursor = "default";
	}
	
	document.getElementById("droite").onclick = defileD;
	document.getElementById("gauche").onclick = defileG;
}

function defilePG()
{
	fleches2()
	var panneau = document.getElementById('panneau');
	var images = panneau.getElementsByTagName('img');
	var spans = panneau.getElementsByTagName('span');
	var nbImages = images.length+spans.length;
	
	var indice = document.getElementById('agrandi').alt-1; //je me sert du alt des images pour faire le lien entre image, descriptif et nuage
	if(indice<1) indice = nbImages;
	gotoGalerie(indice);

	nbImages = images.length;
	var image = ""
	for(i=0;i<nbImages;i++)
	{
		if(images[i].alt == indice) image = images[i];
	}
	
	indice = image.alt;
	var regexp = /\?img=(.*)/;
	var tabresult = regexp.exec(image.src)
	
	var agrandie = urldecode(tabresult[1]);
	document.getElementById('agrandi').src = agrandie;
	document.getElementById('agrandi').alt = indice;	
}

function defilePD()
{
	fleches2()
	var panneau = document.getElementById('panneau');
	var images = panneau.getElementsByTagName('img');
	var spans = panneau.getElementsByTagName('span');
	var nbImages = images.length+spans.length;
	
	var indice = document.getElementById('agrandi').alt-0+1; //je me sert du alt des images pour faire le lien entre image, descriptif et nuage
	if(indice>nbImages) indice = 1;
	gotoGalerie(indice);
	
	nbImages = images.length;
	var image = ""
	for(i=0;i<nbImages;i++)
	{
		if(images[i].alt == indice) image = images[i];
	}
	
	indice = image.alt;
	var regexp = /\?img=(.*)/;
	var tabresult = regexp.exec(image.src)
	
	var agrandie = urldecode(tabresult[1]);
	document.getElementById('agrandi').src = agrandie;
	document.getElementById('agrandi').alt = indice;	
}

function gotoGalerie(indice)
{
	var top = document.getElementById("panneau").style.top.substring(0, document.getElementById("panneau").style.top.length-2)-0;
	var height = document.getElementById("panneau").clientHeight;
		
	galerie = indice%6==0 ? Math.floor(indice/6)-1 : Math.floor(indice/6);
	top = -hauteur*galerie;
		
	var premiere = indice-(indice%6)+1;
	var derniere = premiere+5;
	var images = document.getElementById("panneau").childNodes;
	var nbImg = images.length;
	for(i=0;i<nbImg;i++)
	{
		if((i>=premiere-1 && i<=derniere-1) && images[i].nodeName=='SPAN')
		{
			var src = (images[i].innerText) ? images[i].innerText : (images[i].textContent) ? images[i].textContent : "";
			var alt = images[i].id;
			var img = document.createElement("IMG");
			img.alt = alt;
			img.src = src;
			document.getElementById("panneau").insertBefore(img, images[i]);
			document.getElementById("panneau").removeChild(images[i+1]);
			images[i].onclick = afficheIMG;
		}
	}
	document.getElementById("panneau").style.top = top+"px";	
}

///////////////////////////////////////////////////////////////
//affichage en grand d'une miniature
///////////////////////////////////////////////////////////////
function afficheIMG(e) //e = capture de l'evenement pour FF
{
	var indice = document.getElementById('agrandi').alt; //je me sert du alt des images pour faire le lien entre image, descriptif et nuage
	
	var image = nav=="FF" ? e.target : event.srcElement;
	indice = image.alt;
	var regexp = /\?img=(.*)/;
	var tabresult = regexp.exec(image.src)
	
	var agrandie = urldecode(tabresult[1]);
	document.getElementById('agrandi').src = agrandie;
	document.getElementById('agrandi').alt = indice;
}

function menu()
{
	largeurM = 310; //largeur menu
	//detection clique sur les fleches de navigation
	document.getElementById("gauche").onclick = defileGm; 
	document.getElementById("droite").onclick = defileDm;
}

///////////////////////////////////////////////////////////////
//defilement ver la gauche
///////////////////////////////////////////////////////////////
function defileGm()
{
	//annulation des evenements de navigation le temps que celui-ci soit traiter
	document.getElementById("gauche").onclick = null;
	document.getElementById("droite").onclick = null;
	
	//position de l'element "coulissant"
	var left = document.getElementById("Coul").style.left.substring(0, document.getElementById("Coul").style.left.length-2)-0;
	
	if(left <= -largeurM)
	{
		left += largeurM;
		document.getElementById("Coul").style.left = left+"px";
		document.getElementById("droite").style.cursor = "pointer";
		if(left>-largeurM) document.getElementById("gauche").style.cursor = "default"; //si apres il n'y a plus a faire defiler, la fleche gauche n'affiche plus le pointer en rollover
	}
	else //sinon la fleche gauche n'affiche pas le pointer en rollover
	{
		document.getElementById("gauche").style.cursor = "default";
	}
	
	//remise en place des evenements
	document.getElementById("droite").onclick = defileDm;
	document.getElementById("gauche").onclick = defileGm;
}

///////////////////////////////////////////////////////////////
//defilement ver la droite
///////////////////////////////////////////////////////////////
function defileDm() //pr commentaire internes, meme principe que au dessus
{
	document.getElementById("gauche").onclick = null;
	document.getElementById("droite").onclick = null;
	
	var left = document.getElementById("Coul").style.left.substring(0, document.getElementById("Coul").style.left.length-2)-0;
	var width = document.getElementById("Coul").style.width.substring(0, document.getElementById("Coul").style.width.length-2)-0;

	if(left+width > largeurM)
	{
		left -= largeurM;
		document.getElementById("Coul").style.left = left+"px";
		document.getElementById("gauche").style.cursor = "pointer";
		if(left+width < largeurM) document.getElementById("droite").style.cursor = "default";
	}
	else
	{
		document.getElementById("droite").style.cursor = "default";
	}
	
	document.getElementById("droite").onclick = defileDm;
	document.getElementById("gauche").onclick = defileGm;
}

function grandeImg(cible, images)
{
	if(cible.id == "gauche")
	{
		if(imgActive-1>=0)
		{
			imgActive--;	
			document.getElementById('imgGrande').src=images[imgActive];		
			document.getElementById('droite').style.cursor = "pointer";	
		}
		else
		{
			imgActive = images.length-1;	
			document.getElementById('imgGrande').src=images[imgActive];		
			document.getElementById('droite').style.cursor = "pointer";	
		}
	}
	else if(cible.id == "droite")
	{
		if(imgActive+1<images.length)
		{
			imgActive++;	
			document.getElementById('imgGrande').src=images[imgActive];	
			document.getElementById('gauche').style.cursor = "pointer";	
		}
		else
		{
			imgActive = 0;	
			document.getElementById('imgGrande').src=images[imgActive];	
			document.getElementById('gauche').style.cursor = "pointer";	
		}
	}
}

function urldecode( str ) {
    // http://kevin.vanzonneveld.net
    // +   original by: Philip Peterson
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +      input by: AJ
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Brett Zamir (http://brettz9.blogspot.com)
    // +      input by: travc
    // +      input by: Brett Zamir (http://brettz9.blogspot.com)
    // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Lars Fischer
    // %          note 1: info on what encoding functions to use from: http://xkr.us/articles/javascript/encode-compare/
    // *     example 1: urldecode('Kevin+van+Zonneveld%21');
    // *     returns 1: 'Kevin van Zonneveld!'
    // *     example 2: urldecode('http%3A%2F%2Fkevin.vanzonneveld.net%2F');
    // *     returns 2: 'http://kevin.vanzonneveld.net/'
    // *     example 3: urldecode('http%3A%2F%2Fwww.google.nl%2Fsearch%3Fq%3Dphp.js%26ie%3Dutf-8%26oe%3Dutf-8%26aq%3Dt%26rls%3Dcom.ubuntu%3Aen-US%3Aunofficial%26client%3Dfirefox-a');
    // *     returns 3: 'http://www.google.nl/search?q=php.js&ie=utf-8&oe=utf-8&aq=t&rls=com.ubuntu:en-US:unofficial&client=firefox-a'
    
    var histogram = {}, ret = str.toString(), unicodeStr='', hexEscStr='';
    
    var replacer = function(search, replace, str) {
        var tmp_arr = [];
        tmp_arr = str.split(search);
        return tmp_arr.join(replace);
    };
    
    // The histogram is identical to the one in urlencode.
    histogram["'"]   = '%27';
    histogram['(']   = '%28';
    histogram[')']   = '%29';
    histogram['*']   = '%2A';
    histogram['~']   = '%7E';
    histogram['!']   = '%21';
    histogram['%20'] = '+';
    histogram['\u00DC'] = '%DC';
    histogram['\u00FC'] = '%FC';
    histogram['\u00C4'] = '%D4';
    histogram['\u00E4'] = '%E4';
    histogram['\u00D6'] = '%D6';
    histogram['\u00F6'] = '%F6';
    histogram['\u00DF'] = '%DF'; 
    histogram['\u20AC'] = '%80';
    histogram['\u0081'] = '%81';
    histogram['\u201A'] = '%82';
    histogram['\u0192'] = '%83';
    histogram['\u201E'] = '%84';
    histogram['\u2026'] = '%85';
    histogram['\u2020'] = '%86';
    histogram['\u2021'] = '%87';
    histogram['\u02C6'] = '%88';
    histogram['\u2030'] = '%89';
    histogram['\u0160'] = '%8A';
    histogram['\u2039'] = '%8B';
    histogram['\u0152'] = '%8C';
    histogram['\u008D'] = '%8D';
    histogram['\u017D'] = '%8E';
    histogram['\u008F'] = '%8F';
    histogram['\u0090'] = '%90';
    histogram['\u2018'] = '%91';
    histogram['\u2019'] = '%92';
    histogram['\u201C'] = '%93';
    histogram['\u201D'] = '%94';
    histogram['\u2022'] = '%95';
    histogram['\u2013'] = '%96';
    histogram['\u2014'] = '%97';
    histogram['\u02DC'] = '%98';
    histogram['\u2122'] = '%99';
    histogram['\u0161'] = '%9A';
    histogram['\u203A'] = '%9B';
    histogram['\u0153'] = '%9C';
    histogram['\u009D'] = '%9D';
    histogram['\u017E'] = '%9E';
    histogram['\u0178'] = '%9F';
 
    for (unicodeStr in histogram) {
        hexEscStr = histogram[unicodeStr]; // Switch order when decoding
        ret = replacer(hexEscStr, unicodeStr, ret); // Custom replace. No regexing
    }
    
    // End with decodeURIComponent, which most resembles PHP's encoding functions
    ret = decodeURIComponent(ret);
 
    return ret;
}

function hotelbynet()
{
	var ww=screen.availWidth;
	var hh=screen.availHeight;
	var lien="http://www.travelhotelonline.com/webforms505/defaultnew.aspx?four=614";
	window.open(lien,"reservation","toolbar=no,top=0,left=0,width="+ww+",height="+hh+",menubar=no,scrollbars=yes,resizable=yes,alwaysRaised=yes");
}

function defileImg()
{
	var nbImg = photosGastro.length;
	document.getElementById(cibleGastro).src = photosGastro[actu];
	if(actu<nbImg-1) actu++;
	else actu = 0;
	setTimeout("defileImg()", 3000);
}

function fleches2()
{
	if(inter) clearTimeout(inter);
	document.getElementById('droite2').style.display = 'block';	
	document.getElementById('gauche2').style.display = 'block';	
	inter = setTimeout("fleches2Out()", 3000);
}

function fleches2Out()
{
	document.getElementById('droite2').style.display = 'none';	
	document.getElementById('gauche2').style.display = 'none';	
}