diff -r eb52a12370a3 -r afd60399a7b5 front_idill/src/mosaic/js/notifications.js
--- a/front_idill/src/mosaic/js/notifications.js	Tue Jul 24 16:35:10 2012 +0200
+++ b/front_idill/src/mosaic/js/notifications.js	Thu Jul 26 14:34:02 2012 +0200
@@ -20,7 +20,7 @@
 /*
  * Affiche l'aide.
  * Est appelé dans les fichiers :
- * mosaic > fonction manageControlEvents.
+ * mosaic > fonctions manageControlEvents et onMouseDown.
  * curvesDetector > fonction updateDists.
 */
 Mosaic.prototype.notifyHelp = function(inMosaic)
@@ -30,7 +30,7 @@
     {
         return;
     }
-    
+	
     //On enlève les autres notifications.
     this.removeNotifications();
     
@@ -39,10 +39,13 @@
     
     //Section des courbes de recherche.
     var search_2hands_tab;
+    var search_2hands_tab_text;
     //Section des recherches corporelles.
     var search_body_tab;
+    var search_body_tab_text;
     //Section des actions de contrôle sur l'interface.
     var controls_1hand_tab;
+    var controls_1hand_tab_text;
     //Opacités (indique si elles sont actuellement implémentées).
     var search_2hands_tab_opacities;
     var search_body_tab_opacities;
@@ -56,12 +59,15 @@
     if(this.config.mouseInteractions)
     {
         search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'spin', 'up_down', 'wave', 'chute', 'knee_up', 'jump', 'bend'];
+        search_2hands_tab_text = ['no-motion', 'contact', 'grand-jete', 'screw', 'arc', 'circle', 'up-down', 'wave', 'fall', 'knee-up', 'jump', 'bend'];
         search_2hands_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
     }
     else
     {
         search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'spin', 'up_down', 'wave'];
+        search_2hands_tab_text = ['no-motion', 'contact', 'grand-jete', 'screw', 'arc', 'circle', 'up-down', 'wave'];
         search_body_tab = ['chute', 'knee_up', 'jump', 'bend'];
+        search_body_tab_text = ['fall', 'knee-up', 'jump', 'bend'];
         search_2hands_tab_opacities = [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5];
         search_body_tab_opacities = [1, 1, 1, 1];
     }
@@ -70,13 +76,24 @@
     if(inMosaic)
     {
         controls_1hand_tab = ['selection'];
+        controls_1hand_tab_text = ['controls_selection'];
         controls_1hand_tab_opacities = [1];
     }
     //Dans une vidéo, on peut aller d'un voisin à l'autre, bouger dans la timeline, dézoomer et swiper d'un marqueur à l'autre.
     else
     {
-        controls_1hand_tab = ['deplacer', 'precedent', 'suivant', 'mosaique_horizontal', 'mosaique_vertical', 'move_down', 'move_up', 'move_right', 'move_left'];
-        controls_1hand_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1];
+		if(this.config.mouseInteractions)
+		{
+			controls_1hand_tab = ['deplacer', 'move_down', 'move_up', 'move_right', 'move_left'];
+			controls_1hand_tab_text = ['controls_timeline', 'controls_move_down', 'controls_move_up', 'controls_move_right', 'controls_move_left'];
+			controls_1hand_tab_opacities = [1, 1, 1, 1, 1];
+		}
+		else
+		{
+			controls_1hand_tab = ['deplacer', 'precedent', 'suivant', 'mosaique_horizontal', 'mosaique_vertical', 'move_down', 'move_up', 'move_right', 'move_left'];
+			controls_1hand_tab = ['controls_timeline', 'controls_previous', 'controls_next', 'controls_mos_horizontal', 'controls_mos_vertical', 'controls_move_down', 'controls_move_up', 'controls_move_right', 'controls_move_left'];
+			controls_1hand_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1];
+		}
     }
     
     //Colonne de recherche.
@@ -225,45 +242,48 @@
     //Longueur de la colonne de recherche.
     var search_width = $('#help_search').width();
     
