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

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

    this.lastIds = [];

    var _this = this;

    this.throttledRefresh = IriSP._.throttle(function() {

        _this.refresh(false);

    }, 800);

    this.searchString = false;

    this.lastSearch = false;

};

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

IriSP.Widgets.AnnotationsList.prototype.defaults = {

    /*

     * URL when the annotations are to be reloaded from an LDT-like segment API

     * e.g.

     * http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?

     */

    ajax_url : false,

    /*

     * number of milliseconds before/after the current timecode when calling the

     * segment API

     */

    ajax_granularity : 600000, 

    default_thumbnail : "",

    /*

     * URL when the annotation is not in the current project, e.g.

     * http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/{{project}}/{{annotationType}}#id={{annotation}}

     */

    foreign_url : "",

    annotation_type : false,

    refresh_interval : 0,

    limit_count : 20,

    newest_first : false,

    always_visible : false,

    start_visible: true,

    show_audio : true,

    show_filters : false,

    show_creation_date : false,

    /*

     * Only annotation in the current segment will be displayed. Designed to work with the Segments Widget.

     */

    filter_by_segments: false,

    segments_annotation_type: "chap",

    /*

     * Set to a username if you only want to display annotations from a given user

     */

    show_only_annotation_from_user: false,

    /*

     * Show a text field that filter annotations by username

     */

    filter_by_user: false,

    tags : true,

    polemics : [{

        keyword: "++",

        background_color: "#c9ecc6"

    },{

        keyword: "--",

        background_color: "#f9c5c6"

    },{

        keyword: "??",

        background_color: "#cec5f9"

    },{

        keyword: "==",

        background_color: "#f9f4c6"

    }]

};

IriSP.Widgets.AnnotationsList.prototype.messages = {

    en: {

        voice_annotation: "Voice Annotation",

    },

    fr: {

        voice_annotation: "Annotation Vocale",

    }

};

IriSP.Widgets.AnnotationsList.prototype.template =

    + '{{#show_filters}}'

    + '<div class="Ldt-AnnotationsList-Filters">'

    + '</div>'

    + '{{/show_filters}}'

    + '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'

    + '<ul class="Ldt-AnnotationsList-ul">'

    + '</ul>'

    + '</div>';

IriSP.Widgets.AnnotationsList.prototype.annotationTemplate = 

    '<li class="Ldt-AnnotationsList-li Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">'

    + '<div class="Ldt-AnnotationsList-ThumbContainer">'

    + '<a href="{{url}}" draggable="true">'

    + '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'

    + '</a>'

    + '</div>'

    + '{{#show_timecode}}<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>{{/show_timecode}}'

    + '<h3 class="Ldt-AnnotationsList-Title" draggable="true">'

    + '<a href="{{url}}">{{{htitle}}}</a>'

    + '</h3>'

    + '<p class="Ldt-AnnotationsList-Description">{{{hdescription}}}</p>'

    + '{{#created}}'

    + '<div class="Ldt-AnnotationsList-CreationDate">{{{created}}}</div>'

    + '{{/created}}'

    + '{{#tags.length}}'

    + '<ul class="Ldt-AnnotationsList-Tags">'

    + '{{#tags}}'

    + '{{#.}}'

    + '<li class="Ldt-AnnotationsList-Tag-Li">'

    + '<span>{{.}}</span>'

    + '</li>'

    + '{{/.}}'

    + '{{/tags}}'

    + '</ul>'

    + '{{/tags.length}}'

    + '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-annotation-id="{{id}}">{{l10n.voice_annotation}}</div>{{/audio}}'

    + '</li>';

// obj.url = this.project_url + "/" + media + "/" + annotations[i].meta.project

// + "/" + annotations[i].meta["id-ref"] + '#id=' + annotations[i].id;

IriSP.Widgets.AnnotationsList.prototype.ajaxSource = function() {

    var _currentTime = this.media.getCurrentTime(),

        _duration = this.media.duration;

    this.lastAjaxQuery = _currentTime;

    var _url = Mustache.to_html(this.ajax_url, {

        media : this.source.currentMedia.id,

        begin : Math.max(0, _currentTime - this.ajax_granularity),

        end : Math.min(_duration.milliseconds, _currentTime + this.ajax_granularity)

    });

    this.currentSource = this.player.loadMetadata(IriSP._.defaults({

        "url" : _url

    }, this.metadata));

};

