/*

* 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).

 */

 * Est appelé dans les fichiers :

 * mosaic > fonction manageControlEvents.

 * curvesDetector > fonction updateDists.

Mosaic.prototype.notifyHelp = function(inMosaic)

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

    if(this.helpDisplayed)

    {

        return;

    }

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

    //Section des recherches corporelles.

    var search_body_tab;

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

    var controls_1hand_tab;

    //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_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_body_tab = ['chute', 'knee_up', 'jump', 'bend'];

        search_2hands_tab_opacities = [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5];

        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_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

    {

        controls_1hand_tab = ['deplacer', 'precedent', 'suivant', 'mosaique_horizontal', 'mosaique_vertical', 'move_down', 'move_up', 'move_right', '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>";

    }

    //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.

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

    });

    //Taille des marges des images.

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

    //Largeur des images.

    var widths = $('.notify_imgs_small').width();

    //Hauteur des images.

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

    //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'));

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

    var help_column_width = sep_left - help_margin;

    //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')))

    });

    //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')))

    });

    //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('Recherche');

    var MI = '';

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

    if(this.config.mouseInteractions)

    {

        $('#search_2hands_text').html('Courbes à effectuer avec la souris');

        MI = 'MI/';

    }

    else

    {

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

    }

    //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')");

    }

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

    if(!this.config.mouseInteractions)

    {

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

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

        }

    }

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

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

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

    //On affecte les images des actions de contrôle de l'interface.

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

    {

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

    }

    //On les fait apparaître.

    $('#notify_help').css(

    {

        opacity: "1"

    });

    $('.notify_imgs_big').css(

    {

        opacity: "1"

    });

 * Est appelé dans les fichiers :

 * pointers > fonction detectIdlePointers.

 * mosaic > fonction manageControlEvents et onClick.

 * curvesDetector > fonction updateDists.

Mosaic.prototype.removeHelp = function()

    //Si l'aide n'est pas affichée, on part.

    if(!this.helpDisplayed)

    {

        return;

    }

    var _this = this;

    //On fait disparaître l'aide.

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

    {

        //On indique que l'aide n'est plus affichée, et on détruit le panneau.

        _this.helpDisplayed = false;

        _this.canNotifyHelp = true;

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

    });

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

 * Est appelé dans les fichiers :

 * zoomInteractions > fonctions preUnzoom et unzoom.

 * mosaic > fonction showNImages.

Mosaic.prototype.mosaicSelectionAndSearch = function()

    //Si on n'est pas en mode mosaic, on part.

    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"

    });

 * Est appelé dans le fichier :

 * zoomInteractions > fonction preZoom.

Mosaic.prototype.mosaicSelection = function()

    //Si on n'est pas en mode mosaic, on part.

    if(this.currentMode != 'MOSAIC')

    {