// JavaScript Document

var bulleVisible = false;

var bulleImageVisible = false;
var bulleTexteVisible = false;


$(document).ready(function()
{
	//mouseenter de l'info bulle générale
	$(".info-bullable").live('mouseenter', function(e)
	{
		var objInfoBulle = decouperTextClassCrochets($(this).attr('class'));
		var contenu = '';
		var titre = '';
		var cheminImg = '';
		
		//Détection des parametres
		if ($(this).is('input'))
			contenu = $.trim($(this).val());
		else if ($(this).attr('infobulle') != undefined && $(this).attr('infobulle') != null && $(this).attr('infobulle') != '')
			contenu = '<p>' + $.trim($(this).attr('infobulle')) + '</p>';
		else if (objInfoBulle['version'] == 3)
		{
			/*Evolution
			- possibilité d'avoir plusieurs images, sans pour autant les charger au chargement de la page. définir dans le conteneur "images", un xml de la forme :
				<image id="1">www.url-image.com</image>. Mettre ensuite des balises img classiques dans le "contenu" avec comme classe {idImage=1} pour les reperer.		
			*/
			contenu = $(this).children('.contenu');
			var lesImages = $(this).children('.images').children();
			//Remplacement de chaque url pour image par une url valide
			lesImages.each(function()
			{
				var idImg = $(this).attr('id');
				var cheminImgTmp = $(this).text();
				contenu.find('img[class*="idImage=' + idImg + '"]').attr('src', cheminImgTmp);
			});
		}
		else
		{
			titre = $(this).children('.titre').html();
			titre = ((titre != null)?titre:'');
			contenu = $(this).children('.contenu').html();
			contenu = ((contenu != null)?contenu:'');
			cheminImg = $(this).children('.chemin-image').html();
			cheminImg = ((cheminImg != null)?cheminImg:'');
		}
		
		//Affichage de la bulle
		if (contenu.length > 0 || titre.length > 0 || cheminImg.length > 0)
		{
			if (objInfoBulle['version'] == 3)
			{
				if (contenu.length > 0 && (typeof(contenu) == 'string' || $.trim(contenu.html()) != ''))
				{
					var laBulle = $('<div class="bulle coinsArrondis_5 shadow_BasDroite_3"></div>');
					laBulle.append((typeof(contenu) == 'string')?'<p>' + contenu + '</p>':contenu.html());
					if (objInfoBulle['maxWidth'] > 0)
						laBulle.css({'max-width': objInfoBulle['maxWidth'] + "px"});
					$("body").append(laBulle);
					positionnerLaBulle(e, laBulle);
					bulleVisible = true;
				}
			}
			else
			{
				var styleBulle = ((objInfoBulle['maxWidth'] > 0)?'max-width: ' + objInfoBulle['maxWidth'] + 'px':'');
				var laBulle = $('<div class="bulle coinsArrondis_5 shadow_BasDroite_3"></div>');
				if (titre.length > 0)
					laBulle.append($('<h3>' + titre + '</h3>'));
				if (contenu.length > 0)
					laBulle.append($('<p>' + contenu + '</p>'));
				$("body").append('<div class="bulle coinsArrondis_5 shadow_BasDroite_3"' + ((styleBulle != '')?' style="' + styleBulle + '"':'') + '>' + ((titre.length > 0)?'<h3>' + titre + '</h3>':'') + ((contenu.length > 0)?'<p>' + contenu + '</p>':'') + ((cheminImg.length > 0)?'<div class="conteneur-image"><img src="' + cheminImg + '" alt="" /></div>':'') + '</div>');
				positionnerLaBulle(e, $("body>.bulle"));
				bulleVisible = true;
			}
		}
	});
	//Mouseout de l'info-bulle générale
	$(".info-bullable").live('mouseleave', function(e)
	{
		bulleVisible = false;
		$("body>.bulle").remove();
	});
	//Click quelque part sur la page, on enlève la bulle (elle sera remise automatiquement si elle est sur un élement bullable)
	$(document).click(function()
	{
		bulleVisible = false;
		$("body>.bulle").remove();
	});
	//lorsque la souris bouge dans le document
	$(document).mousemove(function(e)
	{
		if (bulleVisible)
		{
			positionnerLaBulle(e, $("body>.bulle"), 20);
		}
	});

	
	
	
	


	//mouseenter de la bulle image
	$(".info-bullable-image").live('mouseenter', function(e)
	{
		//var objDecoupe = decouperTextClassCrochets($(this).attr('class'));
		//if (objDecoupe != null || 1 == 1)
		//{
			//var titre = $(this).attr('title');
			var titre = $(this).children('.titre-info-bulle').html();
			var chemin = $(this).children('.chemin-image').html();
			if (chemin != null && chemin.length > 0)
			{
				//objDecoupe['chemin'];
				//objDecoupe['height'];
				//objDecoupe['width'];
				$("body").append('<div id="bulle-image" class="coinsArrondisTop_15">' + ((titre != undefined && titre != '')?('<h3>' + titre + '</h3>'):'') + '<img src="' + chemin + '" alt="" /></div>');
				positionnerLaBulle(e, $("#bulle-image"));
				/*$("#bulle-image").css(
				{
					top: e.pageY,
					left: e.pageX + 30
				});*/
				bulleImageVisible = true;
			}
		//}
	});
	//Mouseout de la bulle image
	$(".info-bullable-image").live('mouseleave', function(e)
	{
		bulleImageVisible = false;
		$("#bulle-image").remove();
	});

	//Mouseenter de la bulle texte
	$(".info-bullable-texte").live('mouseenter', function(e)
	{
		var contenu = '';
		var titre = '';
		if ($(this).is('input'))
		{
			contenu = $.trim($(this).val());
		}
		else
		{
			titre = $(this).children('.titre-info-bulle').html();
			titre = ((titre != null)?titre:'');
			contenu = $(this).children('.contenu-info-bulle').html();
			contenu = ((contenu != null)?contenu:'');
		}
		if (contenu.length > 0 || titre.length > 0)
		{
			$("body").append('<div id="bulle-texte" class="coinsArrondis_5 shadow_BasDroite_3">' + ((titre.length > 0)?'<h3>' + titre + '</h3>':'') + ((contenu.length > 0)?'<p>' + contenu + '</p>':'') + '</div>');
			positionnerLaBulle(e, $("#bulle-texte"));
			bulleTexteVisible = true;
		}
	});
	
	$(".info-bullable-texte").live('mouseleave', function(e)
	{
		bulleTexteVisible = false;
		$("#bulle-texte").remove();
	});

	//lorsque la souris bouge dans le document
	$(document).mousemove(function(e)
	{
		if (bulleImageVisible)
		{
			positionnerLaBulle(e, $("#bulle-image"), 20);
		}
		if (bulleTexteVisible)
		{
			positionnerLaBulle(e, $("#bulle-texte"), 10);
		}
	});
	
	//Click quelque part sur la page, on enlève la bulle (elle sera remise automatiquement si elle est sur un élement bullable)
	$(document).click(function()
	{
		bulleImageVisible = false;
		bulleTexteVisible = false;
		$("#bulle-image").remove();
		$("#bulle-texte").remove();
	});
});




