/*
file name : scriptDock.js
Script  d'animation du dock sur le site gantis.fr
Tous droits réservés Alexandre Hocquard - Merci de ne pas copier sans autorisation
Si vous souhaitez vous inspirer de notre code merci de nous envoyer un mail à mail@gantis.fr

Tout le code suivant est une création originale. Le but de gantis.fr est pédagogique. Notre volonté n'est donc pas de proposer un site disposant du plus de fonction possible, mais d'apprendre et maitriser leurs créations.
*/


////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////FONCTION DOCK///////////////////////////////////////DEMANDER A ALEX PR REGLAGES/////////////

// on récupère un tableau en javascript avec les images du dock, grace leur class (rappel : pas d'existence de getElementByClass)
var compteurImgDock=0;
var imgDock=new Array();
var tableauOrdreAlphabetique = new Array(); 
// on recupere toutes le images
var imgTotals = document.getElementsByTagName('img');
for ( var compteurImg=0; compteurImg < imgTotals.length; compteurImg++)
{
	// on crée un tableau avec les images ayant une class défini (celle du dock ici)
	if(imgTotals[compteurImg].className == 'imageDock')
	{
		imgDock[compteurImgDock] = imgTotals[compteurImg];
		imgDock[compteurImgDock].style.width=tailleIconeNormale + 'px';
		imgDock[compteurImgDock].style.height=tailleIconeNormale + 'px';
		compteurImgDock++;
	}
}

///////////////////////////////fonction zoom /////////
var tailleTotale=0; // taille de la div du dock 
var premiereFoisActivee = true; // la fonction n'a encore jamais été exécuté = true (permet d'initialisé un width pour etre connu du DOM aprés)
var grosseurImg = 0; // taille image quand on est sur le dock (variable)
var milieuImg;
var tailleIconeNormale = 55; // taille icone quand on est pas sur le dock
var tailleIconeMax = 75; // taille de grossissement max des icones
var posXdock; // position de la souris relativement au dock
var deltaInfoBulle;

function dockGrossissement(e)
{
	if (document.all) // si IE le tout puissant navigateur le veux, on obtient la position de la souris par rapport à la div dock(attention au blue screen !)
	{
		posXdock = e.offsetX - document.getElementById('dockOn').offsetLeft;
	}
	else // mm chose avec un autre navigateur (un vrai)
	{
		posXdock = e.pageX - document.getElementById('dockOn').offsetLeft ;
	}
	
	for(var k=0; k < imgDock.length; k++)
	{	
		if(premiereFoisActivee == true)
		{
			milieuImg = imgDock[k].offsetLeft + tailleIconeNormale/2;
		}
		else
		{
			// le milieu s'actualise puisque la taille de l'image évolue
			milieuImg = imgDock[k].offsetLeft + parseInt(imgDock[k].style.width)/2; //parseInt transforme en nombre la valeur obtenue
		}
		
		deltaMilieu = milieuImg - posXdock;
	
		if (deltaMilieu > 0 )
		{
			//delta tjrs négatif
			deltaMilieu = -deltaMilieu;
		}
		
		// plus delta petit (grand en valeur absolue), plus
		grosseurImg = tailleIconeMax + Math.round(deltaMilieu/6)
		
		if(grosseurImg < tailleIconeNormale)
		{
			grosseurImg = tailleIconeNormale;
		}
		else if(grosseurImg > tailleIconeMax)
		{
			grosseurImg = tailleIconeMax;
		}
		tailleTotale += (grosseurImg);
		imgDock[k].style.width = grosseurImg + 'px';
		imgDock[k].style.height = grosseurImg +'px';
		imgDock[k].style.marginTop = tailleIconeMax - grosseurImg +'px';
		
		if(ouEstSouris == imgDock[k].id) // info bulle se déplacant
		{
			infoBulle(k,'grossissement');
		}
	}
	premiereFoisActivee = false;
	document.getElementById('dockOn').style.width = (tailleTotale+60) +'px';
	tailleTotale=0;
	estDehors = false;
	return;
}

