$(document).ready(function()
{
	//Bulle d'aide d'activation
	$('#aideLigne').click(function() {
		$('.aide > img').css('display','block');
		createGrowl(
			$(this).attr('title'), 
			"Vous avez activé l'aide en ligne.<br/>En cliquant sur les icônes correspondantes un message apparaîtra dans cette fenêtre.<br/>Celle-ci disparaît automatiquement au bout de 5 secondes.", 
			false
		);
	});
	
	//Bulle d'aide 
	$('.aide > img').on('click', function() {
		var obj = $(this).parent().find('div');
		var titre = obj.attr('id');
		var texte = obj.html();
		createGrowl(titre, texte, false);
	});      
   
	window.createGrowl = function(titre, texte, persistent) {
	      // Use the last visible jGrowl qtip as our positioning target
	      var target = $('.qtip.jgrowl:visible:last');
	 
	      // Create your jGrowl qTip...
	      $(document.body).qtip({
	         // Any content config you want here really.... go wild!
	         content: {
            text: texte,
	            title: {
               		text: titre,
	               button: true
	            }
	         },
	         position: {
	            my: 'top right', // Not really important...
	            at: (target.length ? 'bottom' : 'top') + ' right', // If target is window use 'top right' instead of 'bottom right'
	            target: target.length ? target : $(document.body), // Use our target declared above
	            adjust: { y: 5 } // Add some vertical spacing
	         },
	         show: {
	            event: false, // Don't show it on a regular event
	            ready: true, // Show it when ready (rendered)
	            effect: function() { $(this).stop(0,1).fadeIn(400); }, // Matches the hide effect
	            delay: 0, // Needed to prevent positioning issues
	            
	            // Custom option for use with the .get()/.set() API, awesome!
	            persistent: persistent
	         },
	         hide: {
	            event: false, // Don't hide it on a regular event
	            effect: function(api) { 
	               // Do a regular fadeOut, but add some spice!
	               $(this).stop(0,1).fadeOut(400).queue(function() {
	                  // Destroy this tooltip after fading out
	                  api.destroy();
	 
	                  // Update positions
	                  updateGrowls();
	               })
	            }
	         },
	         style: {
	            classes: 'jgrowl ui-tooltip-dark ui-tooltip-rounded', // Some nice visual classes
	            tip: false // No tips for this one (optional ofcourse)
	         },
	         events: {
	            render: function(event, api) {
	               // Trigger the timer (below) on render
	               timer.call(api.elements.tooltip, event);
	            }
	         }
	      })
	      .removeData('qtip');
	   };
	 
	   // Make it a window property see we can call it outside via updateGrowls() at any point
	   window.updateGrowls = function() {
	      // Loop over each jGrowl qTip
	      var each = $('.qtip.jgrowl:not(:animated)');
	      each.each(function(i) {
	         var api = $(this).data('qtip');
	 
	         // Set the target option directly to prevent reposition() from being called twice.
	         api.options.position.target = !i ? $(document.body) : each.eq(i - 1);
	         api.set('position.at', (!i ? 'top' : 'bottom') + ' right');
	      });
	   };
	 
	   // Setup our timer function
	   function timer(event) {
	      var api = $(this).data('qtip'),
	         lifespan = 5000; // 5 second lifespan
	      
	      // If persistent is set to true, don't do anything.
	      if(api.get('show.persistent') === true) { return; }
	 
	      // Otherwise, start/clear the timer depending on event type
	      clearTimeout(api.timer);
	      if(event.type !== 'mouseover') {
	         api.timer = setTimeout(api.hide, lifespan);
	      }
	   }
	 
	   // Utilise delegate so we don't have to rebind for every qTip!
	   $(document).delegate('.qtip.jgrowl', 'mouseover mouseout', timer);
});