front_idill/src/mosaic/js/notifications.js
author bastiena
Fri, 29 Jun 2012 16:16:24 +0200
changeset 44 8393d3473b98
child 45 0e29ae4568a0
permissions -rw-r--r--
Front IDILL: Updated, mosaic spreaded into several files, new pictures and pictograms

/* ===============================================
 *												   *
 *		      ZONE DES NOTIFICATIONS			   *
 *												   *
   =============================================== */

/*
 * 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)
{
	if(this.helpDisplayed)
	{
		return;
	}
	
	this.removeSelectionSearchMosaicFull();
	this.removePointMosaicPrezoom();
	
	this.helpDisplayed = true;
	
	var search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'rythme', 'slow', 'spin', 'up_down', 'wave'];
	var search_2hands_tab_opacities = [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5];
	var search_body_tab = ['chute', 'knee_up', 'jump', 'bend'];
	var search_body_tab_opacities = [1, 1, 1, 1];
	var controls_1hand_tab;
	var controls_1hand_tab_1;
	var controls_1hand_tab_2;
	var controls_1hand_tab_opacities;
	var controls_1hand_tab_opacities_1;
	var controls_1hand_tab_opacities_2;
	
	if(inMosaic)
	{
		controls_1hand_tab = ['selection'];
		controls_1hand_tab_opacities = [1];
	}
	else
	{
		controls_1hand_tab_1 = ['deplacer', 'precedent', 'suivant', 'mosaique_horizontal', 'mosaique_vertical'];
		controls_1hand_tab_2 = ['move_down', 'move_up', 'move_right', 'move_left'];
		controls_1hand_tab_opacities_1 = [1, 1, 1, 1, 1];
		controls_1hand_tab_opacities_2 = [1, 1, 1, 1];
	}
	
	//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' style='opacity: " + search_2hands_tab_opacities[i] + ";'></div>";
	}
	search_2hands_imgs += "</div>";
	
	var search_body_text = "<div id='search_body_text'></div>";
	var search_body_imgs = "<div id='search_body_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' style='opacity: " + search_body_tab_opacities[i] + ";'></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;
	var controls_1hand_imgs_1;
	var controls_1hand_imgs_2;
	
	if(inMosaic)
	{
		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' style='opacity: " + controls_1hand_tab_opacities[i] + ";'></div>";
		}
		controls_1hand_imgs += "</div>";
	}
	else
	{
		controls_1hand_imgs_1 = "<div id='controls_1hand_imgs_1' class='notify_imgs'>";
		controls_1hand_imgs_2 = "<div id='controls_1hand_imgs_2' class='notify_imgs'>";
		for(var i = 0 ; i < controls_1hand_tab_1.length ; i++)
		{
			controls_1hand_imgs_1 += "<div id='1hand_" + controls_1hand_tab_1[i] + "' class='notify_imgs_small' style='opacity: " + controls_1hand_tab_opacities_1[i] + ";'></div>";
		}
		controls_1hand_imgs_1 += "</div>";
		for(var i = 0 ; i < controls_1hand_tab_2.length ; i++)
		{
			controls_1hand_imgs_2 += "<div id='1hand_" + controls_1hand_tab_2[i] + "' class='notify_imgs_small' style='opacity: " + controls_1hand_tab_opacities_2[i] + ";'></div>";
		}
		controls_1hand_imgs_2 += "</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;

	if(inMosaic)
	{
		help_controls = "<div id='help_controls'>" + controls_title + controls_img + controls_1hand_text + controls_1hand_imgs + "</div>";
	}
	else
	{
		help_controls = "<div id='help_controls'>" + controls_title + controls_img + controls_1hand_text + controls_1hand_imgs_1 + controls_1hand_imgs_2 + "</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,
		'z-index': 2000
	});
	
	// console.log(($('#help_search').width() - ($('.notify_imgs_small').width() * 5 + parseInt($('.notify_imgs_small').css('margin')))) / 2);
	
	$('#search_2hands_imgs').css(
	{
		'padding-left': ($('#help_search').width() - ($('.notify_imgs_small').width() * 5 + parseInt($('.notify_imgs_small').css('margin')))) / 2,
		'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin')))
	});
	
	$('#search_body_imgs').css(
	{
		'padding-left': ($('#help_search').width() - ($('.notify_imgs_small').width() * 4 + parseInt($('.notify_imgs_small').css('margin')))) / 2,
		'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin')))
	});
	
	if(inMosaic)
	{
		$('#controls_1hand_imgs').css(
		{
			'padding-left': ($('#help_controls').width() - ($('.notify_imgs_small').width())) / 2,
			'height': ($('.notify_imgs_small').height())
		});
	}
	else
	{
		$('#controls_1hand_imgs_1').css(
		{
			'padding-left': ($('#help_controls').width() - ($('.notify_imgs_small').width() * 5 + parseInt($('.notify_imgs_small').css('margin')))) / 2,
			'height': ($('.notify_imgs_small').height())
		});
		$('#controls_1hand_imgs_2').css(
		{
			'padding-left': ($('#help_controls').width() - ($('.notify_imgs_small').width() * 4 + parseInt($('.notify_imgs_small').css('margin')))) / 2,
			'height': ($('.notify_imgs_small').height())
		});
	}
	
	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');
	
	if(inMosaic)
	{
		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')");
		}
	}
	else
	{
		for(var i = 0 ; i < controls_1hand_tab_1.length ; i++)
		{
			$("#1hand_" + controls_1hand_tab_1[i]).css("background-image", "url('./pictos/help/" + controls_1hand_tab_1[i] + ".png')");
		}
		for(var i = 0 ; i < controls_1hand_tab_2.length ; i++)
		{
			$("#1hand_" + controls_1hand_tab_2[i]).css("background-image", "url('./pictos/help/" + controls_1hand_tab_2[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;
		// _this.canNotifyHelp = false;
		_this.canNotifyHelp = true;
		console.log('CAN NOT NOTIFY HELP');
		$('#notify_help').remove();
	});
}

/*
 * Affiche la notification de validation/survol de gesture de filtrage.
 * Mode prend pour valeurs : "valid" ou "hover".
*/
mosaic.prototype.notifySearch1Gesture = function(gestureName, mode)
{
	// console.log('C');
	if($('#notify_search_1gesture').length > 0)
	{
		$('#notify_search_1gesture').remove();
	}
	
	//Si on a effectué une demande de recherche auparavant, on supprime la notification de demande de recherche.
	if($('#notify_search').length > 0)
	{
		$('.notifications').remove();
	}
	
	var _this = this;
	
	//On spécifie les notifications en div.
	var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
	
	//On les ajoute à la mosaïque.
	$('body').append(notification_search_1gesture);
	
	// 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;
	
	if(_.include(this.gestures, gestureName))
	{
		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
	}
	else if(mode == 'none')
	{
		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
	}
	
	//On les positionne.
	$('#notify_search_1gesture').css(
	{
		top: 0,
		left: ($(window).width() - notify_width) / 2
	});
	
	//On les fait apparaître.
	$('.notifications').css(
	{
		opacity: "0.9"
	});
}

