# HG changeset patch
# User bastiena
# Date 1341497073 -7200
# Node ID 0e29ae4568a0cd4057e113d531ef29323a3c8ae1
# Parent  8393d3473b983a76fb63693fd02fe2501b93e010
Front IDILL:

Segment detector created for mouse interactions curves detection

diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/config.json
--- a/front_idill/src/config.json	Fri Jun 29 16:16:24 2012 +0200
+++ b/front_idill/src/config.json	Thu Jul 05 16:04:33 2012 +0200
@@ -33,5 +33,7 @@
 	"prezoomPercentage":"0.25",
 	"zoomedMargin":"42",
 	"host":"127.0.0.1",
-	"port":"8090"
+	"port":"8090",
+	"mouseUpDownDeltaTreshold":"15",
+	"dico":"./dico.json"
 }
\ No newline at end of file
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/dico.json
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/front_idill/src/dico.json	Thu Jul 05 16:04:33 2012 +0200
@@ -0,0 +1,30 @@
+{
+	"divisions":"6",
+	"gestures":
+	[
+		{
+			"name":"contact",
+			"codes":["D1D0D1", "D1D0D2"]
+		},
+		{
+			"name":"right-angle",
+			"codes":["D1D0D1D3D1", "D1D0D1D2D1"]
+		},
+		{
+			"name":"up-down",
+			"codes":["D0D1", "D0D2"]
+		},
+		{
+			"name":"fall",
+			"codes":["D3"]
+		},
+		{
+			"name":"jump",
+			"codes":["D0"]
+		},
+		{
+			"name":"grand-jete",
+			"codes":["D1D0", "D2D0"]
+		}
+	]
+}
\ No newline at end of file
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/img/cursors/down_blue.png
Binary file front_idill/src/img/cursors/down_blue.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/img/cursors/down_gray.png
Binary file front_idill/src/img/cursors/down_gray.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/img/pointer.png
Binary file front_idill/src/img/pointer.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/img/pointer2.png
Binary file front_idill/src/img/pointer2.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/index.html
--- a/front_idill/src/index.html	Fri Jun 29 16:16:24 2012 +0200
+++ b/front_idill/src/index.html	Thu Jul 05 16:04:33 2012 +0200
@@ -31,6 +31,7 @@
         <script type="text/javascript" src="../lib/underscore-min.js"></script>
         <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="./mosaic/js/mosaic.js"></script>
         <script type="text/javascript" src="./mosaic/js/notifications.js"></script>
         <script type="text/javascript" src="./mosaic/js/pointers.js"></script>
@@ -43,6 +44,7 @@
 		<script type="text/javascript" src="../lib/paper.js"></script>
 		<link rel="stylesheet" type="text/css" href="./search/css/searchCanvas.css" />
 		<script type="text/javascript" src="./search/js/searchCanvas.js"></script>
+		<script type="text/javascript" src="./search/js/curvesDetector.js"></script>
 		<script type="text/javascript" src="./communication/js/client.js"></script>
     </head>
     
@@ -95,6 +97,8 @@
 			default_parameters['zoomedMargin'] = 42;
 			default_parameters['host'] = '127.0.0.1';
 			default_parameters['port'] = '80';
+			default_parameters['mouseUpDownDeltaTreshold'] = 15;
+			default_parameters['dico'] = './dico.json';
 			
             /*var length = 5, imagesToShow = 20, totalImages = 23;
             //Temps de chargement du prezoom en ms (seront importés des paramètres du Middleware).
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/mosaic/css/mosaic.less
--- a/front_idill/src/mosaic/css/mosaic.less	Fri Jun 29 16:16:24 2012 +0200
+++ b/front_idill/src/mosaic/css/mosaic.less	Thu Jul 05 16:04:33 2012 +0200
@@ -71,6 +71,18 @@
 }
 
 /*
+ * C'est un div invisible qui s'étale sur l'écran afin d'empêcher l'utilisateur de faire des drag & drop sur les images ou de la sélection de texte.
+*/
+#ghostPanel
+{
+	position: absolute;
+	opacity: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1000;
+}
+
+/*
  * Les divs contenant les snapshots (ou les "voisins" aussi en cas de zoom total). Ils se positionnent par défaut de gauche à droite, à l'horizontale et wrap dès
  * qu'ils ont atteint la bordure de fenêtre de droite.
  */
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/mosaic/js/mosaic.js
--- a/front_idill/src/mosaic/js/mosaic.js	Fri Jun 29 16:16:24 2012 +0200
+++ b/front_idill/src/mosaic/js/mosaic.js	Thu Jul 05 16:04:33 2012 +0200
@@ -25,11 +25,11 @@
 function mosaic(config, default_conf)
 {
 	//Interactions souris/kinect.
-	this.mouseInteractions = false;
+	this.mouseInteractions = true;
 	//Interactions avec/sans préphase.
 	this.prephaseEnabled = true;
 	
-	this.gestures = ["fall", "jump", "circle", "screw", "bend", "arc", "pendulum", "knee-up", "right-angle", "wave", "slow", "hello", "no-motion", "wheel", "contact", "run"];
+	this.gestures = ["fall", "jump", "circle", "screw", "bend", "arc", "pendulum", "knee-up", "right-angle", "wave", "slow", "hello", "no-motion", "wheel", "contact", "run", "up-down", "grand-jete"];
 
 	//Chemin du fichier de configuration.
 	this.config_path = config;
@@ -47,6 +47,9 @@
 	this.fillingIds = [];
 	this.currentRandomVideoIdx = 0;
 	
+	//Dictionnaire pour les courbes de recherche.
+	this.dictionary = [];
+	
 	//Dernières positions des pointeurs.
 	this.mainPointerLastX;
 	this.mainPointerLastY;
@@ -58,6 +61,15 @@
 	this.secondPointerIdleStartX;
 	this.secondPointerIdleStartY;
 	
+	//Coordonnées de la souris dans le mode d'interaction souris.
+	this.mousePosX;
+	this.mousePosY;
+	//Coordonnées précédentes de la souris dans le mode d'interaction souris.
+	this.mousePosLastX;
+	this.mousePosLastY;
+	//Valeur du déplacement entre un mouse up et un mouse down.
+	this.mouseUpDownDelta = 0;
+	
 	//Dimensions de la mosaïque en pixels.
 	this.width;
 	this.height;
@@ -68,95 +80,103 @@
 	this.marginWidth;
 	
 	//Booléens permettant ou non certaines intéractions selon le contexte.
-	this.zoomed;
-	this.fullscreen;
-	this.canMoveToNeighbour;
-	this.mainPointerExitBorder;
-	this.secondPointerExitBorder;
-	this.isMainPointerDisplayed;
-	this.isSecondPointerDisplayed;
-	this.helpDisplayed;
+	this.zoomed = false;
+	this.fullscreen = false;
+	this.canMoveToNeighbour = false;
+	this.mainPointerExitBorder = false;
+	this.secondPointerExitBorder = false;
+	this.isMainPointerDisplayed = false;
+	this.isSecondPointerDisplayed = false;
+	this.helpDisplayed = false;
 	//Indique si l'utilisateur a manuellement pausé la vidéo.
-	this.userPaused;
+	this.userPaused = false;
 	//Indique si on est en train de se déplacer vers un voisin.
-	this.currentlyMoving;
+	this.currentlyMoving = false;
 	//Indique si on est en train de dézoomer vers la mosaïque.
-	this.currentlyUnzooming;
+	this.currentlyUnzooming = false;
 	//Indique si on peut s'approcher de kinect.
-	this.canStart;
+	this.canStart = false;
 	//Indique si on est actuellement sur un snapshot.
-	this.isOnASnapshot;
+	this.isOnASnapshot = false;
 	//Indique si l'idle des pointeurs est disponible (deux mains détectées).
-	this.pointersIdleAvailable;
+	this.pointersIdleAvailable = false;
 	//Indique si le timeout pour l'idle des pointeurs à besoin d'être lancé.
-	this.pointersIdleNeedLaunch;
+	this.pointersIdleNeedLaunch = false;
 	//Indique si les deux mains sont là.
-	this.areBothPointersHere;
+	this.areBothPointersHere = false;
 	//Indique si le timeout pour la détection de deux pointeurs a été lancé.
-	this.areBothPointersTimeoutLaunched;
+	this.areBothPointersTimeoutLaunched = false;
 	//Indique si la mosaïque a été filtrée.
-	this.isMosaicFiltered;
+	this.isMosaicFiltered = false;
 	//Indique si on est actuellement dans une recherche par gesture.
-	this.isCurrentlyInASearchByGesture;
+	this.isCurrentlyInASearchByGesture = false;
 	//Indique si un pointeur est déjà sur une notification de recherche par gesture.
-	this.alreadyOnNotification;
+	this.alreadyOnNotification = false;
 	//Si on a fait un swipe.
-	this.isSwipe;
+	this.isSwipe = false;
 	//On peut swiper.
-	this.canSwipe;
+	this.canSwipe = false;
 	//On passe vers une autre video automatiquement à la fin d'une lecture.
-	this.autoMove;
+	this.autoMove = false;
 	//Si l'utilisateur a demandé à sélectionner la TL.
-	this.isTLRequested;
+	this.isTLRequested = false;
 	//Le pointeur gauche a sélectionné la TL.
-	this.isTLSelectedBySecondPointer;
+	this.isTLSelectedBySecondPointer = false;
 	//Le pointeur droit a sélectionné la TL.
-	this.isTLSelectedByMainPointer;
+	this.isTLSelectedByMainPointer = false;
 	//On peut afficher l'aide.
-	this.canNotifyHelp;
+	this.canNotifyHelp = false;
 	//Indique si la mosaique est en train d'être filtrée.
-	this.isMosaicFiltering;
+	this.isMosaicFiltering = false;
 	this.arrowLeftLoading = false;
 	this.arrowRightLoading = false;
 	this.arrowUpLoading = false;
 	this.arrowDownLoading = false;
 	//On est dans une recherche par courbes.
-	this.isSearchByCurvesOn;
+	this.isSearchByCurvesOn = false;
 	this.canDrawNextCurve = false;
+	//Dans le mode d'interaction souris, indique si on se situe actuellement sur un snapshot entièrement prézoomé.
+	this.isOnAPrezoomSN = false;
+	//Indique si une courbe de recherche donne au moins un résultat.
+	this.curvesGesturesFound = false;
+	//Indique si on souhaite supprimer la recherche en cours.
+	this.gestureDelRequested = false;
+	//Code de gesture actuellement calculé par les détecteurs de courbes.
+	this.actualCode = '';
 	
 	//Timeout (attente) pour le zoom après un préZoom.
-	this.zoomTimeout;
+	this.zoomTimeout = null;
 	//Timeout (attente) pour le passage vers un voisin.
-	this.moveToNeighbourTimeout;
-	this.mainPointerExitBorderTimeout;
-	this.secondPointerExitBorderTimeout;
+	this.moveToNeighbourTimeout = null;
+	this.mainPointerExitBorderTimeout = null;
+	this.secondPointerExitBorderTimeout = null;
 	//Idle time pour les pointeurs afin d'informer le front qu'on souhaite faire une recherche.
-	this.pointersSearchIdleTimeout;
+	this.pointersSearchIdleTimeout = null;
 	//Vérifie toutes les N ms que les deux pointeurs sont détectés.
-	this.areBothPointersHereTimeout;
+	this.areBothPointersHereTimeout = null;
 	//Délai de suppression d'une notification de recherche par gesture.
-	this.removeNotificationByGestureTimeout;
+	this.removeNotificationByGestureTimeout = null;
 	//Délai de suppression d'une notification de recherche par gesture infructueuse.
-	this.removeFailedNotificationByGestureTimeout;
+	this.removeFailedNotificationByGestureTimeout = null;
 	//Délai avant la suppression de notification swipe.
-	this.notifySwipeTimeout;
+	this.notifySwipeTimeout = null;
 	//Délai pour la sélection de la TL.
-	this.selectTLTimeout;
+	this.selectTLTimeout = null;
 	//Délai pour slider sur la TL.
-	this.canSlideInTLTimeout;
+	this.canSlideInTLTimeout = null;
 	//Délai pour afficher l'aide.
-	this.canNotifyHelpTimeout;
-	this.arrowLeftTimeout;
-	this.arrowRightTimeout;
-	this.arrowUpTimeout;
-	this.arrowDownTimeout;
+	this.canNotifyHelpTimeout = null;
+	this.arrowLeftTimeout = null;
+	this.arrowRightTimeout = null;
+	this.arrowUpTimeout = null;
+	this.arrowDownTimeout = null;
 	
-	this.arrowSpinnerTimeout;
-	this.nouserTimeout;
-	this.nextDrawCurveTimeout;
+	this.arrowSpinnerTimeout = null;
+	this.nouserTimeout = null;
+	this.nextDrawCurveTimeout = null;
 	
 	//Dernier message INCOMING (pour éviter d'effectuer n fois la même action.
-	this.lastIncomingMessage;
+	this.lastIncomingMessage = '';
 	
 	//Type de marqueur recherché dans la mosaïque (en mode filter).
 	this.filterSearchedType = "";
@@ -165,8 +185,10 @@
 	this.currentMode = "NO-USER";
 	//Snapshot sur lequel on a zoomé.
 	this.previousZoomedSN = null;
+	//Snapshot sur lequel on a prezoomé.
+	this.previousPrezoomDiv = null;
 	//Son ID.
-	this.previousId;
+	this.previousId = null;
 	//Dernier snapshot prézoomé non null.
 	this.lastNonNullSN = null;
 	//Largeur de la marge pour le centrage vertical de la mosaïque.
@@ -174,8 +196,8 @@
 	this.top_margin;
 	
 	//Gesture actuellement cherchée.
-	this.currentSearchGesture;
-
+	this.currentSearchGesture = '';
+	
 	//Mosaïque locale.
 	this.localMos;
 	//Position des voisins lors d'un zoom.
@@ -191,9 +213,9 @@
 	this.snapshotsToShow = 1;
 	
 	//Lecteur.
-	this.player;
+	this.player = null;
 	//Si le lecteur est prêt.
-	this.playerIsReady;
+	this.playerIsReady = false;
 	
 	//Annotations (pour les marqueurs los d'un filtrage).
 	this.annotations = [];
@@ -240,34 +262,6 @@
 	//S'il s'agit d'un rectangle.
     if(imgs % len == 0)
     {
-		this.previousZoomedSN = null;
-		this.previousPrezoomDiv = null;
-		this.fullscreen = false;
-		this.canMoveToNeighbour = false;
-		this.currentlyZooming = false;
-		this.currentlyUnzooming = false;
-		this.helpDisplayed = false;
-		this.canStart = false;
-		this.isOnASnapshot = false;
-		this.isMosaicFiltered = false;
-		this.areBothPointersHere = false;
-		this.areBothPointersTimeoutLaunched = false;
-		this.isCurrentlyInASearchByGesture = false;
-		this.alreadyOnNotification = false;
-		this.playerIsReady = false;
-		this.currentSearchGesture = '';
-		this.isMainPointerDisplayed = false;
-		this.isSecondPointerDisplayed = false;
-		this.isSwipe = false;
-		this.canSwipe = false;
-		this.autoMove = false;
-		this.isTLRequested = false;
-		this.isTLSelectedByMainPointer = false;
-		this.isTLSelectedBySecondPointer = false;
-		this.canNotifyHelp = false;
-		this.isMosaicFiltering = false;
-		this.isSearchByCurvesOn = false;
-		
 		this.lastIncomingMessage = 'INCOMING-0';
 		
 		var str = '';
@@ -281,7 +275,7 @@
 			}
 		}
 		
