diff -r 4003f84cd349 -r 2d9b15f99b4e front_idill/src/mosaic/js/mosaic.js
--- a/front_idill/src/mosaic/js/mosaic.js	Mon May 14 17:20:35 2012 +0200
+++ b/front_idill/src/mosaic/js/mosaic.js	Thu May 24 10:30:05 2012 +0200
@@ -22,7 +22,7 @@
  * Elle contient sa longueur, le nombre d'images total, une liste d'urls pour les vidéos, leurs snapshots principaux et leur position.
  * Contient également les dimensions en px de la mosaïque.
  */
-function mosaic(len, imgToShow, zoomPercentage, prezoomPercentage, zoomedMargin)
+function mosaic(len, imgToShow, imgTotal, zoomPercentage, prezoomPercentage, zoomedMargin)
 {
     //S'il s'agit d'un rectangle.
     if(imgToShow % len == 0)
@@ -30,12 +30,24 @@
         //Longueur horizontale.
         this.length = len;
         //Nombre d'images dans la mosaïque.
-        this.imagesToShow = imgToShow;
+        this.imagesToShow = imgToShow;
+		this.imagesTotal = imgTotal;
         //Tableaux des urls des vidéos, des snapshots et de leur position dans la mosaïque.
         this.videos = [];
         this.urls = [];
         this.imgs = [];
-        this.ids = [];
+        this.ids = [];
+		//On remplit le tableau d'ids.
+		for(var i = 0 ; i < this.imagesTotal ; i++)
+			this.ids.push(i);
+		//On les mélange.
+		this.ids.sort(function()
+		{
+			return 0.5 - Math.random()
+		});
+		
+		console.log(this.ids);
+		
         //Dimensions de la mosaïque en pixels.
         this.width;
         this.height;
@@ -53,11 +65,14 @@
         this.timeNeighbourGlowing;
         this.timeNeighbourUnglowing;
         this.timeMovingToNeighbour;
+		this.timeSearchFade;
+		this.timeNotifyFade;
         
         //Booléens permettant ou non certaines intéractions selon le contexte.
         this.zoomed;
         this.fullscreen;
         this.canMoveToNeighbour;
+		this.helpDisplayed;
         
         //Mode actuel.
         this.currentMode;
@@ -80,8 +95,17 @@
         //ID du snapshot du milieu lors d'un zoom.
         this.centerId;
 		
+		//Lecteur.
 		this.player;
 		
+		//Coordonnées et dimensions d'un snapshot zoomé.
+		this.snTop = 0;
+		this.snLeft = 0;
+		this.snWidth = 0;
+		this.snHeight = 0;
+		
+		this.searchCanvas;
+		
 		this.loadFromJson('./player/json/videos.json');
     }
     else
@@ -100,6 +124,7 @@
     this.previousPrezoomDiv = '';
     this.fullscreen = false;
     this.canMoveToNeighbour = false;
+	this.helpDisplayed = false;
     var str = '';
     
     if(this.imgs.length >= this.imagesToShow)
@@ -150,6 +175,9 @@
     this.MPTop_margin = ($(document).height() - $('#mainPanel').height())/2;
     $('#mainPanel').css('margin-top', this.MPTop_margin).css('margin-bottom', this.MPTop_margin);
 	
+	//On affiche les notifications.
+	this.notifySelectionSearchMosaicFull();
+	
 	$('.snapshotDivs').mouseenter(function ()
 	{
 		//On effectue un prézoom dès qu'on va sur une image.
@@ -175,6 +203,10 @@
 	{
         return;
 	}
+	
+	//On enlève les notifications initiales si elles existent.
+	this.removeSelectionSearchMosaicFull();
+	
     //Mosaïque.
     var mosaic = this;
     //Dimensions de la mosaïque.
@@ -272,7 +304,10 @@
             height: finalDivHeight - margin,
             top: finalDivTop + margin,
             left: finalDivLeft
-        }, this.preZoomTime);
+        }, this.preZoomTime, function()
+		{
+			mosaic.notifyPointMosaicPrezoom();
+		});
     });
     
     //Si on clique sur le snapshot prézoomé, on enclenche un zoom total sur ce snapshot.
@@ -295,6 +330,8 @@
 	{
         return;
 	}
+	
+	this.removePointMosaicPrezoom();
     
     //On spécifie la marge afin de centrer le prédézoom.
     var margin = this.marginWidth;