// /!\/!\/!\ //

/* NOUVELLES NOTIFICATIONS */

// /!\/!\/!\ //

/*
 * Affichage de la notification de sélection & recherche dans la mosaïque.
*/
mosaic.prototype.mosaicSelectionAndSearch = function()
{
	if(this.currentMode != 'MOSAIC')
	{
		return;
	}
	
	//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.
	$('body').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"
	});
}

/*
 * Affichage de la notification de sélection dans la mosaïque.
*/
mosaic.prototype.mosaicSelection = function()
{
	if(this.currentMode != 'MOSAIC')
	{
		return;
	}
	
	//On spécifie la notification en div.
	var notification_selection = "<div id='notify_selection' class='notifications'></div>";
	
	//On l'ajoute à la mosaïque.
	$('body').append(notification_selection);

	//On calcule ses 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;
	
	//On les positionne.
	$('#notify_selection').css(
	{
		left: selection_left
	});
	
	//On les fait apparaître.
	$('.notifications').css(
	{
		opacity: "0.9"
	});
}

/*
 * Affichage de la notification de recherche dans une demande de filtrage de la mosaïque.
*/
mosaic.prototype.filterSearch = function()
{
	if(this.currentMode != 'FILTER' || this.filterSearchedType)
	{
		return;
	}
	
	// window.location.reload();
	
	//On spécifie la notification en div.
	var notification_search = "<div id='notify_search' class='notifications'></div>";
	
	//On l'ajoute à la mosaïque.
	$('body').append(notification_search);

	//On calcule ses 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;
	
	//On la positionne.
	$('#notify_search').css(
	{
		left: search_left
	});
	
	//On la fait apparaître.
	$('.notifications').css(
	{
		opacity: "0.9"
	});
}