-		return str;
+		return str + '<div id="ghostPanel"></div>';
 	}
 	else
 	{
@@ -307,6 +301,7 @@
     //On affecte les chemins vers les images à la mosaïque.
     this.previousZoomedSN;
     //this.width = 
+	// console.log(createMosaic);
     //On met à jour la mosaïque.
     $('#mainPanel').html(createMosaic);
     //On récupère la taille des bordures.
@@ -326,7 +321,6 @@
 	
 	//On fait coincider le background du body avec celui de la mosaïque.
 	$('body').css('background-position', '0px ' + this.MPTop_margin + 'px');
-	console.log(this.MPTop_margin);
 	
 	/*$('.snapshotDivs').mouseover(function ()
 	{
@@ -374,12 +368,15 @@
 				//Si on gère les interactions à la souris.
 				if(_this.mouseInteractions)
 				{
-					$('body').mousemove(function(e){_this.refreshMainPointer(e.pageX, e.pageY, _this)});
+					$('body').mousemove(function(e)
+					{
+						_this.refreshMainPointer(e.pageX, e.pageY, _this);
+						_this.mousePosX = e.pageX;
+						_this.mousePosY = e.pageY;
+					});
 				}
 				
-				// if(false)
-				// {
-				if(_this.prephaseEnabled)
+				if(_this.prephaseEnabled && !_this.mouseInteractions)
 				{
 					_this.init();
 					_this.showNImages(0);
@@ -390,7 +387,6 @@
 					_this.showNImages(20);
 					_this.currentMode = "MOSAIC";
 				}
-				// }
 				
 				// /!\ //
 				// _this.currentMode = "FILTER";
@@ -408,6 +404,197 @@
 			}
 		});
 	}
+	
+	if(this.mouseInteractions)
+	{
+		//On bind le clic pour supprimer une recherche.
+		$('body').click(function(e)
+		{
+			_this.removeSearchNotificationIfOnIt(e.pageX, e.pageY);
+		});
+		
+		//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 ()
+		{
+			if(_this.isSearchByCurvesOn)
+			{
+				_this.searchCanvas.onPointerIn(_this.mousePosX, _this.mousePosY, null, null);
+			}
+			
+			console.log('mdown');
+			//On écoute le déplacement de la souris.
+			$(window).mousemove(function(e)
+			{
+				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)));
+				
+				// console.log(_this.mouseUpDownDelta, _this.mousePosLastX, e.pageX);
+				
+				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;
+						
+						console.log(_this.date() + ' - ENTRE EN MODE FILTRAGE');
+						
+						_this.isSearchByCurvesOn = true;
+						_this.startSearch();
+						
+						if(!_this.curvesGesturesFound)
+						{
+							$('.notifications').remove();
+							_this.filterSearch();
+						}
+						
+						_this.searchCanvas.onPointerIn(_this.mousePosX, _this.mousePosY - _this.MPTop_margin, null, null);
+					}
+					else if(_this.currentMode == "FILTER" && !_this.isSearchByCurvesOn)
+					{
+						console.log('after search');
+						_this.preUnzoom();
+						_this.isSearchByCurvesOn = true;
+						_this.startSearch();
+						_this.searchCanvas.onPointerIn(_this.mousePosX, _this.mousePosY - _this.MPTop_margin, null, null);
+					}
+					//Si on est dans une vidéo, on entre en recherche.
+					else if(_this.currentMode == "VIDEO" || _this.currentMode == "TIMELINE")
+					{
+						_this.currentMode = "SEARCH";
+						
+						console.log(_this.date() + ' - ENTRE EN MODE RECHERCHE');
+						
+						_this.isSearchByCurvesOn = true;
+						_this.startSearch();
+						
+						if(!_this.curvesGesturesFound)
+						{
+							$('.notifications').remove();
+							_this.searchSearch();
+						}
+						
+						_this.searchCanvas.onPointerIn(_this.mousePosX, _this.mousePosY - _this.MPTop_margin, null, null);
+					}
+					else if(_this.currentMode == "SEARCH" && !_this.isSearchByCurvesOn)
+					{
+						_this.isSearchByCurvesOn = true;
+						_this.startSearch();
+						_this.searchCanvas.onPointerIn(_this.mousePosX, _this.mousePosY - _this.MPTop_margin, null, null);
+					}
+					
+					//Il est possible d'afficher l'aide.
+					if(!_this.canNotifyHelp)
+					{
+						_this.canNotifyHelpTimeout = setTimeout(function()
+						{
+							_this.canNotifyHelp = true;
+						}, _this.config['timeoutCanNotifyHelp']);
+					}
+				}
+			});
+			
+			//Si on fait un mouse up après ce mouse down.
+			$(window).mouseup(function()
+			{
+				console.log('mup');
+				
+				if(_this.isSearchByCurvesOn)
+				{
+					var gesture_match = _this.gestureWithSameCode(_this.actualCode);
+					_this.actualCode = '';
+					
+					if(gesture_match.length > 0)
+					{
+						if(_this.currentMode == "SEARCH" && _this.playerIsReady)
+						{
+							_this.player.widgets[0].searchByGesture(gesture_match);
+							_this.isCurrentlyInASearchByGesture = _this.player.widgets[0].isCurrentlyInASearchByGesture;
+							
+							$('.notifications').remove();
+							_this.searchGesture(gesture_match, 'valid');
+							_this.curvesGesturesFound = false;
+						}
+						else if(_this.currentMode == "FILTER")
+						{
+							if(_this.isMosaicFiltered)
+							{
+								$('.notifications').remove();
+								_this.filterSearchedType = gesture_match;
+								_this.filterGesture(gesture_match, 'valid');
+								_this.searchFilter(gesture_match);
+								_this.curvesGesturesFound = false;
+							}
+						}
+					}
+					
+					_this.searchCanvas.onPointerOut();
+				}
+				
+				//On unbind ce qui a été bindé après le mouse up.
+				$(window).unbind('mousemove');
+				$(window).unbind('mouseup');
+				//On rebind le mousemove principal du body, car ils ont tous été unbindés.
+				$('body').mousemove(function(e)
+				{
+					_this.refreshMainPointer(e.pageX, e.pageY, _this);
+					_this.mousePosX = e.pageX;
+					_this.mousePosY = e.pageY;
+				});
+				
+				_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.zoom();
+					}
+				}
+				
+				_this.mouseUpDownDelta = 0;
+				_this.isSearchByCurvesOn = false;
+				_this.leaveSearch();
+				
+				if(_this.currentMode == 'FILTER' && _this.filterSearchedType != '')//if(_this.currentSearchGesture != '')
+				{
+					$('.notifications').remove();
+					_this.filterGesture(_this.currentSearchGesture, 'valid');
+				}
+				
+			});
+		});
+	}
 }
 
 /*
@@ -417,7 +604,7 @@
 {
 	var _this = this;
 	
-	var supposedToBeInt = ['length', 'imagesToShow', 'totalImages', 'timePrezoom', 'timePreUnzoom', 'timeZoom', 'zoomTime', 'timeUnzoom', 'timeNeighbourGlowing', 'timeNeighbourUnglowing', 'timeMovingToNeighbour', 'timeSearchFade', 'timeNotifyFade', 'timeFilterFade', 'timeANFade', 'timeFilling', 'zoomedMargin', 'timeoutZoom', 'timeoutUnzoom', 'timeoutMoveToNeighbour', 'timeoutPointersIdle', 'timeoutAreBothPointersHere', 'timeoutRemoveNotificationByGesture', 'timeoutRemoveFailedNotificationByGesture', 'timeoutNotifySwipe', 'timeoutSelectTL', 'timeoutSlideTL', 'timeoutCanNotifyHelp', 'timeoutRemoveSpinner', 'timeoutNouser', 'timeoutNextDrawCurve'];
+	var supposedToBeInt = ['length', 'imagesToShow', 'totalImages', 'timePrezoom', 'timePreUnzoom', 'timeZoom', 'zoomTime', 'timeUnzoom', 'timeNeighbourGlowing', 'timeNeighbourUnglowing', 'timeMovingToNeighbour', 'timeSearchFade', 'timeNotifyFade', 'timeFilterFade', 'timeANFade', 'timeFilling', 'zoomedMargin', 'timeoutZoom', 'timeoutUnzoom', 'timeoutMoveToNeighbour', 'timeoutPointersIdle', 'timeoutAreBothPointersHere', 'timeoutRemoveNotificationByGesture', 'timeoutRemoveFailedNotificationByGesture', 'timeoutNotifySwipe', 'timeoutSelectTL', 'timeoutSlideTL', 'timeoutCanNotifyHelp', 'timeoutRemoveSpinner', 'timeoutNouser', 'timeoutNextDrawCurve', 'mouseUpDownDeltaTreshold'];
 	var supposedToBeFloat = ['zoomPercentage', 'prezoomPercentage'];
 	
 	$.getJSON(file_path, function(data)
@@ -489,7 +676,12 @@
 		}
 		
 		//On initialise le client.
-		_this.client = new client(_this.config['host'], _this.config['port'], _this);
+		if(!_this.mouseInteractions)
+		{
+			_this.client = new client(_this.config['host'], _this.config['port'], _this);
+		}
+		
+		_this.getDictionary();
 	});
 }
 
@@ -554,8 +746,12 @@
 		// this.unzoom();
 		if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING-") > -1)
 		{
-			this.currentMode = "INCOMING-20";
-			this.unzoom();
+			if(!this.mouseInteractions)
+			{
+				this.currentMode = "INCOMING-20";
+				this.unzoom();
+			}
+			
 			this.currentMode = "MOSAIC";
 			$('.notifications').remove();
 			this.mosaicSelectionAndSearch();
@@ -565,8 +761,8 @@
 		//On affiche les notifications.
 		// this.notifySelectionSearchMosaicFull();
 	
-		// $('#mainPointer').fadeTo(this.config['timePrezoom'], 1);
-		// $('#secondPointer').fadeTo(this.config['timePrezoom'], 1);
+		//$('#mainPointer').fadeTo(this.config['timePrezoom'], 1);
+		//$('#secondPointer').fadeTo(this.config['timePrezoom'], 1);
 	}
 	
 	//Pour les snapshots à afficher.
@@ -939,6 +1135,7 @@
 			// console.log(_this.player);
 			// console.log(_this.player.popcorn);
 		}
+		
 		//Lorsque le player est en pause (par exemple lorsque le curseur arrive à la fin de la timeline).
 		if(_this.player.popcorn)
 		{
@@ -987,6 +1184,11 @@
 			{
 				_this.playerIsReady = true;
 				
+				if(_this.player.widgets[0])
+				{
+					_this.player.widgets[0].setMouseInteractions(_this.mouseInteractions);
+				}
+				
 				if(_this.currentMode == 'VIDEO' || _this.currentMode == 'SEARCH' || _this.currentMode == 'TIMELINE')
 				{
 					_this.canSwipe = true;
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/mosaic/js/neighbours.js
--- a/front_idill/src/mosaic/js/neighbours.js	Fri Jun 29 16:16:24 2012 +0200
+++ b/front_idill/src/mosaic/js/neighbours.js	Thu Jul 05 16:04:33 2012 +0200
@@ -238,22 +238,43 @@
             opacity: '1'
         }, _this.config['timeNeighbourGlowing'], function()
 		{
-			console.log('SWAG !!!', _this.currentMode, _this.currentSearchGesture);
-			if(_this.currentMode == 'VIDEO')
-			{
-				$('.notifications').remove();
-				_this.videoMoveAndUnzoom(snapshotId);
-			}
-			else if(_this.currentMode == 'SEARCH' && !_this.currentSearchGesture)
+			if(_this.mouseInteractions)
 			{
-				$('.notifications').remove();
-				_this.searchSearchAndMoveAndUnzoom(snapshotId);
+				if(_this.currentMode == 'VIDEO')
+				{
+					$('.notifications').remove();
+					_this.videoMove(snapshotId);
+				}
+				else if(_this.currentMode == 'SEARCH' && !_this.currentSearchGesture)
+				{
+					$('.notifications').remove();
+					_this.searchSearchAndMove(snapshotId);
+				}
+				else if(_this.currentMode == 'SEARCH' && _this.currentSearchGesture)
+				{
+					$('.notifications').remove();
+					_this.searchGestureAndMove(_this.currentSearchGesture, 'valid', snapshotId);
+				}
+				
+				_this.canMoveToNeighbour = true;
 			}
-			else if(_this.currentMode == 'SEARCH' && _this.currentSearchGesture)
+			else
 			{
-				$('.notifications').remove();
-				console.log('swag');
-				_this.searchGestureAndMoveAndUnzoom(_this.currentSearchGesture, 'valid', snapshotId);
+				if(_this.currentMode == 'VIDEO')
+				{
+					$('.notifications').remove();
+					_this.videoMoveAndUnzoom(snapshotId);
+				}
+				else if(_this.currentMode == 'SEARCH' && !_this.currentSearchGesture)
+				{
+					$('.notifications').remove();
+					_this.searchSearchAndMoveAndUnzoom(snapshotId);
+				}
+				else if(_this.currentMode == 'SEARCH' && _this.currentSearchGesture)
+				{
+					$('.notifications').remove();
+					_this.searchGestureAndMoveAndUnzoom(_this.currentSearchGesture, 'valid', snapshotId);
+				}
 			}
 		});
 		
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/mosaic/js/notifications.js
--- a/front_idill/src/mosaic/js/notifications.js	Fri Jun 29 16:16:24 2012 +0200
+++ b/front_idill/src/mosaic/js/notifications.js	Thu Jul 05 16:04:33 2012 +0200
@@ -5,366 +5,6 @@
    =============================================== */
 
 /*
- * Affiche la notification de sélection/recherche lorsque la mosaique est complète.
-*/
-mosaic.prototype.notifySelectionSearchMosaicFull = function()
-{
-	if(this.currentMode != "MOSAIC" && this.currentMode != "FILTER" || this.isCurrentlyInASearchByGesture || $('#notify_selection').length > 0 || $('#notify_search').length > 0 || $('#notify_point').length > 0)
-	{
-		return;
-	}
-	
-	console.log('NOTIFY SEL SEA');
-	
-	//On spécifie les notifications en div.
-	var notification_selection = "<div id='notify_selection' class='notifications'></div>";
-	var notification_search = "<div id='notify_search' class='notifications'></div>";
-	
-	//On les ajoute à la mosaïque.
-	$('#mainPanel').append(notification_selection + notification_search);
-
-	//On calcule leurs coordonnées et dimensions.
-	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-	var notify_margin = parseInt($('.notifications').css('margin'));
-	var selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
-	var search_left = selection_left + notify_width + notify_margin;
-	
-	//On les positionne.
-	$('#notify_selection').css(
-	{
-		left: selection_left
-	});
-	$('#notify_search').css(
-	{
-		left: search_left
-	});
-	
-	//On les fait apparaître.
-	$('.notifications').css(
-	{
-		opacity: "0.9"
-	});
-}
-
-/*
- * Supprime la notification de sélection/recherche lorsque la mosaique est complète.
-*/
-mosaic.prototype.removeSelectionSearchMosaicFull = function()
-{
-	if(this.isOnASnapshot)
-	{
-		// console.log('DEL SEL SEA');
-		$('#notify_selection, #notify_search').remove();
-	}
-}
-
-/*
- * Affiche la notification de maintient du pointage lors d'une phase de prézoom.
-*/
-mosaic.prototype.notifyPointMosaicPrezoom = function()
-{
-	this.removeSelectionSearchMosaicFull();
-	if($('#notify_point').length > 0 || $('#notify_search').length > 0 || this.currentMode != 'MOSAIC' && this.currentMode != 'FILTER' && !this.isOnASnapshot)
-	{
-		this.removePointMosaicPrezoom();
-		return;
-	}
-	
-	//On spécifie les notifications en div.
-	var notification_point = "<div id='notify_point' class='notifications'></div>";
-	
-	//On les ajoute à la mosaïque.
-	$('#mainPanel').append(notification_point);
-	
-	//On calcule leurs coordonnées et dimensions.
-	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-	var notify_margin = parseInt($('.notifications').css('margin'));
-	var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
-	
-	//On les positionne.
-	$('#notify_point').css(
-	{
-		left: point_left
-	});
-	
-	//On les fait apparaître.
-	$('.notifications').css(
-	{
-		opacity: "0.9"
-	});
-}
-
-/*
- * Supprime la notification de maintient du pointage.
-*/
-mosaic.prototype.removePointMosaicPrezoom = function()
-{
-	//if(!this.isOnASnapshot)
-	//{
-		$('#notify_point').remove();
-	//}
-}
-
-/*
- * Affiche la notification de recherche (qu'elle soit par gesture ou par courbes).
-*/
-mosaic.prototype.notifySearch = function()
-{
-	/*this.removeSelectionSearchMosaicFull();
-	if($('#notify_point').length > 0 || $('#notify_search').length > 0 || this.currentMode != 'MOSAIC' && this.currentMode != 'FILTER' && !this.isOnASnapshot)
-	{
-		//this.removeNotifySearch();
-		//return;
-	}*/
-	
-	if($('.notifications').length > 0)
-	{
-		$('.notifications').remove();
-	}
-	
-	//On spécifie les notifications en div.
-	var notification_search = "<div id='notify_search' class='notifications'></div>";
-	
-	//On les ajoute à la mosaïque.
-	$('body').append(notification_search);
-	
-	//On calcule leurs coordonnées et dimensions.
-	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-	var notify_margin = parseInt($('.notifications').css('margin'));
-	var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
-	
-	//On les positionne.
-	$('#notify_search').css(
-	{
-		left: point_left
-	});
-	
-	//On les fait apparaître.
-	$('.notifications').css(
-	{
-		opacity: "0.9"
-	});
-}
-
-/*
- * Supprime la notification de maintient du pointage.
-*/
-mosaic.prototype.removeNotifySearch = function()
-{
-	//if(!this.isOnASnapshot)
-	//{
-		//$('#notify_search').remove();
-	//}
-}
-
-/*
- * Affiche la notification de changement de voisin et de dezoom.
-*/
-mosaic.prototype.notifyMoveUnzoom = function(targetId)
-{
-	console.log('MOVE & UNZOOM');
-	
-	if($('.notifications').length > 0 || !this.neighboursIds || this.neighboursIds.length == 0 || targetId == -1 || this.currentMode != 'VIDEO' && this.currentMode != 'SEARCH' && this.currentMode != 'TIMELINE')
-	{
-		return;
-	}
-	
-	console.log('NOT');
-		
-	var _this = this;
-	
-	//On spécifie les notifications en div.
-	var notification_move_unzoom = "<div id='notify_move' class='notifications'></div><div id='notify_unzoom' class='notifications'></div>";
-	
-	//On les ajoute à la mosaïque.
-	$('body').append(notification_move_unzoom);
-	
-	// console.log(this.player.config.gui.zoomTop + " " + this.player.config.gui.zoomLeft);
-	
-	//On calcule leurs coordonnées et dimensions.
-	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-	var notify_margin = parseInt($('.notifications').css('margin'));
-	var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
-	
-	var side = $.inArray(parseInt(targetId), this.neighboursIds);
-	// console.log(this.neighboursIds, parseInt(targetId), side);
-	if(side == -1)
-	{
-		return;
-	}
-	
-	var sides = ['left', 'right', 'up', 'down'];
-	var unzooms = ['horizontal', 'vertical'];
-	
-	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
-	var notifyTop = 0, notifyLeft = 0;
-	
-	//On les positionne.
-	$('#notify_move').css(
-	{
-		top: -notifyTop,
-		left: -notifyLeft + ($(window).width() - notify_width * 2 - notify_margin * 2) / 2,
-		'background-image': 'url(./pictos/notifications/move_' + sides[side] + '.png)'
-	});
-	
-	$('#notify_unzoom').css(
-	{
-		top: -notifyTop,
-		left: -notifyLeft + ($(window).width()) / 2,
-		'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
-	});
-	
-	// console.log('url(./pictos/notifications/move_' + sides[side] + '.png)');
-	// console.log($('#notify_move').css('background-image', 'url(./pictos/notifications/move_' + sides[side] + '.png)'));
-	// console.log($('#notify_move').css('background-image'));
-	
-	//On les fait apparaître.
-	$('.notifications').css(
-	{
-		opacity: "0.9"
-	});
-}
-
-/*
- * Supprime la notification de recherche de gesture.
-*/
-mosaic.prototype.removeNotifyMoveUnzoom = function()
-{
-	$('#notify_move').remove();
-	$('#notify_unzoom').remove();
-}
-
-/*
- * Affiche la notification de dezoom.
-*/
-mosaic.prototype.notifyUnzoom = function(targetId)
-{
-	console.log('UNZOOM');
-	
-	if($('.notifications').length > 0 || !this.neighboursIds || this.neighboursIds.length == 0 || targetId == -1 || this.currentMode != 'VIDEO' && this.currentMode != 'SEARCH' && this.currentMode != 'TIMELINE')
-	{
-		return;
-	}
-	
-	console.log('NOT');
-		
-	var _this = this;
-	
-	//On spécifie les notifications en div.
-	var notification_move_unzoom = "<div id='notify_move' class='notifications'></div><div id='notify_unzoom' class='notifications'></div>";
-	
-	//On les ajoute à la mosaïque.
-	$('body').append(notification_move_unzoom);
-	
-	// console.log(this.player.config.gui.zoomTop + " " + this.player.config.gui.zoomLeft);
-	
-	//On calcule leurs coordonnées et dimensions.
-	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
-	var notify_margin = parseInt($('.notifications').css('margin'));
-	var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
-	
-	var side = $.inArray(parseInt(targetId), this.neighboursIds);
-	// console.log(this.neighboursIds, parseInt(targetId), side);
-	if(side == -1)
-	{
-		return;
-	}
-	
-	var sides = ['left', 'right', 'up', 'down'];
-	var unzooms = ['horizontal', 'vertical'];
-	
-	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
-	var notifyTop = 0, notifyLeft = 0;
-	
-	//On les positionne.
-	$('#notify_move').css(
-	{
-		top: -notifyTop,
-		left: -notifyLeft + ($(window).width() - notify_width * 2 - notify_margin * 2) / 2,
-		'background-image': 'url(./pictos/notifications/move_' + sides[side] + '.png)'
-	});
-	
-	$('#notify_unzoom').css(
-	{
-		top: -notifyTop,
-		left: -notifyLeft + ($(window).width()) / 2,
-		'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
-	});
-	
-	// console.log('url(./pictos/notifications/move_' + sides[side] + '.png)');
-	// console.log($('#notify_move').css('background-image', 'url(./pictos/notifications/move_' + sides[side] + '.png)'));
-	// console.log($('#notify_move').css('background-image'));
-	
-	//On les fait apparaître.
-	$('.notifications').css(
-	{
-		opacity: "0.9"
-	});
-}
-
-/*
- * Supprime la notification de dezoom.
-*/
-mosaic.prototype.removeNotifyUnzoom = function()
-{
-	$('#notify_unzoom').remove();
-}
-
-/*
- * Affiche la notification de dezoom.
- * Direction vaut left ou right.
-*/
-mosaic.prototype.notifySwipe = function(direction)
-{
-	console.log('TRY SWIPE');
-	
-	if($('.notifications').length > 0 || this.currentMode != 'VIDEO' && this.currentMode != 'SEARCH' && this.currentMode != 'TIMELINE' && !this.isSwipe)
-	{
-		return;
-	}
-	
-	console.log('IN SWIPE');
-		
-	var _this = this;
-	
-	//On spécifie les notifications en div.
-	var notification_swipe = "<div id='notify_swipe' class='notifications'></div>";
-	
-	//On les ajoute à la mosaïque.
-	$('body').append(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 point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
-	
-	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
-	var notifyTop = 0, notifyLeft = 0;
-	
-	//On les positionne.
-	$('#notify_swipe').css(
-	{
-		top: -notifyTop,
-		left: -notifyLeft + ($(window).width() - notify_width - notify_margin) / 2,
-		'background-image': 'url(./pictos/notifications/swipe_' + direction + '.png)'
-	});
-	
-	//On les fait apparaître.
-	$('.notifications').css(
-	{
-		opacity: "0.9"
-	});
-}
-
-/*
- * Supprime la notification de dezoom.
-*/
-mosaic.prototype.removeNotifyUnzoom = function()
-{
-	$('#notify_unzoom').remove();
-}
-
-/*
  * Affiche l'aide.
 */
 mosaic.prototype.notifyHelp = function(inMosaic)
@@ -835,9 +475,11 @@
 	var notify_margin = parseInt($('.notifications').css('margin'));
 	var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
 	
+	// console.log('url("./pictos/big/' + (this.mouseInteractions ? 'MI' : '') + '/' + mode + '/' + gestureName + '.png")');
+	
 	if(_.include(this.gestures, gestureName))
 	{
-		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
+		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI' : '') + '/' + (this.gestureDelRequested ? 'hover' : 'valid') + '/' + gestureName + '.png")');
 	}
 	else if(mode == 'none')
 	{
@@ -883,7 +525,7 @@
 	
 	if(_.include(this.gestures, gestureName))
 	{
-		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
+		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI' : '') + '/' + mode + '/' + gestureName + '.png")');
 	}
 	else if(mode == 'none')
 	{
@@ -950,6 +592,56 @@
 }
 
 /*
+ * Affichage de la notification de résultat de move vers un voisin.
+*/
+mosaic.prototype.videoMove = function(targetId)
+{
+	if(this.currentMode != 'VIDEO')
+	{
+		return;
+	}
+	
+	var _this = this;
+	
+	//On spécifie les notifications en div.
+	var notification_move = "<div id='notify_move' class='notifications'></div>";
+	
+	//On les ajoute à la mosaïque.
+	$('body').append(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 move_left = $(window).width() / 2 - (notify_width) / 2 + notify_margin;
+	
+	var side = $.inArray(parseInt(targetId), this.neighboursIds);
+	// console.log(this.neighboursIds, parseInt(targetId), side);
+	if(side == -1)
+	{
+		return;
+	}
+	
+	var sides = ['left', 'right', 'up', 'down'];
+	
+	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
+	var notifyTop = 0, notifyLeft = 0;
+	
+	//On les positionne.
+	$('#notify_move').css(
+	{
+		top: -notifyTop,
+		left: -notifyLeft + move_left,
+		'background-image': 'url(./pictos/notifications/move_' + sides[side] + '.png)'
+	});
+	
+	//On les fait apparaître.
+	$('.notifications').css(
+	{
+		opacity: "0.9"
+	});
+}
+
+/*
  * Affichage de la notification de résultat de move vers un voisin & de dézoom dans une vidéo.
 */
 mosaic.prototype.videoMoveAndUnzoom = function(targetId)
@@ -1187,6 +879,60 @@
 }
 
 /*
+ * Affichage de la notification de recherche, de move vers un voisin.
+*/
+mosaic.prototype.searchSearchAndMove = function(targetId)
+{
+	if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture)
+	{
+		return;
+	}
+	
+	//On spécifie les notifications en div.
+	var notification_search = "<div id='notify_search' class='notifications'></div>";
+	var notification_move = "<div id='notify_move' class='notifications'></div>";
+	
+	//On les ajoute à la mosaïque.
+	$('body').append(notification_search + 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 search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
+	var move_left = search_left + notify_width + notify_margin;
+	
+	var side = $.inArray(parseInt(targetId), this.neighboursIds);
+	
+	if(side == -1)
+	{
+		return;
+	}
+	
+	var sides = ['left', 'right', 'up', 'down'];
+	
+	var notifyTop = 0, notifyLeft = 0;
+	
+	//On les positionne.
+	$('#notify_search').css(
+	{
+		top: -notifyTop,
+		left: -notifyLeft + search_left
+	});
+	$('#notify_move').css(
+	{
+		top: -notifyTop,
+		left: -notifyLeft + move_left,
+		'background-image': 'url(./pictos/notifications/move_' + sides[side] + '.png)'
+	});
+	
+	//On les fait apparaître.
+	$('.notifications').css(
+	{
+		opacity: "0.9"
+	});
+}
+
+/*
  * Affichage de la notification de recherche, de move vers un voisin & de dézoom dans une vidéo de recherche.
 */
 mosaic.prototype.searchSearchAndMoveAndUnzoom = function(targetId)
@@ -1335,7 +1081,7 @@
 	
 	if(_.include(this.gestures, gestureName))
 	{
-		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
+		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI/' : '') + mode + '/' + gestureName + '.png")');
 	}
 	else if(mode == 'none')
 	{
@@ -1385,7 +1131,7 @@
 	
 	if(_.include(this.gestures, gestureName))
 	{
-		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
+		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI/' : '') + mode + '/' + gestureName + '.png")');
 	}
 	else if(mode == 'none')
 	{
@@ -1411,6 +1157,69 @@
 }
 
 /*
+ * Affichage de la notification de résultat, de move vers un voisin.
+*/
+mosaic.prototype.searchGestureAndMove = function(gestureName, mode, targetId)
+{
+	if(this.currentMode != 'SEARCH' || !this.isCurrentlyInASearchByGesture)
+	{
+		return;
+	}
+	
+	var _this = this;
+	
+	//On spécifie les notifications en div.
+	var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
+	var notification_move = "<div id='notify_move' class='notifications'></div>";
+	
+	//On les ajoute à la mosaïque.
+	$('body').append(notification_search_1gesture + notification_move);
+	
+	// console.log(this.player.config.gui.zoomTop + " " + this.player.config.gui.zoomLeft);
+	
+	//On calcule leurs coordonnées et dimensions.
+	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
+	var notify_margin = parseInt($('.notifications').css('margin'));
+	var search_1gesture_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
+	var move_left = search_1gesture_left + notify_width + notify_margin;
+	
+	if(_.include(this.gestures, gestureName))
+	{
+		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI/' : '') + mode + '/' + gestureName + '.png")');
+	}
+	else if(mode == 'none')
+	{
+		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
+	}
+	
+	var side = $.inArray(parseInt(targetId), this.neighboursIds);
+	
+	if(side == -1)
+	{
+		return;
+	}
+	
+	var sides = ['left', 'right', 'up', 'down'];
+	
+	//On les positionne.
+	$('#notify_search_1gesture').css(
+	{
+		left: search_1gesture_left
+	});
+	$('#notify_move').css(
+	{
+		left: move_left,
+		'background-image': 'url(./pictos/notifications/move_' + sides[side] + '.png)'
+	});
+	
+	//On les fait apparaître.
+	$('.notifications').css(
+	{
+		opacity: "0.9"
+	});
+}
+
+/*
  * Affichage de la notification de résultat, de move vers un voisin & de dézoom dans une vidéo de recherche.
 */
 mosaic.prototype.searchGestureAndMoveAndUnzoom = function(gestureName, mode, targetId)
@@ -1441,7 +1250,7 @@
 	
 	if(_.include(this.gestures, gestureName))
 	{
-		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
+		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI/' : '') + mode + '/' + gestureName + '.png")');
 	}
 	else if(mode == 'none')
 	{
@@ -1484,7 +1293,7 @@
 /*
  * Affichage de la notification de résultat & de dézoom dans une vidéo de recherche.
 */
-mosaic.prototype.searchGestureAndUnzoom = function()
+mosaic.prototype.searchGestureAndUnzoom = function(gestureName, mode, targetId)
 {
 	if(this.currentMode != 'SEARCH' || !this.isCurrentlyInASearchByGesture)
 	{
@@ -1510,13 +1319,22 @@
 	
 	if(_.include(this.gestures, gestureName))
 	{
-		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
+		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI/' : '') + mode + '/' + gestureName + '.png")');
 	}
 	else if(mode == 'none')
 	{
 		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
 	}
 	
+	var side = $.inArray(parseInt(targetId), this.neighboursIds);
+	
+	if(side == -1)
+	{
+		return;
+	}
+	
+	var unzooms = ['horizontal', 'vertical'];
+	
 	//On les positionne.
 	$('#notify_search_1gesture').css(
 	{
@@ -1524,7 +1342,8 @@
 	});
 	$('#notify_unzoom').css(
 	{
-		left: unzoom_left
+		left: unzoom_left,
+		'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
 	});
 	
 	//On les fait apparaître.
@@ -1532,4 +1351,76 @@
 	{
 		opacity: "0.9"
 	});
+}
+
+/*
+ * Affichage des notifications de gestures trouvées dans une recherche par courbes.
+*/
+mosaic.prototype.curvesGestures = function(gestures)
+{
+	//S'il n'y a pas de gestures à afficher.
+	if(gestures.length == 0)
+	{
+		console.log('NONE');
+		//On ajoute une seule notification.
+		var notification_curves = "<div class='notifications' id='notify_curves'></div>";
+		$('body').append(notification_curves);
+		
+		//On calcule leurs dimensions et coordonnées.
+		var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
+		var notify_margin = parseInt($('.notifications').css('margin'));
+		var curves_left = $(window).width() / 2 - (notify_width + notify_margin * 2) / 2;
+		
+		$('#notify_curves').css(
+		{
+			left: curves_left,
+			'background-image': 'url("./pictos/big/normal/inconnu.png")',
+			opacity: '0.9'
+		});
+		return;
+	}
+	
+	//Sinon, on les met dans un tableau.
+	var gestures_tab = gestures.split(';');
+	
+	var notifications_curves_gestures = '';
+	
+	//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>";
+	}
+	
+	//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 = [];
+	
+	//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;
+	
+	for(var i = 0 ; i < gestures_tab.length ; i++)
+	{
+		//On va chercher leurs backgrounds.
+		$('#notify_curves_' + gestures_tab[i]).css('background-image', 'url("./pictos/big/' + (this.mouseInteractions ? 'MI/' : '') + 'normal/' + gestures_tab[i] + '.png")');
+		// console.log('url("./pictos/big/MI/normal/' + gestures_tab[i] + '.png")');
+		
+		//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;
+		}
+		
+		//On les place.
+		$('#notify_curves_' + gestures_tab[i]).css('left', curves_gestures_left[i]);
+	}
+	
+	//On les fait apparaître.
+	$('.notifications').css(
+	{
+		opacity: "0.9"
+	});
 }
\ No newline at end of file
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/mosaic/js/playerControl.js
--- a/front_idill/src/mosaic/js/playerControl.js	Fri Jun 29 16:16:24 2012 +0200
+++ b/front_idill/src/mosaic/js/playerControl.js	Thu Jul 05 16:04:33 2012 +0200
@@ -38,12 +38,24 @@
 		return false;
 	}
 	
-	var pointer = (mainPointer ? $('#mainPointer') : $('#secondPointer'));
+	var pointer;
+	var Px, Py;
+	
+	if(this.mouseInteractions)
+	{
+		Px = this.mousePosX;
+		Py = this.mousePosY;
+	}
+	else
+	{
+		pointer = (mainPointer ? $('#mainPointer') : $('#secondPointer'));
+		Px = pointer.position().left + pointer.width() / 2;
+		Py = pointer.position().top + pointer.height() / 2;
+	}
 	
 	var TL = $('.Ldt-Timeline');
 	var TLwidth = TL.width(), TLheight = TL.height();
 	var TLtop = (+$('.LdtPlayer').position().top + $('.LdtPlayer').height() - TLheight), TLleft = $('.LdtPlayer').position().left;
-	var Px = pointer.position().left + pointer.width() / 2, Py = pointer.position().top + pointer.height() / 2;
 	
 	var correctHorizontalPosition = (entering ? (Px > TLleft && Px < (+TLleft + TLwidth)) : (true));
 	
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/mosaic/js/pointers.js
--- a/front_idill/src/mosaic/js/pointers.js	Fri Jun 29 16:16:24 2012 +0200
+++ b/front_idill/src/mosaic/js/pointers.js	Thu Jul 05 16:04:33 2012 +0200
@@ -3,6 +3,11 @@
 */
 mosaic.prototype.addPointers = function()
 {
+	if(this.mouseInteractions)
+	{
+		return;
+	}
+	
 	var mainPointer = '<div id="mainPointer" class="pointers"></div>';
 	var secondPointer = '<div id="secondPointer" class="pointers"></div>';
 	$('body').append(mainPointer + secondPointer);
@@ -181,7 +186,18 @@
 		this.mainPointerLastY = y;
 	}
 	
-	var pointerX = x - $('#mainPointer').width()/2, pointerY = y - $('#mainPointer').height()/2;
+	var pointerX, pointerY;
+
+	if(this.mouseInteractions)
+	{
+		pointerX = x;
+		pointerY = y;
+	}
+	else
+	{
+		pointerX = x - $('#mainPointer').width()/2;
+		pointerY = y - $('#mainPointer').height()/2;
+	}
 	var _this = this;
 	
 	$('#mainPointer').css(
@@ -234,7 +250,7 @@
 		// /!\ // RAJOUTE EN ATTENDANT UN GESTE DE CANCEL.
 		if(this.isMosaicFiltered && !this.isMosaicFiltering)
 		{
-			console.log('CHECK IF ON NOTIFY GESTURE');
+			//console.log('CHECK IF ON NOTIFY GESTURE');
 			this.checkIfPointerIsOnSearchNotification(pointerX, pointerY, $('#mainPointer'));
 		}
 	}
@@ -257,19 +273,22 @@
 				this.player.widgets[0].selectTimeline();
 				$('#mainPointer').css('background-image', 'url(./img/cursors/selector_gray.png)');
 				
-				//On met le spinner gif sur le pointeur.
-				var spinner = "<img id='spinner'></div>";
-				$('body').append(spinner);
-				$('#spinner').css(
+				if(!this.mouseInteractions)
 				{
-					position: 'absolute',
-					top: $('#mainPointer').position().top,
-					left: $('#mainPointer').position().left,
-					width: 85,
-					height: 85,
-					'z-index': 600
-				});
-				$('#spinner').attr('src', './img/cursors/selector_anim.gif');
+					//On met le spinner gif sur le pointeur.
+					var spinner = "<img id='spinner'></div>";
+					$('body').append(spinner);
+					$('#spinner').css(
+					{
+						position: 'absolute',
+						top: $('#mainPointer').position().top,
+						left: $('#mainPointer').position().left,
+						width: 85,
+						height: 85,
+						'z-index': 600
+					});
+					$('#spinner').attr('src', './img/cursors/selector_anim.gif');
+				}
 				
 				this.selectTLTimeout = setTimeout(function()
 				{
@@ -532,20 +551,23 @@
 				this.player.widgets[0].selectTimeline();
 				$('#secondPointer').css('background-image', 'url(./img/cursors/selector_gray.png)');
 				
-				//On met le spinner gif sur le pointeur.
-				var spinner = "<div id='spinner'></div>";
-				$('body').append(spinner);
-				$('#spinner').css(
+				if(!this.mouseInteractions)
 				{
-					position: 'absolute',
-					'background-repeat': 'no-repeat',
-					top: $('#mainPointer').position().top,
-					left: $('#mainPointer').position().left,
-					width: 85,
-					height: 85,
-					'z-index': 600
-				});
-				$('#spinner').attr('src', './img/cursors/selector_anim.gif');
+					//On met le spinner gif sur le pointeur.
+					var spinner = "<div id='spinner'></div>";
+					$('body').append(spinner);
+					$('#spinner').css(
+					{
+						position: 'absolute',
+						'background-repeat': 'no-repeat',
+						top: $('#mainPointer').position().top,
+						left: $('#mainPointer').position().left,
+						width: 85,
+						height: 85,
+						'z-index': 600
+					});
+					$('#spinner').attr('src', './img/cursors/selector_anim.gif');
+				}
 				
 				this.selectTLTimeout = setTimeout(function()
 				{
@@ -889,64 +911,142 @@
 		//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()))
 		{
-			// console.log('IN NOTIFICATION');
-			if(!this.alreadyOnNotification && $('#spinner').length == 0)
+			/*if($('#a').length == 0)
 			{
-				notification_search.css('background-image', currentPicto.replace('/big/valid/', '/big/hover/'));
-				
-				console.log(this.date() + ' try remove not');
-				//On met le spinner gif sur le pointeur.
-				var spinner = "<img id='spinner'></div>";
-				$('body').append(spinner);
-				$('#spinner').css(
+				var a = "<div id='a'></div>";
+				$('body').append(a);
+				$('#a').css(
 				{
+					left: notification_search.position().left,
+					top: notification_search.position().top,
+					width: notification_search.width(),
+					height: notification_search.height(),
+					"background-color": "#fff",
 					position: 'absolute',
-					top: pointer.position().top,
-					left: pointer.position().left,
-					width: 85,
-					height: 85,
-					'z-index': 600
 				});
-				$('#spinner').attr('src', './img/cursors/selector_anim.gif');
-				/*this.arrowSpinnerTimeout = setTimeout(function()
+			}*/
+			
+			if(!this.alreadyOnNotification && ($('#spinner').length == 0 && !this.mouseInteractions || this.mouseInteractions))
+			{
+				notification_search.css('background-image', currentPicto.replace('/big/' + (this.mouseInteractions ? 'MI/' : '') + 'valid/', '/big/' + (this.mouseInteractions ? 'MI/' : '') + 'hover/'));
+				
+				this.gestureDelRequested = true;
+				
+				// console.log(this.date() + ' try remove not ' + currentPicto.replace('/big/' + (this.mouseInteractions ? 'MI/' : '') + 'valid/', '/big/' + (this.mouseInteractions ? 'MI/' : '') + 'hover/'));
+				
+				if(!this.mouseInteractions)
 				{
+					//On met le spinner gif sur le pointeur.
+					var spinner = "<img id='spinner'></div>";
+					$('body').append(spinner);
+					$('#spinner').css(
+					{
+						position: 'absolute',
+						top: pointer.position().top,
+						left: pointer.position().left,
+						width: 85,
+						height: 85,
+						'z-index': 600
+					});
+					$('#spinner').attr('src', './img/cursors/selector_anim.gif');
 					
-				}, this.config['timeoutRemoveSpinner']);*/
-				
-				this.removeNotificationByGestureTimeout = setTimeout(function()
-				{
-					if(_this.currentMode == 'SEARCH')
-					{
-						_this.player.widgets[0].removeSearchByGesture();
-						_this.currentMode = 'VIDEO';
-					}
-					else if(_this.currentMode == 'TIMELINE')
+					this.removeNotificationByGestureTimeout = setTimeout(function()
 					{
-						_this.player.widgets[0].removeSearchByGesture();
-						_this.currentMode = 'TIMELINE';
-					}
-					else if(_this.currentMode == 'FILTER')
-					{
-						_this.removeFilter();
-					}
-					
-					_this.alreadyOnNotification = false;
-					_this.isCurrentlyInASearchByGesture = false;
-					_this.currentSearchGesture = '';
-					_this.canNotifyHelp = false;
-				}, this.config['timeoutRemoveNotificationByGesture']);
+						if(_this.currentMode == 'SEARCH')
+						{
+							_this.player.widgets[0].removeSearchByGesture();
+							_this.currentMode = 'VIDEO';
+						}
+						else if(_this.currentMode == 'TIMELINE')
+						{
+							_this.player.widgets[0].removeSearchByGesture();
+							_this.currentMode = 'TIMELINE';
+						}
+						else if(_this.currentMode == 'FILTER')
+						{
+							_this.removeFilter();
+						}
+						
+						_this.alreadyOnNotification = false;
+						_this.isCurrentlyInASearchByGesture = false;
+						_this.currentSearchGesture = '';
+						_this.canNotifyHelp = false;
+					}, this.config['timeoutRemoveNotificationByGesture']);
+				}
+				else
+				{
+				
+				}
+				
 				this.alreadyOnNotification = true;
 			}
+			
+			return true;
 		}
 		else
 		{
 			if(this.alreadyOnNotification)
 			{
-				notification_search.css('background-image', currentPicto.replace('/big/hover/', '/big/valid/'));
+				notification_search.css('background-image', currentPicto.replace('/big/' + (this.mouseInteractions ? 'MI/' : '') + 'hover/', '/big/' + (this.mouseInteractions ? 'MI/' : '') + 'valid/'));
+				
+				this.gestureDelRequested = false;
+				
+				// console.log(currentPicto.replace('/big/' + (this.mouseInteractions ? 'MI/' : '') + 'hover/', '/big/' + (this.mouseInteractions ? 'MI/' : '') + 'valid/'));
+				
 				clearTimeout(this.removeNotificationByGestureTimeout);
 				this.alreadyOnNotification = false;
 				$('#spinner').remove();
 			}
+			
+			return false;
+		}
+	}
+	
+	return false;
+}
+
+/*
+ * Si on se trouve sur la notification de recherche par gesture, on la supprime.
+*/
+mosaic.prototype.removeSearchNotificationIfOnIt = function(x, y)
+{
+	var _this = this;
+	
+	var notification_search = $('#notify_search_1gesture');
+	
+	//Si la notification de recherche existe (dans le player).
+	if(notification_search.length > 0)
+	{
+		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()))
+		{
+			$('.notifications').remove();
+			if(_this.currentMode == 'SEARCH')
+			{
+				_this.player.widgets[0].removeSearchByGesture();
+				_this.currentMode = 'VIDEO';
+			}
+			else if(_this.currentMode == 'TIMELINE')
+			{
+				_this.player.widgets[0].removeSearchByGesture();
+				_this.currentMode = 'TIMELINE';
+			}
+			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;
+			
+			//Si on est dans une vidéo, on laisse cette variable afin de ne pas dézoomer / bouger.
+			if(_this.currentMode != 'VIDEO' && _this.currentMode != 'TIMELINE')
+			{
+				_this.gestureDelRequested = false;
+			}
 		}
 	}
 }
