IriSP.contentplayer = function(opts) {

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

        project = directory.remoteSource({

            url: opts.project_url,

            serializer: IriSP.serializers.ldt

        }),

        apidirectory = new IriSP.Model.Directory(),

        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) {

            currentMedia.setCurrentTime(currentMedia.duration * ui.value / slidersRange);

        }

    });

    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({

        axis: "x",

        start: function() {

            segmentdragging = true;

        },

        stop: function() {

            segmentdragging = false;

        }

    });

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

    resizeSegmentDrag();   

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

        if (!segmentdragging) {

            var s = project.getElement($(this).attr("data-segment-id"));

            if (s) {

                currentMedia.setCurrentTime(s.begin);

            }

        }

    }).click(function() {

        return false;

    });

    var tagsdragout = $("#tag_sequence"),

        tagsdragin = tagsdragout.find("ul")

        tagsdragging = false;

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

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

    }

    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;

                },

                error: function(_xhr, _error, _thrown) {

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

                }

            });

        }

        return false;

    });

    project.onLoad(function() {

        currentMedia = project.currentMedia;

        addMedia(currentMedia);

        $("#duration").text(currentMedia.duration.toString());

        $("h1").text(currentMedia.title); //TODO: Remove when on platform

        var segmentsHtml = "";

        project.getAnnotations().forEach(function(s) {

            segmentsHtml += '<li data-segment-id="' + s.id + '"><a href="#">' + s.title + ' </a> </li>';

            var url = IriSP.endpoints.annotations_by_timecode

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

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

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

            var proj = apidirectory.remoteSource({

                url: url,

                serializer: IriSP.serializers.ldt

            });

            proj.__segment = s;

            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();

                    }

                });

            });

            s.on("enter", function() {

                currentSegment = s;

                showCurrentTags();

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

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

            });

        });

        segmentdragin.html(segmentsHtml);

        resizeSegmentDrag();

        currentMedia.play();

    });

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

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

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

                    + '" style="color: rgb('

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

                    + ')">'

        tagsdragin.html(html);

    }

    function addMedia(media) {

        if (media.has_player) {

            return;

        }

        media.has_player = true;

        media.loaded = false;

        media.paused = true;

            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",

            left: 0,

            top: 0,

            width : "100%",

            height : "100%"

        });

        if (can_play_mp4 && can_play_webm) {