/*
 * Affichage de la notification de recherche & sélection dans une demande de filtrage de la mosaïque.
*/
mosaic.prototype.filterSearchAndSelection = function()
{
	if(this.currentMode != 'FILTER' || this.filterSearchedType)
	{
		return;
	}
	
	//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.
	$('body').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 search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
	var selection_left = search_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"
	});
}

/*
 * Affichage de la notification de résultat de gesture dans la mosaïque filtrée.
*/
mosaic.prototype.filterGesture = function(gestureName, mode)
{
	if(this.currentMode != 'FILTER' || !this.filterSearchedType)
	{
		return;
	}
	
	var _this = this;
	
	//On spécifie les notifications en div.
	var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
	
	//On les ajoute à la mosaïque.
	$('body').append(notification_search_1gesture);
	
	// 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;
	
	if(_.include(this.gestures, gestureName))
	{
		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
	}
	else if(mode == 'none')
	{
		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
	}
	
	//On les positionne.
	$('#notify_search_1gesture').css(
	{
		top: 0,
		left: ($(window).width() - notify_width) / 2
	});
	
	//On les fait apparaître.
	$('.notifications').css(
	{
		opacity: "0.9"
	});
}

/*
 * Affichage de la notification de résultat de gesture & de sélection dans la mosaïque filtrée.
*/
mosaic.prototype.filterGestureAndSelection = function(gestureName, mode)
{
	if(this.currentMode != 'FILTER' || !this.filterSearchedType)
	{
		return;
	}
	
	//On spécifie les notifications en div.
	var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";
	var notification_selection = "<div id='notify_selection' class='notifications'></div>";
	
	//On les ajoute à la mosaïque.
	$('body').append(notification_search_1gesture + notification_selection);

	//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 selection_left = search_1gesture_left + notify_width + notify_margin;
	
	if(_.include(this.gestures, gestureName))
	{
		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
	}
	else if(mode == 'none')
	{
		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
	}
	
	//On les positionne.
	$('#notify_search_1gesture').css(
	{
		left: search_1gesture_left
	});
	$('#notify_selection').css(
	{
		left: selection_left
	});
	
	//On les fait apparaître.
	$('.notifications').css(
	{
		opacity: "0.9"
	});
}

/*
 * Affiche la notification de dezoom.
 * Direction vaut left ou right.
*/
mosaic.prototype.videoSwipe = function(direction)
{
	if(this.currentMode != 'VIDEO' || !this.isSwipe)
	{
		return;
	}
	
	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"
	});
}

/*
 * Affichage de la notification de résultat de move vers un voisin & de dézoom dans une vidéo.
*/
mosaic.prototype.videoMoveAndUnzoom = 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>";
	var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
	
	//On les ajoute à la mosaïque.
	$('body').append(notification_move + notification_unzoom);
	
	//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 * 3) / 2;
	var unzoom_left = move_left + notify_width + 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 + move_left,
		'background-image': 'url(./pictos/notifications/move_' + sides[side] + '.png)'
	});
	
	$('#notify_unzoom').css(
	{
		top: -notifyTop,
		left: -notifyLeft + unzoom_left,
		'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
	});
	
	//On les fait apparaître.
	$('.notifications').css(
	{
		opacity: "0.9"
	});
}

