IriSP.Widgets.MusitagAnnotations = function(player, config) {
    IriSP.Widgets.Widget.call(this, player, config);
};

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

IriSP.Widgets.MusitagAnnotations.prototype.template =
    '<div class="Musitag-Annotations-Main"></div><div id="Musitag-Annotations-Audioplayer"></div>';
    
IriSP.Widgets.MusitagAnnotations.prototype.annotation_template =
    '<div class="Musitag-Annotations-tag" begin-time="{{annotation.begin.milliseconds}}" title="{{annotation.color.name}}, {{annotation.emoticon.name}} {{l10n.at_timecode}} {{annotation.begin}}">'
    + '<div class="Musitag-container-50">'
    + '<div class="Musitag-shadow"></div>'
    + '<div class="Musitag-color Musitag-{{annotation.color.tag}}"></div>'
    + '<div class="Musitag-emoticon Musitag-{{annotation.emoticon.tag}}"></div>'
    + '</div>{{#annotation.audio}}<div class="Musitag-Annotations-Balloon" audio-url="{{annotation.audio.href}}"></div>{{/annotation.audio}}'
    + '</div>';

IriSP.Widgets.MusitagAnnotations.prototype.messages = {
    fr: {
        at_timecode: "à"
    },
    en: {
        at_timecode: "at"
    }
}

IriSP.Widgets.MusitagAnnotations.prototype.defaults = {
    annotation_type: false,
    columns: 15,
    max_by_column: 10,
    emoticons: [
        { tag: "happy", name: "content"},
        { tag: "unhappy", name: "mécontent"},
        { tag: "laughing", name: "rieur"},
        { tag: "surprised", name: "étonné"}
    ],
    colors: [
        { tag: "red", name: "rouge"},
        { tag: "yellow", name: "jaune"},
        { tag: "green", name: "vert"},
        { tag: "blue", name: "bleu"}
    ],
    rtmp_streamer: "rtmp://media.iri.centrepompidou.fr/ddc_micro_record/"
};

IriSP.Widgets.MusitagAnnotations.prototype.draw = function() {
    this.renderTemplate();
    this.bindPopcorn("IriSP.MusitagAnnotations.redraw","redraw");
    this.$main = this.$.find(".Musitag-Annotations-Main");
    var _this = this;
    this.jwplayer = jwplayer("Musitag-Annotations-Audioplayer");
    this.jwplayer.setup({
        flashplayer: IriSP.getLib("jwPlayerSWF"),
        width: 1,
        height: 1,
        provider: "rtmp",
        events: {
            onPlay: function() {
                _this.setPlayState(true);
            },
            onPause: function() {
                _this.setPlayState(false);
            },
            onIdle: function() {
                _this.setPlayState(false);
            }
        }
    });
    this.current_audio = false;
    this.playing = false;
    this.redraw();
}

IriSP.Widgets.MusitagAnnotations.prototype.setPlayState = function(_playState) {
    this.playing = _playState;
    if (_playState) {
        this.$main.find(".Musitag-Annotations-Balloon").addClass("pause");
    } else {
        this.$main.find(".Musitag-Annotations-Balloon").removeClass("pause");
    }
}

IriSP.Widgets.MusitagAnnotations.prototype.redraw = function() {
    
    var _html = '',
        _annotations = this.getWidgetAnnotations(),
        _duration = this.source.getDuration().milliseconds,
        _sliceDuration = _duration/this.columns,
        _this = this;
    _annotations.forEach(function(_annotation) {
        var _tags = _annotation.getTagTexts();
        _annotation.emoticon = IriSP._(_this.emoticons).find(function(_emoticon) {
            return IriSP._(_tags).find(function(_tag) {
                return _tag == _emoticon.tag;
            });
        });
        _annotation.color = IriSP._(_this.colors).find(function(_color) {
            return IriSP._(_tags).find(function(_tag) {
                return _tag == _color.tag;
            });
        });
    });
    for (var i = 0; i < this.columns; i++) {
        var _sliceStart = i * _sliceDuration,
            _sliceEnd = (i+1) * _sliceDuration,
            _column = _annotations.filter(function(_annotation) {
                return _annotation.begin >= _sliceStart
                    && _annotation.begin < _sliceEnd
                    && _annotation.emoticon
                    && _annotation.color
            }).sortBy(function(_annotation) {
                return _annotation.created;
            });
        if (_column.length > this.max_by_column) {
            _column = _column.slice(_column.length - this.max_by_column, _column.length);
        }
        _html += '<div class="Musitag-Annotations-column">';
        _html += _column.map(function(_annotation) {
            return Mustache.to_html(_this.annotation_template, { annotation: _annotation, l10n: _this.l10n });
        }).join('');
        _html += '</div>';
    }
    this.$main.html(_html);
    this.$main.find('.Musitag-Annotations-tag .Musitag-container-50').click(function() {
        var _el = IriSP.jQuery(this).parent();
        _this.player.popcorn.currentTime(_el.attr("begin-time") / 1000);
    });
    this.$main.find('.Musitag-Annotations-tag').mouseover(function() {
        var _el = IriSP.jQuery(this);
        _this.$.find('.Musitag-Annotations-Balloon').hide();
        _el.find('.Musitag-Annotations-Balloon').show();
    });
    this.$main.find('.Musitag-Annotations-Balloon').click(function() {
        var _el = IriSP.jQuery(this),
            _audiofile = _el.attr("audio-url").replace(_this.rtmp_streamer,"");
        if (_this.playing) {
            _this.jwplayer.pause();
            _this.loadAudio(_audiofile);
        } else {
            _this.loadAudio(_audiofile);
            _this.jwplayer.play();
            _this.setPlayState(true);
        }
    });
}

IriSP.Widgets.MusitagAnnotations.prototype.loadAudio = function(_audiofile) {
    if (this.current_audio !== _audiofile) {
        this.jwplayer.load({
            file: _audiofile,
            streamer: this.rtmp_streamer
        });
        this.current_audio = _audiofile;
    }
}