/*

* This file is part of the TraKERS\Front IDILL package.

*

* (c) IRI <http://www.iri.centrepompidou.fr/>

*

* For the full copyright and license information, please view the LICENSE

* file that was distributed with this source code.

*/

/*

 * Projet : TraKERS

 * Module : Front IDILL

 * Fichier : notifications.js

 * 

 * Auteur : alexandre.bastien@iri.centrepompidou.fr

 * 

 * Fonctionnalités : Définit les fonctions de notification (images apparaissant en haut de la fenêtre).

 */

/*

 * Affiche l'aide.

 * Est appelé dans les fichiers :

 * mosaic > fonctions manageControlEvents et onMouseDown.

 * curvesDetector > fonction updateDists.

*/

Mosaic.prototype.notifyHelp = function(inMosaic)

{

    //Si elle est déjà affichée on quitte.

    if(this.helpDisplayed)

    {

        return;

    }

	//Tous les noms d'images des gestes de recherche.

	var all_gestures_img = ['arret', 'chute', 'contact', 'group_spin', 'bend', 'knee_up', 'port_de_bras', 'grandjete', 'jump', 'spin', 'up_down', 'wave'];

	//Emplacement des images pour l'aide.

	var imgPath = './pictos/help/';

    //On enlève les autres notifications.

    this.removeNotifications();

    //On indique qu'elle est affiché.

    this.helpDisplayed = true;

    //Section des courbes de recherche.

    var search_2hands_tab;

    var search_2hands_tab_text;

    //Section des recherches corporelles.

    var search_body_tab;

    var search_body_tab_text;

    //Section des actions de contrôle sur l'interface.

    var controls_1hand_tab;

    var controls_1hand_tab_text;

    //Opacités (indique si elles sont actuellement implémentées).

    var search_2hands_tab_opacities;

    var search_body_tab_opacities;

    var controls_1hand_tab_opacities;

    var controls_1hand_tab_opacities;

    //Dossier contenant les images.

    var img_directory = './pictos/help/';

    //Si on est en mode d'intéraction souris, la recherche corporelle se fait par des courbes. On les regroupes donc dans la section des courbes.

    if(this.config.mouseInteractions)

    {

        search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'spin', 'up_down', 'wave', 'chute', 'knee_up', 'jump', 'bend'];

        search_2hands_tab_text = ['no-motion', 'contact', 'grand-jete', 'screw', 'arc', 'circle', 'up-down', 'wave', 'fall', 'knee-up', 'jump', 'bend'];

        search_2hands_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];

    }

    else

    {

        search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'spin', 'up_down', 'wave'];

        search_2hands_tab_text = ['no-motion', 'contact', 'grand-jete', 'screw', 'arc', 'circle', 'up-down', 'wave'];

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

        search_body_tab_text = ['fall', 'knee-up', 'jump', 'bend'];

        search_2hands_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1];

        search_body_tab_opacities = [1, 1, 1, 1];

    }

    //Dans la mosaique, on ne peut que sélectionner un snapshot.

    if(inMosaic)

    {

        controls_1hand_tab = ['selection'];

        controls_1hand_tab_text = ['controls_selection'];

        controls_1hand_tab_opacities = [1];

    }

    //Dans une vidéo, on peut aller d'un voisin à l'autre, bouger dans la timeline, dézoomer et swiper d'un marqueur à l'autre.

    else

    {

		if(this.config.mouseInteractions)

		{

			controls_1hand_tab = ['deplacer', 'move_down', 'move_up', 'move_right', 'move_left'];

			controls_1hand_tab_text = ['controls_timeline', 'controls_move_down', 'controls_move_up', 'controls_move_right', 'controls_move_left'];

			controls_1hand_tab_opacities = [1, 1, 1, 1, 1];

		}

		else

		{

			controls_1hand_tab = ['deplacer', 'precedent', 'suivant', 'mosaique_horizontal', 'mosaique_vertical', 'move_down', 'move_up', 'move_right', 'move_left'];

			controls_1hand_tab_text = ['controls_timeline', 'controls_previous', 'controls_next', 'controls_mos_horizontal', 'controls_mos_vertical', 'controls_move_down', 'controls_move_up', 'controls_move_right', 'controls_move_left'];

			controls_1hand_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1];

		}

    }

    //Colonne de recherche.

    //Titre de la colonne de recherche.

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

    //Image de la colonne.

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

    //Sous-titre.

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

    //Images de recherche par courbes.

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

    //On crée les images.

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

    //Sous-titre de la zone de recherche corporelle.

    var search_body_text;

    //Images de recherche corporelle.

    var search_body_imgs;

    //Si on est en mode Kinect.

    if(!this.config.mouseInteractions)

    {

        //On crée le texte et les images de la recherche corporelle.

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

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

		//On ajoute ce qu'il faut pour quitter l'aide.

    }

    //Titre de la colonne des actions de contrôle.

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

    //Image de la colonne.

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

    //Sous-titre de la zone de contrôle de l'interface.

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

    //Images des actions de contrôle de l'interface.

    var controls_1hand_imgs;

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

    //Colonne de recherche du panneau d'aide.

    var help_search;

    //Dans le mode d'intéraction souris, les gestures de recherche corporelles ont été intégrées aux courbes.

    if(this.config.mouseInteractions)

    {

        help_search = "<div id='help_search'>" + search_title + search_img + search_2hands_text + search_2hands_imgs + "</div>";

    }

    else

    {

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

    }

    //Colonne de contrôle du panneau d'aide.

    var help_controls;

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

    //Panneau d'aide.

	//On crée les flèches au niveau du panneau d'aide.

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

    //On les ajoute à la mosaïque.

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

	var notify_help = $('#notify_help');

	var notify_imgs_width = $('#notify_imgs_small').css('margin-leftf')

	$('.notify_imgs').css(

	{

		width: $('#notify_imgs_small')

	});

	if(this.isTablet)

	{

		//On rétrécit certaines images si on est sur une tablette.

		$('#search_img, #controls_img').css(

		{

			height: 150,

			'background-size': '150px 150px'

		});

		$('.notify_imgs_small').css(

		{

			height: 80,

			width: 80,

			'background-size': '80px 80px'

		});

		//On ajoute l'icone de sortie.

		this.exitIcon();

	}

    //On calcule leurs coordonnées et dimensions.

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

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

    var notify_border = parseInt($('#notify_help').css('border-width'));

    //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': 1000

    });

    //Position horizontale du séparateur de colonnes.

    var sep_left = $('#help_sep').position().left;

    //Marge du panneau d'aide.

    var help_margin = parseInt(notify_help.css('margin-left'));

    //On calcule la taille d'une zone de recherche (une des deux parties).

    var help_column_width = sep_left - help_margin;

    //Taille des marges des images.

    var margins = parseInt($('.notify_imgs_small').css('margin-left'));

    //Largeur des images.

    var widths = help_column_width / 5 - 4 * margins * 2;// $('.notify_imgs_small').width();

    //Hauteur des images.

    var heights = widths;//$('.notify_imgs_small').height();

	$('.notify_imgs_small').css(

	{

		width: widths,

		height: heights,

		'background-size': widths + 'px ' + heights + 'px',

		'font-size': widths / 5 + 'px',

		'padding-left': '0px'

	});

    //Longueur d'une image.

    var img_width = (margins * 2 + widths);

    //On récupère le nombre d'images affichables horizontalement pour les gestures de recherche à deux mains dans une des parties de l'aide.

    var search_2hands_n_imgs = Math.floor(help_column_width / img_width);

    //Calcul du padding-left de cette section.

    var search_2hands_padding_left = (help_column_width - search_2hands_n_imgs * img_width) / 2;

    //On positionne la section de recherche par courbes.

    $('#search_2hands_imgs').css(

    {

        'padding-left': search_2hands_padding_left,

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

    });

    //On récupère le nombre d'images affichables horizontalement pour les gestures de recherche corporelles dans une des parties de l'aide.

    var search_body_n_imgs = Math.floor(help_column_width / img_width);

    //Calcul du padding-left de cette section.

    var search_body_padding_left = (help_column_width - search_body_n_imgs * img_width) / 2;

    //On positionne la section de recherche par gestures corporelles.

    $('#search_body_imgs').css(

    {

        'padding-left': search_body_padding_left,

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

    });

    //On récupère le nombre d'images affichables horizontalement pour les gestures de controle dans une des parties de l'aide.

    var controls_1hand_n_imgs = Math.floor(help_column_width / img_width);

    //Calcul du padding-left de cette section.

    var controls_1hand_padding_left = (help_column_width - controls_1hand_n_imgs * img_width) / 2;

    //On potisionne la section des actions de contrôle de l'interface.

    $('#controls_1hand_imgs').css(

    {

        'padding-left': controls_1hand_padding_left,

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

    });

    //Longueur de la colonne de recherche.

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

    $('#search_title').html(this.helpText.search_title);

    var MI = '';

    //Le texte de recherche et les images changent en fonction du mode d'intéraction (souris/Kinect).

    if(this.config.mouseInteractions)

    {

		if(this.isTablet)

		{

			$('#search_2hands_text').html(this.helpText.search_touch_text);

		}

		else

		{

			$('#search_2hands_text').html(this.helpText.search_mouse_text);

		}

        MI = 'MI/';

    }

    else

    {

        $('#search_2hands_text').html(this.helpText.search_2hands_text);

    }

    //On affecte les images pour la recherche par courbes.

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

    {

        $("#2hands_" + search_2hands_tab[i]).css("background-image", "url('" + img_directory + MI + search_2hands_tab[i] + ".png')");

		$("#2hands_" + search_2hands_tab[i]).html(this.notificationStrings[search_2hands_tab_text[i]]);

    }

    //Si on est en mode Kinect, on affecte les images de recherche corporelle.

    if(!this.config.mouseInteractions)

    {

        $('#search_body_text').html(this.helpText.search_body_text);

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

        {

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

			$("#body_" + search_body_tab[i]).html(this.notificationStrings[search_body_tab_text[i]]);

        }

    }

    //Actions de contrôle de l'interface.

    $('#controls_title').html(this.helpText.controls_title);

	if(this.config.mouseInteractions)

	{

		if(this.isTablet)

		{

			$('#controls_1hand_text').html(this.helpText.controls_touch_text);

		}

		else

		{

			$('#controls_1hand_text').html(this.helpText.controls_mouse_text);

		}