/*
 * thefantasy3d.co.uk
 * Le script ci-dessous est inspire pour la galerie de :
 * http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript
 * La découpe des miniatures s'inspire de cette astuce :
 * http://www.spip-contrib.net/Creer-une-galerie-d-images-avec
 * Le script du fondu est inspire de cette page de forum
 * http://forum.alsacreations.com/topic-1-24157-1-Effet-de-fondu-enchaine-Resolu.html
 * Le Zoom du grand écran est directement issu de lightbox2
 * http://www.huddletogether.com/projects/lightbox2/
 *
 */




// Indice première vignette
var iVignette = 0;

// Nombre de vignettes par ligne
var distVignette = 12;

// Largeur d'une vignette
var largeurMax = 40+ 4;

// Fluidité
var easygallery_pas = 8;	// (pixels)

// Vitesse de défilement
var easygallery_timing = 4;	// (millisecondes)

// En deplacement
var motion=false;

// En cours de fondu
var fadeactive = false;

function initEasyGallery(firstIndiceMiniature, nbMiniatures, widthMiniature, fluidite, delay)
{
	// Indice première vignette
	iVignette = firstIndiceMiniature;

	// Nombre de vignettes par ligne + 1
	distVignette = nbMiniatures;

	// Largeur d'une vignette
	largeurMax = widthMiniature;

	// Fluidité
	easygallery_pas = fluidite;	// (pixels)

	// Vitesse de défilement
	easygallery_timing = delay;	// (millisecondes)

}


function getElementsByClassName(findClass)
{
	var aElm=document.body.getElementsByTagName('*');

	for(var i=0; i<aElm.length; i++)
	{
		if(aElm[i].className==findClass)
		{
			return aElm[i];
		}
	}
}




// Exemple d'utilisation : var im=getElementsBySelector('div img') va recupere toutes les images contenues dans une div
function getElementsBySelector(selector)
{
	selector=selector.split(" ");
	var a=document.getElementsByTagName(selector[0]);
	var r=[];
	for (var i=0;i<a.length;i++)
	{
		var b= a[ i ].getElementsByTagName(selector[1]);
		for (var j=0;j<b.length;j++)
		{
			r.push(b[j]);
		}
	}


	return r;
}


function setOpacity(obj, opacity)
{
	opacity = (opacity == 100)?99.999:opacity;

	// IE/Win
	 obj.style.filter = "alpha(opacity:"+opacity+")";

	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;

	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;

	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}


function fonduImage(image, newURL)
{
    if (fadeactive) return false;
    fadeactive = true;

	setOpacity(image, 100);
	image.style.visibility = 'visible';

	fadeOut(image,100, newURL);
}


function fadeIn(obj,opacity)
{
	if (opacity <= 100)
	{
		setOpacity(obj, opacity);
		opacity += 10;
		window.setTimeout( function() {
									fadeIn(obj,opacity);
									},100);
    }
    else
        {
            refletshow();
            fadeactive = false;
        }

}


function fadeOut(obj,opacity, newURL)
{
	if (opacity >= 0)
	{
		setOpacity(obj, opacity);
		opacity -= 10;
		window.setTimeout( function() {
									fadeOut(obj,opacity, newURL);
									},0);

    }
	else
	{
		obj.src = newURL; 	// On change l'attribut src de l'image en le remplaçant par la valeur du lien
		fadeIn(obj, 0);
	}

}


function stretching(obj , obj2)
{

	// La vignette qui doit disparaitre
	var a = obj.style.width;
	var width = parseInt( a.substr(0, Math.abs(obj.style.width.length)) );
	width -= easygallery_pas;		// vitesse

	motion = true;


	if (width > 0)
	{
		// La vignette qui doit disparaitre
		obj.style.width = width + "px";
		/* obj.style.display="none"; */

		// La vignette qui doit apparaitre
		var width2 = largeurMax - width;
		obj2.style.width = width2 + "px";

		window.setTimeout( function()
									{
									stretching(obj , obj2);
									},easygallery_timing);
    }
	else
	{
		// obj disparait
		obj.style.width = "0px";
		obj.style.display = "none";

		// obj2 apparait
		obj2.style.width = largeurMax + "px";
		obj2.style.display = "block";

		// La navigation est à nouveau permise
		motion=false;
	}

}