/////////Dézoomage progressif grace au settimeout, a la facon du slide ////////////////////
var variableDockDezoomageSetTimeOut = 60;
var verificationRebootDegrossissement = false;
function dockDegrossissement()
{	
	// on degrossit progressivemment les images du dock de -x pixels a chaque appel de la fonction 	
	for( k=0; k<compteurImgDock; k++)
	{	 
			if(ouEstSouris == imgDock[k].id) // info bulle se déplacant
			{
				infoBulle(k,'degrossissement'); // on réduit l'opacité de -1 depuis la fonction infoBulle
			}
			if (imgDock[k].offsetHeight > tailleIconeNormale) // on réduit la taille de chaque image
			{
				imgDock[k].style.width = (imgDock[k].offsetHeight - 1)+ 'px';
				imgDock[k].style.height =(imgDock[k].offsetHeight - 1) +'px';
				imgDock[k].style.marginTop = (tailleIconeMax - imgDock[k].offsetHeight)+'px';
			}		
	}
	
	// on réexécute la fonction si une des images n'est pas a la taille normale et qu'on est en dehors du dock,que la div n'est pas a la taille
	for( k=0; k<compteurImgDock; k++)
	{
		if( 
			((imgDock[k].offsetHeight !=  tailleIconeNormale) && (estDehors)) 
			|| ((document.getElementById('infoDock').style.opacity >0 )&&(estDehors))
		  )
		{
			document.getElementById('dockOn').style.width = '344px';
			verificationRebootDegrossissement =true;
			document.getElementById('ff').style.marginLeft='20px';
			k=compteurImgDock;
		}
	}
	if(verificationRebootDegrossissement)
	{
		verificationRebootDegrossissement = false;
		setTimeout(function() {dockDegrossissement();},variableDockDezoomageSetTimeOut);
		return;
	}
	else
	{
		verificationRebootDegrossissement = false;
		return;	
	}
	// si toutes les images sont à la taille, alors le settimeout n'a pa lieu : on redéfinit la taille des div dock et le margin de l'icone le plus a droite			
}

// fonction initialisant les paramètres de l'image du dock survolé, comme le texte info bulle, l'id de l'image, et la largeur de l'info bulle
var ouEstSouris=0;
var texte=0;
var largeurTableInfoBulle;
function sourisDock(img,texteA,largeurTableInfo)
{
	ouEstSouris = img;
	texte = texteA;
	largeurTableInfoBulle = largeurTableInfo;
	return;
}


// fonction bloquant le settimeout du dock permettant le dézoomage si on reviens sur le dock (sinon ca dézoome alors que le dock grossit)
function dehors()
{
	estDehors= true;
	return;
}


function infoBulle(k,fonction)
{
// a noté que le offset est relatif à la l'élément au dessus ! (il faut donc les additioner pour obtenir la distance par rapport à la ordure de la fenetre…)
			document.getElementById('infoDock').style.width = imgDock[k].offsetWidth+'px';
			document.getElementById('infoDock').style.left = (imgDock[k].offsetLeft + document.getElementById('dockOn').offsetLeft )+'px';
			document.getElementById('infoDock').style.top = (document.getElementById('dockOn').offsetTop + imgDock[k].offsetTop-33)+'px';
			document.getElementById('centreInfoDock').innerHTML = texte;
			document.getElementById('infoDockTable').style.width =largeurTableInfoBulle+'px';

			if(largeurTableInfoBulle > imgDock[k].offsetWidth)
			{
				deltaInfoBulle = (largeurTableInfoBulle - imgDock[k].offsetWidth)/2;
				document.getElementById('infoDock').style.left = (imgDock[k].offsetLeft+document.getElementById('dockOn').offsetLeft -deltaInfoBulle)+'px';
			}
			if(fonction == 'grossissement') // si la fonction est activé par le zoom
			{
				document.getElementById('infoDockTable').style.visibility= "visible";
				document.getElementById('infoDock').style.display = "block";
				document.getElementById('infoDock').style.opacity = 1;
			}

			else if(fonction == 'degrossissement') // si la fonction est activée par le dézoomage 
			{
				document.getElementById('infoDock').style.opacity -= 0.04;
			}
	return;		
}

// contours désactivant la fonction
document.getElementById('dockContour').onmousemove = dockDegrossissement;
document.getElementById('dockOn').onmouseout = dehors;
document.getElementById('infoDock').onmouseover= dockDegrossissement;
// fonction zoom 
document.getElementById('dockOn').onmousemove = dockGrossissement;


/////////////////////////////////FIN FONCTION DOCK////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////