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,

    timeSlider.slider({

        range: "min",

        value: 0,

        min: 0,

        max: slidersRange,

        slide: function(event, ui) {

        }

    });

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

            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;

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

    taginput.autocomplete({

        source: function(params, response) {

            response(

                _(globalTags)

                    .chain()

                    .keys()

                    .filter(function(tag) {

                    })

                    .value()

                );

        }

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

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

    });

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

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

        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.created = new Date(); /* Date de création de l'annotation */

            _annotation.description = _tagvalue;

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

            /* 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() {

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

    });

    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'),

        videoEl.attr({

            id : videoid

        }).css({

            position : "absolute",

            left: 0,

            top: 0,

            width : "100%",

            height : "100%"

        });

        $("#video_sequence").append(videoEl);

        media.show = function() {

            videoEl.show();

        }

        media.hide = function() {

            videoEl.hide();

        }

        // Binding functions to Media Element Functions

        media.on("setcurrenttime", function(_milliseconds) {

            try {

                mediaEl.currentTime = (_milliseconds / 1000);

            }

            catch (err) {}

        });

        media.on("setvolume", function(_vol) {