-    $('#search_title').html('Recherche');
+    $('#search_title').html(this.helpText.search_title);
     var MI = '';
     
     //Le texte de recherche et les images changent en fonction du mode d'intéraction (souris/Kinect).
     if(this.config.mouseInteractions)
     {
-        $('#search_2hands_text').html('Courbes à effectuer avec la souris');
+        $('#search_2hands_text').html(this.helpText.search_2hands_text);
         MI = 'MI/';
     }
     else
     {
-        $('#search_2hands_text').html('Gestes à effectuer avec les deux mains');
+        $('#search_2hands_text').html(this.helpText.search_2hands_text);
     }
     
     //On affecte les images pour la recherche par courbes.
     for(var i = 0 ; i < search_2hands_tab.length ; i++)
     {
         $("#2hands_" + search_2hands_tab[i]).css("background-image", "url('" + img_directory + MI + search_2hands_tab[i] + ".png')");
+		$("#2hands_" + search_2hands_tab[i]).html(this.notificationStrings[search_2hands_tab_text[i]]);
     }
     
     //Si on est en mode Kinect, on affecte les images de recherche corporelle.
     if(!this.config.mouseInteractions)
     {
-        $('#search_body_text').html('Gestes à effectuer avec le corps entier');
+        $('#search_body_text').html(this.helpText.search_body_text);
         
         for(var i = 0 ; i < search_body_tab.length ; i++)
         {
             $("#body_" + search_body_tab[i]).css("background-image", "url('" + img_directory + search_body_tab[i] + ".png')");
+			$("#body_" + search_body_tab[i]).html(this.notificationStrings[search_body_tab_text[i]]);
         }
     }
     
     //Actions de contrôle de l'interface.