\ No newline at end of file
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/mosaic/js/search.js
--- a/front_idill/src/mosaic/js/search.js	Fri Jun 29 16:16:24 2012 +0200
+++ b/front_idill/src/mosaic/js/search.js	Thu Jul 05 16:04:33 2012 +0200
@@ -28,25 +28,27 @@
 		inMosaic = false;
 	}
 	
-	this.searchCanvas = new searchCanvas(top, left, width, height, margin_top, this.timeSearchFade, inMosaic);
-	this.searchCanvas.create();
+	this.searchCanvas = new searchCanvas(top, left, width, height, margin_top, this.timeSearchFade, inMosaic, this);
+	this.searchCanvas.create(this.dictionary);
+}
+
+/*
+ * Lit le dictionnaire pour reconnaître les courbes de recherche.
+*/
+mosaic.prototype.getDictionary = function()
+{
+	var path = this.config['dico'];
+	var dico = [];
 	
-	/*$(window).mousedown(function(e)
+	var _this = this;
+	
+	$.getJSON(path, function(data)
 	{
-		console.log('DOWN');
-		_this.searchCanvas.onPointerIn(e.clientX, e.clientY);
-		$(window).mousemove(function(e2)
+		for(var i = 0 ; i < data.gestures.length ; i++)
 		{
-			_this.searchCanvas.onPointerMove(e2.clientX, e2.clientY);
-		});
+			_this.dictionary[i] = data.gestures[i];
+		}
 	});
-	
-	$(window).mouseup(function(e)
-	{
-		console.log('UP');
-		_this.searchCanvas.onPointerOut(e.clientX, e.clientY);
-		$(window).unbind('mousemove');
-	});*/
 }
 
 mosaic.prototype.listenToPointers = function()
