front_idill/src/mosaic/js/notifications.js
changeset 45 0e29ae4568a0
parent 44 8393d3473b98
child 46 9d7a2aa112fb
--- 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