-    $('#controls_title').html('Contrôles');
-    $('#controls_1hand_text').html('Gestes à effectuer avec une seule main');
+    $('#controls_title').html(this.helpText.controls_title);
+    $('#controls_1hand_text').html(this.helpText.controls_1hand_text);
     
     //On affecte les images des actions de contrôle de l'interface.
     for(var i = 0 ; i < controls_1hand_tab.length ; i++)
     {
         $("#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.
@@ -323,20 +343,44 @@
     var notification_selection = "<div id='notify_selection' class='notifications'></div>";
     var notification_search = "<div id='notify_search' class='notifications'></div>";
     
-    //On les ajoute à la mosaïque.
-    $('body').append(notification_selection + notification_search);
-
-    //On calcule leurs coordonnées et dimensions.
-    var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
-    var selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
-    var search_left = selection_left + notify_width + notify_margin;
+	//On calcule leurs dimensions.
+	var notify_width, notify_height, notify_margin;
+	var selection_left, search_left;
+	
+	if(this.config.mouseInteractions)
+	{
+		//On ajoute à la mosaïque seulement la recherche.
+		$('body').append(notification_search);
+		notify_margin = parseInt($('.notifications').css('margin'));
+		notify_width = $('.notifications').width();
+		notify_height = $('.notifications').height();
+		//On calcule leurs coordonnées.
+		search_left = ($(window).width() / 2 - notify_width / 2 - notify_margin);
+		var img = $('#notify_search').css('background-image');
+		$('#notify_search').css('background-image', img.replace('notifications/', 'notifications/MI/'));
+	}
+	else
+	{
+		//On les ajoute à la mosaïque.
+		$('body').append(notification_selection + notification_search);
+		notify_margin = parseInt($('.notifications').css('margin'));
+		notify_width = $('.notifications').width();
+		notify_height = $('.notifications').height();
+		//On calcule leurs coordonnées.
+		selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
+		search_left = selection_left + notify_width + notify_margin;
+		
+		this.putText($('#notify_selection'), this.notificationStrings.select);
+		
+		$('#notify_selection').css(
+		{
+			left: selection_left
+		});
+	}
+	
+	this.putText($('#notify_search'), this.notificationStrings.search);
     
     //On les positionne.
-    $('#notify_selection').css(
-    {
-        left: selection_left
-    });
     $('#notify_search').css(
     {
         left: search_left
@@ -373,6 +417,14 @@
     var notify_margin = parseInt($('.notifications').css('margin'));
     var selection_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
     
+	if(this.config.mouseInteractions)
+	{
+		var img = $('#notify_selection').css('background-image');
+		$('#notify_selection').css('background-image', img.replace('notifications/', 'notifications/MI/'));
+	}
+	
+	this.putText($('#notify_selection'), this.notificationStrings.confirm);
+	
     //On les positionne.
     $('#notify_selection').css(
     {
@@ -411,6 +463,14 @@
     var notify_margin = parseInt($('.notifications').css('margin'));
     var search_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
     
+	if(this.config.mouseInteractions)
+	{
+		var img = $('#notify_search').css('background-image');
+		$('#notify_search').css('background-image', img.replace('notifications/', 'notifications/MI/'));
+	}
+	
+	this.putText($('#notify_search'), this.notificationStrings.search);
+	
     //On la positionne.
     $('#notify_search').css(
     {
@@ -440,16 +500,28 @@
     //On spécifie les notifications en div.
     var notification_selection = "<div id='notify_selection' class='notifications'></div>";
     var notification_search = "<div id='notify_search' class='notifications'></div>";
-    
-    //On les ajoute à la mosaïque.
-    $('body').append(notification_selection + notification_search);
-
-    //On calcule leurs coordonnées et dimensions.
-    var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
-    var search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
-    var selection_left = search_left + notify_width + notify_margin;
-    
+	
+	//On les ajoute à la mosaïque.
+	$('body').append(notification_selection + notification_search);
+	
+	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height(), notify_margin = parseInt($('.notifications').css('margin'));
+	
+	//On calcule leurs coordonnées.
+	var selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
+	var search_left = selection_left + notify_width + notify_margin;
+	
+	if(this.config.mouseInteractions)
+	{
+		var imgSel = $('#notify_selection').css('background-image');
+		$('#notify_selection').css('background-image', imgSel.replace('notifications/', 'notifications/MI/'));
+		
+		var imgSearch = $('#notify_search').css('background-image');
+		$('#notify_search').css('background-image', imgSearch.replace('notifications/', 'notifications/MI/'));
+	}
+	
+	this.putText($('#notify_selection'), this.notificationStrings.confirm);
+	this.putText($('#notify_search'), this.notificationStrings.search);
+	
     //On les positionne.
     $('#notify_selection').css(
     {
@@ -504,6 +576,8 @@
         $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
     }
     
+	this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]);
+	
     //On les positionne.
     $('#notify_search_1gesture').css(
     {
@@ -552,7 +626,16 @@
     {
         $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
     }
-    
+	
+	if(this.config.mouseInteractions)
+	{
+		var img = $('#notify_selection').css('background-image');
+		$('#notify_selection').css('background-image', img.replace('notifications/', 'notifications/MI/'));
+	}
+	
+	this.putText($('#notify_selection'), this.notificationStrings.confirm);
+    this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]);
+	
     //On les positionne.
     $('#notify_search_1gesture').css(
     {
@@ -599,6 +682,15 @@
     
     var notifyTop = 0, notifyLeft = 0;
     
+	if(direction.equals("left"))
+	{
+		this.putText($('#notify_swipe'), this.notificationStrings.next);
+	}
+	else
+	{
+		this.putText($('#notify_swipe'), this.notificationStrings.previous);
+	}
+	
     //On les positionne.
     $('#notify_swipe').css(
     {
@@ -606,7 +698,7 @@
         left: -notifyLeft + ($(window).width() - notify_width - notify_margin) / 2,
         'background-image': 'url(./pictos/notifications/swipe_' + direction + '.png)'
     });
-    
+	
     //On les fait apparaître.
     $('.notifications').css(
     {
@@ -651,6 +743,8 @@
     
     var notifyTop = 0, notifyLeft = 0;
     
+	this.putText($('#notify_move'), this.notificationStrings.move);
+	
     //On les positionne.
     $('#notify_move').css(
     {
@@ -706,6 +800,9 @@
     
     var notifyTop = 0, notifyLeft = 0;
     
+	this.putText($('#notify_move'), this.notificationStrings.move);
+	this.putText($('#notify_unzoom'), this.notificationStrings.unzoom);
+	
     //On les positionne.
     $('#notify_move').css(
     {
@@ -764,6 +861,8 @@
     
     var notifyTop = 0, notifyLeft = 0;
     
+	this.putText($('#notify_unzoom'), this.notificationStrings.unzoom);
+	
     //On la positionne.
     $('#notify_unzoom').css(
     {
@@ -807,6 +906,8 @@
     
     var notifyTop = 0, notifyLeft = 0;
     
+	this.putText($('#notify_timeline'), this.notificationStrings.timeline);
+	
     //On la positionne.
     $('#notify_timeline').css(
     {
@@ -851,6 +952,8 @@
     
     var notifyTop = 0, notifyLeft = 0;
     
+	this.putText($('#notify_search'), this.notificationStrings.search);
+	
     //On la positionne.
     $('#notify_search').css(
     {
@@ -895,6 +998,16 @@
     
     var notifyTop = 0, notifyLeft = 0;
     
+	this.putText($('#notify_search'), this.notificationStrings.search);
+	if(direction.equals("left"))
+	{
+		this.putText($('#notify_swipe'), this.notificationStrings.next);
+	}
+	else
+	{
+		this.putText($('#notify_swipe'), this.notificationStrings.previous);
+	}
+	
     //On les positionne.
     $('#notify_search').css(
     {
@@ -952,6 +1065,9 @@
     
     var notifyTop = 0, notifyLeft = 0;
     
+	this.putText($('#notify_search'), this.notificationStrings.search);
+	this.putText($('#notify_move'), this.notificationStrings.move);
+	
     //On les positionne.
     $('#notify_search').css(
     {
@@ -1012,6 +1128,10 @@
     
     var notifyTop = 0, notifyLeft = 0;
     
+	this.putText($('#notify_search'), this.notificationStrings.search);
+	this.putText($('#notify_move'), this.notificationStrings.move);
+	this.putText($('#notify_unzoom'), this.notificationStrings.unzoom);
+	
     //On les positionne.
     $('#notify_search').css(
     {
@@ -1076,6 +1196,9 @@
     
     var notifyTop = 0, notifyLeft = 0;
     
+	this.putText($('#notify_search'), this.notificationStrings.search);
+	this.putText($('#notify_unzoom'), this.notificationStrings.unzoom);
+	
     //On les positionne.
     $('#notify_move').css(
     {
@@ -1136,6 +1259,8 @@
         $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
     }
     
+	this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]);
+	
     //On les positionne.
     $('#notify_search_1gesture').css(
     {
@@ -1186,7 +1311,18 @@
     {
         $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
     }
+	
+	if(direction.equals("left"))
+	{
+		this.putText($('#notify_swipe'), this.notificationStrings.next);
+	}
+	else
+	{
+		this.putText($('#notify_swipe'), this.notificationStrings.previous);
+	}
     
+	this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]);
+	
     //On les positionne.
     $('#notify_search_1gesture').css(
     {
@@ -1251,6 +1387,9 @@
     
     var sides = ['left', 'right', 'up', 'down'];
     
+	this.putText($('#notify_move'), this.notificationStrings.move);
+	this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]);
+	
     //On les positionne.
     $('#notify_search_1gesture').css(
     {
@@ -1318,6 +1457,10 @@
     var sides = ['left', 'right', 'up', 'down'];
     var unzooms = ['horizontal', 'vertical'];
     
+	this.putText($('#notify_move'), this.notificationStrings.move);
+	this.putText($('#notify_unzoom'), this.notificationStrings.unzoom);
+	this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]);
+	
     //On les positionne.
     $('#notify_search_1gesture').css(
     {
@@ -1386,6 +1529,9 @@
     
     var unzooms = ['horizontal', 'vertical'];
     
+	this.putText($('#notify_unzoom'), this.notificationStrings.unzoom);
+	this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]);
+	
     //On les positionne.
     $('#notify_search_1gesture').css(
     {
@@ -1429,6 +1575,9 @@
             'background-image': 'url("./pictos/big/normal/inconnu.png")',
             opacity: '0.9'
         });
+		
+		this.putText($('#notify_curves'), this.notificationStrings["unknown"]);
+		
         return;
     }
     
@@ -1467,6 +1616,7 @@
         
         //On les place.
         $('#notify_curves_' + gestures_tab[i]).css('left', curves_gestures_left[i]);
+		this.putText($('#notify_curves_' + gestures_tab[i]), this.notificationStrings[gestures_tab[i]]);
     }
     
     //On les fait apparaître.
@@ -1491,4 +1641,107 @@
 Mosaic.prototype.removeNotifications = function()
 {
     $('.notifications').remove();
+}
+
+/*
+ * Place un texte sur la notification.
+ * Est appelé dans chaque fonction servant à notifier dans le fichier de notification.
+*/
+Mosaic.prototype.putText = function(notification, text)
+{
+	notification.html(text);
+}
+
+/*
+ * Affiche l'icone d'aide.
+ * Est appelé dans les fichiers :
+ * mosaic > fonction loadMosaic.
+ * zoomInteractions > fonctions zoom et unzoom.
+*/
+Mosaic.prototype.helpIcon = function()
+{
+	this.removeHelpIcon();
+	//On construit le div.
+	var helpIcon = "<img id='helpIcon' src='./img/helpIcon.png' />";
+	//On l'ajoute.
+	$('body').append(helpIcon);
+	//On spécifie ses coordonnées.
+	$('#helpIcon').css(
+	{
+		top: 0,
+		left: $(window).width() - $('#helpIcon').width() - 2 * parseInt($('#helpIcon').css('margin'))
+	});
+}
+
+/*
+ * Supprime l'icone d'aide.
+ * Est appelé dans les fichiers :
+ * zoomInteractions > fonctions zoom et unzoom.
+ * notifications > fonction helpIcon.
+*/
+Mosaic.prototype.removeHelpIcon = function()
+{
+	this.isHelpIconZooming = false;
+	this.isHelpIconZoomed = false;
+	$('#helpIcon').remove();
+}
+
+/*
+ * Agrandit l'icone d'aide.
+ * Est appelé dans le fichier :
+ * mosaic > fonction onMouseMove.
+*/
+Mosaic.prototype.showBigHelp = function()
+{
+	//Si on a déjà zoomé on quitte.
+	if(this.isHelpIconZoomed || this.isHelpIconZooming)
+	{
+		return;
+	}
+	
+	this.isHelpIconZooming = true;
+	
+	var _this = this;
+	
+	$('#helpIcon').animate(
+	{
+		width: 100,
+		height: 100,
+		left: $(window).width() - 100 - 2 * parseInt($('#helpIcon').css('margin'))
+	}, this.config.timeShowBigHelp, function()
+	{
+		_this.isHelpIconZoomed = true;
+		_this.isHelpIconZooming = false;
+	});
+}
+
+/*
+ * Rétrecit l'icone d'aide.
+ * Est appelé dans le fichier :
+ * mosaic > fonction onMouseMove.
+*/
+Mosaic.prototype.showSmallHelp = function()
+{
+	//Si on n'a pas zoomé on quitte.
+	if(!this.isHelpIconZoomed || this.isHelpIconZooming)
+	{
+		return;
+	}
+	
+	this.isHelpIconZooming = true;
+	
+	var _this = this;
+	
+	var helpIconWidth = $('#helpIcon').width();
+	
+	$('#helpIcon').animate(
+	{
+		width: 50,
+		height: 50,
+		left: $(window).width() - 50 - 2 * parseInt($('#helpIcon').css('margin'))
+	}, this.config.timeShowBigHelp, function()
+	{
+		_this.isHelpIconZoomed = false;
+		_this.isHelpIconZooming = false;
+	});
 }
\ No newline at end of file