/*
 * Affichage de la notification de résultat de dézoom dans une vidéo.
*/
mosaic.prototype.videoUnzoom = function(targetId)
{
	if(this.currentMode != 'VIDEO')
	{
		return;
	}
	
	var _this = this;
	
	//On spécifie la notifications en div.
	var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
	
	//On l'ajoute à la mosaïque.
	$('body').append(notification_unzoom);
	
	//On calcule ses coordonnées et dimensions.
	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
	var notify_margin = parseInt($('.notifications').css('margin'));
	var unzoom_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
	
	var side = $.inArray(parseInt(targetId), this.neighboursIds);
	if(side == -1)
	{
		return;
	}
	
	var unzooms = ['horizontal', 'vertical'];
	
	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
	var notifyTop = 0, notifyLeft = 0;
	
	//On la positionne.
	$('#notify_unzoom').css(
	{
		top: -notifyTop,
		left: -notifyLeft + unzoom_left,
		'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
	});
	
	//On les fait apparaître.
	$('.notifications').css(
	{
		opacity: "0.9"
	});
}

/*
 * Affichage de la notification de timeline dans une vidéo/recherche.
*/
mosaic.prototype.timelineTimeline = function()
{
	if(this.currentMode != 'TIMELINE')
	{
		return;
	}
	
	var _this = this;
	
	//On spécifie la notifications en div.
	var notification_timeline = "<div id='notify_timeline' class='notifications'></div>";
	
	//On l'ajoute à la mosaïque.
	$('body').append(notification_timeline);
	
	//On calcule ses coordonnées et dimensions.
	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
	var notify_margin = parseInt($('.notifications').css('margin'));
	var timeline_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
	
	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
	var notifyTop = 0, notifyLeft = 0;
	
	//On la positionne.
	$('#notify_timeline').css(
	{
		top: -notifyTop,
		left: -notifyLeft + timeline_left
	});
	
	//On les fait apparaître.
	$('.notifications').css(
	{
		opacity: "0.9"
	});
}

/*
 * Affichage de la notification de recherche dans une vidéo de recherche.
*/
mosaic.prototype.searchSearch = function()
{
	if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture)
	{
		return;
	}
	
	var _this = this;
	
	//On spécifie la notifications en div.
	var notification_search = "<div id='notify_search' class='notifications'></div>";
	
	//On l'ajoute à la mosaïque.
	$('body').append(notification_search);
	
	//On calcule ses 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;
	
	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
	var notifyTop = 0, notifyLeft = 0;
	
	//On la positionne.
	$('#notify_search').css(
	{
		top: -notifyTop,
		left: -notifyLeft + search_left
	});
	
	//On les fait apparaître.
	$('.notifications').css(
	{
		opacity: "0.9"
	});
}

/*
 * Affichage de la notification de recherche & de swipe dans une vidéo de recherche.
*/
mosaic.prototype.searchSearchAndSwipe = function(direction)
{
	if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture || !this.isSwipe)
	{
		return;
	}
	
	var _this = this;
	
	//On spécifie les notifications en div.
	var notification_search = "<div id='notify_search' class='notifications'></div>";
	var notification_swipe = "<div id='notify_swipe' class='notifications'></div>";
	
	//On les ajoute à la mosaïque.
	$('body').append(notification_search + 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 search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
	var swipe_left = search_left + notify_width + notify_margin;
	
	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;
	var notifyTop = 0, notifyLeft = 0;
	
	//On les positionne.
	$('#notify_search').css(
	{
		top: -notifyTop,
		left: -notifyLeft + search_left
	});
	$('#notify_swipe').css(
	{
		top: -notifyTop,
		left: -notifyLeft + swipe_left,
		'background-image': 'url(./pictos/notifications/swipe_' + direction + '.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)
{
	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>";
	var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
	
	//On les ajoute à la mosaïque.
	$('body').append(notification_search + notification_move + notification_unzoom);
	
	//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 * 3 + notify_margin * 4) / 2;
	var move_left = search_left + notify_width + notify_margin;
	var unzoom_left = move_left + notify_width + notify_margin;
	
	var side = $.inArray(parseInt(targetId), this.neighboursIds);
	
	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_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)'
	});
	$('#notify_unzoom').css(
	{
		top: -notifyTop,
		left: -notifyLeft + unzoom_left,
		'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
	});
	
	//On les fait apparaître.
	$('.notifications').css(
	{
		opacity: "0.9"
	});
}