IriSP.Widgets.AnnotationsList.prototype.ajaxMashup = function() {

    var _currentTime = this.media.getCurrentTime();

    var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime);

    if (typeof _currentAnnotation !== "undefined" && _currentAnnotation.id !== this.lastMashupAnnotation) {

        this.lastMashupAnnotation = _currentAnnotation.id;

        var _currentMedia = _currentAnnotation.getMedia(),

            _url = Mustache.to_html(this.ajax_url, {

                media : _currentMedia.id,

                begin : Math.max(0, _currentAnnotation.annotation.begin.milliseconds - this.ajax_granularity),

                end : Math.min(_currentMedia.duration.milliseconds, _currentAnnotation.annotation.end.milliseconds + this.ajax_granularity)

            });

        this.currentSource = this.player.loadMetadata(IriSP._.defaults({

            "url" : _url

        }, this.metadata));

    }

};

IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {

    _forceRedraw = (typeof _forceRedraw !== "undefined" && _forceRedraw);

    if (this.currentSource.status !== IriSP.Model._SOURCE_STATUS_READY) {

        return 0;

    }

    var _this = this,

        _currentTime = this.media.getCurrentTime();

    var _list = this.annotation_type ? this.currentSource.getAnnotationsByTypeTitle(this.annotation_type) : this.currentSource.getAnnotations();

    if (this.mashupMode) {

        var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime);

        if (typeof _currentAnnotation !== "undefined") {

            _currentTime = _currentTime - _currentAnnotation.begin + _currentAnnotation.annotation.begin;

            var _mediaId = _currentAnnotation.getMedia().id;

            _list = _list.filter(function(_annotation) {

                return _annotation.getMedia().id === _mediaId;

            });

        }

    }

    _list = _list.filter(function(_annotation) {

        return _annotation.found !== false;

    });

        /*

         *  A given annotation is considered "in" segment if the middle of it is between the segment beginning and the segment end. 

         *  Note this is meant to be used for "markings" annotations (not segments)

         */

        _segmentsAnnotation = this.currentSource.getAnnotationsByTypeTitle(this.segments_annotation_type)

        if (_currentSegments.length == 0) {

            _list = _list.filter(function(_annotation){

                return false;

            });

        }

        else {

            _list = _list.filter(function(_annotation){

                _annotation_time = (_annotation.begin+_annotation.end)/2;

                return (_currentSegments[0].begin <= _annotation_time && _currentSegments[0].end >= _annotation_time)

            });

        }

    }

    if (this.show_only_annotation_from_user){

        _list = _list.filter(function(_annotation){

           return _annotation.creator == _this.show_only_annotation_from_user;

        });

    }

    if (this.limit_count) {

        /* Get the n annotations closest to current timecode */

        _list = _list.sortBy(function(_annotation) {

            return Math.abs((_annotation.begin + _annotation.end) / 2 - _currentTime);

        }).slice(0, this.limit_count);

    }

    if (this.newest_first) {

        _list = _list.sortBy(function(_annotation) {

            return -_annotation.created.valueOf();

        });

    } else {

        _list = _list.sortBy(function(_annotation) {

            return _annotation.begin;

        });

    }

    var _ids = _list.idIndex;

    if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds) || this.searchString !== this.lastSearch) {

        /* This part only gets executed if the list needs updating */

        this.lastSearch = this.searchString;

        this.lastIds = _ids;

        this.list_$.html("");

        _list.forEach(function(_annotation) {

            var _url = (

                ( typeof _annotation.url !== "undefined" && _annotation.url)

                ? _annotation.url

                : (

                    ( typeof _this.source.projectId !== "undefined" && typeof _annotation.project !== "undefined" && _annotation.project && _this.source.projectId !== _annotation.project )

                    ? Mustache.to_html(

                        _this.foreign_url,

                        {

                            project : _annotation.project,

                            media : _annotation.media.id,

                            annotation : _annotation.id,

                            annotationType : _annotation.annotationType.id

                        }

                    )

                    : document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id

                    )

            );

            var _title = "",

                _description = _annotation.description,

            // Update : display creator

            if (_annotation.creator) {

                _title = _annotation.creator;

            }

            if (_annotation.title) {

                var tempTitle = _annotation.title;

                if( tempTitle.substr(0, _title.length + 1) == (_title + ":") ){

                    _title = "";

                }

                _title = _title + ( (_title=="") ? "" : ": ") + _annotation.title;

            }

            var _bgcolor;

            IriSP._(_this.polemics).each(function(_polemic) {

                var _rgxp = IriSP.Model.regexpFromTextOrArray(_polemic.keyword, true);

                if (_rgxp.test(_title + " " + _description)) {

                    _bgcolor = _polemic.background_color;

                }

            });

            var _created = false;

            if (_this.show_creation_date) {

                _created = _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString();

            }

            if(this.tags == true){

                var _tags = _annotation.getTagTexts();

            }

            else {