diff -r eae52b187e29 -r 205409da0f32 front_idill/src/mosaic/js/notifications.js
--- a/front_idill/src/mosaic/js/notifications.js	Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/mosaic/js/notifications.js	Wed Aug 08 18:40:40 2012 +0200
@@ -130,6 +130,9 @@
             search_body_imgs += "<div id='body_" + search_body_tab[i] + "' class='notify_imgs_small' style='opacity: " + search_body_tab_opacities[i] + ";'></div>";
         }
         search_body_imgs += "</div>";
+		
+		//On ajoute ce qu'il faut pour quitter l'aide.
+		
     }
     
     //Titre de la colonne des actions de contrôle.
@@ -172,9 +175,29 @@
     //On les ajoute à la mosaïque.
     $('body').append(notification_help);
     
+	if(this.isTablet)
+	{
+		//On rétrécit certaines images si on est sur une tablette.
+		$('#search_img, #controls_img').css(
+		{
+			height: 150,
+			'background-size': '150px 150px'
+		});
+		
+		$('.notify_imgs_small').css(
+		{
+			height: 80,
+			width: 80,
+			'background-size': '80px 80px'
+		});
+		
+		//On ajoute l'icone de sortie.
+		this.exitIcon();
+	}
+	
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $(window).width(), notify_height = $(window).height();
-    var notify_margin = parseInt($('#notify_help').css('margin'));
+    var notify_margin = parseInt($('#notify_help').css('margin-left'));
     var notify_ = 10;
     
     //On les positionne.
@@ -188,7 +211,7 @@
     });
     
     //Taille des marges des images.
-    var margins = parseInt($('.notify_imgs_small').css('margin'));
+    var margins = parseInt($('.notify_imgs_small').css('margin-left'));
     //Largeur des images.
     var widths = $('.notify_imgs_small').width();
     //Hauteur des images.
@@ -196,7 +219,7 @@
     //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'));
+    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;
@@ -212,7 +235,7 @@
     $('#search_2hands_imgs').css(
     {
         'padding-left': search_2hands_padding_left,
-        'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin')))
+        'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin-left')))
     });
     
     //On récupère le nombre d'images affichables horizontalement pour les gestures de recherche corporelles dans une des parties de l'aide.
@@ -224,7 +247,7 @@
     $('#search_body_imgs').css(
     {
         'padding-left': search_body_padding_left,
-        'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin')))
+        'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin-left')))
     });
     
     //On récupère le nombre d'images affichables horizontalement pour les gestures de controle dans une des parties de l'aide.
