1 /* ===============================================

     2  *												   *

     3  *		      ZONE DES NOTIFICATIONS			   *

     4  *												   *

     5    =============================================== */

     6 

     7 /*

     8  * Affiche la notification de sélection/recherche lorsque la mosaique est complète.

     9 */

    10 mosaic.prototype.notifySelectionSearchMosaicFull = function()

    11 {

    12 	if(this.currentMode != "MOSAIC" && this.currentMode != "FILTER" || this.isCurrentlyInASearchByGesture || $('#notify_selection').length > 0 || $('#notify_search').length > 0 || $('#notify_point').length > 0)

    13 	{

    14 		return;

    15 	}

    16 	

    17 	console.log('NOTIFY SEL SEA');

    18 	

    19 	//On spécifie les notifications en div.

    20 	var notification_selection = "<div id='notify_selection' class='notifications'></div>";

    21 	var notification_search = "<div id='notify_search' class='notifications'></div>";

    22 	

    23 	//On les ajoute à la mosaïque.

    24 	$('#mainPanel').append(notification_selection + notification_search);

    25 

    26 	//On calcule leurs coordonnées et dimensions.

    27 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

    28 	var notify_margin = parseInt($('.notifications').css('margin'));

    29 	var selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;

    30 	var search_left = selection_left + notify_width + notify_margin;

    31 	

    32 	//On les positionne.

    33 	$('#notify_selection').css(

    34 	{

    35 		left: selection_left

    36 	});

    37 	$('#notify_search').css(

    38 	{

    39 		left: search_left

    40 	});

    41 	

    42 	//On les fait apparaître.

    43 	$('.notifications').css(

    44 	{

    45 		opacity: "0.9"

    46 	});

    47 }

    48 

    49 /*

    50  * Supprime la notification de sélection/recherche lorsque la mosaique est complète.

    51 */

    52 mosaic.prototype.removeSelectionSearchMosaicFull = function()

    53 {

    54 	if(this.isOnASnapshot)

    55 	{

    56 		// console.log('DEL SEL SEA');

    57 		$('#notify_selection, #notify_search').remove();

    58 	}

    59 }

    60 

    61 /*

    62  * Affiche la notification de maintient du pointage lors d'une phase de prézoom.

    63 */

    64 mosaic.prototype.notifyPointMosaicPrezoom = function()

    65 {

    66 	this.removeSelectionSearchMosaicFull();

    67 	if($('#notify_point').length > 0 || $('#notify_search').length > 0 || this.currentMode != 'MOSAIC' && this.currentMode != 'FILTER' && !this.isOnASnapshot)

    68 	{

    69 		this.removePointMosaicPrezoom();

    70 		return;

    71 	}

    72 	

    73 	//On spécifie les notifications en div.

    74 	var notification_point = "<div id='notify_point' class='notifications'></div>";

    75 	

    76 	//On les ajoute à la mosaïque.

    77 	$('#mainPanel').append(notification_point);

    78 	

    79 	//On calcule leurs coordonnées et dimensions.

    80 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

    81 	var notify_margin = parseInt($('.notifications').css('margin'));

    82 	var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;

    83 	

    84 	//On les positionne.

    85 	$('#notify_point').css(

    86 	{

    87 		left: point_left

    88 	});

    89 	

    90 	//On les fait apparaître.

    91 	$('.notifications').css(

    92 	{

    93 		opacity: "0.9"

    94 	});

    95 }

    96 

    97 /*

    98  * Supprime la notification de maintient du pointage.

    99 */

   100 mosaic.prototype.removePointMosaicPrezoom = function()

   101 {

   102 	//if(!this.isOnASnapshot)

   103 	//{

   104 		$('#notify_point').remove();

   105 	//}

   106 }

   107 

   108 /*

   109  * Affiche la notification de recherche (qu'elle soit par gesture ou par courbes).

   110 */

   111 mosaic.prototype.notifySearch = function()

   112 {

   113 	/*this.removeSelectionSearchMosaicFull();

   114 	if($('#notify_point').length > 0 || $('#notify_search').length > 0 || this.currentMode != 'MOSAIC' && this.currentMode != 'FILTER' && !this.isOnASnapshot)

   115 	{

   116 		//this.removeNotifySearch();

   117 		//return;

   118 	}*/

   119 	

   120 	if($('.notifications').length > 0)

   121 	{

   122 		$('.notifications').remove();

   123 	}

   124 	

   125 	//On spécifie les notifications en div.

   126 	var notification_search = "<div id='notify_search' class='notifications'></div>";

   127 	

   128 	//On les ajoute à la mosaïque.

   129 	$('body').append(notification_search);

   130 	

   131 	//On calcule leurs coordonnées et dimensions.

   132 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

   133 	var notify_margin = parseInt($('.notifications').css('margin'));

   134 	var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;

   135 	

   136 	//On les positionne.

   137 	$('#notify_search').css(

   138 	{

   139 		left: point_left

   140 	});

   141 	

   142 	//On les fait apparaître.

   143 	$('.notifications').css(

   144 	{

   145 		opacity: "0.9"

   146 	});

   147 }

   148 

   149 /*

   150  * Supprime la notification de maintient du pointage.

   151 */

   152 mosaic.prototype.removeNotifySearch = function()

   153 {

   154 	//if(!this.isOnASnapshot)

   155 	//{

   156 		//$('#notify_search').remove();

   157 	//}

   158 }

   159 

   160 /*

   161  * Affiche la notification de changement de voisin et de dezoom.

   162 */

   163 mosaic.prototype.notifyMoveUnzoom = function(targetId)

   164 {

   165 	console.log('MOVE & UNZOOM');

   166 	

   167 	if($('.notifications').length > 0 || !this.neighboursIds || this.neighboursIds.length == 0 || targetId == -1 || this.currentMode != 'VIDEO' && this.currentMode != 'SEARCH' && this.currentMode != 'TIMELINE')

   168 	{

   169 		return;

   170 	}

   171 	

   172 	console.log('NOT');

   173 		

   174 	var _this = this;

   175 	

   176 	//On spécifie les notifications en div.

   177 	var notification_move_unzoom = "<div id='notify_move' class='notifications'></div><div id='notify_unzoom' class='notifications'></div>";

   178 	

   179 	//On les ajoute à la mosaïque.

   180 	$('body').append(notification_move_unzoom);

   181 	

   182 	// console.log(this.player.config.gui.zoomTop + " " + this.player.config.gui.zoomLeft);

   183 	

   184 	//On calcule leurs coordonnées et dimensions.

   185 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

   186 	var notify_margin = parseInt($('.notifications').css('margin'));

   187 	var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;

   188 	

   189 	var side = $.inArray(parseInt(targetId), this.neighboursIds);

   190 	// console.log(this.neighboursIds, parseInt(targetId), side);

   191 	if(side == -1)

   192 	{

   193 		return;

   194 	}

   195 	

   196 	var sides = ['left', 'right', 'up', 'down'];

   197 	var unzooms = ['horizontal', 'vertical'];

   198 	

   199 	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;

   200 	var notifyTop = 0, notifyLeft = 0;

   201 	

   202 	//On les positionne.

   203 	$('#notify_move').css(

   204 	{

   205 		top: -notifyTop,

   206 		left: -notifyLeft + ($(window).width() - notify_width * 2 - notify_margin * 2) / 2,

   207 		'background-image': 'url(./pictos/notifications/move_' + sides[side] + '.png)'

   208 	});

   209 	

   210 	$('#notify_unzoom').css(

   211 	{

   212 		top: -notifyTop,

   213 		left: -notifyLeft + ($(window).width()) / 2,

   214 		'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'

   215 	});

   216 	

   217 	// console.log('url(./pictos/notifications/move_' + sides[side] + '.png)');

   218 	// console.log($('#notify_move').css('background-image', 'url(./pictos/notifications/move_' + sides[side] + '.png)'));

   219 	// console.log($('#notify_move').css('background-image'));

   220 	

   221 	//On les fait apparaître.

   222 	$('.notifications').css(

   223 	{

   224 		opacity: "0.9"

   225 	});

   226 }

   227 

   228 /*

   229  * Supprime la notification de recherche de gesture.

   230 */

   231 mosaic.prototype.removeNotifyMoveUnzoom = function()

   232 {

   233 	$('#notify_move').remove();

   234 	$('#notify_unzoom').remove();

   235 }

   236 

   237 /*

   238  * Affiche la notification de dezoom.

   239 */

   240 mosaic.prototype.notifyUnzoom = function(targetId)

   241 {

   242 	console.log('UNZOOM');

   243 	

   244 	if($('.notifications').length > 0 || !this.neighboursIds || this.neighboursIds.length == 0 || targetId == -1 || this.currentMode != 'VIDEO' && this.currentMode != 'SEARCH' && this.currentMode != 'TIMELINE')

   245 	{

   246 		return;

   247 	}

   248 	

   249 	console.log('NOT');

   250 		

   251 	var _this = this;

   252 	

   253 	//On spécifie les notifications en div.

   254 	var notification_move_unzoom = "<div id='notify_move' class='notifications'></div><div id='notify_unzoom' class='notifications'></div>";

   255 	

   256 	//On les ajoute à la mosaïque.

   257 	$('body').append(notification_move_unzoom);

   258 	

   259 	// console.log(this.player.config.gui.zoomTop + " " + this.player.config.gui.zoomLeft);

   260 	

   261 	//On calcule leurs coordonnées et dimensions.

   262 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

   263 	var notify_margin = parseInt($('.notifications').css('margin'));

   264 	var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;

   265 	

   266 	var side = $.inArray(parseInt(targetId), this.neighboursIds);

   267 	// console.log(this.neighboursIds, parseInt(targetId), side);

   268 	if(side == -1)

   269 	{

   270 		return;

   271 	}

   272 	

   273 	var sides = ['left', 'right', 'up', 'down'];

   274 	var unzooms = ['horizontal', 'vertical'];

   275 	

   276 	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;

   277 	var notifyTop = 0, notifyLeft = 0;

   278 	

   279 	//On les positionne.

   280 	$('#notify_move').css(

   281 	{

   282 		top: -notifyTop,

   283 		left: -notifyLeft + ($(window).width() - notify_width * 2 - notify_margin * 2) / 2,

   284 		'background-image': 'url(./pictos/notifications/move_' + sides[side] + '.png)'

   285 	});

   286 	

   287 	$('#notify_unzoom').css(

   288 	{

   289 		top: -notifyTop,

   290 		left: -notifyLeft + ($(window).width()) / 2,

   291 		'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'

   292 	});

   293 	

   294 	// console.log('url(./pictos/notifications/move_' + sides[side] + '.png)');

   295 	// console.log($('#notify_move').css('background-image', 'url(./pictos/notifications/move_' + sides[side] + '.png)'));

   296 	// console.log($('#notify_move').css('background-image'));

   297 	

   298 	//On les fait apparaître.

   299 	$('.notifications').css(

   300 	{

   301 		opacity: "0.9"

   302 	});

   303 }

   304 

   305 /*

   306  * Supprime la notification de dezoom.

   307 */

   308 mosaic.prototype.removeNotifyUnzoom = function()

   309 {

   310 	$('#notify_unzoom').remove();

   311 }

   312 

   313 /*

   314  * Affiche la notification de dezoom.

   315  * Direction vaut left ou right.

   316 */

   317 mosaic.prototype.notifySwipe = function(direction)

   318 {

   319 	console.log('TRY SWIPE');

   320 	

   321 	if($('.notifications').length > 0 || this.currentMode != 'VIDEO' && this.currentMode != 'SEARCH' && this.currentMode != 'TIMELINE' && !this.isSwipe)

   322 	{

   323 		return;

   324 	}

   325 	

   326 	console.log('IN SWIPE');

   327 		

   328 	var _this = this;

   329 	

   330 	//On spécifie les notifications en div.

   331 	var notification_swipe = "<div id='notify_swipe' class='notifications'></div>";

   332 	

   333 	//On les ajoute à la mosaïque.

   334 	$('body').append(notification_swipe);

   335 	

   336 	//On calcule leurs coordonnées et dimensions.

   337 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

   338 	var notify_margin = parseInt($('.notifications').css('margin'));

   339 	var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;

   340 	

   341 	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;

   342 	var notifyTop = 0, notifyLeft = 0;

   343 	

   344 	//On les positionne.

   345 	$('#notify_swipe').css(

   346 	{

   347 		top: -notifyTop,

   348 		left: -notifyLeft + ($(window).width() - notify_width - notify_margin) / 2,

   349 		'background-image': 'url(./pictos/notifications/swipe_' + direction + '.png)'

   350 	});

   351 	

   352 	//On les fait apparaître.

   353 	$('.notifications').css(

   354 	{

   355 		opacity: "0.9"

   356 	});

   357 }

   358 

   359 /*

   360  * Supprime la notification de dezoom.

   361 */

   362 mosaic.prototype.removeNotifyUnzoom = function()

   363 {

   364 	$('#notify_unzoom').remove();

   365 }

   366 

   367 /*

   368  * Affiche l'aide.

   369 */

   370 mosaic.prototype.notifyHelp = function(inMosaic)

   371 {

   372 	if(this.helpDisplayed)

   373 	{

   374 		return;

   375 	}

   376 	

   377 	this.removeSelectionSearchMosaicFull();

   378 	this.removePointMosaicPrezoom();

   379 	

   380 	this.helpDisplayed = true;

   381 	

   382 	var search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'rythme', 'slow', 'spin', 'up_down', 'wave'];

   383 	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];

   384 	var search_body_tab = ['chute', 'knee_up', 'jump', 'bend'];

   385 	var search_body_tab_opacities = [1, 1, 1, 1];

   386 	var controls_1hand_tab;

   387 	var controls_1hand_tab_1;

   388 	var controls_1hand_tab_2;

   389 	var controls_1hand_tab_opacities;

   390 	var controls_1hand_tab_opacities_1;

   391 	var controls_1hand_tab_opacities_2;

   392 	

   393 	if(inMosaic)

   394 	{

   395 		controls_1hand_tab = ['selection'];

   396 		controls_1hand_tab_opacities = [1];

   397 	}

   398 	else

   399 	{

   400 		controls_1hand_tab_1 = ['deplacer', 'precedent', 'suivant', 'mosaique_horizontal', 'mosaique_vertical'];

   401 		controls_1hand_tab_2 = ['move_down', 'move_up', 'move_right', 'move_left'];

   402 		controls_1hand_tab_opacities_1 = [1, 1, 1, 1, 1];

   403 		controls_1hand_tab_opacities_2 = [1, 1, 1, 1];

   404 	}

   405 	

   406 	//On spécifie les notifications en div.

   407 	var search_title = "<div id='search_title'></div>";

   408 	var search_img = "<div id='search_img' class='notify_imgs'></div>";

   409 	var search_2hands_text = "<div id='search_2hands_text'></div>";

   410 	var search_2hands_imgs = "<div id='search_2hands_imgs' class='notify_imgs_big'>";

   411 	

   412 	for(var i = 0 ; i < search_2hands_tab.length ; i++)

   413 	{

   414 		search_2hands_imgs += "<div id='2hands_" + search_2hands_tab[i] + "' class='notify_imgs_small' style='opacity: " + search_2hands_tab_opacities[i] + ";'></div>";

   415 	}

   416 	search_2hands_imgs += "</div>";

   417 	

   418 	var search_body_text = "<div id='search_body_text'></div>";

   419 	var search_body_imgs = "<div id='search_body_imgs' class='notify_imgs'>"

   420 	

   421 	for(var i = 0 ; i < search_body_tab.length ; i++)

   422 	{

   423 		search_body_imgs += "<div id='body_" + search_body_tab[i] + "' class='notify_imgs_small' style='opacity: " + search_body_tab_opacities[i] + ";'></div>";

   424 	}

   425 	search_body_imgs += "</div>";

   426 	

   427 	var controls_title = "<div id='controls_title'></div>";

   428 	var controls_img = "<div id='controls_img' class='notify_imgs'></div>";

   429 	var controls_1hand_text = "<div id='controls_1hand_text'></div>";

   430 	var controls_1hand_imgs;

   431 	var controls_1hand_imgs_1;

   432 	var controls_1hand_imgs_2;

   433 	

   434 	if(inMosaic)

   435 	{

   436 		controls_1hand_imgs = "<div id='controls_1hand_imgs' class='notify_imgs'>";

   437 		for(var i = 0 ; i < controls_1hand_tab.length ; i++)

   438 		{

   439 			controls_1hand_imgs += "<div id='1hand_" + controls_1hand_tab[i] + "' class='notify_imgs_small' style='opacity: " + controls_1hand_tab_opacities[i] + ";'></div>";

   440 		}

   441 		controls_1hand_imgs += "</div>";

   442 	}

   443 	else

   444 	{

   445 		controls_1hand_imgs_1 = "<div id='controls_1hand_imgs_1' class='notify_imgs'>";

   446 		controls_1hand_imgs_2 = "<div id='controls_1hand_imgs_2' class='notify_imgs'>";

   447 		for(var i = 0 ; i < controls_1hand_tab_1.length ; i++)

   448 		{

   449 			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>";

   450 		}

   451 		controls_1hand_imgs_1 += "</div>";

   452 		for(var i = 0 ; i < controls_1hand_tab_2.length ; i++)

   453 		{

   454 			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>";

   455 		}

   456 		controls_1hand_imgs_2 += "</div>";

   457 	}

   458 	

   459 	var help_search = "<div id='help_search'>" + search_title + search_img + search_2hands_text + search_2hands_imgs + search_body_text + search_body_imgs + "</div>";

   460 	var help_controls;

   461 

   462 	if(inMosaic)

   463 	{

   464 		help_controls = "<div id='help_controls'>" + controls_title + controls_img + controls_1hand_text + controls_1hand_imgs + "</div>";

   465 	}

   466 	else

   467 	{

   468 		help_controls = "<div id='help_controls'>" + controls_title + controls_img + controls_1hand_text + controls_1hand_imgs_1 + controls_1hand_imgs_2 + "</div>";

   469 	}

   470 	

   471 	var notification_help = "<div id='notify_help'>" + help_search + "<div id='help_sep'></div>" + help_controls + "</div>";

   472 	

   473 	//On les ajoute à la mosaïque.

   474 	$('body').append(notification_help);

   475 	

   476 	//On calcule leurs coordonnées et dimensions.

   477 	var notify_width = $(window).width(), notify_height = $(window).height();

   478 	var notify_margin = parseInt($('#notify_help').css('margin'));

   479 	var notify_ = 10;

   480 	

   481 	//On les positionne.

   482 	$('#notify_help').css(

   483 	{

   484 		left: "0px",

   485 		top: "0px",

   486 		width: notify_width - notify_margin * 2,

   487 		height: notify_height - notify_margin * 2,

   488 		'z-index': 2000

   489 	});

   490 	

   491 	// console.log(($('#help_search').width() - ($('.notify_imgs_small').width() * 5 + parseInt($('.notify_imgs_small').css('margin')))) / 2);

   492 	

   493 	$('#search_2hands_imgs').css(

   494 	{

   495 		'padding-left': ($('#help_search').width() - ($('.notify_imgs_small').width() * 5 + parseInt($('.notify_imgs_small').css('margin')))) / 2,

   496 		'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin')))

   497 	});

   498 	

   499 	$('#search_body_imgs').css(

   500 	{

   501 		'padding-left': ($('#help_search').width() - ($('.notify_imgs_small').width() * 4 + parseInt($('.notify_imgs_small').css('margin')))) / 2,

   502 		'height': ($('.notify_imgs_small').height() * 2 + parseInt($('.notify_imgs_small').css('margin')))

   503 	});

   504 	

   505 	if(inMosaic)

   506 	{

   507 		$('#controls_1hand_imgs').css(

   508 		{

   509 			'padding-left': ($('#help_controls').width() - ($('.notify_imgs_small').width())) / 2,

   510 			'height': ($('.notify_imgs_small').height())

   511 		});

   512 	}

   513 	else

   514 	{

   515 		$('#controls_1hand_imgs_1').css(

   516 		{

   517 			'padding-left': ($('#help_controls').width() - ($('.notify_imgs_small').width() * 5 + parseInt($('.notify_imgs_small').css('margin')))) / 2,

   518 			'height': ($('.notify_imgs_small').height())

   519 		});

   520 		$('#controls_1hand_imgs_2').css(

   521 		{

   522 			'padding-left': ($('#help_controls').width() - ($('.notify_imgs_small').width() * 4 + parseInt($('.notify_imgs_small').css('margin')))) / 2,

   523 			'height': ($('.notify_imgs_small').height())

   524 		});

   525 	}

   526 	

   527 	var search_width = $('#help_search').width();

   528 	

   529 	$('#search_title').html('Recherche');

   530 	$('#search_2hands_text').html('Gestes à effectuer avec les deux mains');

   531 	$('#search_body_text').html('Gestes à effectuer avec le corps entier');

   532 	

   533 	for(var i = 0 ; i < search_2hands_tab.length ; i++)

   534 	{

   535 		$("#2hands_" + search_2hands_tab[i]).css("background-image", "url('./pictos/help/" + search_2hands_tab[i] + ".png')");

   536 		//console.log("url('../../pictos/help/" + search_2hands_tab[i] + ".png')");

   537 	}

   538 	

   539 	for(var i = 0 ; i < search_body_tab.length ; i++)

   540 	{

   541 		$("#body_" + search_body_tab[i]).css("background-image", "url('./pictos/help/" + search_body_tab[i] + ".png')");

   542 		//console.log("url('../../pictos/help/" + search_2hands_tab[i] + ".png')");

   543 	}

   544 	

   545 	$('#controls_title').html('Contrôles');

   546 	$('#controls_1hand_text').html('Gestes à effectuer avec une seule main');

   547 	

   548 	if(inMosaic)

   549 	{

   550 		for(var i = 0 ; i < controls_1hand_tab.length ; i++)

   551 		{

   552 			$("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('./pictos/help/" + controls_1hand_tab[i] + ".png')");

   553 		}

   554 	}

   555 	else

   556 	{

   557 		for(var i = 0 ; i < controls_1hand_tab_1.length ; i++)

   558 		{

   559 			$("#1hand_" + controls_1hand_tab_1[i]).css("background-image", "url('./pictos/help/" + controls_1hand_tab_1[i] + ".png')");

   560 		}

   561 		for(var i = 0 ; i < controls_1hand_tab_2.length ; i++)

   562 		{

   563 			$("#1hand_" + controls_1hand_tab_2[i]).css("background-image", "url('./pictos/help/" + controls_1hand_tab_2[i] + ".png')");

   564 		}

   565 	}

   566 	

   567 	//On les fait apparaître.

   568 	$('#notify_help').css(

   569 	{

   570 		opacity: "1"

   571 	});

   572 	

   573 	$('.notify_imgs_big').css(

   574 	{

   575 		opacity: "1"

   576 	});

   577 }

   578 

   579 /*

   580  * Supprime l'aide.

   581 */

   582 mosaic.prototype.removeHelp = function()

   583 {

   584 	if(!this.helpDisplayed)

   585 	{

   586 		return;

   587 	}

   588 	

   589 	var _this = this;

   590 	

   591 	$('#notify_help').fadeOut(this.timeNotifyFade, function()

   592 	{

   593 		_this.helpDisplayed = false;

   594 		// _this.canNotifyHelp = false;

   595 		_this.canNotifyHelp = true;

   596 		console.log('CAN NOT NOTIFY HELP');

   597 		$('#notify_help').remove();

   598 	});

   599 }

   600 

   601 /*

   602  * Affiche la notification de validation/survol de gesture de filtrage.

   603  * Mode prend pour valeurs : "valid" ou "hover".

   604 */

   605 mosaic.prototype.notifySearch1Gesture = function(gestureName, mode)

   606 {

   607 	// console.log('C');

   608 	if($('#notify_search_1gesture').length > 0)

   609 	{

   610 		$('#notify_search_1gesture').remove();

   611 	}

   612 	

   613 	//Si on a effectué une demande de recherche auparavant, on supprime la notification de demande de recherche.

   614 	if($('#notify_search').length > 0)

   615 	{

   616 		$('.notifications').remove();

   617 	}

   618 	

   619 	var _this = this;

   620 	

   621 	//On spécifie les notifications en div.

   622 	var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";

   623 	

   624 	//On les ajoute à la mosaïque.

   625 	$('body').append(notification_search_1gesture);

   626 	

   627 	// console.log(this.player.config.gui.zoomTop + " " + this.player.config.gui.zoomLeft);

   628 	

   629 	//On calcule leurs coordonnées et dimensions.

   630 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

   631 	var notify_margin = parseInt($('.notifications').css('margin'));

   632 	var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;

   633 	

   634 	if(_.include(this.gestures, gestureName))

   635 	{

   636 		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');

   637 	}

   638 	else if(mode == 'none')

   639 	{

   640 		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');

   641 	}

   642 	

   643 	//On les positionne.

   644 	$('#notify_search_1gesture').css(

   645 	{

   646 		top: 0,

   647 		left: ($(window).width() - notify_width) / 2

   648 	});

   649 	

   650 	//On les fait apparaître.

   651 	$('.notifications').css(

   652 	{

   653 		opacity: "0.9"

   654 	});

   655 }

   656 

   657 // /!\/!\/!\ //

   658 

   659 /* NOUVELLES NOTIFICATIONS */

   660 

   661 // /!\/!\/!\ //

   662 

   663 /*

   664  * Affichage de la notification de sélection & recherche dans la mosaïque.

   665 */

   666 mosaic.prototype.mosaicSelectionAndSearch = function()

   667 {

   668 	if(this.currentMode != 'MOSAIC')

   669 	{

   670 		return;

   671 	}

   672 	

   673 	//On spécifie les notifications en div.

   674 	var notification_selection = "<div id='notify_selection' class='notifications'></div>";

   675 	var notification_search = "<div id='notify_search' class='notifications'></div>";

   676 	

   677 	//On les ajoute à la mosaïque.

   678 	$('body').append(notification_selection + notification_search);

   679 

   680 	//On calcule leurs coordonnées et dimensions.

   681 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

   682 	var notify_margin = parseInt($('.notifications').css('margin'));

   683 	var selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;

   684 	var search_left = selection_left + notify_width + notify_margin;

   685 	

   686 	//On les positionne.

   687 	$('#notify_selection').css(

   688 	{

   689 		left: selection_left

   690 	});

   691 	$('#notify_search').css(

   692 	{

   693 		left: search_left

   694 	});

   695 	

   696 	//On les fait apparaître.

   697 	$('.notifications').css(

   698 	{

   699 		opacity: "0.9"

   700 	});

   701 }

   702 

   703 /*

   704  * Affichage de la notification de sélection dans la mosaïque.

   705 */

   706 mosaic.prototype.mosaicSelection = function()

   707 {

   708 	if(this.currentMode != 'MOSAIC')

   709 	{

   710 		return;

   711 	}

   712 	

   713 	//On spécifie la notification en div.

   714 	var notification_selection = "<div id='notify_selection' class='notifications'></div>";

   715 	

   716 	//On l'ajoute à la mosaïque.

   717 	$('body').append(notification_selection);

   718 

   719 	//On calcule ses coordonnées et dimensions.

   720 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

   721 	var notify_margin = parseInt($('.notifications').css('margin'));

   722 	var selection_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;

   723 	

   724 	//On les positionne.

   725 	$('#notify_selection').css(

   726 	{

   727 		left: selection_left

   728 	});

   729 	

   730 	//On les fait apparaître.

   731 	$('.notifications').css(

   732 	{

   733 		opacity: "0.9"

   734 	});

   735 }

   736 

   737 /*

   738  * Affichage de la notification de recherche dans une demande de filtrage de la mosaïque.

   739 */

   740 mosaic.prototype.filterSearch = function()

   741 {

   742 	if(this.currentMode != 'FILTER' || this.filterSearchedType)

   743 	{

   744 		return;

   745 	}

   746 	

   747 	// window.location.reload();

   748 	

   749 	//On spécifie la notification en div.

   750 	var notification_search = "<div id='notify_search' class='notifications'></div>";

   751 	

   752 	//On l'ajoute à la mosaïque.

   753 	$('body').append(notification_search);

   754 

   755 	//On calcule ses coordonnées et dimensions.

   756 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

   757 	var notify_margin = parseInt($('.notifications').css('margin'));

   758 	var search_left = $(window).width() / 2 - notify_width / 2 - notify_margin;

   759 	

   760 	//On la positionne.

   761 	$('#notify_search').css(

   762 	{

   763 		left: search_left

   764 	});

   765 	

   766 	//On la fait apparaître.

   767 	$('.notifications').css(

   768 	{

   769 		opacity: "0.9"

   770 	});

   771 }

   772 

   773 /*

   774  * Affichage de la notification de recherche & sélection dans une demande de filtrage de la mosaïque.

   775 */

   776 mosaic.prototype.filterSearchAndSelection = function()

   777 {

   778 	if(this.currentMode != 'FILTER' || this.filterSearchedType)

   779 	{

   780 		return;

   781 	}

   782 	

   783 	//On spécifie les notifications en div.

   784 	var notification_selection = "<div id='notify_selection' class='notifications'></div>";

   785 	var notification_search = "<div id='notify_search' class='notifications'></div>";

   786 	

   787 	//On les ajoute à la mosaïque.

   788 	$('body').append(notification_selection + notification_search);

   789 

   790 	//On calcule leurs coordonnées et dimensions.

   791 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

   792 	var notify_margin = parseInt($('.notifications').css('margin'));

   793 	var search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;

   794 	var selection_left = search_left + notify_width + notify_margin;

   795 	

   796 	//On les positionne.

   797 	$('#notify_selection').css(

   798 	{

   799 		left: selection_left

   800 	});

   801 	$('#notify_search').css(

   802 	{

   803 		left: search_left

   804 	});

   805 	

   806 	//On les fait apparaître.

   807 	$('.notifications').css(

   808 	{

   809 		opacity: "0.9"

   810 	});

   811 }

   812 

   813 /*

   814  * Affichage de la notification de résultat de gesture dans la mosaïque filtrée.

   815 */

   816 mosaic.prototype.filterGesture = function(gestureName, mode)

   817 {

   818 	if(this.currentMode != 'FILTER' || !this.filterSearchedType)

   819 	{

   820 		return;

   821 	}

   822 	

   823 	var _this = this;

   824 	

   825 	//On spécifie les notifications en div.

   826 	var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";

   827 	

   828 	//On les ajoute à la mosaïque.

   829 	$('body').append(notification_search_1gesture);

   830 	

   831 	// console.log(this.player.config.gui.zoomTop + " " + this.player.config.gui.zoomLeft);

   832 	

   833 	//On calcule leurs coordonnées et dimensions.

   834 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

   835 	var notify_margin = parseInt($('.notifications').css('margin'));

   836 	var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;

   837 	

   838 	if(_.include(this.gestures, gestureName))

   839 	{

   840 		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');

   841 	}

   842 	else if(mode == 'none')

   843 	{

   844 		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');

   845 	}

   846 	

   847 	//On les positionne.

   848 	$('#notify_search_1gesture').css(

   849 	{

   850 		top: 0,

   851 		left: ($(window).width() - notify_width) / 2

   852 	});

   853 	

   854 	//On les fait apparaître.

   855 	$('.notifications').css(

   856 	{

   857 		opacity: "0.9"

   858 	});

   859 }

   860 

   861 /*

   862  * Affichage de la notification de résultat de gesture & de sélection dans la mosaïque filtrée.

   863 */

   864 mosaic.prototype.filterGestureAndSelection = function(gestureName, mode)

   865 {

   866 	if(this.currentMode != 'FILTER' || !this.filterSearchedType)

   867 	{

   868 		return;

   869 	}

   870 	

   871 	//On spécifie les notifications en div.

   872 	var notification_search_1gesture = "<div id='notify_search_1gesture' class='notifications'></div>";

   873 	var notification_selection = "<div id='notify_selection' class='notifications'></div>";

   874 	

   875 	//On les ajoute à la mosaïque.

   876 	$('body').append(notification_search_1gesture + notification_selection);

   877 

   878 	//On calcule leurs coordonnées et dimensions.

   879 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

   880 	var notify_margin = parseInt($('.notifications').css('margin'));

   881 	var search_1gesture_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;

   882 	var selection_left = search_1gesture_left + notify_width + notify_margin;

   883 	

   884 	if(_.include(this.gestures, gestureName))

   885 	{

   886 		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/' + mode + '/' + gestureName + '.png")');

   887 	}

   888 	else if(mode == 'none')

   889 	{

   890 		$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');

   891 	}

   892 	

   893 	//On les positionne.

   894 	$('#notify_search_1gesture').css(

   895 	{

   896 		left: search_1gesture_left

   897 	});

   898 	$('#notify_selection').css(

   899 	{

   900 		left: selection_left

   901 	});

   902 	

   903 	//On les fait apparaître.

   904 	$('.notifications').css(

   905 	{

   906 		opacity: "0.9"

   907 	});

   908 }

   909 

   910 /*

   911  * Affiche la notification de dezoom.

   912  * Direction vaut left ou right.

   913 */

   914 mosaic.prototype.videoSwipe = function(direction)

   915 {

   916 	if(this.currentMode != 'VIDEO' || !this.isSwipe)

   917 	{

   918 		return;

   919 	}

   920 	

   921 	var _this = this;

   922 	

   923 	//On spécifie les notifications en div.

   924 	var notification_swipe = "<div id='notify_swipe' class='notifications'></div>";

   925 	

   926 	//On les ajoute à la mosaïque.

   927 	$('body').append(notification_swipe);

   928 	

   929 	//On calcule leurs coordonnées et dimensions.

   930 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

   931 	var notify_margin = parseInt($('.notifications').css('margin'));

   932 	var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;

   933 	

   934 	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;

   935 	var notifyTop = 0, notifyLeft = 0;

   936 	

   937 	//On les positionne.

   938 	$('#notify_swipe').css(

   939 	{

   940 		top: -notifyTop,

   941 		left: -notifyLeft + ($(window).width() - notify_width - notify_margin) / 2,

   942 		'background-image': 'url(./pictos/notifications/swipe_' + direction + '.png)'

   943 	});

   944 	

   945 	//On les fait apparaître.

   946 	$('.notifications').css(

   947 	{

   948 		opacity: "0.9"

   949 	});

   950 }

   951 

   952 /*

   953  * Affichage de la notification de résultat de move vers un voisin & de dézoom dans une vidéo.

   954 */

   955 mosaic.prototype.videoMoveAndUnzoom = function(targetId)

   956 {

   957 	if(this.currentMode != 'VIDEO')

   958 	{

   959 		return;

   960 	}

   961 	

   962 	var _this = this;

   963 	

   964 	//On spécifie les notifications en div.

   965 	var notification_move = "<div id='notify_move' class='notifications'></div>";

   966 	var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";

   967 	

   968 	//On les ajoute à la mosaïque.

   969 	$('body').append(notification_move + notification_unzoom);

   970 	

   971 	//On calcule leurs coordonnées et dimensions.

   972 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

   973 	var notify_margin = parseInt($('.notifications').css('margin'));

   974 	var move_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;

   975 	var unzoom_left = move_left + notify_width + notify_margin;

   976 	

   977 	var side = $.inArray(parseInt(targetId), this.neighboursIds);

   978 	// console.log(this.neighboursIds, parseInt(targetId), side);

   979 	if(side == -1)

   980 	{

   981 		return;

   982 	}

   983 	

   984 	var sides = ['left', 'right', 'up', 'down'];

   985 	var unzooms = ['horizontal', 'vertical'];

   986 	

   987 	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;

   988 	var notifyTop = 0, notifyLeft = 0;

   989 	

   990 	//On les positionne.

   991 	$('#notify_move').css(

   992 	{

   993 		top: -notifyTop,

   994 		left: -notifyLeft + move_left,

   995 		'background-image': 'url(./pictos/notifications/move_' + sides[side] + '.png)'

   996 	});

   997 	

   998 	$('#notify_unzoom').css(

   999 	{

  1000 		top: -notifyTop,

  1001 		left: -notifyLeft + unzoom_left,

  1002 		'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'

  1003 	});

  1004 	

  1005 	//On les fait apparaître.

  1006 	$('.notifications').css(

  1007 	{

  1008 		opacity: "0.9"

  1009 	});

  1010 }

  1011 

  1012 /*

  1013  * Affichage de la notification de résultat de dézoom dans une vidéo.

  1014 */

  1015 mosaic.prototype.videoUnzoom = function(targetId)

  1016 {

  1017 	if(this.currentMode != 'VIDEO')

  1018 	{

  1019 		return;

  1020 	}

  1021 	

  1022 	var _this = this;

  1023 	

  1024 	//On spécifie la notifications en div.

  1025 	var notification_unzoom = "<div id='notify_unzoom' class='notifications'></div>";

  1026 	

  1027 	//On l'ajoute à la mosaïque.

  1028 	$('body').append(notification_unzoom);

  1029 	

  1030 	//On calcule ses coordonnées et dimensions.

  1031 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

  1032 	var notify_margin = parseInt($('.notifications').css('margin'));

  1033 	var unzoom_left = $(window).width() / 2 - notify_width / 2 - notify_margin;

  1034 	

  1035 	var side = $.inArray(parseInt(targetId), this.neighboursIds);

  1036 	if(side == -1)

  1037 	{

  1038 		return;

  1039 	}

  1040 	

  1041 	var unzooms = ['horizontal', 'vertical'];

  1042 	

  1043 	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;

  1044 	var notifyTop = 0, notifyLeft = 0;

  1045 	

  1046 	//On la positionne.

  1047 	$('#notify_unzoom').css(

  1048 	{

  1049 		top: -notifyTop,

  1050 		left: -notifyLeft + unzoom_left,

  1051 		'background-image': 'url(./pictos/notifications/unzoom_' + unzooms[Math.floor(side / 2)] + '.png)'

  1052 	});

  1053 	

  1054 	//On les fait apparaître.

  1055 	$('.notifications').css(

  1056 	{

  1057 		opacity: "0.9"

  1058 	});

  1059 }

  1060 

  1061 /*

  1062  * Affichage de la notification de timeline dans une vidéo/recherche.

  1063 */

  1064 mosaic.prototype.timelineTimeline = function()

  1065 {

  1066 	if(this.currentMode != 'TIMELINE')

  1067 	{

  1068 		return;

  1069 	}

  1070 	

  1071 	var _this = this;

  1072 	

  1073 	//On spécifie la notifications en div.

  1074 	var notification_timeline = "<div id='notify_timeline' class='notifications'></div>";

  1075 	

  1076 	//On l'ajoute à la mosaïque.

  1077 	$('body').append(notification_timeline);

  1078 	

  1079 	//On calcule ses coordonnées et dimensions.

  1080 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

  1081 	var notify_margin = parseInt($('.notifications').css('margin'));

  1082 	var timeline_left = $(window).width() / 2 - notify_width / 2 - notify_margin;

  1083 	

  1084 	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;

  1085 	var notifyTop = 0, notifyLeft = 0;

  1086 	

  1087 	//On la positionne.

  1088 	$('#notify_timeline').css(

  1089 	{

  1090 		top: -notifyTop,

  1091 		left: -notifyLeft + timeline_left

  1092 	});

  1093 	

  1094 	//On les fait apparaître.

  1095 	$('.notifications').css(

  1096 	{

  1097 		opacity: "0.9"

  1098 	});

  1099 }

  1100 

  1101 /*

  1102  * Affichage de la notification de recherche dans une vidéo de recherche.

  1103 */

  1104 mosaic.prototype.searchSearch = function()

  1105 {

  1106 	if(this.currentMode != 'SEARCH' || this.isCurrentlyInASearchByGesture)

  1107 	{

  1108 		return;

  1109 	}

  1110 	

  1111 	var _this = this;

  1112 	

  1113 	//On spécifie la notifications en div.

  1114 	var notification_search = "<div id='notify_search' class='notifications'></div>";

  1115 	

  1116 	//On l'ajoute à la mosaïque.

  1117 	$('body').append(notification_search);

  1118 	

  1119 	//On calcule ses coordonnées et dimensions.

  1120 	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();

  1121 	var notify_margin = parseInt($('.notifications').css('margin'));

  1122 	var search_left = $(window).width() / 2 - notify_width / 2 - notify_margin;

  1123 	

  1124 	// var notifyTop = this.notifyTopVideo, notifyLeft = this.notifyLeftVideo;

  1125 	var notifyTop = 0, notifyLeft = 0;

  1126 	

  1127 	//On la positionne.

  1128 	$('#notify_search').css(

  1129 	{

  1130 		top: -notifyTop,

  1131 		left: -notifyLeft + search_left

  1132 	});

  1133 	

  1134 	//On les fait apparaître.

  1135 	$('.notifications').css(