# HG changeset patch
# User bastiena
# Date 1344444040 -7200
# Node ID 205409da0f32f4e5c9403460de007df035a80c2d
# Parent  eae52b187e297c1fd54743528c1d206455eadbd3
Front IDILL:
tablet interactions :
zoom, unzoom, move, read a video, show markers for ipad but not android yet
filter mosaic, draw curves but not search in video yet, show help

diff -r eae52b187e29 -r 205409da0f32 front_idill/src/defaults.js
--- a/front_idill/src/defaults.js	Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/defaults.js	Wed Aug 08 18:40:40 2012 +0200
@@ -62,8 +62,9 @@
 	zoomedMargin : 42,
 	host : '127.0.0.1',
 	port : '8080',
+	touchUpDownDeltaTreshold : 100,
 	mouseUpDownDeltaTreshold : 15,
-	mouseUpDownDeltaTreshold : 100,
+	kinectUpDownDeltaTreshold : 100,
 	curveDictionaryMI : './dicoMI.json',
 	curveDictionaryKI : './dicoKI.json',
 	lang : navigator.language,
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/img/exitIcon.png
Binary file front_idill/src/img/exitIcon.png has changed
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/img/homeIcon.png
Binary file front_idill/src/img/homeIcon.png has changed
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/index.html
--- a/front_idill/src/index.html	Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/index.html	Wed Aug 08 18:40:40 2012 +0200
@@ -36,6 +36,12 @@
         <script type="text/javascript">
             function loadMenu(textElements)
 			{
+				//Si on est sur une tablette, on passe directement dans le mode d'interaction tablette.
+				if('ontouchstart' in document.documentElement)
+				{
+					window.location.replace('./index_souris.html');
+				}
+				
 				var form = "<div id='choice'><p id='caution'>" + textElements.caution + "</p><input id='MI' type='button' /><br ><input id='KI' type='button' /></div>";
 				
 				$('body').css({
@@ -50,12 +56,21 @@
 					'font-size': '20px'
 				});
 				$('#MI').attr('value', textElements.mouse);
-				$('#MI').css('padding', '10px').click(function()
+				$('#MI').css(
+				{
+					'padding': '30px',
+					'font-size': '20px'
+				
+				}).click(function()
 				{
 					window.location.replace('./index_souris.html');
 				});
 				$('#KI').attr('value', textElements.kinect);
-				$('#KI').css('padding', '10px').click(function()
+				$('#KI').css(
+				{
+					'padding': '30px',
+					'font-size': '20px'
+				}).click(function()
 				{
 					window.location.replace('./index_kinect.html');
 				});
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/index_kinect.html
--- a/front_idill/src/index_kinect.html	Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/index_kinect.html	Wed Aug 08 18:40:40 2012 +0200
@@ -32,6 +32,7 @@
         <script type="text/javascript" src="../lib/jquery.min.js"></script>
         <script type="text/javascript" src="../lib/jquery-ui.min.js"></script>
         <script type="text/javascript" src="../lib/jquery.mousewheel-2.0.0.min.js"></script>
+        <script type="text/javascript" src="../lib/cordova-2.0.0.js"></script>
         <script type="text/javascript" src="./defaults.js"></script>
         <script type="text/javascript" src="./mosaic/js/mosaic.js"></script>
         <script type="text/javascript" src="./mosaic/js/notifications.js"></script>
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/index_souris.html
--- a/front_idill/src/index_souris.html	Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/index_souris.html	Wed Aug 08 18:40:40 2012 +0200
@@ -25,6 +25,7 @@
         <!-- On inclut les styles et les scripts utilisés. -->
         <title>IDILL - Mode d'interaction souris</title>
         <meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
         <link rel="stylesheet" type="text/css" href="./mosaic/css/reset.css" />
         <link rel="stylesheet/less" type="text/css" href="./mosaic/css/mosaic.less" />
         <script type="text/javascript" src="../lib/less-1.3.0.min.js"></script>
@@ -32,8 +33,11 @@
         <script type="text/javascript" src="../lib/jquery.min.js"></script>
         <script type="text/javascript" src="../lib/jquery-ui.min.js"></script>
         <script type="text/javascript" src="../lib/jquery.mousewheel-2.0.0.min.js"></script>
+		<script type="text/javascript" src="../lib/cordova-2.0.0.js"></script>
         <script type="text/javascript" src="./defaults.js"></script>
         <script type="text/javascript" src="./mosaic/js/mosaic.js"></script>
+        <script type="text/javascript" src="./mosaic/js/mouseInteractions.js"></script>
+        <script type="text/javascript" src="./mosaic/js/touchInteractions.js"></script>
         <script type="text/javascript" src="./mosaic/js/notifications.js"></script>
         <script type="text/javascript" src="./mosaic/js/pointers.js"></script>
         <script type="text/javascript" src="./mosaic/js/zoomInteractions.js"></script>
@@ -59,6 +63,25 @@
         
         <!-- Scripts principaux. -->
         <script type="text/javascript">
+			function aa(w, h, l, t)
+			{
+				if($('#a').length == 0)
+				{
+					var a = '<div id="a"></div>';
+					$('body').append(a);
+					$('#a').css(
+					{
+						position: 'absolute',
+						'background-color': '#00F',
+						width: w,
+						height: h,
+						left: l,
+						top: t,
+						'z-index': 10000
+					});
+				}
+			}
+			
             var mos;
             //Si la page a chargé, on raffraichit la mosaïque.
             $(document).ready(function ()
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/lang/en.json
--- a/front_idill/src/lang/en.json	Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/lang/en.json	Wed Aug 08 18:40:40 2012 +0200
@@ -1,5 +1,5 @@
 {
-	"gesturesText":["fall", "jump", "spin", "group spin", "bend", "arm carriage", "knee up", "breakdance", "wave", "no motion", "contact"],
+	"gesturesText":["fall", "jump", "spin", "group spin", "bend", "arm carriage", "knee up", "breakdance", "wave", "no motion", "contact", "up-down", "large cast"],
 	"notificationStrings":{
 	"select":"Select", 
 	"confirm":"Confirm", 
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/lang/fr.json
--- a/front_idill/src/lang/fr.json	Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/lang/fr.json	Wed Aug 08 18:40:40 2012 +0200
@@ -1,5 +1,5 @@
 {
-	"gesturesText":["chute", "saut", "rotation", "rotation de groupe", "penché", "port de bras", "levé de genou", "breakdance", "ondulations", "immobilité", "contact"],
+	"gesturesText":["chute", "saut", "rotation", "rotation de groupe", "penché", "port de bras", "levé de genou", "breakdance", "ondulations", "immobilité", "contact", "de haut en bas", "grand-jeté"],
 	"notificationStrings":{
 	"select":"Sélectionner", 
 	"confirm":"Confirmer", 
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/mosaic/css/mosaic.less
--- a/front_idill/src/mosaic/css/mosaic.less	Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/mosaic/css/mosaic.less	Wed Aug 08 18:40:40 2012 +0200
@@ -204,6 +204,29 @@
 }
 
 /*
+ * Notifications affichées pendant une recherche en cours.
+*/
+.notification_curves
+{
+	position: relative;
+	float: left;
+	width: 200px;
+	height: 200px;
+	background-repeat: no-repeat;
+	background-position: 0px 0px;
+	background-size: 200px 200px;
+	opacity: 0;
+	margin: 15px;
+	z-index: 400;
+	text-align: center;
+	font-family: "DINMedium";
+    font-weight:10;
+    font-size:30px;
+	color: #fff;
+	padding-top: 5px;
+}
+
+/*
  * Style commun aux notifications lors d'une recherche par courbes en cours.
 */
 .notifications_inSearch
@@ -231,6 +254,15 @@
 }
 
 /*
+ * Container pour les notifications de courbes lors d'un tracé en cours.
+*/
+#notify_curves_container
+{
+	position: absolute;
+	width: 100%;
+}
+
+/*
  * Notification de sélection.
 */
 #notify_selection
@@ -443,7 +475,7 @@
 /*
  * Icone permettant d'afficher l'aide dans le mode d'interaction souris.
 */
-#helpIcon
+#helpIcon, #exitIcon, #homeIcon, #searchExitIcon
 {
 	width: 50px;
 	height: 50px;
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/mosaic/js/mosaic.js
--- a/front_idill/src/mosaic/js/mosaic.js	Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/mosaic/js/mosaic.js	Wed Aug 08 18:40:40 2012 +0200
@@ -26,7 +26,7 @@
  */
 function Mosaic(config, default_conf)
 {
-    this.gestures = ["fall", "jump", "circle", "screw", "bend", "arc", "knee-up", "right-angle", "wave", "slow", "hello", "no-motion", "contact", "up-down", "grand-jete"];
+    this.gestures = ["fall", "jump", "circle", "screw", "bend", "arc", "knee-up", "right-angle", "wave", "no-motion", "contact", "up-down", "grand-jete"];
 
     //Chemin du fichier de configuration.
     this.config_path = config;
@@ -108,6 +108,8 @@
     this.mousePosLastY = null;
     //Valeur du déplacement entre un mouse up et un mouse down.
     this.mouseUpDownDelta = 0;
+    //Valeur du déplacement entre un touch start et un touch end.
+    this.touchUpDownDelta = 0;
 	//Coordonnées de la souris au dernier mouse down.
 	this.mouseDownPosX = null;
 	this.mouseDownPosY = null;
@@ -187,7 +189,12 @@
     this.actualCode = '';
     //Indique si l'utilisateur est entré dans la zone de recherche.
     this.isUserInSearchZone = false;
+	//Indique si on a fait un mouse down.
 	this.isMouseDown = false;
+	//Indique si on a fait un touch start.
+	this.isTouchStart = false;
+	//Indique si on a fait un touch move.
+	this.isTouchMove = false;
 	//Indique si on est en train de prézoomer.
 	this.isPrezooming = false;
 	//Indique si l'icone d'aide a été agrandie.
@@ -196,6 +203,9 @@
 	this.isHelpIconZooming = false;
 	//Indique à l'utilisateur s'il doit retirer ses mains pour refaire une recherche par courbes.
 	this.mustTakeOutHands = false;
+	
+	//Indique si on est sur une tablette.
+	this.isTablet = ('ontouchstart' in document.documentElement);
     
     //Timeout (attente) pour le zoom après un préZoom.
     this.zoomTimeout = null;
@@ -303,7 +313,7 @@
 	//On recharge la fenêtre si sa taille a changé.
 	$(window).resize(function()
 	{
-		_.debounce(window.location.reload(), _this.config.timeReloadAfterResize);
+		// _.debounce(window.location.reload(), _this.config.timeReloadAfterResize);
 	});
 	
     var initPanel = '<div id="initPanel"></div>';
@@ -339,7 +349,7 @@
             }
         }
         
-        return str + '<div id="ghostPanel"></div>';
+        return str;
     }
     else
     {
@@ -348,313 +358,6 @@
 }
 
 /*
- * Fonction appelée lors d'un mouse down en mode d'interaction souris.
- * Est appelé dans le fichier :
- * mosaic > fonction loadMosaic, attachée à l'événement jQuery mousedown.
-*/
-Mosaic.prototype.onMouseDown = function(e)
-{
-	this.isMouseDown = true;
-	
-	//Si on se trouve sur l'icone d'aide et qu'elle est zoomée.
-	if(this.isHelpIconZoomed)
-	{
-		//On affiche différentes aides en fonction de si on se trouve dans une vidéo ou non.
-		if(this.currentMode == 'SEARCH' || this.currentMode == 'VIDEO' || this.currentMode == 'TIMELINE')
-		{
-			this.notifyHelp(false);
-		}
-		else if(this.currentMode == 'FILTER' || this.currentMode == 'MOSAIC')
-		{
-			this.notifyHelp(true);
-		}
-	}
-	
-	//On met à jour les coordonnées de la souris au dernier mouse down.
-	this.mouseDownPosX = e.pageX;
-	this.mouseDownPosY = e.pageY;
-	
-	//Si on est sur une notification de gesture de recherche.
-	this.removeSearchNotificationIfOnIt(e.pageX, e.pageY);
-	this.isUserInSearchZone = true;
-	
-	//Si on est en mode de tracé de courbes, on indique qu'on a commencé à tracer au canvas.
-	if(this.isSearchByCurvesOn)
-	{
-		this.searchCanvas.onPointerIn(this.mousePosX, this.mousePosY, null, null);
-	}
-}
-
-/*
- * Fonction appelée lors d'un mouse move en mode d'interaction souris.
- * Est appelé dans le fichier :
- * mosaic > fonction loadMosaic, attachée à l'événement jQuery mousemove.
-*/
-Mosaic.prototype.onMouseMove = function(e)
-{
-	//On vérifie si la souris n'est pas sur l'icone d'aide.
-	if(this.isOnHelpIcon(this.mousePosX, this.mousePosY))
-	{
-		//On agrandit l'icone d'aide.
-		this.showBigHelp();
-	}
-	else
-	{
-		//On la rétrecit sinon.
-		this.showSmallHelp();
-	}
-	
-	//Si on n'a pas appuyé sur la souris avant, on part.
-	if(!this.isMouseDown)
-	{
-		return;
-	}
-	
-	var _this = this;
-	
-	//Si on est en mode de tracé de courbes, on met à jour la courbe.
-	if(this.isSearchByCurvesOn)
-	{
-		this.searchCanvas.onPointerMove(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
-	}
-	
-	//On met à jour l'ancienne position de la souris si elle est nulle.
-	if(!this.mousePosLastX && this.mousePosLastX != 0)
-	{
-		this.mousePosLastX = this.mousePosX;
-	}
-	if(!this.mousePosLastY && this.mousePosLastY != 0)
-	{
-		this.mousePosLastY = this.mousePosY;
-	}
-	
-	//Le delta s'accroît si la souris bouge.
-	this.mouseUpDownDelta += Math.floor(Math.sqrt((this.mousePosLastX - e.pageX) * (this.mousePosLastX - e.pageX) + (this.mousePosLastY - e.pageY) * (this.mousePosLastY - e.pageY)));
-	
-	//On met à jour l'ancienne position de la souris.
-	if(this.mousePosLastX != this.mousePosX)
-	{
-		this.mousePosLastX = this.mousePosX;
-	}
-	if(this.mousePosLastY != this.mousePosY)
-	{
-		this.mousePosLastY = this.mousePosY;
-	}
-	
-	//Si la souris a parcouru une trop grande distance, on entre en recherche.
-	if(this.mouseUpDownDelta > this.config.mouseUpDownDeltaTreshold)
-	{
-		//Si on est en mosaique, on entre en filtrage.
-		if(this.currentMode == "MOSAIC")
-		{
-			this.preUnzoom();
-			this.currentMode = "FILTER";
-			this.isMosaicFiltered = true;
-		}
-		//Si on est en mode de filtrage, mais qu'on n'est pas en tracé de courbes.
-		else if(this.currentMode == "FILTER" && !this.isSearchByCurvesOn && this.isUserInSearchZone)
-		{
-			//On lance une nouvelle recherche pas courbes.
-			this.preUnzoom();
-		}
-		//Si on est dans une vidéo, on entre en recherche.
-		else if(this.currentMode == "VIDEO" || this.currentMode == "TIMELINE")
-		{
-			this.currentMode = "SEARCH";
-		}
-		//Si on est en mode recherche dans une vidéo, mais qu'on n'est pas en tracé de courbes.
-		/*else if(this.currentMode == "SEARCH" && !this.isSearchByCurvesOn)
-		{
-			//On lance une nouvelle recherche pas courbes.
-		}*/
-		
-		if(this.currentMode != "NO-USER" && this.currentMode.indexOf("INCOMING") == -1 && !this.isSearchByCurvesOn)
-		{
-			this.isSearchByCurvesOn = true;
-			this.startSearch();
-			this.searchCanvas.onPointerIn(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
-		}
-		
-		//S'il n'est pas possible d'afficher l'aide.
-		if(!this.canNotifyHelp)
-		{
-			//On rend son affichage possible après un certain délai.
-			this.canNotifyHelpTimeout = setTimeout(function()
-			{
-				_this.canNotifyHelp = true;
-			}, this.config.timeoutCanNotifyHelp);
-		}
-	}
-}
-
-/*
- * Fonction appelée lors d'un mouse up en mode d'interaction souris.
- * Est appelé dans le fichier :
- * mosaic > fonction loadMosaic, attachée à l'événement jQuery mousemove.
-*/
-Mosaic.prototype.onMouseUp = function()
-{
-	this.isMouseDown = false;
-	
-	//Si on était en train de tracer une courbe.
-	if(this.isSearchByCurvesOn)
-	{
-		//On quitte la zone de recherche.
-		/*this.isUserInSearchZone = false;
-		
-		//On regarde si ce qu'on a tracé correspond à une courbe en particulier.
-		var gesture_match = this.gestureWithSameCode(this.actualCode);
-		this.actualCode = '';
-		
-		//Si oui.
-		if(gesture_match.length > 0)
-		{
-			//Si on est en mode recherche dans une vidéo et que le player est prêt.
-			if(this.currentMode == "SEARCH" && this.playerIsReady)
-			{
-				//On effectue une recherche dans cette vidéo.
-				this.player.widgets[0].searchByGesture(gesture_match);
-				this.isCurrentlyInASearchByGesture = this.player.widgets[0].isCurrentlyInASearchByGesture;
-				
-				//On va au premier marqueur trouvé.
-				if(this.player && this.player.widgets[0] && this.timeToGoAt[this.centerId] === 0 && this.player.widgets[0].atLeastOneSearchMarker(this.currentSearchGesture[this.centerId]))
-				{
-					this.player.widgets[0].goToFirstSearchedMarker(this.currentSearchGesture[this.centerId]);
-				}
-				
-				//On affiche la notification de gesture de recherche.
-				this.removeNotifications();
-				this.currentSearchGesture[this.centerId] = gesture_match;
-				this.searchGesture(gesture_match, 'valid');
-				this.curvesGesturesFound = false;
-			}
-			//Si on est en mode de filtrage de mosaique.
-			else if(this.currentMode == "FILTER")
-			{
-				if(this.isMosaicFiltered)
-				{
-					//On notifie la recherche par filtrage.
-					this.removeNotifications();
-					this.filterSearchedType = gesture_match;
-					this.filterGesture(gesture_match, 'valid');
-					//On filtre la mosaique.
-					this.searchFilter(gesture_match);
-					this.curvesGesturesFound = false;
-				}
-			}
-		}
-		//Si aucune gesture ne matche dans le dictionnaire.
-		else
-		{
-			//Si on était en mode filtrage de la mosaïque et qu'aucune gesture de filtrage n'avait été détectée avant ca, on revient en mode mosaïque.
-			if(this.currentMode == "FILTER" && this.filterSearchedType == "")
-			{
-				this.currentMode = "MOSAIC";
-				this.isMosaicFiltered = false;
-			}
-			//Sinon si on était en mode recherche dans une video et qu'aucune gesture n'avait été détectée avant ca, on revient en mode video.
-			if(this.currentMode == "SEARCH" && this.currentSearchGesture[this.centerId] == "")
-			{
-				this.currentMode = "VIDEO";
-			}
-		}*/
-		//On dit au module de recherche qu'on arrête de tracer des courbes.
-		this.searchCanvas.onPointerOut();
-	}
-	
-	this.mousePosLastX = null;
-	this.mousePosLastY = null;
-	
-	//Si la distance parcourue par la souris entre le mouse down et le mouse up est inférieure ou égale au seuil.
-	if(this.mouseUpDownDelta <= this.config.mouseUpDownDeltaTreshold)
-	{
-		//Si on est sur un snapshot prézoomé.
-		if(this.isOnAPrezoomSN && this.previousZoomedSN != '' && (this.currentMode == 'MOSAIC' || this.currentMode == 'FILTER') && !this.isPrezooming)
-		{
-			this.zoom();
-		}
-	}
-	
-	//On réinitialise le delta, on quitte la recherche par courbes.
-	this.mouseUpDownDelta = 0;
-	this.isSearchByCurvesOn = false;
-	this.leaveSearch();
-	
-	//Si on est en mode de filtrage et qu'on a une gesture de filtrage trouvée.
-	if(this.currentMode == 'FILTER' && this.filterSearchedType != '')
-	{
-		//On notifie.
-		this.removeNotifications();
-		this.filterGesture(this.filterSearchedType, 'valid');
-	}
-}
-
-/*
- * Fonction appelée lors d'un clic en mode d'interaction souris.
- * Est appelé dans le fichier :
- * mosaic > fonction loadMosaic.
-*/
-Mosaic.prototype.onClick = function(x, y)
-{
-	//Si la position de la souris entre le mouse down et le mouse up change de plus de 10px, on part.
-	if(!this.mouseDownPosX || !this.mouseDownPosY || Math.sqrt((this.mouseDownPosX - x) * (this.mouseDownPosX - x) + (this.mouseDownPosY - y) * (this.mouseDownPosY - y)) > 10)
-	{
-		return;
-	}
-	
-	//Si on est dans un mode autre qu'un mode zoomé et qu'on n'affiche pas l'aide, on part.
-	if(this.currentMode != "VIDEO" && this.currentMode != "SEARCH" && this.currentMode != "TIMELINE" && !this.helpDisplayed)
-	{
-		return;
-	}
-	
-	//Si on clique en dehors de la video centrale, alors on dézoome.
-	var TL = $('.Ldt-Timeline');
-	var TLwidth = TL.width(), TLheight = TL.height();
-	var Ptop = $('.LdtPlayer').position().top, Pleft = $('.LdtPlayer').position().left;
-	var Pheight = $('.LdtPlayer').height();
-	var MPx = this.mousePosX, MPy = this.mousePosY;
-	
-	//On regarde si on a cliqué sur un snapshot.
-	var SN = this.pointerPositionToSN(MPx - this.notifyLeftVideo, MPy - this.notifyTopVideo, true);
-	var SNId;
-	if(SN)
-	{
-		SNId = parseInt(SN.attr('id').replace('snapshotDiv-', ''));
-	}
-	
-	//Si on n'a pas demandé à supprimé la notification de gesture.
-	if(!this.gestureDelRequested && !this.helpDisplayed)
-	{
-		//Si non, ou s'il ne fait pas partie des voisins.
-		if(!SNId || !_.include(this.neighboursIds, SNId))
-		{
-			//Si le clic a lieu en dehors du player et que l'aide n'est pas affichée, on dezoom.
-			if(MPx < Pleft || MPx > (+Pleft + TLwidth) || MPy < Ptop || MPy > (+Ptop + Pheight - TLheight))
-			{
-				this.unzoom();
-			}
-		}
-		//Si on se trouve sur un voisin, on bouge.
-		else if(SNId && _.include(this.neighboursIds, SNId) && this.canMoveToNeighbour)
-		{
-			this.moveToNeighbour($('#snapshotDiv-' + SNId));
-		}
-	}
-	//Si on l'a demandé, on enlève la demande de suppression.
-	else
-	{
-		this.gestureDelRequested = false;
-	}
-	
-	//Si l'aide est affichée, un clic la ferme.
-	if(this.helpDisplayed && !this.isHelpIconZoomed && !this.isHelpIconZooming)
-	{
-		this.removeHelp();
-	}
-}
-
-/*
  * Permet de raffraichir la mosaïque.
  * Est appelé dans le fichier :
  * mosaic > fonction loadFromJson, afin de charger la mosaique une fois que les fichiers de métadonnées ont été lus.
@@ -675,6 +378,8 @@
     this.previousZoomedSN;
     //On met à jour la mosaïque.
     $('#mainPanel').html(createMosaic);
+	//On ajoute le panneau de protection (principalement pour le mode tablettes).
+	$('body').append('<div id="ghostPanel"></div>');
     //On récupère la taille des bordures.
     this.marginWidth = $('.snapshotDivs').css('margin-bottom');
     this.marginWidth = parseFloat(this.marginWidth)*2;
@@ -683,7 +388,7 @@
     //On ne calculera pas tout de suite la hauteur de la mosaique étant donnée qu'elle est calculée par la suite dynamiquement.
     this.snapshotWidth = this.width / this.config.imagesByLine - this.marginWidth;
     this.snapshotHeight = this.snapshotWidth*9/16;
-    $('.snapshotDivs').css('width', this.snapshotWidth).css('height', this.snapshotHeight).css('margin', this.marginWidth/2);
+    $('.snapshotDivs').css('width', this.snapshotWidth).css('height', this.snapshotHeight).css('margin-left', this.marginWidth/2);
     
     this.height = $('#mainPanel').innerHeight();
     //On centre verticalement la mosaïque.
@@ -730,14 +435,8 @@
                 //Si on gère les interactions à la souris.
                 if(_this.config.mouseInteractions)
                 {
-                    //On met à jour la position estimée de la souris.
-                    $(window).mousemove(function(e)
-                    {
-                        // _this.refreshPointers(e.pageX, e.pageY, _this, true);
-                        _this.refreshPointers(e.pageX, e.pageY, true);
-                        _this.mousePosX = e.pageX;
-                        _this.mousePosY = e.pageY;
-                    });
+					//On bind les événements utiles.
+					_this.eventBinder();
                 }
                 
                 //Si on a activé la préphase mais qu'on est en mode Kinect.
@@ -760,34 +459,94 @@
             }
         });
     }
-    
-    //Si on est en mode d'intéraction souris.
-    if(this.config.mouseInteractions)
-    {
-		//On affiche l'icone d'aide.
-		this.helpIcon();
-		
-        //Si on fait un mouse down sur le body, on vérifie enregistre le déplacement de la souris jusqu'au prochain mouse up.
-        $(window).mousedown(function (e)
-        {
+}
+
+/*
+ * Bind les événements souris ou touch dans le mode d'interaction souris.
+*/
+Mosaic.prototype.eventBinder = function()
+{
+	var _this = this;
+	
+	//On affiche l'icone d'aide.
+	this.helpIcon();
+	
+	//Si on est sur tablette, on utilise l'événement touch start.
+	if(this.isTablet)
+	{
+		document.addEventListener('touchstart', function(e)
+		{
+			if(e.touches.length == 1)
+			{
+				var touch = e.touches[0];
+				_this.onTouchStart(touch);
+			}
+			e.preventDefault();
+		}, false);
+	}
+	//Sinon souris.
+	else
+	{
+		//Si on fait un mouse down sur le body, on vérifie enregistre le déplacement de la souris jusqu'au prochain mouse up.
+		$(window).mousedown(function (e)
+		{
 			_this.onMouseDown(e);
 			return false;
-        });
-		
+		});
+	}
+	
+	//Si on est sur tablette, on utilise l'événement touch start.
+	if(this.isTablet)
+	{
+		document.addEventListener('touchmove', function(e)
+		{
+			if(e.touches.length == 1)
+			{
+				var touch = e.touches[0];
+				_this.refreshPointers(touch.pageX, touch.pageY, true);
+				_this.mousePosX = touch.pageX;
+				_this.mousePosY = touch.pageY;
+				_this.onTouchMove(touch);
+			}
+			e.preventDefault();
+		}, false);
+	}
+	//Sinon souris.
+	else
+	{
 		//On écoute le déplacement de la souris.
 		$(window).mousemove(function(e)
 		{
+			_this.refreshPointers(e.pageX, e.pageY, true);
+			_this.mousePosX = e.pageX;
+			_this.mousePosY = e.pageY;
 			_this.onMouseMove(e);
 			return false;
 		});
-		
+	}
+	
+	//Si on est sur tablette, on utilise l'événement touch start.
+	if(this.isTablet)
+	{
+		document.addEventListener('touchend', function(e)
+		{
+			_this.onTouchEnd(e);
+			e.preventDefault();
+		}, false);
+	}
+	//Sinon souris.
+	else
+	{
 		//Si on fait un mouse up après ce mouse down.
 		$(window).mouseup(function()
 		{
 			_this.onMouseUp();
 			return false;
 		});
-		
+	}
+	
+	if(!this.isTablet)
+	{
 		//Si on fait un clic.
 		$(window).click(function(e)
 		{
@@ -797,20 +556,20 @@
 		});
 		
 		$(window).on('mousewheel', function(event, delta, deltaX, deltaY)
-        {
+		{
 			//Si on est dans un mode autre qu'on mode zoomé ou que l'aide est affichée, on part.
 			if(_this.currentMode != "VIDEO" && _this.currentMode != "SEARCH" && _this.currentMode != "TIMELINE" || _this.helpDisplayed)
 			{
 				return;
 			}
 			
-            //Quand on "tire" la molette vers soi, on dezoom.
-            if (delta < 0)
-            {
-                _this.unzoom();
-            }
-        });
-    }
+			//Quand on "tire" la molette vers soi, on dezoom.
+			if (delta < 0)
+			{
+				_this.unzoom();
+			}
+		});
+	}
 }
 
 /*
@@ -823,7 +582,7 @@
     var _this = this;
     
     //Variables censées être des ints.
-    var supposedToBeInt = ['imagesByLine', 'imagesToShow', 'totalImages', 'timeReloadAfterResize', 'timePrezoom', 'timePreUnzoom', 'zoomTime', 'timeUnzoom', 'timeNeighbourGlowing', 'timeNeighbourUnglowing', 'timeMovingToNeighbour', 'timeSearchFade', 'timeNotifyFade', 'timeFilterFade', 'timeANFade', 'timeFilling', 'zoomedMargin', 'timeoutZoom', 'timeoutUnzoom', 'timeoutMoveToNeighbour', 'timeoutPointersIdle', 'timeoutAreBothPointersHere', 'timeoutRemoveNotificationByGesture', 'timeoutNotifySwipe', 'timeoutSelectTL', 'timeoutSlideTL', 'timeoutCanNotifyHelp', 'timeoutRemoveSpinner', 'timeoutNouser', 'timeoutNextDrawCurve', 'mouseUpDownDeltaTreshold', 'kinectUpDownDeltaTreshold', 'helpBorderSize'];
+    var supposedToBeInt = ['imagesByLine', 'imagesToShow', 'totalImages', 'timeReloadAfterResize', 'timePrezoom', 'timePreUnzoom', 'zoomTime', 'timeUnzoom', 'timeNeighbourGlowing', 'timeNeighbourUnglowing', 'timeMovingToNeighbour', 'timeSearchFade', 'timeNotifyFade', 'timeFilterFade', 'timeANFade', 'timeFilling', 'zoomedMargin', 'timeoutZoom', 'timeoutUnzoom', 'timeoutMoveToNeighbour', 'timeoutPointersIdle', 'timeoutAreBothPointersHere', 'timeoutRemoveNotificationByGesture', 'timeoutNotifySwipe', 'timeoutSelectTL', 'timeoutSlideTL', 'timeoutCanNotifyHelp', 'timeoutRemoveSpinner', 'timeoutNouser', 'timeoutNextDrawCurve', 'touchUpDownDeltaTreshold', 'mouseUpDownDeltaTreshold', 'kinectUpDownDeltaTreshold', 'helpBorderSize'];
     //Variables censées êtres des floats.
     var supposedToBeFloat = ['zoomPercentage', 'prezoomPercentage'];
     
@@ -1222,6 +981,12 @@
 {
 	var _this = this;
 	
+	//Si on est sur une tablette, on affiche les controls.
+	if(this.isTablet)
+	{
+		$('video').attr('controls', 'controls');
+	}
+	
 	if(this.currentMode == 'NO-USER')
 	{
 		//On peut s'approcher de la kinect.
@@ -1362,6 +1127,7 @@
         },
         player:{
             type: 'html5', // player type
+            // type: 'jwplayer', // player type
             video: videoToPlay,
             live: true,
             height: newSnHeight,
@@ -1376,7 +1142,8 @@
         position: 'absolute',
         'background-color': '#000000',
         top: newZoomTop,
-        left: newZoomLeft
+        left: newZoomLeft,
+		'z-index': 500
     });
     
     //On démarre le player.
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/mosaic/js/mouseInteractions.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/front_idill/src/mosaic/js/mouseInteractions.js	Wed Aug 08 18:40:40 2012 +0200
@@ -0,0 +1,325 @@
+/*
+* This file is part of the TraKERS\Front IDILL package.
+*
+* (c) IRI <http://www.iri.centrepompidou.fr/>
+*
+* For the full copyright and license information, please view the LICENSE
+* file that was distributed with this source code.
+*/
+
+/*
+ * Projet : TraKERS
+ * Module : Front IDILL
+ * Fichier : mouseInteractions.js
+ * 
+ * Auteur : alexandre.bastien@iri.centrepompidou.fr
+ * 
+ * Fonctionnalités : Définit les fonctions d'intéraction souris.
+ */
+
+/*
+ * Fonction appelée lors d'un mouse down en mode d'interaction souris.
+ * Est appelé dans le fichier :
+ * mosaic > fonction loadMosaic, attachée à l'événement jQuery mousedown.
+*/
+Mosaic.prototype.onMouseDown = function(e)
+{
+	this.isMouseDown = true;
+	
+	//Si on se trouve sur l'icone d'aide et qu'elle est zoomée.
+	if(this.isHelpIconZoomed)
+	{
+		//On affiche différentes aides en fonction de si on se trouve dans une vidéo ou non.
+		if(this.currentMode == 'SEARCH' || this.currentMode == 'VIDEO' || this.currentMode == 'TIMELINE')
+		{
+			this.notifyHelp(false);
+		}
+		else if(this.currentMode == 'FILTER' || this.currentMode == 'MOSAIC')
+		{
+			this.notifyHelp(true);
+		}
+	}
+	
+	//On met à jour les coordonnées de la souris au dernier mouse down.
+	this.mouseDownPosX = e.pageX;
+	this.mouseDownPosY = e.pageY;
+	
+	//Si on est sur une notification de gesture de recherche.
+	this.removeSearchNotificationIfOnIt(e.pageX, e.pageY);
+	this.isUserInSearchZone = true;
+	
+	//Si on est en mode de tracé de courbes, on indique qu'on a commencé à tracer au canvas.
+	if(this.isSearchByCurvesOn)
+	{
+		this.searchCanvas.onPointerIn(this.mousePosX, this.mousePosY, null, null);
+	}
+}
+
+/*
+ * Fonction appelée lors d'un mouse move en mode d'interaction souris.
+ * Est appelé dans le fichier :
+ * mosaic > fonction loadMosaic, attachée à l'événement jQuery mousemove.
+*/
+Mosaic.prototype.onMouseMove = function(e)
+{
+	//On vérifie si la souris n'est pas sur l'icone d'aide.
+	if(this.isOnHelpIcon(this.mousePosX, this.mousePosY))
+	{
+		//On agrandit l'icone d'aide.
+		this.showBigHelp();
+	}
+	else
+	{
+		//On la rétrecit sinon.
+		this.showSmallHelp();
+	}
+	
+	//Si on n'a pas appuyé sur la souris avant, on part.
+	if(!this.isMouseDown)
+	{
+		return;
+	}
+	
+	var _this = this;
+	
+	//Si on est en mode de tracé de courbes, on met à jour la courbe.
+	if(this.isSearchByCurvesOn)
+	{
+		this.searchCanvas.onPointerMove(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
+	}
+	
+	//On met à jour l'ancienne position de la souris si elle est nulle.
+	if(!this.mousePosLastX && this.mousePosLastX != 0)
+	{
+		this.mousePosLastX = this.mousePosX;
+	}
+	if(!this.mousePosLastY && this.mousePosLastY != 0)
+	{
+		this.mousePosLastY = this.mousePosY;
+	}
+	
+	//Le delta s'accroît si la souris bouge.
+	this.mouseUpDownDelta += Math.floor(Math.sqrt((this.mousePosLastX - e.pageX) * (this.mousePosLastX - e.pageX) + (this.mousePosLastY - e.pageY) * (this.mousePosLastY - e.pageY)));
+	
+	//On met à jour l'ancienne position de la souris.
+	if(this.mousePosLastX != this.mousePosX)
+	{
+		this.mousePosLastX = this.mousePosX;
+	}
+	if(this.mousePosLastY != this.mousePosY)
+	{
+		this.mousePosLastY = this.mousePosY;
+	}
+	
+	//Si la souris a parcouru une trop grande distance, on entre en recherche.
+	if(this.mouseUpDownDelta > this.config.mouseUpDownDeltaTreshold)
+	{
+		//Si on est en mosaique, on entre en filtrage.
+		if(this.currentMode == "MOSAIC")
+		{
+			this.preUnzoom();
+			this.currentMode = "FILTER";
+			this.isMosaicFiltered = true;
+		}
+		//Si on est en mode de filtrage, mais qu'on n'est pas en tracé de courbes.
+		else if(this.currentMode == "FILTER" && !this.isSearchByCurvesOn && this.isUserInSearchZone)
+		{
+			//On lance une nouvelle recherche pas courbes.
+			this.preUnzoom();
+		}
+		//Si on est dans une vidéo, on entre en recherche.
+		else if(this.currentMode == "VIDEO" || this.currentMode == "TIMELINE")
+		{
+			this.currentMode = "SEARCH";
+		}
+		//Si on est en mode recherche dans une vidéo, mais qu'on n'est pas en tracé de courbes.
+		/*else if(this.currentMode == "SEARCH" && !this.isSearchByCurvesOn)
+		{
+			//On lance une nouvelle recherche pas courbes.
+		}*/
+		
+		if(this.currentMode != "NO-USER" && this.currentMode.indexOf("INCOMING") == -1 && !this.isSearchByCurvesOn)
+		{
+			this.isSearchByCurvesOn = true;
+			this.startSearch();
+			this.searchCanvas.onPointerIn(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
+		}
+		
+		//S'il n'est pas possible d'afficher l'aide.
+		if(!this.canNotifyHelp)
+		{
+			//On rend son affichage possible après un certain délai.
+			this.canNotifyHelpTimeout = setTimeout(function()
+			{
+				_this.canNotifyHelp = true;
+			}, this.config.timeoutCanNotifyHelp);
+		}
+	}
+}
+
+/*
+ * Fonction appelée lors d'un mouse up en mode d'interaction souris.
+ * Est appelé dans le fichier :
+ * mosaic > fonction loadMosaic, attachée à l'événement jQuery mousemove.
+*/
+Mosaic.prototype.onMouseUp = function()
+{
+	this.isMouseDown = false;
+	
+	//Si on était en train de tracer une courbe.
+	if(this.isSearchByCurvesOn)
+	{
+		//On quitte la zone de recherche.
+		/*this.isUserInSearchZone = false;
+		
+		//On regarde si ce qu'on a tracé correspond à une courbe en particulier.
+		var gesture_match = this.gestureWithSameCode(this.actualCode);
+		this.actualCode = '';
+		
+		//Si oui.
+		if(gesture_match.length > 0)
+		{
+			//Si on est en mode recherche dans une vidéo et que le player est prêt.
+			if(this.currentMode == "SEARCH" && this.playerIsReady)
+			{
+				//On effectue une recherche dans cette vidéo.
+				this.player.widgets[0].searchByGesture(gesture_match);
+				this.isCurrentlyInASearchByGesture = this.player.widgets[0].isCurrentlyInASearchByGesture;
+				
+				//On va au premier marqueur trouvé.
+				if(this.player && this.player.widgets[0] && this.timeToGoAt[this.centerId] === 0 && this.player.widgets[0].atLeastOneSearchMarker(this.currentSearchGesture[this.centerId]))
+				{
+					this.player.widgets[0].goToFirstSearchedMarker(this.currentSearchGesture[this.centerId]);
+				}
+				
+				//On affiche la notification de gesture de recherche.
+				this.removeNotifications();
+				this.currentSearchGesture[this.centerId] = gesture_match;
+				this.searchGesture(gesture_match, 'valid');
+				this.curvesGesturesFound = false;
+			}
+			//Si on est en mode de filtrage de mosaique.
+			else if(this.currentMode == "FILTER")
+			{
+				if(this.isMosaicFiltered)
+				{
+					//On notifie la recherche par filtrage.
+					this.removeNotifications();
+					this.filterSearchedType = gesture_match;
+					this.filterGesture(gesture_match, 'valid');
+					//On filtre la mosaique.
+					this.searchFilter(gesture_match);
+					this.curvesGesturesFound = false;
+				}
+			}
+		}
+		//Si aucune gesture ne matche dans le dictionnaire.
+		else
+		{
+			//Si on était en mode filtrage de la mosaïque et qu'aucune gesture de filtrage n'avait été détectée avant ca, on revient en mode mosaïque.
+			if(this.currentMode == "FILTER" && this.filterSearchedType == "")
+			{
+				this.currentMode = "MOSAIC";
+				this.isMosaicFiltered = false;
+			}
+			//Sinon si on était en mode recherche dans une video et qu'aucune gesture n'avait été détectée avant ca, on revient en mode video.
+			if(this.currentMode == "SEARCH" && this.currentSearchGesture[this.centerId] == "")
+			{
+				this.currentMode = "VIDEO";
+			}
+		}*/
+		//On dit au module de recherche qu'on arrête de tracer des courbes.
+		this.searchCanvas.onPointerOut();
+	}
+	
+	this.mousePosLastX = null;
+	this.mousePosLastY = null;
+	
+	//Si la distance parcourue par la souris entre le mouse down et le mouse up est inférieure ou égale au seuil.
+	if(this.mouseUpDownDelta <= this.config.mouseUpDownDeltaTreshold)
+	{
+		//Si on est sur un snapshot prézoomé.
+		if(this.isOnAPrezoomSN && this.previousZoomedSN != '' && (this.currentMode == 'MOSAIC' || this.currentMode == 'FILTER') && !this.isPrezooming)
+		{
+			this.zoom();
+		}
+	}
+	
+	//On réinitialise le delta, on quitte la recherche par courbes.
+	this.mouseUpDownDelta = 0;
+	this.isSearchByCurvesOn = false;
+	this.leaveSearch();
+	
+	//Si on est en mode de filtrage et qu'on a une gesture de filtrage trouvée.
+	if(this.currentMode == 'FILTER' && this.filterSearchedType != '')
+	{
+		//On notifie.
+		this.removeNotifications();
+		this.filterGesture(this.filterSearchedType, 'valid');
+	}
+}
+
+/*
+ * Fonction appelée lors d'un clic en mode d'interaction souris.
+ * Est appelé dans le fichier :
+ * mosaic > fonction loadMosaic.
+*/
+Mosaic.prototype.onClick = function(x, y)
+{
+	//Si la position de la souris entre le mouse down et le mouse up change de plus de 10px, on part.
+	if(!this.mouseDownPosX || !this.mouseDownPosY || Math.sqrt((this.mouseDownPosX - x) * (this.mouseDownPosX - x) + (this.mouseDownPosY - y) * (this.mouseDownPosY - y)) > 10)
+	{
+		return;
+	}
+	
+	//Si on est dans un mode autre qu'un mode zoomé et qu'on n'affiche pas l'aide, on part.
+	if(this.currentMode != "VIDEO" && this.currentMode != "SEARCH" && this.currentMode != "TIMELINE" && !this.helpDisplayed)
+	{
+		return;
+	}
+	
+	//Si on clique en dehors de la video centrale, alors on dézoome.
+	var TL = $('.Ldt-Timeline');
+	var TLwidth = TL.width(), TLheight = TL.height();
+	var Ptop = $('.LdtPlayer').position().top, Pleft = $('.LdtPlayer').position().left;
+	var Pheight = $('.LdtPlayer').height();
+	var MPx = this.mousePosX, MPy = this.mousePosY;
+	
+	//On regarde si on a cliqué sur un snapshot.
+	var SN = this.pointerPositionToSN(MPx - this.notifyLeftVideo, MPy - this.notifyTopVideo, true);
+	var SNId;
+	if(SN)
+	{
+		SNId = parseInt(SN.attr('id').replace('snapshotDiv-', ''));
+	}
+	
+	//Si on n'a pas demandé à supprimé la notification de gesture.
+	if(!this.gestureDelRequested && !this.helpDisplayed)
+	{
+		//Si non, ou s'il ne fait pas partie des voisins.
+		if(!SNId || !_.include(this.neighboursIds, SNId))
+		{
+			//Si le clic a lieu en dehors du player et que l'aide n'est pas affichée, on dezoom.
+			if(MPx < Pleft || MPx > (+Pleft + TLwidth) || MPy < Ptop || MPy > (+Ptop + Pheight - TLheight))
+			{
+				this.unzoom();
+			}
+		}
+		//Si on se trouve sur un voisin, on bouge.
+		else if(SNId && _.include(this.neighboursIds, SNId) && this.canMoveToNeighbour)
+		{
+			this.moveToNeighbour($('#snapshotDiv-' + SNId));
+		}
+	}
+	//Si on l'a demandé, on enlève la demande de suppression.
+	else
+	{
+		this.gestureDelRequested = false;
+	}
+	
+	//Si l'aide est affichée, un clic la ferme.
+	if(this.helpDisplayed && !this.isHelpIconZoomed && !this.isHelpIconZooming)
+	{
+		this.removeHelp();
+	}
+}
\ No newline at end of file
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/mosaic/js/neighbours.js
--- a/front_idill/src/mosaic/js/neighbours.js	Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/mosaic/js/neighbours.js	Wed Aug 08 18:40:40 2012 +0200
@@ -73,7 +73,7 @@
     
     //Si on est sur une bordure.
     //On crée des voisins supplémentaires.
-    if(_.include(this.neighboursIds, -1))
+    if(_.include(this.neighboursIds, -1) && !this.isTablet)
     {
         this.createAdditionalNeighbours();
     }
@@ -394,9 +394,12 @@
 {
     var _this = this;
     
+	var id = parseInt(id);
+	
     if(this.neighboursIds != null && this.neighboursIds.length > 0 && this.canMoveToNeighbour)
     {
-        var idx = $.inArray(id, this.neighboursIds);
+        var idx = this.neighboursIds.indexOf(id);
+		
         //Si l'id du snapshot qu'on vient de quitter fait partie des voisins.
         if(idx > -1)
         {
@@ -409,7 +412,6 @@
             //On cherche le symétrique de l'id du voisin quitté.
             //Astuce : S'il est pair, cela signifie qu'on doit faire +1, sinon c'est -1.
             //var sym = (idx % 2 == 0) ? (+idx + 1) : (idx - 1);
-            
             //S'il est > -1 alors forcément il existe.
             //Si on peut se déplacer vers un voisin, on le fait.
             if(this.neighboursIds[idx] > -1)
@@ -419,10 +421,20 @@
                 //Si l'id du tableau est pair, alors forcément le pointeur doit être plus à droite/plus en bas que le milieu de l'écran pour se déplacer vers le voisin.
                 //Sinon c'est l'inverse.
                 //(sym et idx on été échangés).
-                if(idx == 0 && x > centerWidth || idx == 2 && y > centerHeight || idx == 1 && x < centerWidth || idx == 3 && y < centerHeight)
-                {
-                    this.moveToNeighbour($('#snapshotDiv-' + this.neighboursIds[idx]));
-                }
+				if(this.isTablet)
+				{
+					if(idx > -1 && idx < 4)
+					{
+						this.moveToNeighbour($('#snapshotDiv-' + this.neighboursIds[idx]));
+					}
+				}
+				else
+				{
+					if(idx == 0 && x > centerWidth || idx == 2 && y > centerHeight || idx == 1 && x < centerWidth || idx == 3 && y < centerHeight)
+					{
+						this.moveToNeighbour($('#snapshotDiv-' + this.neighboursIds[idx]));
+					}
+				}
             }
         }
         else if(id >= this.config.imagesToShow)
@@ -443,7 +455,7 @@
     var _this = this;
     
     //Si on ne peut pas se déplacer vers les voisins, on quitte.
-    if((!this.canMoveToNeighbour || neighbour.length <= 0 || this.currentlyMoving) && !this.autoMove)
+    if((!this.canMoveToNeighbour || neighbour.length <= 0 || this.currentlyMoving || this.currentlyUnzooming) && !this.autoMove)
     {
         return;
     }
@@ -514,7 +526,7 @@
         _this.player.widgets[0].freePlayer();
         _this.playerIsReady = false;
         $('.LdtPlayer').remove();
-        $('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
+        
     }
     
     //On obtient l'ID du div de coloration du snapshot vers lequel on se déplace afin de le supprimer.
@@ -532,6 +544,7 @@
         left: MPCurrentLeft
     }, _this.config.timeMovingToNeighbour, function()
     {
+		$('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
         //On passe en mode recherche et on recherche dans la vidéo en fonction de la gesture de recherche enregistrée dans la nouvelle vidéo.
         if(_this.currentSearchGesture[_this.centerId] != '')
         {
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
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/mosaic/js/pointers.js
--- a/front_idill/src/mosaic/js/pointers.js	Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/mosaic/js/pointers.js	Wed Aug 08 18:40:40 2012 +0200
@@ -805,7 +805,7 @@
         //Si le pointeur est sur la notification.
         if(x > notification_search.position().left && x < (+notification_search.position().left + notification_search.width()) && y > notification_search.position().top && y < (+notification_search.position().top + notification_search.height()))
         {
-            if(!this.alreadyOnNotification && ($('#spinner').length == 0 && !this.config.mouseInteractions || this.config.mouseInteractions))
+            if(!this.alreadyOnNotification && ($('#spinner').length == 0 && !this.config.mouseInteractions || this.config.mouseInteractions) && !this.isTablet)
             {
                 notification_search.css('background-image', currentPicto.replace('/big/' + (this.config.mouseInteractions ? 'MI/' : '') + 'valid/', '/big/' + (this.config.mouseInteractions ? 'MI/' : '') + 'hover/'));
                 
@@ -971,7 +971,91 @@
 	}
 	
 	//Si la souris est sur l'icone, on retourne true.
-	if(x > helpIcon.position().left && x < +helpIcon.position().left + helpIcon.width() && y > helpIcon.position().top && y < +helpIcon.position().top + helpIcon.height() + 2 * parseInt(helpIcon.css('margin')))
+	if(x > helpIcon.position().left && x < +helpIcon.position().left + helpIcon.width() + 2 * parseInt(helpIcon.css('margin-left')) && y > helpIcon.position().top && y < +helpIcon.position().top + helpIcon.height() + 2 * parseInt(helpIcon.css('margin-left')))
+	{
+		return true;
+	}
+	
+	return false;
+}
+
+/*
+ * Retourne vrai si le doigt est sur la notification de sortie dans le mode d'interaction tablettes.
+*/
+Mosaic.prototype.isOnExitIcon = function(x, y)
+{
+	var exitIcon = $('#exitIcon');
+	//S'il n'y a pas d'icone d'aide, on quitte.
+	if(exitIcon.length <= 0)
+	{
+		return;
+	}
+	
+	//Si la souris est sur l'icone, on retourne true.
+	if(x > exitIcon.position().left && x < +exitIcon.position().left + exitIcon.width() + 2 * parseInt(exitIcon.css('margin-left')) && y > exitIcon.position().top && y < +exitIcon.position().top + exitIcon.height() + 2 * parseInt(exitIcon.css('margin-left')))
+	{
+		return true;
+	}
+	
+	return false;
+}
+
+/*
+ * Retourne vrai si le doigt est sur la notification de retour vers la mosaïque dans le mode d'interaction tablettes.
+*/
+Mosaic.prototype.isOnHomeIcon = function(x, y)
+{
+	var homeIcon = $('#homeIcon');
+	//S'il n'y a pas d'icone d'aide, on quitte.
+	if(homeIcon.length <= 0)
+	{
+		return;
+	}
+	
+	//Si la souris est sur l'icone, on retourne true.
+	if(x > homeIcon.position().left && x < +homeIcon.position().left + homeIcon.width() + 2 * parseInt(homeIcon.css('margin-left')) && y > homeIcon.position().top && y < +homeIcon.position().top + homeIcon.height() + 2 * parseInt(homeIcon.css('margin-left')))
+	{
+		return true;
+	}
+	
+	return false;
+}
+
+/*
+ * Retourne vrai si le doigt est sur la notification de sortie de recherche dans le mode d'interaction tablettes.
+*/
+Mosaic.prototype.isOnSearchExitIcon = function(x, y)
+{
+	var searchExitIcon = $('#searchExitIcon');
+	//S'il n'y a pas d'icone d'aide, on quitte.
+	if(searchExitIcon.length <= 0)
+	{
+		return;
+	}
+	
+	//Si la souris est sur l'icone, on retourne true.
+	if(x > searchExitIcon.position().left && x < +searchExitIcon.position().left + searchExitIcon.width() + 2 * parseInt(searchExitIcon.css('margin-left')) && y > searchExitIcon.position().top && y < +searchExitIcon.position().top + searchExitIcon.height() + 2 * parseInt(searchExitIcon.css('margin-left')))
+	{
+		return true;
+	}
+	
+	return false;
+}
+
+/*
+ * Retourne vrai si le doigt est sur la notification de recherche dans le mode d'interaction tablettes.
+*/
+Mosaic.prototype.isOnSearchNotification = function(x, y)
+{
+	var searchNotification = $('#notify_search_1gesture');
+	//S'il n'y a pas d'icone d'aide, on quitte.
+	if(searchNotification.length <= 0)
+	{
+		return;
+	}
+	
+	//Si la souris est sur l'icone, on retourne true.
+	if(x > searchNotification.position().left && x < +searchNotification.position().left + searchNotification.width() + 2 * parseInt(searchNotification.css('margin-left')) && y > searchNotification.position().top && y < +searchNotification.position().top + searchNotification.height() + 2 * parseInt(searchNotification.css('margin-left')))
 	{
 		return true;
 	}
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/mosaic/js/search.js
--- a/front_idill/src/mosaic/js/search.js	Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/mosaic/js/search.js	Wed Aug 08 18:40:40 2012 +0200
@@ -198,7 +198,7 @@
                 }
             }
             
-            var snMargin = parseInt($('.snapshotDivs').css('margin'));
+            var snMargin = parseInt($('.snapshotDivs').css('margin-left'));
             
             //On affiche l'opacité résultante pour chaque vidéo.
             for(var i = 0 ; i < this.config['imagesToShow'] ; i++)
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/mosaic/js/touchInteractions.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/front_idill/src/mosaic/js/touchInteractions.js	Wed Aug 08 18:40:40 2012 +0200
@@ -0,0 +1,316 @@
+/*
+* This file is part of the TraKERS\Front IDILL package.
+*
+* (c) IRI <http://www.iri.centrepompidou.fr/>
+*
+* For the full copyright and license information, please view the LICENSE
+* file that was distributed with this source code.
+*/
+
+/*
+ * Projet : TraKERS
+ * Module : Front IDILL
+ * Fichier : touchInteractions.js
+ * 
+ * Auteur : alexandre.bastien@iri.centrepompidou.fr
+ * 
+ * Fonctionnalités : Définit les fonctions d'intéraction pour tablettes.
+ */
+
+/*
+ * Fonction appelée lors d'un touch start en mode d'interaction touch.
+ * Est appelé dans le fichier :
+ * mosaic > fonction loadMosaic, attachée à l'événement ontouchstart.
+*/
+Mosaic.prototype.onTouchStart = function(e)
+{
+	this.isTouchStart = true;
+	this.isTouchMove = false;
+	
+	//Si on est sur l'icone de sortie.
+	if(this.isOnExitIcon(e.pageX, e.pageY) && this.helpDisplayed)
+	{
+		//On ferme l'aide.
+		this.removeExitIcon();
+		this.removeHelp();
+	}
+	
+	//Si on est sur l'icone de retour à la mosaïque.
+	if(this.isOnHomeIcon(e.pageX, e.pageY) && !this.helpDisplayed)
+	{
+		//On dézoom.
+		this.unzoom();
+	}
+	
+	//Si on se trouve sur l'icone d'aide et qu'elle est zoomée.
+	if(this.isOnHelpIcon(e.pageX, e.pageY) && !this.helpDisplayed)
+	{
+		//On affiche différentes aides en fonction de si on se trouve dans une vidéo ou non.
+		if(this.currentMode == 'SEARCH' || this.currentMode == 'VIDEO' || this.currentMode == 'TIMELINE')
+		{
+			this.notifyHelp(false);
+		}
+		else if(this.currentMode == 'FILTER' || this.currentMode == 'MOSAIC')
+		{
+			this.notifyHelp(true);
+		}
+	}
+	
+	//Si on est dans une vidéo.
+	if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH')
+	{
+		//On regarde si on a touché un snapshot.
+		var snapshot = this.positionToSN(e.pageX - this.notifyLeftVideo, e.pageY - this.notifyTopVideo);
+		
+		if(snapshot && !this.isOnSearchNotification(e.pageX, e.pageY) && !this.isOnSearchExitIcon(e.pageX, e.pageY))
+		{
+			this.canMoveToNeighbour = true;
+			var id = snapshot.attr('id').replace('snapshotDiv-', '');
+			this.correctMoveToNeighbour(id, e.pageX - this.notifyLeftVideo, e.pageY - this.notifyTopVideo);
+			this.canMoveToNeighbour = false;
+		}
+	}
+	
+	//Si on est sur l'icone de sortie de recherche.
+	if(this.isOnSearchExitIcon(e.pageX, e.pageY) && !this.helpDisplayed)
+	{
+		//On ferme l'aide.
+		this.removeSearchExitIcon();
+		
+		this.removeNotifications();
+		if(this.currentMode == 'SEARCH')
+		{
+			this.player.widgets[0].removeSearchByGesture();
+			this.currentMode = 'VIDEO';
+			this.currentSearchGesture[this.centerId] = '';
+		}
+		else if(this.currentMode == 'TIMELINE')
+		{
+			this.player.widgets[0].removeSearchByGesture();
+			this.currentMode = 'TIMELINE';
+			this.currentSearchGesture[this.centerId] = '';
+		}
+		else if(this.currentMode == 'FILTER')
+		{
+			this.removeFilter();
+		}
+		
+		this.alreadyOnNotification = false;
+		this.isCurrentlyInASearchByGesture = false;
+		this.curvesGesturesFound = false;
+		this.canDrawNextCurve = false;
+		this.isSearchByCurvesOn = false;
+		this.canNotifyHelp = false;
+	}
+	
+	//On met à jour les coordonnées de la souris au dernier mouse down.
+	this.mouseDownPosX = e.pageX;
+	this.mouseDownPosY = e.pageY;
+	this.mousePosX = e.pageX;
+	this.mousePosY = e.pageY;
+	
+	this.isUserInSearchZone = true;
+	
+	//Si on est en mode de tracé de courbes, on indique qu'on a commencé à tracer au canvas.
+	if(this.isSearchByCurvesOn)
+	{
+		this.searchCanvas.onPointerIn(this.mousePosX, this.mousePosY, null, null);
+	}
+}
+
+/*
+ * Fonction appelée lors d'un touch move en mode d'interaction touch.
+ * Est appelé dans le fichier :
+ * mosaic > fonction loadMosaic, attachée à l'événement jQuery ontouchmove.
+*/
+Mosaic.prototype.onTouchMove = function(e)
+{
+	//Si on n'a pas appuyé sur la souris avant, on part.
+	if(!this.isTouchStart)
+	{
+		return;
+	}
+	
+	var _this = this;
+	
+	//Si on est en mode de tracé de courbes, on met à jour la courbe.
+	if(this.isSearchByCurvesOn)
+	{
+		this.searchCanvas.onPointerMove(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
+	}
+	
+	//On met à jour l'ancienne position du doigt si elle est nulle.
+	if(!this.mousePosLastX && this.mousePosLastX != 0)
+	{
+		this.mousePosLastX = this.mousePosX;
+	}
+	if(!this.mousePosLastY && this.mousePosLastY != 0)
+	{
+		this.mousePosLastY = this.mousePosY;
+	}
+	
+	//Le delta s'accroît si le doigt bouge.
+	this.touchUpDownDelta += Math.floor(Math.sqrt((this.mousePosLastX - e.pageX) * (this.mousePosLastX - e.pageX) + (this.mousePosLastY - e.pageY) * (this.mousePosLastY - e.pageY)));
+	
+	//On met à jour l'ancienne position du doigt.
+	if(this.mousePosLastX != this.mousePosX)
+	{
+		this.mousePosLastX = this.mousePosX;
+	}
+	if(this.mousePosLastY != this.mousePosY)
+	{
+		this.mousePosLastY = this.mousePosY;
+	}
+	
+	//Si le doigt a parcouru une trop grande distance, on entre en recherche.
+	if(this.touchUpDownDelta > this.config.touchUpDownDeltaTreshold)
+	{
+		this.isTouchMove = true;
+		//Si on est en mosaique, on entre en filtrage.
+		if(this.currentMode == "MOSAIC")
+		{
+			this.currentMode = "FILTER";
+			this.isMosaicFiltered = true;
+		}
+		//Si on est dans une vidéo, on entre en recherche.
+		else if(this.currentMode == "VIDEO" || this.currentMode == "TIMELINE")
+		{
+			this.currentMode = "SEARCH";
+		}
+		
+		if(!this.isSearchByCurvesOn)
+		{
+			this.isSearchByCurvesOn = true;
+			this.startSearch();
+			this.searchCanvas.onPointerIn(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
+		}
+	}
+}
+
+/*
+ * Fonction appelée lors d'un touch end en mode d'interaction touch.
+ * Est appelé dans le fichier :
+ * mosaic > fonction loadMosaic, attachée à l'événement jQuery ontouchend.
+*/
+Mosaic.prototype.onTouchEnd = function(e)
+{
+	// alert(this.mousePosX + ' ' + this.mousePosY);
+	//Si on est dans la mosaïque.
+	if(this.currentMode == 'MOSAIC' || this.currentMode == 'FILTER')
+	{
+		//On regarde si on a touché un snapshot.
+		var snapshot = this.positionToSN(this.mousePosX, this.mousePosY);
+		// alert(snapshot);
+		// alert(this.isTouchMove);
+		if(snapshot && !this.isTouchMove)
+		{
+			this.previousZoomedSN = snapshot;
+			this.previousId = snapshot.attr('id');
+			this.zoom();
+		}
+	}
+	//Sinon si on est dans une video.
+	else if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH' || this.currentMode == 'TIMELINE')
+	{
+		// console.log(this.isTLSelected(true, null));
+	}
+	
+	this.isTouchStart = false;
+	
+	//Si on était en train de tracer une courbe.
+	if(this.isSearchByCurvesOn)
+	{
+		//On dit au module de recherche qu'on arrête de tracer des courbes.
+		this.searchCanvas.onPointerOut();
+	}
+	
+	this.mousePosLastX = null;
+	this.mousePosLastY = null;
+	
+	//Si la distance parcourue par la souris entre le mouse down et le mouse up est inférieure ou égale au seuil.
+	if(this.touchUpDownDelta <= this.config.touchUpDownDeltaTreshold)
+	{
+		//Si on est sur un snapshot prézoomé.
+		if(this.isOnAPrezoomSN && this.previousZoomedSN != '' && (this.currentMode == 'MOSAIC' || this.currentMode == 'FILTER') && !this.isPrezooming)
+		{
+			this.zoom();
+		}
+	}
+	
+	//On réinitialise le delta, on quitte la recherche par courbes.
+	this.touchUpDownDelta = 0;
+	this.isSearchByCurvesOn = false;
+	this.leaveSearch();
+	
+	//Si on est en mode de filtrage et qu'on a une gesture de filtrage trouvée.
+	if(this.currentMode == 'FILTER' && this.filterSearchedType != '')
+	{
+		//On notifie.
+		this.removeNotifications();
+		this.filterGesture(this.filterSearchedType, 'valid');
+	}
+	this.isTouchMove = false;
+}
+
+/*
+ * Donne éventuellement un snapshot d'après les coordonnées passées en paramètres.
+ * Renvoie null sinon.
+*/
+Mosaic.prototype.positionToSN = function(x, y)
+{
+    if(this.helpDisplayed)
+    {
+        return;
+    }
+    
+    //Taille de la marge des snapshots.
+    var m = parseInt($('.snapshotDivs').css('margin-left'));
+    
+    //Dimensions d'un snapshot de la mosaïque.
+    var W = $('.snapshotDivs').width() + m * 2, H = $('.snapshotDivs').height() + m * 2;
+    
+    //Position supposée du snapshot dans la mosaïque.
+    //Au départ on ne sélectionne rien.
+    var i = -1, j = -1;
+    
+    //Espace de centrage vertical de la mosaïque.
+    var top_margin = parseInt(this.MPTop_margin);
+    //Dimensions de la mosaïque en nombre de snapshots.
+    var mosW = this.config.imagesByLine, mosH = this.config.imagesToShow / mosW;
+    
+    //Si le pointeur se trouve au niveau de la mosaïque.
+    if(x < W * mosW && y >= top_margin && y < H * mosH + top_margin)
+    {
+        //Si le pointeur est sur une des bordures.
+        var xb = x % W;
+        var yb = y - top_margin;
+        yb %= H;
+        
+        if(xb < m || xb > W - m || yb < m || yb > H - m)
+        {
+            //On renvoie null.
+            return null;
+        }
+        //Sinon il est forcément sur un des snapshots.
+        else
+        {
+            i = Math.floor(x / W);
+            j = Math.floor((y - top_margin) / H);
+        }
+        
+        //On passe des coordonnées 2D en 1D.
+        var snapshot = $('#snapshotDiv-' + (j * mosW + i));
+        
+        //Si le snapshot a été filtré, on renvoie null si on se trouve dans la mosaïque.
+        if(this.isMosaicFiltered && (this.currentMode == "MOSAIC" || this.currentMode == "FILTER") && snapshot.css('opacity') == 0)
+        {
+            return null;
+        }
+        
+        //On renvoie le snapshot.
+        return snapshot;
+    }
+    
+    //Si on est arrivé là, c'est que le pointeur n'est pas dans la mosaïque.
+    return null;
+}
\ No newline at end of file
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/mosaic/js/zoomInteractions.js
--- a/front_idill/src/mosaic/js/zoomInteractions.js	Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/mosaic/js/zoomInteractions.js	Wed Aug 08 18:40:40 2012 +0200
@@ -273,7 +273,7 @@
     var _this = this;
     
     //Si la mosaïque est en pleine écran, pas la peine de zoomer.
-    if(this.currentMode == "VIDEO" || this.currentMode == "SEARCH" || this.currentMode.indexOf("INCOMING") > -1 || this.helpDisplayed)
+    if(this.currentMode == "VIDEO" || this.currentMode == "SEARCH" || this.currentMode.indexOf("INCOMING") > -1 || this.helpDisplayed || this.isMosaicFiltering)
     {
         return;
     }
@@ -349,6 +349,12 @@
 			_this.helpIcon();
 		}
 		
+		//Si on est sur une tablette, on affiche l'icone de retour.
+		if(_this.isTablet)
+		{
+			_this.homeIcon();
+		}
+		
         _this.snTop = (zoomedImg.position().top + newZoomTop + _this.MPTop_margin), _this.snLeft = (zoomedImg.position().left + newZoomLeft);
         _this.snWidth = newSnWidth + 1, _this.snHeight = newSnHeight + 1;
         
@@ -407,6 +413,12 @@
 	{
 		this.removeHelpIcon();
 	}
+	
+	//Si on est sur une tablette, on enlève l'icone de retour.
+	if(this.isTablet)
+	{
+		this.removeHomeIcon();
+	}
     
     //Il n'est plus possible de swiper.
     this.canSwipe = false;
@@ -440,7 +452,7 @@
     zoomedImg.attr('src', src.replace('snapshots/', 'snapshots-little/'));
     
     //On libère le player.
-    if(_this.player.widgets && _this.player.widgets[0])
+    if(_this.player && _this.player.widgets && _this.player.widgets[0])
     {
         _this.timeToGoAt[_this.centerId] = Math.floor(_this.player.popcorn.currentTime());
         _this.player.widgets[0].freePlayer();
@@ -507,7 +519,7 @@
         left: '0px'
     }, this.config.unzoomTime, function()
     {
-		//Si on est en mode d'interaction souris, on affiche la bordure d'aide.
+		//Si on est en mode d'interaction souris, on affiche l'icone d'aide.
 		if(_this.config.mouseInteractions)
 		{
 			_this.helpIcon();
@@ -536,6 +548,13 @@
                 _this.removeNotifications();
                 _this.mosaicSelectionAndSearch();
             }
+			//Sinon on met la gesture en cours.
+			else if(_this.currentMode == 'FILTER' && _this.filterSearchedType != '')
+			{
+				//On notifie.
+				_this.removeNotifications();
+				_this.filterGesture(_this.filterSearchedType, 'valid');
+			}
         }
         
         //On indique qu'on est plus en dezoom.
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/player/metadataplayer/Timeline.js
--- a/front_idill/src/player/metadataplayer/Timeline.js	Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/player/metadataplayer/Timeline.js	Wed Aug 08 18:40:40 2012 +0200
@@ -49,7 +49,7 @@
     
     //Gestures et noms par défaut.
     this.gestures = ["fall", "jump", "circle", "screw", "bend", "arc", "knee-up", "right-angle", "wave", "no-motion", "contact", "up-down"];
-    this.gesturesText = ["chute", "saut", "rotation", "rotation de groupe", "inclinaison", "port de bras", "levé de genou", "angle droit", "ondulation", "immobilité", "contact", "de haut en bas"];
+    this.gesturesText = ["chute", "saut", "rotation", "rotation de groupe", "inclinaison", "port de bras", "levé de genou", "angle droit", "ondulation", "immobilité", "contact", "de haut en bas", "grand-jeté"];
     
 	var _this = this;
     this.annotations = this.source.getAnnotations().filter(function(annotation)
@@ -170,6 +170,7 @@
  * Starts playing the video when it's ready.
 */
 IriSP.Widgets.Timeline.prototype.ready = function() {
+	// alert('rdy');
     this.player.popcorn.play();
     this.player.popcorn.mute();
     this.processMarkers();
diff -r eae52b187e29 -r 205409da0f32 front_idill/src/search/js/searchCanvas.js
--- a/front_idill/src/search/js/searchCanvas.js	Thu Aug 02 11:54:08 2012 +0200
+++ b/front_idill/src/search/js/searchCanvas.js	Wed Aug 08 18:40:40 2012 +0200
@@ -107,6 +107,11 @@
     {
         $('.canvas').remove();
     });
+	
+	if(this.mosaic.isTablet)
+	{
+		this.mosaic.isTouchStart = false;
+	}
 };
 
 /*