function positionnerLaBulle(positionSouris, elementJquery, decallageY)
{
	var widthBulle = elementJquery.outerWidth();
	var heightBulle = elementJquery.outerHeight();
	
	decallageY = ((decallageY>0)?decallageY:20);
				
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	
	var scrollTop = $(window).scrollTop();
	
	var positionTopBulle = positionSouris.pageY;
	var positionLeftBulle = positionSouris.pageX + decallageY;
	
	var positionTempTopBulle = 0;
	var positionTempLeftBulle = 0;
	
	var sortBas = false;
	var sortHaut = false;
	var sortDroite = false;
	var sortGauche = false;
				
	//Si la bulle sort de la page en bas
	if ((positionTopBulle + heightBulle) > (windowHeight + scrollTop - 25))
	{
		sortBas = true;
		positionTempTopBulle = positionSouris.pageY - decallageY - heightBulle;
		//positionTopBulle = positionSouris.pageY - 20 - heightBulle;
	}
	//Si elle sort de la page en haut
	if ((positionTopBulle - heightBulle) < (scrollTop + 10))
	{
		sortHaut = true;
		positionTopBulle = positionSouris.pageY + decallageY;
	}
	//Si la bulle sort de la page à droite
	if ((positionLeftBulle + widthBulle) > (windowWidth - 10))
	{
		sortDroite = true;
		positionTempLeftBulle = positionSouris.pageX - decallageY - widthBulle;
		//positionLeftBulle = positionSouris.pageX - 20 - widthBulle;
	}
	//Si elle sort à gauche
	if ((positionLeftBulle - widthBulle) < 10)
	{
		sortGauche = true;
		positionLeftBulle = positionSouris.pageX + decallageY;
	}
	
	if (sortBas && sortHaut)
	{
		positionTopBulle = scrollTop + (windowHeight / 2)  - (heightBulle / 2);
	}
	else if (positionTempTopBulle > 0)
	{
		positionTopBulle = positionTempTopBulle;
	}
	
	if (sortDroite && sortGauche)
	{
		positionLeftBulle = (windowWidth / 2) - (widthBulle / 2);
	}
	else if (positionTempLeftBulle > 0)
	{
		positionLeftBulle = positionTempLeftBulle;
	}
	
	//Check si la bulle masque la souris (produit un clignotement de l'image => j'affiche, je masque, j'affiche, je masque...)
	//Si le haut de la bulle est plus haut que la position en Y de la souris
	//Si le bas de la bulle est plus bas que la position en Y de la souris
	//Si la gauche de la bulle est plus à gauche que la position en X de la souris
	//Si la droite de la bulle est plus à droite que la position en X de la souris
	var nbrRedimensionnement = 0;
	while (nbrRedimensionnement < 2 && 
		positionTopBulle < positionSouris.pageY && 
		(positionTopBulle + heightBulle) > positionSouris.pageY && 
		positionLeftBulle < positionSouris.pageX && 
		(positionLeftBulle + widthBulle) > positionSouris.pageX)
	{
		redimensionner_images(elementJquery, 0.75);
		nbrRedimensionnement += 1;
	}
	
	elementJquery.css(
	{
		top: positionTopBulle,
		left: positionLeftBulle
	});
}

function redimensionner_images(elemJqueryConteneur, nouvelleTaillePourcents)
{
	elemJqueryConteneur.find('img[src!=""]').each(function()
	{
		var largeur = $(this).width();
		var hauteur = $(this).height();
		$(this).attr(
		{
			'width': largeur * nouvelleTaillePourcents,
			'height': hauteur * nouvelleTaillePourcents
		});
	});
}