@@ -62,7 +64,10 @@
  */
 mosaic.prototype.leaveSearch = function()
 {
-	this.searchCanvas.leaveSearch();
+	if(this.searchCanvas)
+	{
+		this.searchCanvas.leaveSearch();
+	}
 	this.searchCanvas = null;
 }
 
@@ -172,7 +177,7 @@
 			//On récupère la vidéo qui score le nombre d'occurences de la gesture le plus haut.
 			for(i in gestureNumberByVideo)
 			{	
-				console.log(i + " " + gestureNumberByVideo[i] + ' ' + type);
+				// console.log(i + " " + gestureNumberByVideo[i] + ' ' + type);
 				if(maxAnnotationNumber < gestureNumberByVideo[i])
 				{
 					maxAnnotationNumber = gestureNumberByVideo[i];
@@ -290,4 +295,27 @@
 		$('.filterHiders').remove();
 		$('.snapshotDivs').fadeTo(_this.config['timeFilterFade'], 1);
 	}
+}
+
+/*
+ * Parcours le dictionnaire pour trouver la première gesture à avoir un code identique à celui en entrée.
+*/
+mosaic.prototype.gestureWithSameCode = function(code)
+{
+	//Pour tout le dictionnaire.
+	for(var i = 0 ; i < this.dictionary.length ; i++)
+	{
+		//Pour touts les codes de chaque gesture du dictionnaire.
+		for(var j = 0 ; j < this.dictionary[i].codes.length ; j++)
+		{
+			//Si le code en entrée est une partie début d'un des codes.
+			if(this.dictionary[i].codes[j] === code)
+			{
+				//On retourne le nom de la gesture.
+				return this.dictionary[i].name;
+			}
+		}
+	}
+	
+	return '';
 }