function arrow(fleche, vignettes)
{
	if (iVignette <= 0)
		{
			// fleche[1].style.display = "none";
			fleche[1].style.visibility = "hidden";
		}
		else
		{
			// fleche[1].style.display = "block";
			fleche[1].style.visibility = "visible";
		}

	if (iVignette + distVignette >= vignettes.length)
		{
			// fleche[0].style.display = "none";
			fleche[0].style.visibility = "hidden";
		}
		else
		{
			// fleche[0].style.display = "block";
			fleche[0].style.visibility = "visible";
		}

}

function deplacementdiv(sens, vignettes, fleche)
{

	var totalVignettes = vignettes.length;
	iVignetteNew = iVignette + distVignette ; // - 1

	if (motion)
		return false;

	if (sens == -1)
	{
		if (iVignetteNew < totalVignettes )
		{
			vignettes[iVignetteNew].style.width = "0px";
			vignettes[iVignetteNew].style.display = "none";
			stretching(vignettes[iVignette], vignettes[iVignetteNew]);
			++iVignette;
		}
	}

	if (sens == 1)
	{
		if (iVignette > 0)
		{
			vignettes[iVignette - 1].style.width = "0px";
			vignettes[iVignette - 1].style.display = "block";
			vignettes[iVignetteNew - 1].style.display = "none";
			stretching(vignettes[iVignetteNew - 1], vignettes[iVignette - 1]);
			--iVignette;
		}
	}

	arrow(fleche, vignettes);


}

// ****************************************************************************
//              Le reflet dans le titre
// ****************************************************************************
// La variable reflet est une variable globale
// Quand tu fais de la poo en C++, tu te dis ok, y a un truc que je tiens là
// en php, tu te dis, j'ai la sensation qu'il manque un truc, mais au moins t là
// en Javascript... Je v m'y lancer un de ces jours... ton implémentation c vraiment pas ca

var reflet = null;

function reflethide()
{
    // reflet.style.display = "none";
    reflet.style.visibility = "hidden";
    setOpacity(reflet, 100);

}

function refletshow()
{
    // reflet.style.display = "block";
    reflet.style.visibility = "visible";
    // fadeIn(reflet, 100);
    setOpacity(reflet, 68);
}


function refletdep(obj, titre)
{
    // obj.firstChild.textContent = titre;
    obj.firstChild.childNodes[0].nodeValue = titre;

    setOpacity(obj, 68);

}


// ****************************************************************************
//   Fonctions pour garder compatibilité plugin avec browser non javascript
// ****************************************************************************

function empecherCalque(obj)
{
    obj.style.display = "none";
}


// ****************************************************************************
//                  Fonction qui initialise notre galerie
// ****************************************************************************

function displayPics()
{
	// On recupere les elements de la balise dont la classe est easygallery
	var galerie = getElementsByClassName('easygallery');

    // On va faire apparaitre notre galerie
	galerie.style.visibility = "visible";
	galerie.style.display = "block";

	// Le reflet
	reflet=galerie.getElementsByTagName('div')[3];

	// Le premier ul trouvé correspond a l'ul des vignettes
	var photos = galerie.getElementsByTagName('ul')[0];

	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var liens = photos.getElementsByTagName('a');

	// On recupere la grosse photo
	var big_photo = galerie.getElementsByTagName('dd')[0].getElementsByTagName('img')[0];

	// On recupere le lien de la grosse photo
	var lien_photo = galerie.getElementsByTagName('dd')[0].getElementsByTagName('a')[0];

	// On recupere le titre de la grosse photo
	var titre_photo = galerie.getElementsByTagName('dt')[0] ;

	// Les fleches pour le scroll
	var fleche = galerie.getElementsByTagName('a');

	// Le tableau des miniatures
	var vignettes = photos.getElementsByTagName('li');

	fleche[0].onclick = function()
								{
									deplacementdiv(-1, vignettes, fleche)
								};

	fleche[1].onclick = function()
								{
									deplacementdiv(1, vignettes, fleche)
								};


	arrow(fleche, vignettes);

    refletdep(reflet,lien_photo.title);
	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	for (var i = 0 ; i < liens.length ; ++i)
	{
		// Au clique sur ces liens
		liens[i].onclick = function()
		{
          if (!(fadeactive))
            {
    			// Nouveau titre
    			// titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo

                reflethide();
    			refletdep(reflet,this.title);
    			lien_photo.href = this.href;

    			// Ancien titre lien_photo.title
    			lien_photo.title = this.title;
    			fonduImage(big_photo, this.href);
    			big_photo.alt = this.alt; // On change son titre
   			}

   			return false; // Et pour finir on inhibe l'action réelle du lien


		};
	}

}


window.onload = displayPics;