/* Script qui permet d'afficher une infobulle au dessus des termes du glossaire */
/* Utilise mootools version 1.11 (www.mootools.net), doit être initialisé au départ */
/* Voir la doc de mootools 1.11 pour les fonctions spéciales utilisé dans ce fichier: http://docs111.mootools.net/ */

mousePosX = 0;
mousePosY = 0;

// Au chargement de la page...
window.addEvent('domready',function(){	

	// Recherche les contenus des infobulles (en fin de page, normalement)
	var infobulles = getInfobulles('.terme_infobulle');
	/* S'il y a des infobulles à faire */
	if(infobulles[0].length){
		// crée l'infobulle (html utilisé à chaque fois)
		creerInfobulle();
		// trouve tous les liens (termes) qui pointe vers les contenus d'infobulles et ajout l'événement pour l'affichage...
		setInfobulles(infobulles[0], infobulles[1]);
		// positionne la bulle lorsque la souris bouge
		$('contenant').addEvent('mousemove', posBulle);
	}
	
});

// Crée le HTML de l'infobulle toujours utilisé
function creerInfobulle(){
	var infobulle = new Element('div',{'id':'infobulle', 'styles':{'display':'none'}});
	
	var pointe_infobulle2 = new Element('div', {'class':'pointe-infobulle2'});
	var haut_infobulle = new Element('div', {'class':'haut-infobulle'});
	var contenu_infobulle = new Element('div', {'class':'contenu-infobulle'});
	var pointe_infobulle = new Element('div', {'class':'pointe-infobulle'});
	
	haut_infobulle.injectInside(infobulle);
	pointe_infobulle2.injectInside(infobulle);
	contenu_infobulle.injectInside(infobulle);
	pointe_infobulle.injectInside(infobulle);
	infobulle.injectAfter($('contenant'));
}

/* Recherche les contenus des infobulles (en fin de page, normalement) */
function getInfobulles(classe){
	var idsInfobulles = Array();
	var divsInfobulles = Array();
	// Pour chaque élément contenant la classe reçue...
	
	$$(classe).each(function(el){

		// trouve l'élément <a> qui se trouve juste avant, pour avoir un id
		var elPrev = el.getPrevious();
		
		idsInfobulles.push( elPrev.getProperty('id')); 
		// ajoute cet infobulle à la liste des contenus
		divsInfobulles.push(el);
		
		// s'il y a un <a> avant le <a> précédent, c'est cet id qu'on utilise à la place
		if(elPrev.getPrevious().getTag() == 'a'){
			idsInfobulles.push( elPrev.getPrevious().getProperty('id')); 
			divsInfobulles.push(el);
		}
	});

	
	// retourne la liste des infobulles
	return Array(idsInfobulles, divsInfobulles);
}

function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}


// cherche chaque lien pour lui attribué un événement pour afficher la bulle
function setInfobulles(ids, divs){
	// cherche chaque lien pour lui attribué un événement pour afficher la bulle
	$$('a').each(function(elA){
		var lhref = elA.getProperty('href');
		if(lhref){
			lhref = lhref.split('#');
			lhref = lhref.getLast();
			var div = false;
			ids.each(function(elId, elNo){
				if(lhref == elId){
					div = divs[elNo];
				}
			})
			// si le lien pointe vers un contenu d'infobulle existant...
			if(div){
				// ajoute une classe spéciale pour faire le souligné
				elA.addClass('termeGlossaire');
				// ajoute l'élénement pour l'afficher et le cacher...
				elA.addEvent('mouseover', afficherInfobulle.bindWithEvent(div));
				elA.addEvent('mouseout', cacherInfobulle);
			}
		}
	})
}

// empêche le clic sur le lien
function annulerClick(e){
	var e = new Event(e);
	e.stop();
}

// affiche l'infobulle
function afficherInfobulle(e){
	// ajoute le contenu dans l'infobulle et l'affiche
	this.clone().setStyle('display','block').inject($$('#infobulle .contenu-infobulle')[0]);
	$('infobulle').setStyle('display','block');
	// reposition l'infobulle
	posBulle(e);
}

// vide l'infobulle et la cache
function cacherInfobulle(){
	$('infobulle').setStyle('display','none');
	$$('#infobulle .contenu-infobulle')[0].empty()
	
}

// Positionne l'infobulle selon la souris
function posBulle(e){

	if($('infobulle').getStyle('display') != 'none'){
		
		var e = new Event(e);
		
		mousePosX = e.page.x;
		mousePosY = e.page.y;
		
		
		$$('#infobulle .pointe-infobulle')[0].setStyle('display','block')
		$$('#infobulle .pointe-infobulle2')[0].setStyle('display','block')
		var posContenant = $('contenant').getCoordinates();
		posContenant.left = posContenant.left -14;
		var posParent = {'left':mousePosX, 'top': mousePosY-10, 'width': 0, 'height': 15}
		if(window.ie6){
			posParent.height = 20;
		}
		var posInfobulle = $('infobulle').getCoordinates();
		var posPointeInfobulle = $$('#infobulle .pointe-infobulle')[0].getCoordinates();
		
		var left_infobulle = posParent.left - (posInfobulle.width /2) + (posParent.width/2)
		var left_pointe = (posInfobulle.width /2) - (posPointeInfobulle.width/2)
		
		// Vérifie que ca déborde pas du contenu
		if(left_infobulle < posContenant.left){ // trop à gauche
			var tropagauche = true
			
		}else if(left_infobulle + posInfobulle.width > posContenant.left + posContenant.width){ // trop à droite
			var tropadroite = true
		}
		
		if(tropagauche){
			left_infobulle = posContenant.left ;
		}else if(tropadroite){
			left_infobulle = posContenant.left + posContenant.width - posInfobulle.width +0;
		}
		
		
		// positionne la bulle
		$('infobulle').setStyles({
									 'top':posParent.top - posInfobulle.height,
									 'left':left_infobulle
								 });

		
		var posInfobulle = $('infobulle').getCoordinates();
		if(tropagauche){
			left_pointe =  posParent.left - posContenant.left + (posParent.width/2) - (posPointeInfobulle.width/2) 
		}else if(tropadroite){
			left_pointe =  posParent.left - posInfobulle.left + (posParent.width/2) - (posPointeInfobulle.width/2) 
		}
		
		/* calcule la hauteur de l'infobulle par rapport a la fenetre, et si dépasse en haut, affiche vers le bas */
		posTopWindow = posInfobulle.top - window.getScrollTop()
		
		if(posTopWindow >0){
			$$('#infobulle .pointe-infobulle')[0].setStyle('display','block')
			$$('#infobulle .pointe-infobulle2')[0].setStyle('display','none')
		}else{
			$$('#infobulle .pointe-infobulle')[0].setStyle('display','none')
			$$('#infobulle .pointe-infobulle2')[0].setStyle('display','block')
			$('infobulle').setStyle('top', mousePosY + 35);
		}
		
		$$('#infobulle .pointe-infobulle')[0].setStyle('margin-left',left_pointe)
		$$('#infobulle .pointe-infobulle2')[0].setStyle('margin-left',left_pointe)

	}
}