@@ -332,6 +369,8 @@
 	{
         return;
 	}
+	
+	this.removePointMosaicPrezoom();
     
     //On prend les attributs nécessaires au calculs.
     var margin = this.marginWidth, len = this.length, imgs = this.imagesToShow;
@@ -389,8 +428,11 @@
         mos.currentMode = 'VIDEO';
 		
 		console.log('h : ' + -newZoomLeft + " " + zoomedImg.position().left);
+
+		mos.snTop = (zoomedImg.position().top + newZoomTop + mos.MPTop_margin), mos.snLeft = (zoomedImg.position().left + newZoomLeft);
+		mos.snWidth = newSnWidth + 1, mos.snHeight = newSnHeight + 1;
 		
-		mos.loadPlayer((zoomedImg.position().top + newZoomTop + mos.MPTop_margin), (zoomedImg.position().left + newZoomLeft), newSnWidth + 1, newSnHeight + 1);
+		mos.loadPlayer(mos.snTop, mos.snLeft, mos.snWidth, mos.snHeight, newZoomTop, newZoomLeft);
 		
         /*mos.unload();
         mos.localMos.loadLocalMosaic(newZoomTop, newZoomLeft, newSnWidth, newSnHeight, mos.imgs, tab[1]);*/
@@ -400,7 +442,7 @@
 /*
  * Chargement du player basé sur le metadataplayer.
 */
-mosaic.prototype.loadPlayer = function(newZoomTop, newZoomLeft, newSnWidth, newSnHeight)
+mosaic.prototype.loadPlayer = function(newZoomTop, newZoomLeft, newSnWidth, newSnHeight, zoomTop, zoomLeft)
 {
 	//On configure les options de lancement.
 	IriSP.libFiles.defaultDir = "../lib/";
@@ -411,14 +453,15 @@
 	console.log('VIDEO[' + this.centerId + '] : ' + videoToPlay);
 	console.log('MD[' + this.centerId + '] : ' + currentMetadata);
 	
-	console.log(newZoomTop + " " + newZoomLeft);
-	
 	var _metadata = {
 		url: currentMetadata,
 		format: 'ldt'
 	};
+	console.log(zoomTop + " m" + this.marginWidth);
 	var _config = {
 		gui: {
+			zoomTop: zoomTop - this.marginWidth*2,
+			zoomLeft: zoomLeft,
 			width: newSnWidth,
 			height: newSnHeight,
 			container: 'LdtPlayer',
@@ -467,6 +510,11 @@
 	{
         return;
 	}
+	
+	this.snTop = 0;
+	this.snLeft = 0;
+	this.Width = 0;
+	this.snHeight = 0;
     
     //On charge les attributs nécessaires aux calculs.
     var sWidth = this.snapshotWidth, sHeight = this.snapshotHeight;
@@ -478,7 +526,8 @@
     var src = zoomedImg.attr('src');
     zoomedImg.attr('src', src.replace('snapshots/', 'snapshots-little/'));
 	
-	$('div').remove('.LdtPlayer');
+	mos.player.widgets[0].freePlayer();
+	$('.LdtPlayer').remove();
 	$('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
     
     //On rend leur opacité aux snapshots. Qui ne sont alors plus grisés.
@@ -505,6 +554,8 @@
         mos.currentMode = 'MOSAIC';
         //On ne permet plus le déplacement vers les voisins.
         $('.snapshotDivs').unbind('mouseenter', mos.selectNeighbour);
+		//On remet les notifications initiales.
+		mos.notifySelectionSearchMosaicFull();
     });
 }
 
@@ -691,7 +742,8 @@
     $(this).css('opacity', '0');
     neighbourFrame.remove();
     
-	$('div').remove('.LdtPlayer');
+	mos.player.widgets[0].freePlayer();
+	$('.LdtPlayer').remove();
 	$('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
 	
     //On grise le snapshot qu'on vient de quitter.
@@ -718,7 +770,7 @@
             mos.previousZoomedSN = $('#snapshotDiv-' + mos.centerId);
             mos.listenToNeighbours();
 			
-			mos.loadPlayer((destinationImg.position().top + MPCurrentTop + mos.MPTop_margin), (destinationImg.position().left + MPCurrentLeft), destinationImg.width(), destinationImg.height());
+			mos.loadPlayer((destinationImg.position().top + MPCurrentTop + mos.MPTop_margin), (destinationImg.position().left + MPCurrentLeft), destinationImg.width(), destinationImg.height(), MPCurrentTop, MPCurrentLeft);
         });
     });
 }
