/* need jQuery */

// quand la page est chargée
$(document).ready(function(){
	// vitesse de l'animation (au format jQuery)
	var animation_speed = 'fast';

	// on dessine le tableau qui contientra l'info bulle. Ce tableau est extensible en verticale
	$('body').prepend('<div id="infoarrow"></div>');
	$('body').prepend('<div id="infobulle"></div>');

	// toute les class du type .infobulleN (0 <= N <= 20) devienne réactive à la souris
	var reactives_class = new Array();
	reactives_class.push('.infobulle');
	for(var i=0 ; i<=20 ; i++)
		reactives_class.push('.infobulle'+i);
	var my_class = reactives_class.join(',');


	$(my_class).next('div').hide(); // on cache les textes des infobulles renseignés sur la page
	
	// quand on passe la souris sur un element infobulleN
	$(my_class).bind("mouseover", function(e){
		var offset = $(this).offset();

		// on vérifie s'il on est pas trop pres du bord gauche de la fenetre
		var decalage_horizontale = 0;
		if (offset.left + parseInt($('div#infobulle').css('width').replace(/(?:px|em|cm)$/,'')) > document.body.clientWidth ) {
			decalage_horizontale = -1 * (offset.left + parseInt($('div#infobulle').css('width').replace(/(?:px|em|cm)$/,'')) - document.body.clientWidth + 50) ;
		}
		//alert();

		// on charge le style de la fleche
		var style_class = new Array();
		style_class = $(this).attr('class').split(/\s+/);
		for(var i=0 ; i<style_class.length ; i++)
			if (regs = style_class[i].match(/^infobulle(\d*)$/))
				$('div#infoarrow').css('background-image',$('div#infoarrow').css('background-image').replace(/arrow\d*\.png/i,'arrow'+regs[1]+'.png'));		

		// on place l'infobulle au bonne endroit sur la page (sous l'element)
		$('div#infoarrow').css('top',	offset.top			// on se place au niveau de l'element
										+ $(this).height()	// on décale vers le bas de la hauteur de l'objet qui a une infobulle
										+ parseInt($('div#infobulle').css('border-top-width').replace(/(?:px|em|cm)$/,'')) // on descent de la hauteur de la bordure de la bulle 
							);
		
		$('div#infoarrow').css('left',offset.left + 15);
		$('div#infobulle').css('top',offset.top + $(this).height() + $('div#infoarrow').height());
		$('div#infobulle').css('left',offset.left + decalage_horizontale);
		$('div#infobulle').html($(this).next('div').html()); // on récupère le texte du div suivant

		// on choisit au hasard une des 3 animations d'apparition proposée par jQuery
		var tmp = Math.random();
		if (tmp >= 0 && tmp < 1/3)
			$('div#infoarrow, div#infobulle').show(animation_speed);
		else if (tmp >= 1/3 && tmp < 2/3)
			$('div#infoarrow, div#infobulle').slideDown(animation_speed);
		else
			$('div#infoarrow, div#infobulle').fadeIn(animation_speed);
	});


	// quand la souris quitte un element infobulle
	$(my_class).bind("mouseout", function(e){
		// on choisit au hasard une des 3 animations de disparition proposée par jQuery
		var tmp = Math.random();
		if (tmp >= 0 && tmp < 1/3)
			$('div#infoarrow, div#infobulle').hide(animation_speed);
		else if (tmp >= 1/3 && tmp < 2/3)
			$('div#infoarrow, div#infobulle').slideUp(animation_speed);
		else
			$('div#infoarrow, div#infobulle').fadeOut(animation_speed);
	});
});