IriSP.tagplayer = function(opts) {

    var directory = new IriSP.Model.Directory(),

        project = directory.remoteSource({

            url: IriSP.endpoints.mashup_by_tag,

            url_params: {

                tag: opts.tag

            },

            serializer: IriSP.serializers.ldt

        }),

        apidirectory = new IriSP.Model.Directory(),

        mashup,

        currentIndex = 0,

        currentSegment,

        currentMedia,

        globalTags = {},

        seqCount;

    var ratio = 2.37;

    function resizeVideo() {

        var currentwidth = $(window).width(),

            maxheight = $(window).height() - 220,

            height = Math.min(maxheight, currentwidth / ratio),

            width = ratio * height;

        $("#video_sequence").css({

            width: Math.floor(width),

            height: Math.floor(height)

        });

    }

    $(window).on("resize", resizeVideo);

    resizeVideo();

    var timeSlider = $("#progressBar"),

        slidersRange = 1000,

        wasPaused = true,

        lastVal = 0;

    timeSlider.slider({

        range: "min",

        value: 0,

        min: 0,

        max: slidersRange,

        slide: function(event, ui) {

            var t = currentSegment.begin + ( currentSegment.getDuration() * ui.value / slidersRange );

            currentMedia.setCurrentTime(t);

        }

    });

    $("#btnBck").click(function() {

        var newn = currentIndex ? ( currentIndex - 1 ) : ( seqCount - 1 );

        goToPart(newn);

        return false;

    });

    $("#btnFwd").click(function() {

        var newn = ( 1 + currentIndex ) % seqCount;

        goToPart(newn);

        return false;

    });

    function playOrPause() {

        if (currentMedia) {

            if (currentMedia.paused) {

                currentMedia.play();

            } else {

                currentMedia.pause();

            }

        }

    }

    $(".video-wait, #btnPlayPause").click(function() {

        playOrPause();

        return false;

    });

    var segmentdragout = $("#title_sequence"),

        segmentdragin = segmentdragout.find("ul")

        segmentdragging = false;

    function resizeSegmentDrag() {

        var segmentdelta = segmentdragout.width() - segmentdragin.width();

        segmentdragin.draggable("option","containment",segmentdelta < 0 ? [ segmentdelta - 20, 0, 20, 0 ] : "parent")

    }

    segmentdragin.draggable({

        axis: "x",

        start: function() {

            segmentdragging = true;

        },

        stop: function() {

            segmentdragging = false;

        }

    });

    $(window).on("resize", resizeSegmentDrag);

    resizeSegmentDrag();   

    segmentdragin.on("mouseup", "li", function() {

        if (!segmentdragging) {

            goToPart(parseInt($(this).attr("data-segment-index")));

        }

    }).click(function() {

        return false;

    });

    var tagsdragout = $("#tag_sequence"),

        tagsdragin = tagsdragout.find("ul")

        tagsdragging = false;

    function resizeTagsDrag() {

        var tagsdelta = tagsdragout.width() - tagsdragin.width();

        tagsdragin.draggable("option","containment",tagsdelta < 0 ? [ tagsdelta - 20, 0, 20, 0 ] : "parent");

        tagsdragin.css("left",Math.floor(tagsdelta/2));

    }

    tagsdragin.draggable({

        axis: "x",

        start: function() {

            tagsdragging = true;

        },

        stop: function() {

            tagsdragging = false;

        }

    });

    $(window).on("resize", resizeTagsDrag);

    resizeTagsDrag();

    var taginput = $("#form_tag input[type=text]"),

        replacerx;

    taginput.autocomplete({

        source: function(params, response) {

            var charsub = [ '[aáàâä]', '[cç]', '[eéèêë]', '[iíìîï]', '[oóòôö]' ],

                term = params.term.replace(/([\\\*\+\?\|\{\[\}\]\(\)\^\$\.\#\/])/gm, '\\$1');

            _(charsub).each(function(chars) {

                var tmprx = new RegExp(chars,"gim");

                term = term.replace(tmprx, chars);

            });

            var searchrx = new RegExp("(^|\\s)" + term, "i");

            replacerx = new RegExp("(^|\\s)(" + term + ")", "gi");

            response(

                _(globalTags)

                    .chain()

                    .keys()

                    .filter(function(tag) {

                        return searchrx.test(tag)

                    })

                    .sortBy(_.identity)

                    .value()

                );

        }

    }).data("autocomplete")._renderItem = function(ul, item) {

        return $( "<li>" )

            .data( "item.autocomplete", item )

            .append( "<a>" + item.label.replace(replacerx, '$1<b>$2</b>') + "</a>" )

            .appendTo( ul );

    };

    taginput.on("keyup input paste", function() {

        taginput.val(taginput.val().toUpperCase());

    });

    $("#form_tag").on("submit", function() {

        var _tagvalue = taginput.val().toUpperCase();

        taginput.val("");

        if (_tagvalue && currentSegment) {

            /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */

            var _exportedAnnotations = new IriSP.Model.List(directory),

                /* Création d'un objet source utilisant un sérialiseur spécifique pour l'export */

                _export = directory.newLocalSource({

                    serializer: IriSP.serializers.ldt_annotate

                }),

                /* Création d'une annotation dans cette source avec un ID généré à la volée (param. false) */

                _annotation = new IriSP.Model.Annotation(false, _export),

                /* Si le Type d'Annotation n'existe pas, il est créé à la volée */

                _annotationType = new IriSP.Model.AnnotationType(false, _export),

                /* L'objet Tag qui sera envoyé */

                _tag = new IriSP.Model.Tag(false, _export);

            /* L'objet Tag doit avoir pour titre le texte du tag envoyé */

            _tag.title = _tagvalue;

            /* Si nous avons dû générer un ID d'annotationType à la volée... */

            _annotationType.dont_send_id = true;

            /* Il faut inclure le titre dans le type d'annotation */

            _annotationType.title = "Contribution";

            _annotation.setMedia(currentSegment.getMedia().id);

            _annotation.setBegin(currentSegment.begin);

            _annotation.setEnd(currentSegment.end);

            _annotation.setAnnotationType(_annotationType.id); 

            _annotation.title = currentSegment.title;

            _annotation.created = new Date(); /* Date de création de l'annotation */

            _annotation.description = _tagvalue;

            _annotation.setTags([_tag.id]); /*Liste des ids de tags */

            _annotation.creator = "theend";

            _annotation.created = new Date();

            /* Ajout de l'annotation à la liste à exporter */

            _exportedAnnotations.push(_annotation);

            /* Ajout de la liste à exporter à l'objet Source */

            _export.addList("annotation",_exportedAnnotations);

            var segmentAtPost = currentSegment;

            IriSP.jQuery.ajax({

                url: IriSP.endpoints.post_annotation,

                type: "POST",

                contentType: 'application/json',

                data: _export.serialize(), /* L'objet Source est sérialisé */

                success: function(_data) {

                    var n = 1 + (segmentAtPost.__tags[_tagvalue] || 0)

                    segmentAtPost.__tags[_tagvalue] = n;

                    showCurrentTags();

                },

                error: function(_xhr, _error, _thrown) {

                    console.log("Error when sending annotation", _thrown);

                }

            });

        }

        return false;

    });

    project.onLoad(function() {

        mashup = project.getMashups()[0];

        if (!mashup) {

            return;

        }

        seqCount = mashup.segments.length;

        var html = mashup.segments.map(function(s, i) {

                return '<li data-segment-index="' + i + '"><a href="#">' + s.title + ' </a> </li>'

            }).join("");

        segmentdragin.html(html);

        resizeSegmentDrag();

        goToPart(0);

        mashup.segments.forEach(function(s) {

            var url = IriSP.endpoints.annotations_by_timecode

                .replace('__CONTENT_ID__', s.getMedia().id)

                .replace('__BEGIN__', s.annotation.begin.valueOf())

                .replace('__END__', s.annotation.end.valueOf());

            var proj = apidirectory.remoteSource({

                url: url,

                serializer: IriSP.serializers.ldt

            });

            proj.__segment = s.annotation;

            proj.onLoad(function() {

                proj.__segment.__tags = {};

                proj.getAnnotations().forEach(function(a) {

                    var tags = a.getTagTexts();

                    _(tags).each(function(t) {

                        var upt = t.toUpperCase(),

                            nl = 1 + (proj.__segment.__tags[upt] || 0),

                            ng = 1 + (globalTags[upt] || 0);

                        proj.__segment.__tags[upt] = nl;

                        globalTags[upt] = ng;

                    });

                    if (proj.__segment === currentSegment) {

                        showCurrentTags();

                    }

                });

            });

        });

    });

    function goToPart(n) {

        if (currentMedia) {

            currentMedia.pause();

        }

        currentIndex = n;

        currentSegment = mashup.segments[n].annotation;

        currentMedia = currentSegment.getMedia();

        mashup.getMedias().forEach(function(m) {

            if (m === currentMedia) {

                m.show();

            } else {

                m.hide();

            }

        });

        $("#title_sequence li").removeClass("here");

        $("#title_sequence li[data-segment-index='" + n + "']").addClass("here");

        $("#duration").text(currentSegment.getDuration().toString());

        if (currentSegment.__tags) {

            showCurrentTags();

        }

        timeSlider.slider("value",0);

        currentMedia.setCurrentTime(currentSegment.begin);

        if (!currentMedia.loaded) {

            $(".video-wait").show();

            $("#btnPlayPause, .video-wait").removeClass("pause");

        }

        currentMedia.play();

    }

    function showCurrentTags() {

        var vals = _(currentSegment.__tags).values(),

            max = Math.max.apply(Math, vals),

            min = Math.min(max - 1, Math.min.apply(Math, vals)),

            b = 160 / (max - min);

        var html = _(currentSegment.__tags)

            .chain()

            .map(function(v, k) {

                var c = Math.floor( 95 + (v - min) * b );

                return '<li><a href="'

                    + IriSP.endpoints.tag_page.replace("__TAG__",encodeURIComponent(k))

                    + '" style="color: rgb('

                    + [c,c,c].join(",")

                    + ')">'

                    + k

                    + ' </a> </li>'

            })

            .shuffle()

            .value()

            .join("");

        tagsdragin.html(html);

        resizeTagsDrag();

    }

    function addMedia(media) {

        if (media.has_player) {

            return;

        }

        media.has_player = true;

        media.loaded = false;

        media.paused = true;

        var videourl = media.video;

        if (typeof IriSP.video_url_transform === "function") {

            videourl = IriSP.video_url_transform(media.video);

        }

        var videoid = "video_" + media.id,

            videoEl = $('<video>'),

            mp4_file = videourl.replace(/\.webm$/i,'.mp4'),

            webm_file = videourl.replace(/\.mp4$/i,'.webm'),

            mediaEl = videoEl[0],

            can_play_mp4 = !!mediaEl.canPlayType('video/mp4'),

            can_play_webm = !!mediaEl.canPlayType('video/webm');

        videoEl.attr({

            id : videoid

        }).css({

            position : "absolute",