/*

* 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 : Timeline.js

 * 

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

 * 

 * Fonctionnalités : Widget de la timeline du player incorporé dans le Front.

 */

/*

 The Timeline Widget fits right under the video

 * Est appelé dans les fichiers créant les widgets du metadataplayer.

 */

IriSP.Widgets.Timeline = function(player, config) {

    IriSP.Widgets.Widget.call(this, player, config);

    this.bindPopcorn("timeupdate","onTimeupdate");

    this.bindPopcorn("loadedmetadata","ready");

    this.bindPopcorn("markersready","onMarkersReady");

    this.timelineSelected = false;

    this.markerShowTime = 200;

    this.markerLastTime = 5000;

    this.markerBigShown = false;

    this.currentMarkerIdx = -1;

    this.previousMarkerIdx = -1;

    this.hideTimeout;

    this.currentMode = "VIDEO";

    this.paused = false

    this.top_epsilon = 0;

    this.imgDir = "player/img/";

    this.markersDir = "pictos/small/";

    this.player = player;

    this.isCurrentlyInASearchByGesture = false;

    this.mouseInteractions = false;

    //Id du marqueur enregistré.

    this.currentMarkerId;

    //Gestures et noms par défaut.

    this.gestures = ["fall", "jump", "circle", "screw", "bend", "arc", "knee-up", "right-angle", "wave", "no-motion", "contact", "up-down"];

    this.gesturesText = ["chute", "saut", "rotation", "rotation de groupe", "inclinaison", "port de bras", "levé de genou", "angle droit", "ondulation", "immobilité", "contact", "de haut en bas", "grand-jeté"];

    var _this = this;

    this.annotations = this.source.getAnnotations().filter(function(annotation)

    {

        return _this.isGesture(annotation, null, _this.gestures);

    });

};

/*

 * Constructeur du Widget.

*/

IriSP.Widgets.Timeline.prototype = new IriSP.Widgets.Widget();

/*

 * Indique si l'annotation passée en paramètre référence une gesture utilisée dans ce Front.

*/

IriSP.Widgets.Timeline.prototype.isGesture = function(element, index, array)

{

    return ($.inArray(element.annotationType.contents.title, array) > -1);

}

/*

 * Spécifie si on est en événements souris ou non.

 * Est appelé dans le fichier :

 * mosaic > fonction onMarkersReady.

*/

IriSP.Widgets.Timeline.prototype.setMouseInteractions = function(mouseInteractions)

{

    this.mouseInteractions = mouseInteractions;

    if(mouseInteractions)

    {

        this.markersDir += 'MI/';

    }

}

/*

 * Spécifie la langue pour l'affichage des marqueurs.

 * Est appelé dans le fichier :

 * mosaic > fonction onMarkersReady.

*/

IriSP.Widgets.Timeline.prototype.setLang = function(gesturesText)

{

    this.gesturesText = gesturesText;

}

/*

 * Fonction associée à l'événement : les marqueurs sont prêts.

 * Est appelé dans le fichier :

 * mosaic > fonction onPlayerLoad.

*/

IriSP.Widgets.Timeline.prototype.onMarkersReady = function() {}

/*

 * Paramètres par défaut de la timeline.

*/

IriSP.Widgets.Timeline.prototype.defaults = {

    minimized_height : 114,//44,

    maximized_height : 114,

    middle_height: 10,//4,

    timelineBorderLength : 6,

    minimize_timeout : 1500 // time before minimizing timeline after mouseout

};

/*

 * Fonction appelée pour dessiner la timeline.

*/

IriSP.Widgets.Timeline.prototype.draw = function() {

    this.$timeline = IriSP.jQuery('<div>')

        .addClass("Ldt-Timeline")

        .css(this.calculateTimelineCss(this.minimized_height));

    this.$timelineMiddle = IriSP.jQuery('<div>')

        .addClass("Ldt-TimelineMiddle")

        .css(this.calculateTimelineMiddleCss(this.minimized_height, this.middle_height));

    //On l'ajoute au widget.

    this.$.append(this.$timeline);

    this.$.append(this.$timelineMiddle);

    var _this = this;

    //On définit le slider.

    this.$timeline.slider({

        range: "min",

        value: 0,

        min: 0,

        max: this.source.getDuration().milliseconds,

        slide: function(event, ui) {

            if(_this.player.popcorn)

            {

                _this.player.popcorn.currentTime(Math.floor(ui.value/1000));

                _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToTime");

            }

            //On supprime le marqueur précédemment affiché.

            if(_this.previousMarkerIdx > -1)

            {

                var previousMarker = IriSP.jQuery("#" + _this.annotations[_this.previousMarkerIdx].id.replace(":", "_"));

                _this.hideMarkerBig(previousMarker);

            }

        }

    });

    this.$handle = this.$timeline.find('.ui-slider-handle');

    this.$handle.css(this.calculateHandleCss(this.minimized_height));

    //On wrapp mouseover et mouse out.

    this.$.mouseover(this.functionWrapper("onMouseover")).mouseout(this.functionWrapper("onMouseout"));

    //On bind keypress.

    IriSP.jQuery('body').keypress(function(evt) {_this.keyPress(evt)});

    this.maximized = false;

    this.timeoutId = false;

    this.processMarkers();

};

/*

 * Starts playing the video when it's ready.

*/