/*
 * Affichage de la notification de recherche & de dézoom dans une vidéo de recherche.
*/
mosaic.prototype.searchSearchAndUnzoom = function()
{
	if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture)
	{
		return;
	}
	
	var _this = this;
	
	//On spécifie les notifications en div.
	var notification_search = "<div id='notify_search' class='notifications'></div>";
	var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
	
	//On les ajoute à la mosaïque.
	$('body').append(notification_search + notification_unzoom);
	
	//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 unzoom_left = search_left + notify_width + notify_margin;
	
	var side = $.inArray(parseInt(targetId), this.neighboursIds);
	// console.log(this.neighboursIds, parseInt(targetId), side);
	if(side == -1)
	{
		return;
	}
	
	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 + search_left
	});
	
	$('#notify_unzoom').css(
	{
		top: -notifyTop,
		left: -notifyLeft + unzoom_left,
		'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
	});
	
	//On les fait apparaître.
	$('.notifications').css(
	{
		opacity: "0.9"
	});
}

/*
 * Affichage de la notification de résultat dans une vidéo de recherche.
*/
mosaic.prototype.searchGesture = function(gestureName, mode)
{
	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>";
	
	//On les ajoute à la mosaïque.
	$('body').append(notification_search_1gesture);
	
	// 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;
	
	if(_.include(this.gestures, gestureName))
	{
		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
	}
	else if(mode == 'none')
	{
		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
	}
	
	//On les positionne.
	$('#notify_search_1gesture').css(
	{
		top: 0,
		left: ($(window).width() - notify_width) / 2
	});
	
	//On les fait apparaître.
	$('.notifications').css(
	{
		opacity: "0.9"
	});
}

/*
 * Affichage de la notification de résultat & de swipe dans une vidéo de recherche.
*/
mosaic.prototype.searchGestureAndSwipe = function(gestureName, mode, direction)
{
	if(this.currentMode != 'SEARCH' || !this.isCurrentlyInASearchByGesture || !this.isSwipe)
	{
		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_swipe = "<div id='notify_swipe' class='notifications'></div>";
	
	//On les ajoute à la mosaïque.
	$('body').append(notification_search_1gesture + notification_swipe);
	
	// 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 swipe_left = search_1gesture_left + notify_width + notify_margin;
	
	if(_.include(this.gestures, gestureName))
	{
		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
	}
	else if(mode == 'none')
	{
		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
	}
	
	//On les positionne.
	$('#notify_search_1gesture').css(
	{
		left: search_1gesture_left
	});
	$('#notify_swipe').css(
	{
		left: swipe_left,
		'background-image': 'url(./pictos/notifications/swipe_' + direction + '.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)
{
	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>";
	var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
	
	//On les ajoute à la mosaïque.
	$('body').append(notification_search_1gesture + notification_move + notification_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 search_1gesture_left = $(window).width() / 2 - (notify_width * 3 + notify_margin * 4) / 2;
	var move_left = search_1gesture_left + notify_width + notify_margin;
	var unzoom_left = move_left + notify_width + notify_margin;
	
	if(_.include(this.gestures, gestureName))
	{
		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + 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'];
	var unzooms = ['horizontal', 'vertical'];
	
	//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)'
	});
	$('#notify_unzoom').css(
	{
		left: unzoom_left,
		'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'
	});
	
	//On les fait apparaître.
	$('.notifications').css(
	{
		opacity: "0.9"
	});
}

/*
 * Affichage de la notification de résultat & de dézoom dans une vidéo de recherche.
*/
mosaic.prototype.searchGestureAndUnzoom = function()
{
	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_unzoom = "<div id='notify_unzoom' class='notifications'></div>";
	
	//On les ajoute à la mosaïque.
	$('body').append(notification_search_1gesture + notification_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 search_1gesture_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
	var unzoom_left = search_1gesture_left + notify_width + notify_margin;
	
	if(_.include(this.gestures, gestureName))
	{
		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');
	}
	else if(mode == 'none')
	{
		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
	}
	
	//On les positionne.
	$('#notify_search_1gesture').css(
	{
		left: search_1gesture_left
	});
	$('#notify_unzoom').css(
	{
		left: unzoom_left
	});
	
	//On les fait apparaître.
	$('.notifications').css(
	{
		opacity: "0.9"
	});
}