--- a/integration/js/mashupplayer.js	Thu Nov 22 18:45:06 2012 +0100
+++ b/integration/js/mashupplayer.js	Fri Nov 23 19:13:50 2012 +0100
@@ -1,13 +1,14 @@
-IriSP.player = function(options) {
+IriSP.mashupplayer = function(options) {
     
     var directory = new IriSP.Model.Directory(),
         project = directory.remoteSource({
-            url: options.url,
+            url: IriSP.endpoints.ldt + options.id,
             serializer: IriSP.serializers.ldt
         }),
+        apidirectory = new IriSP.Model.Directory(),
         mashup,
         mediatemplate = _.template('<li class="item-video media" data-media-id="<%= media.id %>">'
-            + '<a href="#"><img class="thumbnail" alt="<%= media.title %>" src="<%= media.thumbnail %>"></a><div class="video-info">'
+            + '<a href="<%= IriSP.endpoints.media_page + media.id %>"><img class="thumbnail" alt="<%= media.title %>" src="<%= media.thumbnail %>"></a><div class="video-info">'
             + '<h3 class="title-video"><a href="#"><%= media.title %></a></h3><p class="description"><%= media.description %></p>'
             + '<p class="time-length">Durée : <span><%= media.duration.toString() %></span></p><div class="frise">'
             + '<div class="frise-overflow"><div class="frise-segments"><%= segments %></div></div></div></div></li>');
@@ -20,32 +21,41 @@
         project.trigger("set-current",mashup);
         
         $(".info-title a").text(mashup.title);
+        $(".title-video-wrap .title-video").text(mashup.title);
         $(".info-duration td").text(mashup.duration.toString());
         $(".info-author a").text(mashup.creator);
         $(".info-description td").text(mashup.description);
         
-        var html = '';
         mashup.getMedias().forEach(function(media) {
-            var segments = mashup.segments.filter(function(segment) {
-                return segment.getMedia() === media;
+            apidirectory.remoteSource({
+                url: IriSP.endpoints.content + media.id,
+                serializer: IriSP.serializers.content
+            }).onLoad(function() {
+                var m = apidirectory.getElement(media.id);
+                if (m) {
+                    media.thumbnail = m.thumbnail;
+                }
+                var segments = mashup.segments.filter(function(segment) {
+                    return segment.getMedia() === media;
+                });
+                var segmentshtml = '', k = media.duration ? (100 / media.duration) : 0;
+                segments.forEach(function(segment) {
+                    var vizdata = {
+                        annotation: segment.annotation,
+                        left: k * segment.annotation.begin,
+                        width: k * segment.annotation.getDuration()
+                    }
+                    segmentshtml += segmenttemplate(vizdata);
+                });
+                var mediadata = {
+                    media: media,
+                    segments: segmentshtml
+                }
+                
+                $(".list-video").append(mediatemplate(mediadata));
             });
-            var segmentshtml = '', k = media.duration ? (100 / media.duration) : 0;
-            segments.forEach(function(segment) {
-                var vizdata = {
-                    annotation: segment.annotation,
-                    left: k * segment.annotation.begin,
-                    width: k * segment.annotation.getDuration()
-                }
-                segmentshtml += segmenttemplate(vizdata);
-            });
-            var mediadata = {
-                media: media,
-                segments: segmentshtml
-            }
-            html += mediatemplate(mediadata);
         });
         
-        $(".list-video").html(html);
         
         project.on("mouseover-annotation", function(annotation) {
             var mediaid = annotation.getMedia().id;
@@ -59,19 +69,17 @@
             $(".media[data-media-id='" + mediaid + "']").addClass("active");
         });
         
-        $(".list-video .frise-segment")
-        .mouseover(function() {
+        $(".list-video")
+        .on("mouseover", ".frise-segment", function() {
             project.trigger("mouseover-annotation", project.getElement($(this).attr("data-segment-id")));
         })
-        .click(function() {
+        .on("click", ".frise-segment", function() {
             project.trigger("click-annotation", project.getElement($(this).attr("data-segment-id")));
-        });
-        
-        $(".item-video")
-        .mouseover(function() {
+        })
+        .on("mouseover", ".item-video", function() {
             $(".media").removeClass("active");
         })
-        .mouseout(function() {
+        .on("mouseout", ".item-video", function() {
             project.trigger("mouseout-annotation");
         })