--- a/front_idill/src/mosaic/js/notifications.js	Sun Sep 09 15:20:11 2012 +0200
+++ b/front_idill/src/mosaic/js/notifications.js	Tue Sep 18 23:45:16 2012 +0200
@@ -31,6 +31,12 @@
         return;
     }
 	
+	//Tous les noms d'images des gestes de recherche.
+	var all_gestures_img = ['arret', 'chute', 'contact', 'group_spin', 'bend', 'knee_up', 'port_de_bras', 'grandjete', 'jump', 'spin', 'up_down', 'wave'];
+	
+	//Emplacement des images pour l'aide.
+	var imgPath = './pictos/help/';
+	
     //On enlève les autres notifications.
     this.removeNotifications();
     
@@ -174,7 +180,16 @@
     
     //On les ajoute à la mosaïque.
     $('body').append(notification_help);
+	
+	var notify_help = $('#notify_help');
     
+	var notify_imgs_width = $('#notify_imgs_small').css('margin-leftf')
+	
+	$('.notify_imgs').css(
+	{
+		width: $('#notify_imgs_small')
+	});
+	
 	if(this.isTablet)
 	{
 		//On rétrécit certaines images si on est sur une tablette.
@@ -198,10 +213,10 @@
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $(window).width(), notify_height = $(window).height();
     var notify_margin = parseInt($('#notify_help').css('margin-left'));
-    var notify_ = 10;
+    //var notify_ = 10;
     
     //On les positionne.
-    $('#notify_help').css(
+    notify_help.css(
     {
         left: "0px",
         top: "0px",
@@ -210,19 +225,29 @@
         'z-index': 1000
     });
     
+    //Position horizontale du séparateur de colonnes.
+    var sep_left = $('#help_sep').position().left;
+    //Marge du panneau d'aide.
+    var help_margin = parseInt(notify_help.css('margin-left'));
+    //On calcule la taille d'une zone de recherche (une des deux parties).
+    var help_column_width = sep_left - help_margin;
+	
     //Taille des marges des images.
     var margins = parseInt($('.notify_imgs_small').css('margin-left'));
     //Largeur des images.
-    var widths = $('.notify_imgs_small').width();
+    var widths = help_column_width / 5 - 4 * margins * 2;// $('.notify_imgs_small').width();
     //Hauteur des images.
-    var heights = $('.notify_imgs_small').height();
-    //Position horizontale du séparateur de colonnes.
-    var sep_left = $('#help_sep').position().left;
-    //Marge du panneau d'aide.
-    var help_margin = parseInt($('#notify_help').css('margin-left'));
+    var heights = widths;//$('.notify_imgs_small').height();
     
-    //On calcule la taille d'une zone de recherche (une des deux parties).
-    var help_column_width = sep_left - help_margin;
+	$('.notify_imgs_small').css(
+	{
+		width: widths,
+		height: heights,
+		'background-size': widths + 'px ' + heights + 'px',
+		'font-size': widths / 5 + 'px',
+		'padding-left': '0px'
+	});
+	
     //Longueur d'une image.
     var img_width = (margins * 2 + widths);
     
@@ -330,9 +355,9 @@
 		$("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('" + img_directory + controls_1hand_tab[i] + ".png')");
 		$("#1hand_" + controls_1hand_tab[i]).html(this.helpText[controls_1hand_tab_text[i]]);
 	}
-    
+	
     //On les fait apparaître.
-    $('#notify_help').css(
+    notify_help.css(
     {
         opacity: "1"
     });
@@ -341,6 +366,63 @@
     {
         opacity: "1"
     });
+	
+	//Si on est en mode d'interaction souris, on rajoute les détails.
+	if(this.config.mouseInteractions)
+	{
+		//Dimensions des flèches.
+		var arrowWidth = 50, arrowHeight = 50;
+		
+		//On ajoute les flèches pour accéder aux détails du panneau d'aide.
+		var help_details_arrows = "<div id='help_details_upArrow' class='help_details_arrows'></div><div id='help_details_downArrow' class='help_details_arrows'></div>";
+		
+		//On ajoute les gestes des détails de l'aide.
+		//On remplit le div des détails par les éléments.
+		var help_details_gestures = "<div id='help_details_container'>";
+		
+		for(var i = 0 ; i < this.helpDetailsGestures.length ; i++)
+		{
+			help_details_gestures += "<table border='0'><tr><td rowspan='4'><img class='helpDetailsImgs' src='" + imgPath + MI + all_gestures_img[i] + ".png' /></td><td><b>" +
+			this.helpDetailsGesturesMetadata.name + '</b> : ' + this.helpDetailsGestures[i].name + "</td></tr><tr><td><b>" +
+			this.helpDetailsGesturesMetadata.usage + '</b> : ' + this.helpDetailsGestures[i].usage + "</td></tr><tr><td><b>" +
+			this.helpDetailsGesturesMetadata.desc + '</b> : ' + this.helpDetailsGestures[i].desc + "</td></tr></table><br /><br />";
+		}
+		
+		help_details_gestures += "</div>";
+		
+		notify_help.append(help_details_arrows + help_details_gestures);
+		
+		//On positionne les flèches même si elles sont invisibles pour l'instant.
+		$('#help_details_upArrow').css(
+		{
+			top: 0,
+			left: notify_help.width() / 2 - arrowWidth / 2
+		});
+		$('#help_details_downArrow').css(
+		{
+			top: notify_help.height() - arrowHeight,
+			left: notify_help.width() / 2 - arrowWidth / 2
+		});
+		
+		$('.helpDetailsImg').css(
+		{
+			
+		});
+		
+		var helpDetailsColumnWidth = (notify_help.width() - 2 * notify_margin) / 2 - 100;
+		
+		//On spécifie les colonnes.
+		$('#help_details_container').css(
+		{
+			position: 'absolute',
+			'-moz-column-width': helpDetailsColumnWidth,
+			'-webkit-column-width': helpDetailsColumnWidth,
+			'-moz-column-gap': 0,
+			'-webkit-column-gap': 0,
+			'-moz-column-rule': '1px solid #ddccb5',
+			'-webkit-column-rule': '1px solid #ddccb5'
+	    });
+	}
 }
 
 /*
@@ -2049,7 +2131,7 @@
 	var credits = "<div id='notify_credits'><div id='credits_upArrow' class='credits_arrows'></div><div id='credits_container'></div><div id='credits_downArrow' class='credits_arrows'></div></div>";
 	
 	//Pied de page des crédits.
-	var credits_footer = "<div id='credits_footer'><div id='credits_footer_BBM'></div><div id='credits_footer_text'>" + this.creditsMetadata.footer + "</div><div id='credits_footer_partners'></div></div>";
+	var credits_footer = "<div id='credits_footer'><div id='credits_footer_BBM'></div><div id='credits_footer_text'>" + this.creditsMetadata.footer_line1 + "<br />" + this.creditsMetadata.footer_line2 + "</div><div id='credits_footer_partners'></div></div>";
 	
 	$('body').append(credits);