diff -r cb8403125d4d -r 9cc1b66d0880 integration/js/contentplayer.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/js/contentplayer.js	Fri Dec 14 13:07:58 2012 +0100
@@ -0,0 +1,434 @@
+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,
+        isClicking = false;
+    timeSlider.slider({
+        range: "min",
+        value: 0,
+        min: 0,
+        max: slidersRange,
+        slide: function(event, ui) {
+            if (isClicking && Math.abs(lastVal - ui.value) > 10) {
+                isClicking = false;
+            }
+            if (!isClicking && currentMedia) {
+                currentMedia.setCurrentTime(currentMedia.duration * ui.value / slidersRange);
+            }
+        },
+        start: function(event, ui) {
+            isClicking = true;
+            lastVal = ui.value;
+        },
+        stop: function(event, ui) {
+            if (isClicking && currentMedia) {
+                timeSlider.slider("value", slidersRange * currentMedia.getCurrentTime() / currentMedia.duration);
+                playOrPause();
+            }
+            isClicking = 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) {
+            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();
+    
+    var taginput = $("#form_tag input[type=text]");
+    taginput.autocomplete({
+        source: function(params, response) {
+            var rx = new RegExp(params.term,"gi");
+            response(
+                _(globalTags)
+                    .chain()
+                    .keys()
+                    .filter(function(tag) {
+                        return rx.test(tag)
+                    })
+                    .shuffle()
+                    .first(5)
+                    .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.title = _tagvalue;
+            _annotation.created = new Date(); /* Date de création de l'annotation */
+            _annotation.description = _tagvalue;
+            
+            _annotation.setTags([_tag.id]); /*Liste des ids de tags */
+            
+            /* Les données créateur/date de création sont envoyées non pas dans l'annotation, mais dans le projet */
+            _export.creator = "theend";
+            _export.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() {
+        
+        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>'),
+            seekCache = undefined,
+            mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
+            webm_file = videourl.replace(/\.mp4$/i,'.webm'),
+            mp4_src = $('<source>'),
+            webm_src = $('<source>');
+            
+        mp4_src.attr({
+            src: mp4_file,
+            type: "video/mp4"
+        })
+        webm_src.attr({
+            src: webm_file,
+            type: "video/webm"
+        });
+
+        videoEl.attr({
+            id : videoid
+        }).css({
+            position : "absolute",
+            left: 0,
+            top: 0,
+            width : "100%",
+            height : "100%"
+        });
+        videoEl.append(mp4_src).append(webm_src);
+        $("#video_sequence").append(videoEl);
+        var mediaEl = videoEl[0];
+        
+        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) {
+            try {
+                media.volume = _vol;
+                mediaEl.volume = _vol;
+            }
+            catch (err) {}
+        });
+        
+        media.on("setmuted", function(_muted) {
+            try {
+                media.muted = _muted;
+                mediaEl.muted = _muted;
+            }
+            catch (err) {}
+        });
+        
+        media.on("setplay", function() {
+            try {
+                mediaEl.play();
+            }
+            catch (err) {}
+        });
+        
+        media.on("setpause", function() {
+            try {
+                mediaEl.pause();
+            }
+            catch (err) {}
+        });
+        
+        // Binding DOM events to media
+        
+        function getVolume() {
+            media.muted = mediaEl.muted;
+            media.volume = mediaEl.volume;
+        }
+        
+        videoEl.on("loadedmetadata", function() {
+            getVolume();
+            media.loaded = true;
+            media.trigger("loadedmetadata");
+            media.trigger("volumechange");
+        })
+        
+        videoEl.on("timeupdate", function() {
+            media.trigger("timeupdate", new IriSP.Model.Time(1000*mediaEl.currentTime));
+        });
+        
+        videoEl.on("volumechange", function() {
+            getVolume();
+            media.trigger("volumechange");
+        })
+        
+        videoEl.on("play", function() {
+            media.trigger("play");
+        });
+        
+        videoEl.on("pause", function() {
+            media.trigger("pause");
+        });
+        
+        videoEl.on("seeking", function() {
+            media.trigger("seeking");
+        });
+        
+        videoEl.on("seeked", function() {
+            media.trigger("seeked");
+        });
+        
+        // Binding UI Events and Mashup Playing to Media
+        
+        media.on("play", function() {
+            $("#btnPlayPause, .video-wait, #progressBar .ui-slider-handle").addClass("pause");
+        });
+        
+        media.on("pause", function() {
+            $("#btnPlayPause, .video-wait, #progressBar .ui-slider-handle").removeClass("pause");
+        });
+        
+        media.on("timeupdate", function(_time) {
+            $("#current").text(_time.toString());
+            if (!isClicking) {
+                timeSlider.slider("value", slidersRange * _time / media.duration);
+            }
+        });
+            
+    }
+    
+}