\ No newline at end of file
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/mosaic/js/zoomInteractions.js
--- a/front_idill/src/mosaic/js/zoomInteractions.js	Fri Jun 29 16:16:24 2012 +0200
+++ b/front_idill/src/mosaic/js/zoomInteractions.js	Thu Jul 05 16:04:33 2012 +0200
@@ -4,7 +4,7 @@
  */
 mosaic.prototype.preZoom = function(snapshot)
 {
-	if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") > -1 || snapshot == null || this.helpDisplayed || this.isMosaicFiltering)
+	if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") > -1 || snapshot == null || this.helpDisplayed || this.isMosaicFiltering || this.isSearchByCurvesOn)
 	{
 		return;
 	}
@@ -15,7 +15,8 @@
 	}
 	this.preUnzoom();
 	//On enlève les notifications initiales si elles existent.
-	this.removeSelectionSearchMosaicFull();
+	// this.removeSelectionSearchMosaicFull();
+	$('.notifications').remove();
 	
     //Mosaïque.
     var _this = this;
@@ -71,9 +72,9 @@
     $('#fake-' + currentId).load(function()
     {
 	// snapshot.fadeTo(400, '0.5').delay(200).fadeTo(400, '1');
-		$('#prezoomContainer-' + currentId).css('display', 'block');
         $('#prezoomContainer-' + currentId).css('top', sTop).css('left', sLeft).css('width', (snWidth + margin)).css('height', (snHeight + margin));
         $('#prezoomSnapshot-' + currentId).css('width', (snWidth)).css('height', (snHeight));
+		$('#prezoomContainer-' + currentId).css('display', 'block');
         
         //Dimensions et coordonnées initiales du div sur lequel on zoom.
         var initialDivWidth = $('#prezoomContainer-' + currentId).width(), initialDivHeight = $('#prezoomContainer-' + currentId).height();
@@ -126,32 +127,39 @@
             left: finalDivLeft
         }, _this.config['timePrezoom'], function()
 		{
-			//On met le spinner gif sur le pointeur, s'il n'existe pas déjà.
-			if($('#spinner').length == 0)
+			if(!_this.mouseInteractions)
 			{
-				//On repère le pointeur ayant provoqué le prezoom.
-				var prezoomPointer;
-				if(!this.isMainPointerDisplayed)
+				//On met le spinner gif sur le pointeur, s'il n'existe pas déjà.
+				if($('#spinner').length == 0)
 				{
-					prezoomPointer = $('#secondPointer');
-				}
-				if(!this.isSecondPointerDisplayed)
-				{
-					prezoomPointer = $('#mainPointer');
+					//On repère le pointeur ayant provoqué le prezoom.
+					var prezoomPointer;
+					if(!_this.isMainPointerDisplayed)
+					{
+						prezoomPointer = $('#secondPointer');
+					}
+					if(!_this.isSecondPointerDisplayed)
+					{
+						prezoomPointer = $('#mainPointer');
+					}
+					
+					var spinner = "<img id='spinner'></div>";
+					$('body').append(spinner);
+					$('#spinner').css(
+					{
+						position: 'absolute',
+						top: prezoomPointer.position().top,
+						left: prezoomPointer.position().left,
+						width: 85,
+						height: 85,
+						'z-index': 600
+					});
+					$('#spinner').attr('src', './img/cursors/selector_anim_2.gif');
 				}
-				
-				var spinner = "<img id='spinner'></div>";
-				$('body').append(spinner);
-				$('#spinner').css(
-				{
-					position: 'absolute',
-					top: prezoomPointer.position().top,
-					left: prezoomPointer.position().left,
-					width: 85,
-					height: 85,
-					'z-index': 600
-				});
-				$('#spinner').attr('src', './img/cursors/selector_anim_2.gif');
+			}
+			else
+			{
+				_this.isOnAPrezoomSN = true;
 			}
 			
 			if(_this.currentMode == 'MOSAIC')
@@ -159,7 +167,7 @@
 				$('.notifications').remove();
 				_this.mosaicSelection();
 			}
-			else if(_this.currentMode == 'FILTER' && !_this.filterSearchedType)
+			else if(_this.currentMode == 'FILTER' && !_this.filterSearchedType && _this.curvesGesturesFound)
 			{
 				$('.notifications').remove();
 				_this.filterSearchAndSelection();
@@ -170,22 +178,15 @@
 				_this.filterGestureAndSelection(_this.filterSearchedType, 'valid');
 			}
 		});