@@ -776,6 +828,7 @@
 mosaic.prototype.loadFromJson = function(path)
 {
 	var _this = this;
+	var i = 0;
 
 	$.getJSON(path, function(data)
 	{
@@ -786,12 +839,15 @@
 			{
 				$.getJSON(val_video.metadata, function(meta)
 				{
-					_this.affectVideoById(val_video.metadata, meta.medias[0].url.replace('rtmp://', 'http://').replace('/ddc_player/', '/'));
+					_this.affectVideoById(val_video.metadata, meta.medias[0].url.replace('rtmp://', 'http://').replace('/ddc_player/', '/').replace('mp4:', '').replace('.m4v', '.mp4'));
 					//console.log(meta.medias[0].url.replace('rtmp://', 'http://').replace('/ddc_player/', '/'));
 				});
 				
-				_this.imgs.push(val_video.snapshot);
-				_this.urls.push(val_video.metadata);
+				// _this.imgs.push(val_video.snapshot);
+				// _this.urls.push(val_video.metadata);
+				_this.imgs[_this.ids[i]] = val_video.snapshot;
+				_this.urls[_this.ids[i]] = val_video.metadata;
+				i++;
 			});
 		});
 		console.log('rdy');
@@ -812,4 +868,267 @@
 			break;
 		}
 	}