IriSP.Widgets.Timeline.prototype.ready = function() {

    this.player.popcorn.play();

    this.player.popcorn.mute();

    // this.processMarkers();

}

/*

 * Met à l'échelle une valeur de [A, B] vers [C, D].

 * Est appelé dans les fichiers :

 * pointers > fonction pointersTimelineSelection.

 * search > fonction searchFilter.

 * Timeline > fonctions processMarkers, onTimeupdate et timeDisplayUpdater.

*/

IriSP.Widgets.Timeline.prototype.scaleIntervals = function(A, B, C, D, val) {

    if(A == B)

    {

        return (D - C) / 2;

    }

    else

    {

        return (D - C) * (val - A) / (B - A) + C;

    }

}

/*

 * On calcule les marqueurs.

 * Est appelé dans le fichier :

 * Timeline > fonction ready.

*/

IriSP.Widgets.Timeline.prototype.processMarkers = function() {

    var _this = this;

    var markers = "";

    //On calcule la position en Y de la timeline.

    var timelineMiddleTop = this.$timelineMiddle.position().top;

    var TLHeight = this.$timeline.height()/2;

    //Pour toutes les annotations, on crée les marqueurs.

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

    {

        markers += "<div class='Ldt-Marker' id='" + this.annotations[i].id.replace(":", "_") + "'></div>";

    }

    //On les ajoute.

    this.$.append(markers);

    var markerHeight = IriSP.jQuery(".Ldt-Marker").height();

    IriSP.jQuery(".Ldt-Marker").css("z-align", "150");

    //Pour toutes les annotations.

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

    {

        //On les place sur la timeline.

        IriSP.jQuery("#" + this.annotations[i].id.replace(":", "_")).css(

        {

            top: timelineMiddleTop + "px",

            left: Math.floor(+this.scaleIntervals(0, this.source.getDuration().getSeconds(), 0, this.$timeline.width(), this.annotations[i].begin/1000) + this.$timeline.position().left) + "px",

            "margin-top": (-TLHeight - markerHeight/2) - this.top_epsilon + "px"

        });

    }

    //On lance l'événement pour dire à popcorn que les marqueurs sont utilisables.

    this.player.popcorn.trigger("markersready");

}

/*

 * Fonction de recherche par gestures.

 * Est appelé dans les fichiers :

 * mosaic > fonctions onMouseUp, manageControlEvents et onMarkersReady.

 * curvesDetector > fonction updateDists.

*/

IriSP.Widgets.Timeline.prototype.searchByGesture = function(typeName)

{

    //Si le type existe.

    if(typeName != '' || typeName != undefined)

    {

        if(_.include(this.gestures, typeName))

        {

            //On entre en mode recherche et on affiche les marqueurs sélectionnés.

            this.currentMode = "SEARCH";

            this.hideMarkersSearch(typeName);

            this.isCurrentlyInASearchByGesture = true;

        }

    }

}

/*

 * Fonction de suppression de recherche par gesures.

 * Est appelé dans le fichier :

 * pointers > checkIfPointerIsOnSearchNotification et removeSearchNotificationIfOnIt.

*/

IriSP.Widgets.Timeline.prototype.removeSearchByGesture = function()

{

    this.hideMarkersSearch();

    this.isCurrentlyInASearchByGesture = false;

}

/*

 * Place le curseur sur la timeline en fonction de la touche pressée.

 * Est appelé dans le fichier :

*/

IriSP.Widgets.Timeline.prototype.keyPress = function(e) {

    var key = this.whichKey(e.which);

    var time = 0;

    //Entre 0 et 10, on met à jour la position du curseur dans la video.

    if(key > -1 && key < 11)

    {

        time = this.source.getDuration().getSeconds()/10*key;

        this.$timeline.slider("value",time);

        this.player.popcorn.currentTime(time);

        //On supprime le marqueur précédemment affiché.

        if(this.previousMarkerIdx > -1)

        {

            var previousMarker = IriSP.jQuery("#" + this.annotations[this.previousMarkerIdx].id.replace(":", "_"));

            this.hideMarkerBig(previousMarker);

        }

    }

    //p ou P pour mettre en pause.

    if(key == 21)

    {

        if(!this.paused)

        {

            this.paused = true;

            this.player.popcorn.pause();

        }

        else

        {

            this.paused = false;

            this.player.popcorn.play();

        }

    }

}

/*

 * Donne une clé correspondante à une touche donnée.

 * Est appelé dans le fichier :

 * Timeline > fonction keyPress.

*/

IriSP.Widgets.Timeline.prototype.whichKey = function(code) {

    var key;

    if(code > 47 && code < 58)

    {

        return (code - 48);

    }

    if(code == 115 || code == 83)

    {

        return 11;

    }

    //p ou P pour mettre la vidéo en pause.

    if(code == 112 || code == 80)

    {

        return 21;

    }

    switch(code)

    {

        case 224:

            key = 0;

        break;

        case 38:

            key = 1;

        break;

        case 233:

            key = 2;

        break;

        case 34:

            key = 3;

        break;

        case 39:

            key = 4;

        break;

        case 40:

            key = 5;

        break;

        case 45:

            key = 6;

        break;

        case 232:

            key = 7;

        break;

        case 95:

            key = 8;

        break;

        case 231:

            key = 9;

        break;