-		
-		
     });
     
-	this.zoomTimeout = setTimeout(function()
+	if(!this.mouseInteractions)
 	{
-		_this.zoom();
-	}, this.config['timeoutZoom']);
-    //Si on clique sur le snapshot prézoomé, on enclenche un zoom total sur ce snapshot.
-    /*$('#prezoomContainer-' + currentId).click(function ()
-    {
-        if(this.previousZoomedSN != '')
+		this.zoomTimeout = setTimeout(function()
 		{
-            _this.zoom();
-		}
-    });*/
+			_this.zoom();
+		}, this.config['timeoutZoom']);
+	}
 }
 
 /*
@@ -208,6 +209,7 @@
 	
 	var _this = this;
 	
+	this.isOnAPrezoomSN = false;
 	clearTimeout(this.zoomTimeout);
 	
 	if(this.currentMode == 'MOSAIC')
@@ -215,12 +217,12 @@
 		$('.notifications').remove();
 		this.mosaicSelectionAndSearch();
 	}
-	else if(_this.currentMode == 'FILTER' && !this.filterSearchedType)
+	else if(_this.currentMode == 'FILTER' && !this.filterSearchedType && !this.curvesGesturesFound)
 	{
 		$('.notifications').remove();
 		this.filterSearch();
 	}
-	else if(_this.currentMode == 'FILTER' && this.filterSearchedType)
+	else if(_this.currentMode == 'FILTER' && this.filterSearchedType && !this.curvesGesturesFound)
 	{
 		$('.notifications').remove();
 		this.filterGesture(this.filterSearchedType, 'valid');
@@ -368,6 +370,54 @@
 		
 		// console.log('BBB3 : ' + _this.currentMode);
 		_this.loadPlayer(_this.snTop, _this.snLeft, _this.snWidth, _this.snHeight, newZoomTop, newZoomLeft, _this.timeToGoAt[_this.centerId]);
+		
+		$('body').click(function()
+		{
+			//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-', ''));
+			}
+			
+			if(!_this.gestureDelRequested)
+			{
+				//Si non, ou s'il ne fait pas partie des voisins.
+				if(!SNId || !_.include(_this.neighboursIds, SNId))
+				{
+					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));
+				}
+			}
+			else
+			{
+				_this.gestureDelRequested = false;
+			}
+		});
+		
+		$('body').on('mousewheel', function(event, delta, deltaX, deltaY)
+		{
+			//Action quand on "tire" la molette vers soi.
+			if (delta < 0)
+			{
+				_this.unzoom();
+			}
+		});
     });
 }
 
@@ -383,12 +433,26 @@
         return;
 	}
 	
+	var _this = this;
+	
+	if(this.mouseInteractions)
+	{
+		$('body').unbind('click');
+		$('body').unbind('mousewheel');
+	
+		//On rebind le clic pour supprimer une recherche.
+		$('body').click(function(e)
+		{
+			_this.removeSearchNotificationIfOnIt(e.pageX, e.pageY);
+		});
+	}
+	
 	this.canSwipe = false;
 	
 	//Si la TL avait été sélectionnée, on la déselectionne.
 	if(this.currentMode == 'TIMELINE')
 	{
-		this.exitTimeline('move');
+		this.exitTimeline('unzoom');
 	}
 	
 	this.currentlyUnzooming = true;
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/hover/arc.png
Binary file front_idill/src/pictos/big/MI/hover/arc.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/hover/circle.png
Binary file front_idill/src/pictos/big/MI/hover/circle.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/hover/contact.png
Binary file front_idill/src/pictos/big/MI/hover/contact.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/hover/fall.png
Binary file front_idill/src/pictos/big/MI/hover/fall.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/hover/grand-jete.png
Binary file front_idill/src/pictos/big/MI/hover/grand-jete.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/hover/jump.png
Binary file front_idill/src/pictos/big/MI/hover/jump.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/hover/no-motion.png
Binary file front_idill/src/pictos/big/MI/hover/no-motion.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/hover/right-angle.png
Binary file front_idill/src/pictos/big/MI/hover/right-angle.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/hover/screw.png
Binary file front_idill/src/pictos/big/MI/hover/screw.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/hover/up-down.png
Binary file front_idill/src/pictos/big/MI/hover/up-down.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/hover/wave.png
Binary file front_idill/src/pictos/big/MI/hover/wave.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/normal/arc.png
Binary file front_idill/src/pictos/big/MI/normal/arc.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/normal/circle.png
Binary file front_idill/src/pictos/big/MI/normal/circle.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/normal/contact.png
Binary file front_idill/src/pictos/big/MI/normal/contact.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/normal/fall.png
Binary file front_idill/src/pictos/big/MI/normal/fall.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/normal/grand-jete.png
Binary file front_idill/src/pictos/big/MI/normal/grand-jete.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/normal/jump.png
Binary file front_idill/src/pictos/big/MI/normal/jump.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/normal/no-motion.png
Binary file front_idill/src/pictos/big/MI/normal/no-motion.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/normal/right-angle.png
Binary file front_idill/src/pictos/big/MI/normal/right-angle.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/normal/screw.png
Binary file front_idill/src/pictos/big/MI/normal/screw.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/normal/up-down.png
Binary file front_idill/src/pictos/big/MI/normal/up-down.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/normal/wave.png
Binary file front_idill/src/pictos/big/MI/normal/wave.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/valid/arc.png
Binary file front_idill/src/pictos/big/MI/valid/arc.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/valid/circle.png
Binary file front_idill/src/pictos/big/MI/valid/circle.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/valid/contact.png
Binary file front_idill/src/pictos/big/MI/valid/contact.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/valid/fall.png
Binary file front_idill/src/pictos/big/MI/valid/fall.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/valid/grand-jete.png
Binary file front_idill/src/pictos/big/MI/valid/grand-jete.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/valid/jump.png
Binary file front_idill/src/pictos/big/MI/valid/jump.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/valid/no-motion.png
Binary file front_idill/src/pictos/big/MI/valid/no-motion.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/valid/right-angle.png
Binary file front_idill/src/pictos/big/MI/valid/right-angle.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/valid/screw.png
Binary file front_idill/src/pictos/big/MI/valid/screw.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/valid/up-down.png
Binary file front_idill/src/pictos/big/MI/valid/up-down.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/big/MI/valid/wave.png
Binary file front_idill/src/pictos/big/MI/valid/wave.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/help/MI/arc.png
Binary file front_idill/src/pictos/help/MI/arc.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/help/MI/arret.png
Binary file front_idill/src/pictos/help/MI/arret.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/help/MI/breakdance.png
Binary file front_idill/src/pictos/help/MI/breakdance.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/help/MI/chute.png
Binary file front_idill/src/pictos/help/MI/chute.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/help/MI/contact.png
Binary file front_idill/src/pictos/help/MI/contact.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/help/MI/grandjete.png
Binary file front_idill/src/pictos/help/MI/grandjete.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/help/MI/group_spin.png
Binary file front_idill/src/pictos/help/MI/group_spin.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/help/MI/jump.png
Binary file front_idill/src/pictos/help/MI/jump.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/help/MI/spin.png
Binary file front_idill/src/pictos/help/MI/spin.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/help/MI/up_down.png
Binary file front_idill/src/pictos/help/MI/up_down.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/help/MI/wave.png
Binary file front_idill/src/pictos/help/MI/wave.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/small/MI/arc.png
Binary file front_idill/src/pictos/small/MI/arc.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/small/MI/circle.png
Binary file front_idill/src/pictos/small/MI/circle.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/small/MI/contact.png
Binary file front_idill/src/pictos/small/MI/contact.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/small/MI/fall.png
Binary file front_idill/src/pictos/small/MI/fall.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/small/MI/grand_jete.png
Binary file front_idill/src/pictos/small/MI/grand_jete.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/small/MI/jump.png
Binary file front_idill/src/pictos/small/MI/jump.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/small/MI/no-motion.png
Binary file front_idill/src/pictos/small/MI/no-motion.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/small/MI/right-angle.png
Binary file front_idill/src/pictos/small/MI/right-angle.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/small/MI/screw.png
Binary file front_idill/src/pictos/small/MI/screw.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/small/MI/updown.png
Binary file front_idill/src/pictos/small/MI/updown.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/pictos/small/MI/wave.png
Binary file front_idill/src/pictos/small/MI/wave.png has changed
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/player/metadataplayer/Timeline.js
--- a/front_idill/src/player/metadataplayer/Timeline.js	Fri Jun 29 16:16:24 2012 +0200
+++ b/front_idill/src/player/metadataplayer/Timeline.js	Thu Jul 05 16:04:33 2012 +0200
@@ -24,12 +24,13 @@
 	this.markersDir = "pictos/small/";
 	this.player = player;
 	this.isCurrentlyInASearchByGesture = false;
+	this.mouseInteractions = false;
 	
 	//Id du marqueur enregistré.
 	this.currentMarkerId;
 	
-	this.gestures = ["fall", "jump", "circle", "screw", "bend", "arc", "knee-up", "right-angle", "wave", "slow", "hello", "no-motion", "contact"];
-	this.gesturesText = ["chute", "saut", "rotation", "rotation de groupe", "inclinaison", "port de bras", "levé de genou", "angle droit", "ondulation", "lent", "salut", "immobilité", "contact"];
+	this.gestures = ["fall", "jump", "circle", "screw", "bend", "arc", "knee-up", "right-angle", "wave", "no-motion", "contact"];
+	this.gesturesText = ["chute", "saut", "rotation", "rotation de groupe", "inclinaison", "port de bras", "levé de genou", "angle droit", "ondulation", "immobilité", "contact"];
 	
 	this.annotations = this.annotationsFilter(this.source.getAnnotations(), this.gestures, this.isGesture);
 	
@@ -44,6 +45,19 @@
 	return ($.inArray(element.annotationType.contents.title, array) > -1);
 }
 
+/*
+ * Spécifie si on est en événements souris ou non.
+*/
+IriSP.Widgets.Timeline.prototype.setMouseInteractions = function(mouseInteractions)
+{
+	this.mouseInteractions = mouseInteractions;
+	
+	if(mouseInteractions)
+	{
+		this.markersDir += 'MI/';
+	}
+}
+
 //Fonction associée à l'événement : les marqueurs sont prêts.
 IriSP.Widgets.Timeline.prototype.onMarkersReady = function() {}
 