+}
+
+/*
+ * Lance une recherche par courbes.
+ */
+mosaic.prototype.startSearch = function()
+{
+	var top, left, width, height, margin_top, inMosaic;
+	//Si on est dans le cas d'un filtrage de mosaïque.
+	if(this.currentMode == "FILTER")
+	{
+		var mainPanel = $('#mainPanel');
+		top = mainPanel.position().top;
+		left = mainPanel.position().left;
+		width = mainPanel.width();
+		height = mainPanel.height();
+		margin_top = this.MPTop_margin;
+		inMosaic = true;
+	}
+	//Sinon si c'est une recherche dans la vidéo.
+	else if(this.currentMode == "SEARCH")
+	{
+		top = this.snTop;
+		left = this.snLeft;
+		width = this.snWidth;
+		height = this.snHeight;
+		margin_top = '0px';
+		inMosaic = false;
+	}
+	
+	this.searchCanvas = new searchCanvas(top, left, width, height, margin_top, this.timeSearchFade, inMosaic);
+	this.searchCanvas.create();
+}
+
+/*
+ * Quitte une recherche par courbes.
+ */
+mosaic.prototype.leaveSearch = function()
+{
+	this.searchCanvas.leaveSearch();
+}
+
+/* ===============================================
+ *												   *
+ *		      ZONE DES NOTIFICATIONS			   *
+ *												   *
+   =============================================== */
+
+/*
+ * Affiche la notification de sélection/recherche lorsque la mosaique est complète.
+*/
+mosaic.prototype.notifySelectionSearchMosaicFull = function()
+{
+	//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()
+{
+	$('#notify_selection, #notify_search').remove();
+}
+
+/*
+ * Affiche la notification de maintient du pointage lors d'une phase de prézoom.
+*/
+mosaic.prototype.notifyPointMosaicPrezoom = function()
+{
+	if($('#notify_point').length > 0)
+	{
+		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);
+	console.log('Append');
+	//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()
+{	
+	$('#notify_point').remove();
+}
+
+/*
+ * Affiche l'aide.
+*/
+mosaic.prototype.notifyHelp = function()
+{
+	if(this.helpDisplayed)
+	{
+		return;
+	}
+	
+	this.removeSelectionSearchMosaicFull();
+	this.removePointMosaicPrezoom();
+	
+	this.helpDisplayed = true;
+	
+	var search_2hands_tab = ['no_motion', 'right_angle', 'contact', 'grand_jete', 'circle', 'screw', 'arc', 'rythme', 'slow', 'up_down', 'wave', 'wheel'];
+	var search_body_tab = ['bend', 'fall', 'jump', 'hello', 'knee_up'];
+	var controls_1hand_tab = ['selection'];
+	
+	//On spécifie les notifications en div.
+	var search_title = "<div id='search_title'></div>";
+	var search_img = "<div id='search_img' class='notify_imgs'></div>";
+	var search_2hands_text = "<div id='search_2hands_text'></div>";
+	var search_2hands_imgs = "<div id='search_2hands_imgs' class='notify_imgs_big'>";
+	
+	for(var i = 0 ; i < search_2hands_tab.length ; i++)
+	{
+		search_2hands_imgs += "<div id='2hands_" + search_2hands_tab[i] + "' class='notify_imgs_small'></div>";
+	}
+	search_2hands_imgs += "</div>";
+	
+	var search_body_text = "<div id='search_body_text'></div>";
+	var search_body_imgs = "<div id='search_2hands_imgs' class='notify_imgs'>"
+	
+	for(var i = 0 ; i < search_body_tab.length ; i++)
+	{
+		search_body_imgs += "<div id='body_" + search_body_tab[i] + "' class='notify_imgs_small'></div>";
+	}
+	search_body_imgs += "</div>";
+	
+	var controls_title = "<div id='controls_title'></div>";
+	var controls_img = "<div id='controls_img' class='notify_imgs'></div>";
+	var controls_1hand_text = "<div id='controls_1hand_text'></div>";
+	var controls_1hand_imgs = "<div id='controls_1hand_imgs' class='notify_imgs'>";
+	
+	for(var i = 0 ; i < controls_1hand_tab.length ; i++)
+	{
+		controls_1hand_imgs += "<div id='1hand_" + controls_1hand_tab[i] + "' class='notify_imgs_small'></div>";
+	}
+	controls_1hand_imgs += "</div>";
+	
+	var help_search = "<div id='help_search'>" + search_title + search_img + search_2hands_text + search_2hands_imgs + search_body_text + search_body_imgs + "</div>";
+	var help_controls = "<div id='help_controls'>" + controls_title + controls_img + controls_1hand_text + controls_1hand_imgs + "</div>";
+	
+	var notification_help = "<div id='notify_help'>" + help_search + "<div id='help_sep'></div>" + help_controls + "</div>";
+	
+	//On les ajoute à la mosaïque.
+	$('body').append(notification_help);
+	
+	//On calcule leurs coordonnées et dimensions.
+	var notify_width = $(window).width(), notify_height = $(window).height();
+	var notify_margin = parseInt($('#notify_help').css('margin'));
+	var notify_ = 10;
+	
+	//On les positionne.
+	$('#notify_help').css(
+	{
+		left: "0px",
+		top: "0px",
+		width: notify_width - notify_margin * 2,
+		height: notify_height - notify_margin * 2,
+		"margin-top": notify_margin_top
+	});
+	
+	var search_width = $('#help_search').width();
+	
+	$('#search_title').html('Recherche');
+	$('#search_2hands_text').html('Gestes à effectuer avec les deux mains');
+	$('#search_body_text').html('Gestes à effectuer avec le corps entier');
+	
+	for(var i = 0 ; i < search_2hands_tab.length ; i++)
+	{
+		$("#2hands_" + search_2hands_tab[i]).css("background-image", "url('./pictos/help/" + search_2hands_tab[i] + ".png')");
+		//console.log("url('../../pictos/help/" + search_2hands_tab[i] + ".png')");
+	}
+	
+	for(var i = 0 ; i < search_body_tab.length ; i++)
+	{
+		$("#body_" + search_body_tab[i]).css("background-image", "url('./pictos/help/" + search_body_tab[i] + ".png')");
+		//console.log("url('../../pictos/help/" + search_2hands_tab[i] + ".png')");
+	}
+	
+	$('#controls_title').html('Contrôles');
+	$('#controls_1hand_text').html('Gestes à effectuer avec une seule main');
+	
+	for(var i = 0 ; i < controls_1hand_tab.length ; i++)
+	{
+		$("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('./pictos/help/" + controls_1hand_tab[i] + ".png')");
+		//console.log("url('../../pictos/help/" + search_2hands_tab[i] + ".png')");
+	}
+	
+	//On les fait apparaître.
+	$('#notify_help').css(
+	{
+		opacity: "1"
+	});
+	
+	$('.notify_imgs_big').css(
+	{
+		opacity: "1"
+	});
+}
+
+/*
+ * Supprime l'aide.
+*/
+mosaic.prototype.removeHelp = function()
+{
+	if(!this.helpDisplayed)
+	{
+		return;
+	}
+	
+	var _this = this;
+	
+	$('#notify_help').fadeOut(this.timeNotifyFade, function()
+	{
+		_this.helpDisplayed = false;
+		$('#notify_help').remove();
+	});
 }
\ No newline at end of file