diff -r a21b851538b2 -r 89e152523cb6 integration/js/mediaplayer.js
--- a/integration/js/mediaplayer.js	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/mediaplayer.js	Mon Nov 26 18:42:56 2012 +0100
@@ -5,14 +5,124 @@
             url: IriSP.endpoints.content + options.id,
             serializer: IriSP.serializers.content
         }),
-        apidirectory = new IriSP.Model.Directory();
+        apidirectory = new IriSP.Model.Directory(),
+        segmenttemplate = _.template(
+            '<div class="media-segment" data-mashup-id="<%= annotation.project_id %>">'
+            + '<div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;" data-segment-id="<%= annotation.id %>"></div>'
+            + '<div class="popin media-segment-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><img style="left:<%= pointerpos %>px;" class="pointer" src="img/popin-triangle.png" alt="" /><div class="popin-content">'
+            + '<h3><%= annotation.title %></h3>'
+            + '<p><%= IriSP.translate("From:") %> <span><%= annotation.begin.toString() %></span> <%= IriSP.translate("to:") %> <span><%= annotation.end.toString() %></span> (<%= IriSP.translate("duration:") %> <span><%= annotation.getDuration().toString() %></span>)</p>'
+            + '<p class="mashup-link"><%= IriSP.translate("From hashcut:") %> <a href="<%= IriSP.endpoints.hashcut_page + annotation.project_id %>"></a></p>'
+            + '</div></div></div>'
+        ),
+        segmentlisttemplate = _.template(
+            '<div class="media-segment-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %><div class="frise-position"></div></div>'
+        ),
+        projtemplate = _.template(
+            '<li class="item-video mashup" data-mashup-id="<%= ldt_id %>">'
+            + '<a href="<%= IriSP.endpoints.hashcut_page + ldt_id %>"><img class="thumbnail" alt="<%= title %>" src="<%= image %>"></a><div class="video-info">'
+            + '<h3 class="title-video"><a href="<%= IriSP.endpoints.hashcut_page + ldt_id %>"><%= title %></a></h3><p class="description"><%= description %></p>'
+            + '</p></div></li>'
+        ),
+        media;
+    
+    function mediaSegmentList(_annotations) {
+        var html = '',
+            k = $(".Ldt-Slider").width() / media.duration,
+            lines = [];
+        _(_annotations).each(function(_a, i) {
+            var pos = k * (_a.begin + _a.end) / 2,
+                corrpos = Math.max(106, Math.min(516, pos)),
+                line = IriSP._(lines).find(function(line) {
+                    return !IriSP._(line.annotations).find(function(ann) {
+                        return ann.begin < _a.end && ann.end > _a.begin
+                    });
+                });
+            if (!line) {
+                line = { index: lines.length, annotations: []};
+                lines.push(line); 
+            }
+            line.annotations.push(_a);
+            vizdata = {
+                annotation : _a,
+                popleft : corrpos,
+                left : k * _a.begin,
+                width : k * _a.getDuration(),
+                height: 8,
+                top: 8 * line.index,
+                pointerpos : (pos - corrpos),
+                color: IriSP.vizcolors[i % IriSP.vizcolors.length]
+            }
+            html += segmenttemplate(vizdata);
+        });
+        return segmentlisttemplate({
+            height: 8 * lines.length,
+            segments: html
+        });
+    }
     
     content.onLoad(function() {
         
         IriSP.mashupcore(content, new IriSP.Model.Mashup(false, content));
         
-        var media = content.getMedias()[0];
+        media = content.getMedias()[0];
         
+        apidirectory.remoteSource({
+            url: IriSP.endpoints.segment,
+            url_params: {
+                iri_id: options.id,
+                limit: 0
+            },
+            serializer: IriSP.serializers.segmentapi
+        }).onLoad(function() {
+            var medias = this.getMedias(),
+                annotations = this.getAnnotations(),
+                projlist = {};
+            $(".media-segments").html(mediaSegmentList(annotations));
+            annotations.forEach(function(a) {
+                projlist[a.project_id] = 1 + (projlist[a.project_id] || 0);
+            });
+            var projkeys = _(projlist)
+                .chain()
+                .keys()
+                .sortBy(function(v) {
+                    return - projlist[v];
+                })
+                .first(8)
+                .value();
+            $.ajax({
+                url: IriSP.endpoints.project,
+                dataType: "json",
+                data: {
+                    format: "json",
+                    ldt_id__in: projkeys
+                },
+                traditional: true,
+                success: function(data) {
+                    var proj = _(data.objects)
+                        .filter(function(p) {
+                            return /<inst/gm.test(p.ldt);
+                        });
+                    _(proj).each(function(p) {
+                        $(".media-segment[data-mashup-id='" + p.ldt_id + "']").each(function() {
+                            $(this)
+                                .find(".mashup-link").show()
+                                .find("a").text(p.title);
+                        });
+                    });
+                    var html = _(proj)
+                        .chain()
+                        .sortBy(function(p) {
+                            return - projlist[p.ldt_id];
+                        })
+                        .map(projtemplate)
+                        .value()
+                        .join("");
+                    $(".list-video").html(html);
+                }
+            });
+        });
+    
         content.trigger("set-current", media);
         
         $(".info-title a").text(media.title);
@@ -22,4 +132,28 @@
         $(".info-tags td").text(media.keywords);
         
     });
+    
+    $(".media-segments").on("mouseover", ".media-segment", function() {
+        var el = $(this);
+        el.find(".media-segment-popin").show();
+        var pid = el.attr("data-mashup-id");
+        $(".item-video[data-mashup-id='" + pid + "']").addClass("active");
+    }).on("mouseout", ".media-segment", function() {
+        $(this).find(".media-segment-popin").hide();
+        $(".item-video").removeClass("active");
+    }).on("click", ".media-segment-section", function() {
+        var sid = $(this).attr("data-segment-id"),
+            s = apidirectory.getElement(sid);
+        media.setCurrentTime(s.begin);
+    });
+    
+    $(".list-video").on("mouseover", ".item-video", function() {
+        var pid = $(this).attr("data-mashup-id");
+        $(".media-segment[data-mashup-id='" + pid + "']").addClass("active");
+    }).on("mouseout", ".item-video", function() {
+        $(".media-segment").removeClass("active");
+    });
 }
+
+/* END mediaplayer.js */
+