@@ -239,8 +253,8 @@
 		else
 		{
 			// alert("Unknown gesture type. Operation aborted.");
-			this.removeSearch1Gesture();
-			this.notifySearch1Gesture(typeName, "none");
+			// this.removeSearch1Gesture();
+			// this.notifySearch1Gesture(typeName, "none");
 		}
 	}
 }
@@ -315,7 +329,7 @@
 		
 		var typeName = prompt("Please enter a type name among (" + gesturesStr + ").", "");
 		
-		this.notifySearch1Gesture(typeName, "valid");
+		// this.notifySearch1Gesture(typeName, "valid");
 		
 		if(typeName != '' || typeName != undefined)
 		{
@@ -327,8 +341,8 @@
 			else
 			{
 				// alert("Unknown gesture type. Operation aborted.");
-				this.removeSearch1Gesture();
-				this.notifySearch1Gesture(typeName, "none");
+				// this.removeSearch1Gesture();
+				// this.notifySearch1Gesture(typeName, "none");
 			}
 		}
 	}
@@ -781,7 +795,7 @@
 			// console.log('(1)');
 			// console.log(_this.currentMode);
 			_this.showMarkersSearchByType(type);
-			_this.notifySearch1Gesture(type, "valid");
+			// _this.notifySearch1Gesture(type, "valid");
 			return;
 		}
 	});
@@ -794,11 +808,11 @@
 		
 		if(!_.include(this.gestures, type))
 		{
-			this.notifySearch1Gesture(type, "none");
+			// this.notifySearch1Gesture(type, "none");
 		}
 		else
 		{
-			_this.notifySearch1Gesture(type, "valid");
+			// _this.notifySearch1Gesture(type, "valid");
 		}
 		// console.log(this.currentMode);
 	}
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/search/js/curvesDetector.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/front_idill/src/search/js/curvesDetector.js	Thu Jul 05 16:04:33 2012 +0200
@@ -0,0 +1,341 @@
+/*
+* 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 : curvesDetector.js
+ * 
+ * Auteur : alexandre.bastien@iri.centrepompidou.fr
+ * 
+ * Fonctionnalités : Détecteur de courbes de recherche, appelé par la classe de création du canvas de recherche.
+ */
+
+/*
+ * Détecteur de courbes (lignes droites, arcs de cercles et cercles).
+*/
+function curvesDetector(divisions, sizeTreshold, dictionary, mosaic)
+{
+	//Précision de la détection de direction en divisions (par défaut 12, selon une modélisation horaire et non mathématique).
+	this.divisions = divisions;
+	//Taille limite pour un segment/courbe pour être considéré comme tel en px.
+	this.sizeTreshold = sizeTreshold;
+	
+	this.dictionary = dictionary;
+	
+	this.mosaic = mosaic;
+	
+	//Code actuel généré. Il représente la structure de la courbe de recherche.
+	this.actualCode = '';
+	
+	this.joints = [];
+	this.jInc = 0;
+	
+	//Longueur totale de la courbe.
+	this.MPTotalDist = 0;
+	this.SPTotalDist = 0;
+	//Longueur de la partie actuelle (après début ou changement de direction).
+	this.MPActualDist = 0;
+	this.SPActualDist = 0;
+	//Angles actuels.
+	this.MPActualAngle = -1;
+	this.SPActualAngle = -1;
+	
+	//Centre du repère du pointeur principal.
+	this.MPrepX;
+	this.MPrepY;
+	//Centre du repère du pointeur secondaire.
+	this.SPrepX;
+	this.SPrepY;
+	
+	//Coordonnées actuelles du/des pointeur/s.
+	this.MPx = 0;
+	this.MPy = 0;
+	this.SPx = 0;
+	this.SPy = 0;
+	//Coordonnées précédentes du/des pointeur/s.
+	this.MPpx = 0;
+	this.MPpy = 0;
+	this.SPpx = 0;
+	this.SPpy = 0;
+	
+	//Si les paramètres sont incorrects, on leur donne une valeur par défaut.
+	if(isNaN(divisions) || divisions < 1 || divisions > 360)
+	{
+		this.divisions = 12;
+	}
+	if(sizeTreshold < 1)
+	{
+		sizeTreshold = 30;
+	}
+}
+
+/*
+ * Reinit les paramètres du détecteur.
+*/
+curvesDetector.prototype.reinit = function()
+{
+	this.MPrepX = 0;
+	this.MPrepY = 0;
+	this.MPpx = 0;
+	this.MPpy = 0;
+	this.MPActualAngle = -1;
+	this.SPActualAngle = -1;
+	this.actualCode = '';
+	
+	for(var i = 0 ; i < this.joints.length ; i++)
+	{
+		if(this.joints[i])
+		{
+			this.joints[i].remove();
+		}
+	}
+	
+	this.jInc = 0;
+	this.MPActualDist = 0;
+	this.MPTotalDist = 0;
+}
+
+/*
+ * Met à jour les positions des pointeurs
+*/
+curvesDetector.prototype.updatePos = function(mpx, mpy, spx, spy)
+{
+	//On met à jour les coordonnées récentes.
+	this.MPx = mpx;
+	this.MPy = mpy;
+	
+	//Si les coordonnées précédentes n'existent pas, alors on les met à jour.
+	if(!this.MPpx)
+	{
+		this.MPpx = mpx;
+	}
+	if(!this.MPpy)
+	{
+		this.MPpy = mpy;
+	}
+	if(!this.MPrepX)
+	{
+		this.MPrepX = mpx;
+	}
+	if(!this.MPrepY)
+	{
+		this.MPrepY = mpy;
+	}
+	
+	//Si on a un second pointeur.
+	if(spx && spy)
+	{
+		//On met les coordonnées à jour.
+		this.SPx = spx;
+		this.SPy = spy;
+		
+		//Si les coordonnées précédentes n'existent pas, alors on les met à jour.
+		if(!this.SPpx)
+		{
+			this.SPpx = spx;
+		}
+		if(!this.SPpy)
+		{
+			this.SPpy = spy;
+		}
+	}
+	
+	this.updateDists();
+}
+
+/*
+ * Met à jour les distances parcourues.
+*/
+curvesDetector.prototype.updateDists = function()
+{
+	var foundGestures;
+	
+	//Si on a de quoi calculer les distances.
+	if(this.MPx && this.MPy && this.MPpx && this.MPpy && this.MPrepX && this.MPrepY)
+	{
+		var MPDist = Math.floor(Math.sqrt((this.MPx - this.MPpx) * (this.MPx - this.MPpx) + (this.MPy - this.MPpy) * (this.MPy - this.MPpy)));
+		this.MPTotalDist += MPDist;
+		this.MPActualDist += MPDist;
+		
+		var MPCurrentA = -1;
+		
+		if(MPDist > 0)
+		{
+			MPCurrentA = this.currentAngle(this.MPrepX, this.MPrepY, this.MPx, this.MPy);
+			// console.log(MPCurrentA);//, this.MPActualDist);
+		}
+		
+		if(this.MPActualDist > this.sizeTreshold && MPCurrentA != -1)
+		{
+			console.log(this.MPActualAngle, MPCurrentA, this.MPActualAngle != -1, this.MPActualAngle != MPCurrentA);
+			if(this.MPActualAngle == -1 || this.MPActualAngle != MPCurrentA)
+			{
+				this.MPActualAngle = MPCurrentA;
+				this.actualCode += 'D' + MPCurrentA;
+				this.mosaic.actualCode = this.actualCode;
+				
+				foundGestures = this.codeToGestures(this.actualCode);
+				
+				console.log(+this.jInc+1, this.MPActualDist);
+				console.log(this.actualCode);
+				console.log(foundGestures);
+				
+				if(foundGestures.length == 0 || foundGestures.split(';').length != 1)
+				{
+					console.log('many curves');
+					this.mosaic.curvesGesturesFound = true;
+					$('.notifications').remove();
+					this.mosaic.curvesGestures(foundGestures);
+				}
+				else
+				{
+					// console.log(this.mosaic.currentMode);
+					this.mosaic.currentSearchGesture = foundGestures;
+					
+					if(this.mosaic.currentMode == "SEARCH" && this.mosaic.playerIsReady)
+					{
+						this.mosaic.player.widgets[0].searchByGesture(foundGestures);
+						this.mosaic.isCurrentlyInASearchByGesture = this.mosaic.player.widgets[0].isCurrentlyInASearchByGesture;
+						
+						$('.notifications').remove();
+						this.mosaic.searchGesture(foundGestures, 'valid');
+						
+						foundGestures = '';
+						this.mosaic.curvesGesturesFound = false;
+						
+						this.mosaic.isSearchByCurvesOn = false;
+						this.mosaic.leaveSearch();
+					}
+					else if(this.mosaic.currentMode == "FILTER")
+					{
+						if(this.mosaic.isMosaicFiltered)
+						{
+							console.log('1 curve : ' + foundGestures);
+							$('.notifications').remove();
+							this.mosaic.filterSearchedType = foundGestures;
+							this.mosaic.filterGesture(foundGestures, 'valid');
+							this.mosaic.searchFilter(foundGestures);
+							foundGestures = '';
+							this.mosaic.curvesGesturesFound = false;
+							
+							this.mosaic.isSearchByCurvesOn = false;
+							this.mosaic.leaveSearch();
+						}
+					}
+				}
+				
+				this.MPActualDist = 0;
+				this.jInc++
+			}
+			else
+			{
+				this.MPrepX = this.MPpx;
+				this.MPrepY = this.MPpy;
+				
+				if(this.joints[this.jInc])
+				{
+					this.joints[this.jInc].remove();
+				}
+				this.joints[this.jInc] = new paper.Path.Circle(new paper.Point(this.MPrepX, this.MPrepY), 10);
+				this.joints[this.jInc].strokeColor = 'black';
+				this.joints[this.jInc].fillColor = 'green';
+			}
+			
+			if(this.MPActualAngle == -1)
+			{
+				this.MPActualAngle = MPCurrentA;
+			}
+		}
+		
+		//On met à jour les coordonnées précédentes.
+		if(this.MPpx != this.MPx)
+		{
+			this.MPpx = this.MPx;
+		}
+		if(this.MPpy != this.MPy)
+		{
+			this.MPpy = this.MPy;
+		}
+	}
+	//Idem au cas où on aurait un deuxième pointeur.
+	if(this.SPx && this.SPy && this.SPpx && this.SPpy)
+	{
+		var SPDist = Math.floor(Math.sqrt((this.SPx - this.SPpx) * (this.SPx - this.SPpx) + (this.SPy - this.SPpy) * (this.SPy - this.SPpy)));
+		this.SPTotalDist += SPDist;
+		this.SPActualDist += SPDist;
+		
+		if(SPDist > 0)
+		{
+			this.currentAngle(this.SPpx, this.SPpy, this.SPx, this.SPy);
+		}
+		
+		//On met à jour les coordonnées précédentes.
+		if(this.SPpx != this.SPx)
+		{
+			this.SPpx = this.SPx;
+		}
+		if(this.SPpy != this.SPy)
+		{
+			this.SPpy = this.SPy;
+		}
+	}
+}
+
+/*
+ * Renvoie les noms de gestures du dictionnaire qui ont un code qui commence par le code en entrée.
+*/
+curvesDetector.prototype.codeToGestures = function(code)
+{
+	//Variable qui va stocker tous les noms trouvés.
+	var retNames = '';
+	
+	//Pour tout le dictionnaire.
+	for(var i = 0 ; i < this.dictionary.length ; i++)
+	{
+		//Pour touts les codes de chaque gesture du dictionnaire.
+		for(var j = 0 ; j < this.dictionary[i].codes.length ; j++)
+		{
+			//Si le code en entrée est une partie début d'un des codes.
+			if(this.dictionary[i].codes[j].indexOf(code) == 0)
+			{
+				//On ajoute le nom de la gesture et on passe à la gesture suivante.
+				retNames += this.dictionary[i].name + ';';
+				break;
+			}
+		}
+	}
+	//Comme on sépare chaque nom par un ;, il faut supprimer le dernier si au moins un nom a été trouvé.
+	if(retNames.length > 0)
+	{
+		retNames = retNames.substring(0, retNames.length-1);
+	}
+	
+	//On renvoit les noms.
+	return retNames;
+}
+
+/*
+ * Calcule l'angle emprunté par le morceau de segment actuel. On prend A va vers B.
+*/
+curvesDetector.prototype.currentAngle = function(xa, ya, xb, yb)
+{
+	//On calcule l'angle de la droite AB et des abscisses, et on effectue une rotation de 90° vers la gauche.
+	var angleRad = Math.atan2((ya - yb), (xa - xb)) - Math.PI / 2;
+	//On traduit les radians en divisions en passant de [-PI/2 ; PI/2] à [0 ; divisions - 1].
+	var angleDiv = Math.floor((angleRad > 0 ? angleRad : (2*Math.PI + angleRad)) * this.divisions / (2*Math.PI));
+	
+	//L'angle initial est 0.
+	if(angleDiv == this.divisions)
+	{
+		angleDiv = 0;
+	}
+	
+	return angleDiv;
+}
\ No newline at end of file
diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/search/js/searchCanvas.js
--- a/front_idill/src/search/js/searchCanvas.js	Fri Jun 29 16:16:24 2012 +0200
+++ b/front_idill/src/search/js/searchCanvas.js	Thu Jul 05 16:04:33 2012 +0200
@@ -1,5 +1,10 @@
-function searchCanvas(_canvasTop, _canvasLeft, _canvasWidth, _canvasHeight, _margin_top, _fadeTime, _inMosaic)
+
+/*
+ * Déclaration du canvas de recherche par courbes.
+*/
+function searchCanvas(_canvasTop, _canvasLeft, _canvasWidth, _canvasHeight, _margin_top, _fadeTime, _inMosaic, _mosaic)
 {
+	//Coordonnées, dimensions et autres paramètres du canvas.
 	this.canvasTop = _canvasTop;
 	this.canvasLeft = _canvasLeft;
 	this.canvasWidth = _canvasWidth;
@@ -7,27 +12,44 @@
 	this.fadeTime = _fadeTime;
 	this.margin_top = _margin_top;
 	
-	//tool.fixedDistance = 10;
+	this.mosaic = _mosaic;
+	
+	//Courbe du pointeur principal.
 	this.mainPath;
 	this.mainPathStroke;
-	this.mainLastPoint;
+	
+	//Courbe du pointeur secondaire.
 	this.secondPath;
 	this.secondPathStroke;
+	
+	//Courbe indicatrice de la direction actuelle.
+	this.direction;
+	
+	//Point précédent des pointeurs.
+	this.mainLastPoint;
 	this.secondLastPoint;
 	
+	//Coordonnées précédentes des pointeurs.
+	this.mainPointerLastX;
+	this.mainPointerLastY;
+	this.secondPointerLastX;
+	this.secondPointerLastY;
+	
 	this.inMosaic = _inMosaic;
 	
-	this.hitTool = new paper.Tool();
-	this.hitTool.fixedDistance = 10;
-	this.hitTool.activate();
+	this.detector;
 }
 