@@ -353,7 +376,7 @@
 	{
 		//On ajoute à la mosaïque seulement la recherche.
 		$('body').append(notification_search);
-		notify_margin = parseInt($('.notifications').css('margin'));
+		notify_margin = parseInt($('.notifications').css('margin-left'));
 		notify_width = $('.notifications').width();
 		notify_height = $('.notifications').height();
 		//On calcule leurs coordonnées.
@@ -365,7 +388,7 @@
 	{
 		//On les ajoute à la mosaïque.
 		$('body').append(notification_selection + notification_search);
-		notify_margin = parseInt($('.notifications').css('margin'));
+		notify_margin = parseInt($('.notifications').css('margin-left'));
 		notify_width = $('.notifications').width();
 		notify_height = $('.notifications').height();
 		//On calcule leurs coordonnées.
@@ -416,7 +439,7 @@
 
     //On calcule ses coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var selection_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
     
 	if(this.config.mouseInteractions)
@@ -462,7 +485,7 @@
 
     //On calcule ses coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var search_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
     
 	if(this.config.mouseInteractions)
@@ -506,7 +529,7 @@
 	//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'));
+	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height(), notify_margin = parseInt($('.notifications').css('margin-left'));
 	
 	//On calcule leurs coordonnées.
 	var selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
@@ -566,7 +589,7 @@
     
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
     
     if(_.include(this.gestures, gestureName))
@@ -592,6 +615,11 @@
     {
         opacity: "0.9"
     });
+	
+	if(this.isTablet)
+	{
+		this.searchExitIcon();
+	}
 }
 
 /*
@@ -616,7 +644,7 @@
 
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var search_1gesture_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
     var selection_left = search_1gesture_left + notify_width + notify_margin;
     
@@ -679,7 +707,7 @@
     
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
     
     var notifyTop = 0, notifyLeft = 0;
@@ -731,7 +759,7 @@
     
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var move_left = $(window).width() / 2 - (notify_width) / 2 + notify_margin;
     
     var side = $.inArray(parseInt(targetId), this.neighboursIds);
@@ -786,7 +814,7 @@
     
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var move_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
     var unzoom_left = move_left + notify_width + notify_margin;
     
@@ -850,7 +878,7 @@
     
     //On calcule ses coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var unzoom_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
     
     var side = $.inArray(parseInt(targetId), this.neighboursIds);
@@ -903,7 +931,7 @@
     
     //On calcule ses coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var timeline_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
     
     var notifyTop = 0, notifyLeft = 0;
@@ -949,7 +977,7 @@
     
     //On calcule ses coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var search_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
     
     var notifyTop = 0, notifyLeft = 0;
@@ -994,7 +1022,7 @@
     
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
     var swipe_left = search_left + notify_width + notify_margin;
     
@@ -1052,7 +1080,7 @@
     
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
     var move_left = search_left + notify_width + notify_margin;
     
@@ -1113,7 +1141,7 @@
     
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var search_left = $(window).width() / 2 - (notify_width * 3 + notify_margin * 4) / 2;
     var move_left = search_left + notify_width + notify_margin;
     var unzoom_left = move_left + notify_width + notify_margin;
@@ -1183,7 +1211,7 @@
     
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
     var unzoom_left = search_left + notify_width + notify_margin;
     
@@ -1246,10 +1274,10 @@
     
     //On les ajoute à la mosaïque.
     $('body').append(notification_search_1gesture);
-    
+	
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
     
     if(_.include(this.gestures, gestureName))
@@ -1275,6 +1303,11 @@
     {
         opacity: "0.9"
     });
+	
+	if(this.isTablet)
+	{
+		this.searchExitIcon();
+	}
 }
 
 /*
@@ -1298,10 +1331,10 @@
     
     //On les ajoute à la mosaïque.
     $('body').append(notification_search_1gesture + notification_swipe);
-    
+	
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var search_1gesture_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
     var swipe_left = search_1gesture_left + notify_width + notify_margin;
     
@@ -1364,10 +1397,10 @@
     
     //On les ajoute à la mosaïque.
     $('body').append(notification_search_1gesture + notification_move);
-    
+	
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var search_1gesture_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
     var move_left = search_1gesture_left + notify_width + notify_margin;
     
@@ -1408,6 +1441,11 @@
     {
         opacity: "0.9"
     });
+	
+	if(this.isTablet)
+	{
+		this.searchExitIcon();
+	}
 }
 
 /*
@@ -1435,7 +1473,7 @@
     
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var search_1gesture_left = $(window).width() / 2 - (notify_width * 3 + notify_margin * 4) / 2;
     var move_left = search_1gesture_left + notify_width + notify_margin;
     var unzoom_left = move_left + notify_width + notify_margin;
@@ -1484,6 +1522,11 @@
     {
         opacity: "0.9"
     });
+	
+	if(this.isTablet)
+	{
+		this.searchExitIcon();
+	}
 }
 
 /*
@@ -1509,7 +1552,7 @@
     
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
+    var notify_margin = parseInt($('.notifications').css('margin-left'));
     var search_1gesture_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
     var unzoom_left = search_1gesture_left + notify_width + notify_margin;
     
@@ -1568,7 +1611,7 @@
         
         //On calcule leurs dimensions et coordonnées.
         var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-        var notify_margin = parseInt($('.notifications').css('margin'));
+        var notify_margin = parseInt($('.notifications').css('margin-left'));
         var curves_left = $(window).width() / 2 - (notify_width + notify_margin * 2) / 2;
         
         $('#notify_curves').css(
@@ -1586,24 +1629,40 @@
     //Sinon, on les met dans un tableau.
     var gestures_tab = gestures.split(';');
     
-    var notifications_curves_gestures = '';
+    var notifications_curves_gestures = "<div id='notify_curves_container'>";
     
     //On crée autant de notifications qu'il y a de gestures.
     for(var i = 0 ; i < gestures_tab.length ; i++)
     {
-        notifications_curves_gestures += "<div class='notifications' id='notify_curves_" + gestures_tab[i] + "'></div>";
+        notifications_curves_gestures += "<div class='notification_curves' id='notify_curves_" + gestures_tab[i] + "'></div>";
     }
+	
+	notifications_curves_gestures += "</div>";
     
     //On les ajoute à la mosaïque.
     $('body').append(notifications_curves_gestures);
     
     //On calcule leurs dimensions.
-    var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-    var notify_margin = parseInt($('.notifications').css('margin'));
-    var curves_gestures_left = [];
+    var notify_width = $('.notification_curves').width(), notify_height = $('.notification_curves').height();
+    var notify_margin = parseInt($('.notification_curves').css('margin-left'));
+	
+	//Nombre de notifications dans une ligne.
+	var notify_in_a_row = Math.floor($(window).width() / (+notify_width + 2 * notify_margin));
+	//Espace libre restant sur la ligne.
+	var free_space = $(window).width() - notify_in_a_row * (+notify_width + 2 * notify_margin);
+	
+	//On met à jour le container.
+	$('#notify_curves_container').css(
+	{
+		height: Math.ceil(gestures_tab.length * (+notify_width + 2 * notify_margin) / $(window).width()),
+		'margin-left': free_space / 2,
+		'margin-right': free_space / 2
+	});
+	
+    // var curves_gestures_left = [];
     
     //On calcule leurs dimensions et leur backgrounds.
-    curves_gestures_left[0] = $(window).width() / 2 - (notify_width * (gestures_tab.length) + notify_margin * (gestures_tab.length + 2)) / 2;
+    // curves_gestures_left[0] = $(window).width() / 2 - (notify_width * (gestures_tab.length) + notify_margin * (gestures_tab.length + 2)) / 2;
     
     for(var i = 0 ; i < gestures_tab.length ; i++)
     {
@@ -1613,16 +1672,16 @@
         //On calcule leurs coordonnées.
         if(i+1 < gestures_tab.length)
         {
-            curves_gestures_left[i+1] = curves_gestures_left[i] + notify_width + notify_margin * 2;
+            // curves_gestures_left[i+1] = curves_gestures_left[i] + notify_width + notify_margin * 2;
         }
         
         //On les place.
-        $('#notify_curves_' + gestures_tab[i]).css('left', curves_gestures_left[i]);
+        // $('#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.
-    $('.notifications').css(
+    $('.notification_curves').css(
     {
         opacity: "0.9"
     });
@@ -1643,6 +1702,8 @@
 Mosaic.prototype.removeNotifications = function()
 {
     $('.notifications').remove();
+    $('#notify_curves_container').remove();
+    $('.notification_curves').remove();
 }
 
 /*
@@ -1671,7 +1732,7 @@
 	$('#helpIcon').css(
 	{
 		top: 0,
-		left: $(window).width() - $('#helpIcon').width() - 2 * parseInt($('#helpIcon').css('margin'))
+		left: $(window).width() - $('#helpIcon').width() - 2 * parseInt($('#helpIcon').css('margin-left'))
 	});
 }
 
@@ -1709,7 +1770,7 @@
 	{
 		width: 100,
 		height: 100,
-		left: $(window).width() - 100 - 2 * parseInt($('#helpIcon').css('margin'))
+		left: $(window).width() - 100 - 2 * parseInt($('#helpIcon').css('margin-left'))
 	}, this.config.timeShowBigHelp, function()
 	{
 		_this.isHelpIconZoomed = true;
@@ -1740,10 +1801,97 @@
 	{
 		width: 50,
 		height: 50,
-		left: $(window).width() - 50 - 2 * parseInt($('#helpIcon').css('margin'))
+		left: $(window).width() - 50 - 2 * parseInt($('#helpIcon').css('margin-left'))
 	}, this.config.timeShowBigHelp, function()
 	{
 		_this.isHelpIconZoomed = false;
 		_this.isHelpIconZooming = false;
 	});
+}
+
+/*
+ * Affiche l'icone de sortie pour tablettes.
+*/
+Mosaic.prototype.exitIcon = function()
+{
+	this.removeExitIcon();
+	//On construit le div.
+	var exitIcon = "<img id='exitIcon' src='./img/exitIcon.png' />";
+	//On l'ajoute.
+	$('body').append(exitIcon);
+	//On spécifie ses coordonnées.
+	$('#exitIcon').css(
+	{
+		top: 0,
+		left: $(window).width() - $('#exitIcon').width() - 2 * parseInt($('#exitIcon').css('margin-left')),
+		'z-index': 1000
+	});
+}
+
+/*
+ * Supprime l'icone de sortie pour tablettes.
+*/
+Mosaic.prototype.removeExitIcon = function()
+{
+	$('#exitIcon').remove();
+}
+
+/*
+ * Affiche l'icone de retour à la mosaïque pour tablettes.
+*/
+Mosaic.prototype.homeIcon = function()
+{
+	this.removeHomeIcon();
+	//On construit le div.
+	var homeIcon = "<img id='homeIcon' src='./img/homeIcon.png' />";
+	//On l'ajoute.
+	$('body').append(homeIcon);
+	//On spécifie ses coordonnées.
+	$('#homeIcon').css(
+	{
+		top: 0,
+		left: 0,
+		'z-index': 900
+	});
+}
+
+/*
+ * Supprime l'icone de sortie pour tablettes.
+*/
+Mosaic.prototype.removeHomeIcon = function()
+{
+	$('#homeIcon').remove();
+}
+
+/*
+ * Affiche l'icone de sortie de recherche pour tablettes.
+*/
+Mosaic.prototype.searchExitIcon = function()
+{
+	//S'il n'y a pas de notification de recherche, on s'en va.
+	if($('#notify_search_1gesture').length == 0)
+	{
+		return;
+	}
+	
+	this.removeSearchExitIcon();
+	//On construit le div.
+	var searchExitIcon = "<img id='searchExitIcon' src='./img/exitIcon.png' />";
+	//On l'ajoute.
+	$('body').append(searchExitIcon);
+	//On spécifie ses coordonnées.
+	$('#searchExitIcon').css(
+	{
+		top: 0,
+		left: +$('#notify_search_1gesture').position().left + $('#notify_search_1gesture').width() - $('#searchExitIcon').width() - parseInt($('#searchExitIcon').css('margin-left')) / 2,
+		'z-index': 900
+	});
+}
+
+/*
+ * Supprime l'icone de sortie de recherche pour tablettes.
+*/
+Mosaic.prototype.removeSearchExitIcon = function()
+{
+	$('#searchExitIcon').remove();
 }
\ No newline at end of file