-searchCanvas.prototype.create = function()
+/*
+ * Fonction d'initialisation du canvas de recherche par courbes.
+*/
+searchCanvas.prototype.create = function(dictionary)
 {
 	var _this = this;
 	
+	//On crée le canvas.
 	var canvas = '<canvas id="paperCanvas" width="' + this.canvasWidth + 'px" height="' + this.canvasHeight + 'px" class="canvas"></canvas>';
-	
+	//On l'ajoute à la page.
 	$('body').append(canvas);
 	
 	$('.canvas').css(
@@ -36,6 +58,7 @@
 		left: this.canvasLeft
 	});
 	
+	//S'il est dans la mosaique, on le réhausse en fonction de la taille de la marge verticale.
 	if(this.inMosaic)
 	{
 		console.log(this.margin_top);
@@ -45,14 +68,16 @@
 		});
 	}
 	
-	paper.setup('paperCanvas');
+	//On instancie le détecteur de courbes de recherche.
+	this.detector = new curvesDetector(6, 100, dictionary, this.mosaic);
 	
-	this.hitTool.onMouseDown = this.onPointerIn;
-	this.hitTool.onMouseDrag = this.onPointerMove;
-	this.hitTool.onMouseUp = this.onPointerOut;
-	this.hitTool.onKeyDown = this.onKeyDown;
+	//On active le canvas.
+	paper.setup('paperCanvas');
 };
 
+/*
+ * Fonction appelée pour quitter le mode de recherche par courbes.
+*/
 searchCanvas.prototype.leaveSearch = function()
 {
 	$('.canvas').fadeTo(this.fadeTime, 0, function()
@@ -61,96 +86,167 @@
 	});
 };
 
+/*
+ * Fonction de déclaration des courbes.
+*/
 searchCanvas.prototype.onPointerIn = function(mainPointerX, mainPointerY, secondPointerX, secondPointerY)
 {
-	this.mainPathStroke = new paper.Path();
-	this.mainPath = new paper.Path();
-	this.secondPathStroke = new paper.Path();
-	this.secondPath = new paper.Path();
+	//On obtient les coordonnées du pointeur principal en px.
+	mainPointerX = Math.floor(mainPointerX);
+	mainPointerY = Math.floor(mainPointerY);
 	
-	this.mainPathStroke.fillColor = '#366F7A';
-	this.mainPath.fillColor = '#02FEFF';
-	this.secondPathStroke.fillColor = '#366F7A';
-	this.secondPath.fillColor = '#02FEFF';
-	
-	// var pointerX = e.point.x, pointerY = e.point.y;
-	
-	console.log('IN');
-	
-	var mainPoint = new paper.Point(mainPointerX, mainPointerY);
-	var secondPoint = new paper.Point(secondPointerX, secondPointerY);
+	//On forme le contour la courbe principale.
+	this.mainPathStroke = new paper.Path();
+	this.mainPathStroke.strokeColor = '#366F7A';
+	this.mainPathStroke.strokeWidth = 18;
+	this.mainPathStroke.strokeCap = 'round';
+	this.mainPathStroke.strokeJoin = 'round';
 	
-	if(!this.mainLastPoint)
-	{
-		this.mainLastPoint = mainPoint;
-	}
-	if(!this.secondLastPoint)
-	{
-		this.secondLastPoint = secondPoint;
-	}
-};
-
-searchCanvas.prototype.onPointerMove = function(mainPointerX, mainPointerY, secondPointerX, secondPointerY)
-{
-	// var pointerX = e.point.x, pointerY = e.point.y;
+	//On forme la courbe principale.
+	this.mainPath = new paper.Path();
+	this.mainPath.strokeColor = '#02FEFF';
+	this.mainPath.strokeWidth = 10;
+	this.mainPath.strokeCap = 'round';
+	this.mainPath.strokeJoin = 'round';
 	
-	var mainPoint = new paper.Point(mainPointerX, mainPointerY);
-	var secondPoint = new paper.Point(secondPointerX, secondPointerY);
-	// var delta = new paper.Point(point.x - this.lastPoint.x, point.y - this.lastPoint.y);
-	var mainDelta = new paper.Point(15, 15);
-	var secondDelta = new paper.Point(15, 15);
+	this.direction = new paper.Path();
+	this.direction.strokeColor = '#FF0000';
+	this.direction.strokeWidth = 5;
+	this.direction.strokeCap = 'round';
+	this.direction.strokeJoin = 'round';
 	
-	this.mainLastPoint = mainPoint;
-	this.secondLastPoint = secondPoint;
-	
-	var mainStep = mainDelta.divide(new paper.Point(4, 4));
-	var secondStep = secondDelta.divide(new paper.Point(4, 4));
+	//Si on a un pointeur secondaire
+	if(secondPointerX && secondPointerY)
+	{
+		//On obtient les coordonnées du pointeur secondaire en px.
+		secondPointerX = Math.floor(secondPointerX);
+		secondPointerY = Math.floor(secondPointerY);
+		
+		//On forme le contour de la courbe secondaire.
+		this.secondPathStroke = new paper.Path();
+		this.secondPathStroke.fillColor = '#366F7A';
+		this.secondPathStroke.strokeWidth = 12;
+		this.secondPathStroke.strokeCap = 'round';
+		this.secondPathStroke.strokeJoin = 'round';
+		
+		//On forme la courbe secondaire.
+		this.secondPath = new paper.Path();
+		this.secondPath.fillColor = '#02FEFF';
+		this.secondPath.strokeWidth = 10;
+		this.secondPath.strokeCap = 'round';
+		this.secondPath.strokeJoin = 'round';
+	}
 	
-	var mainStepStroke = mainDelta.divide(new paper.Point(2, 2));
-	mainStep.angle += 90;
-	mainStepStroke.angle += 90;
-	var secondStepStroke = secondDelta.divide(new paper.Point(2, 2));
-	secondStep.angle += 90;
-	secondStepStroke.angle += 90;
-
-	var mainTop = mainPoint.add(mainStep);
-	var mainBottom = mainPoint.add(mainStep.negate());
-	var secondTop = secondPoint.add(secondStep);
-	var secondBottom = secondPoint.add(secondStep.negate());
-
-	var mainTopStroke = mainPoint.add(mainStepStroke);
-	var mainBottomStroke = mainPoint.add(mainStepStroke.negate());
-	var secondTopStroke = secondPoint.add(secondStepStroke);
-	var secondBottomStroke = secondPoint.add(secondStepStroke.negate());
-
-	this.mainPath.add(mainTop);
-	this.mainPath.insert(0, mainBottom);
-    this.mainPath.smooth();
-    
-	this.secondPath.add(secondTop);
-	this.secondPath.insert(0, secondBottom);
-	this.secondPath.smooth();
+	// console.log('IN');
 	
-	this.mainPathStroke.add(mainTopStroke);
-	this.mainPathStroke.insert(0, mainBottomStroke);
-    this.mainPathStroke.smooth();
-	
-	this.secondPathStroke.add(secondTopStroke);
-	this.secondPathStroke.insert(0, secondBottomStroke);
-    this.secondPathStroke.smooth();
-	
+	//On raffraichit l'affichage.
 	paper.view.draw();
 };
 
+/*
+ * Fonction appelée lorsque les pointeurs bougent pour construire la courbe.
+*/
+searchCanvas.prototype.onPointerMove = function(mainPointerX, mainPointerY, secondPointerX, secondPointerY)
+{
+	// console.log('MOVE');
+	
+	if(!this.mainPointerLastX || !this.mainPointerLastY)
+	{
+		this.mainPointerLastX = mainPointerX;
+		this.mainPointerLastY = mainPointerY;
+	}
+	
+	//On obtient les coordonnées du pointeur principal en px.
+	mainPointerX = Math.floor(mainPointerX);
+	mainPointerY = Math.floor(mainPointerY);
+	
+	//On crée les points de la courbe principale.
+	var mainPoint = new paper.Point(mainPointerX, mainPointerY);
+	var mainPointStroke = new paper.Point(mainPointerX, mainPointerY);
+	
+	//On les ajoute à la courbe.
+	this.mainPathStroke.add(mainPointStroke);
+	this.mainPathStroke.smooth();
+	
+	this.mainPath.add(mainPoint);
+	this.mainPath.smooth();
+	
+	//this.direction.remove();
+	// console.log(this.mainPointerLastX, this.mainPointerLastY);
+	var directionPoint = new paper.Point(this.mainPointerLastX, this.mainPointerLastY);
+	var directionPointEnd = new paper.Point((mainPointerX - this.mainPointerLastX) * 2 + mainPointerX, (mainPointerY - this.mainPointerLastY) * 2 + mainPointerY);
+	this.direction.add(directionPoint);
+	this.direction.add(directionPointEnd);
+	this.direction.smooth();
+	
+	//Variables de construction de la courbe secondaire.
+	var secondPoint, secondDelta, secondStep, secondStepStroke, secondTop, secondBottom, secondTopStroke, secondBottomStroke;
+	
+	//Si on a un pointeur secondaire.
+	if(secondPointerX && secondPointerY)
+	{
+		//On obtient les coordonnées du pointeur secondaire en px.
+		secondPointerX = Math.floor(secondPointerX);
+		secondPointerY = Math.floor(secondPointerY);
+		
+		//On crée les points de la courbe secondaire.
+		secondPoint = new paper.Point(mainPointerX, mainPointerY);
+		secondPointStroke = new paper.Point(mainPointerX, mainPointerY);
+		
+		//On les ajoute à la courbe.
+		this.secondPathStroke.add(secondPointStroke);
+		this.secondPathStroke.smooth();
+		
+		this.secondPath.add(secondPoint);
+		this.secondPath.smooth();
+	}
+	
+	if(this.mainPointerLastX != mainPointerX)
+	{
+		this.mainPointerLastX = mainPointerX;
+	}
+	if(this.mainPointerLastY != mainPointerY)
+	{
+		this.mainPointerLastY = mainPointerY;
+	}
+	
+	//On met à jour les points dans le détecteur de courbes.
+	this.detector.updatePos(mainPointerX, mainPointerY);
+	
+	//On met à jour l'affichage.
+	paper.view.draw();
+};
+
+/*
+ * Fonction appelée lorsqu'on cesse de dessiner une courbe.
+*/
 searchCanvas.prototype.onPointerOut = function()
 {
+	// console.log('OUT');
+	
+	//On réinitialise la courbe principale.
 	this.mainPathStroke.remove();
 	this.mainPath.remove();
-	this.mainLastPoint = null;
+	
+	this.mainPointerLastX = 0;
+	this.mainPointerLastY = 0;
+	
+	this.direction.remove();
+	
+	this.detector.reinit();
 	
-	this.secondPathStroke.remove();
-	this.secondPath.remove();
-	this.secondLastPoint = null;
+	//Si on a un second pointeur, on réinitialise la courbe secondaire.
+	if(this.secondPathStroke)
+	{
+		this.secondPathStroke.remove();
+	}
+	if(this.secondPath)
+	{
+		this.secondPath.remove();
+	}
+	
+	//On met à jour l'affichage.
+	paper.view.draw();
 };
 
 searchCanvas.prototype.onKeyDown = function(event)