diff -r 2100ddc308f0 -r 5ce5e26091ea integration/js/editor.js
--- a/integration/js/editor.js	Tue Oct 30 18:45:16 2012 +0100
+++ b/integration/js/editor.js	Wed Oct 31 21:16:02 2012 +0100
@@ -18,7 +18,14 @@
             + '<ul class="tools"><li><a class="edit" href="#" title="Éditer le segment"></a></li><li><a class="bottom" href="#" title="Descendre le segment"></a></li>'
             + '<li><a class="top" href="#" title="Remonter le segment"></a></li><li><a class="delete" href="#" title="Supprimer le segment"></a></li></ul></span></li>'),
         viztemplate = _.template('<div class="frise-segment" style="background-color:<%= color %>; left:<%= left %>%; width:<%= width %>%;"></div>'),
-        intervaltemplate = _.template('<span class="frise-indication" style="left:<%= left %>%;"><%= time.toString() %></span>');
+        intervaltemplate = _.template('<span class="frise-indication" style="left:<%= left %>%;"><%= time.toString() %></span>'),
+        mediasegmenttemplate = _.template('<div class="media-segments-list"><div class="media-segment">'
+            + '<div class="media-section media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= annotation.getMedia().color %>"></div>'
+            + '<div class="media-section media-current-section" style="left:<%= currentleft %>px; width:<%= currentwidth %>px;"><div class="media-current-section-inner"></div></div>'
+            + '<div class="popin media-segment-popin" style="left:<%= popleft %>px"><img style="left:<%= pointerpos %>px;" class="pointer" src="img/popin-triangle.png" alt="" /><div class="popin-content">'
+            + '<h3><%= annotation.title %></h3><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>">Cloner le segment</a>'
+            + '<p>De: <span><%= annotation.begin.toString() %></span> à <span><%= annotation.end.toString() %></span> (durée: <span><%= annotation.getDuration().toString() %></span>)</p>'
+            + '</div></div></div></div>');
 
     /* Fill left column with Media List */
 
@@ -114,6 +121,7 @@
     /* Slider */
    
     var timeSlider = $(".Ldt-Slider"),
+        timeSliderContainer = $(".Ldt-Slider-Container"),
         slidersRange = 920;
     timeSlider.slider({
         range: "min",
@@ -136,7 +144,7 @@
         timeSliderTimeoutDuration = 1500,
         timeTooltip = $(".Ldt-Slider-Time");
     
-    timeSlider.css(calculateSliderCss(timeSliderMinimizedHeight));
+    timeSliderContainer.css(calculateSliderCss(timeSliderMinimizedHeight));
     timeSliderHandle.css(calculateHandleCss(timeSliderMinimizedHeight));
     
     function timeSliderMouseOver() {
@@ -165,13 +173,13 @@
         }, timeSliderTimeoutDuration);
     }
     
-    timeSlider
+    timeSliderContainer
         .mouseover(function() {
             timeTooltip.show();
             timeSliderMouseOver();
         })
-        .mouseout(timeSliderMouseOut)
-        .mousemove(function(_e) {
+        .mouseout(timeSliderMouseOut);
+    timeSlider.mousemove(function(_e) {
             var _x = _e.pageX - timeSlider.offset().left,
                 _t = new IriSP.Model.Time(
                     currentMedia ? currentMedia.duration * _x / timeSlider.width() : 0
@@ -182,7 +190,7 @@
     $(".Ldt-Ctrl").mouseover(timeSliderMouseOver).mouseout(timeSliderMouseOut);
     
     function timeSliderAnimateToHeight(_height) {
-        timeSlider.stop().animate(
+        timeSliderContainer.stop().animate(
             calculateSliderCss(_height),
             500,
             function() {
@@ -419,12 +427,18 @@
                 f = slidersRange / currentMedia.duration,
                 tangleStart = $(".tangle-start"),
                 tangleEnd = $(".tangle-end"),
-                tangleDuration = $(".tangle-duration");
+                tangleDuration = $(".tangle-duration"),
+                k = 100 / currentMedia.duration,
+                p = k * (start + end) / 2;
             sliceSlider.slider( "values", [ f * start, f * end ] );
             tangleStart.text(start.toString(tangleStart.hasClass("active"))).attr("data-milliseconds",start.milliseconds);
             tangleEnd.text(end.toString(tangleEnd.hasClass("active"))).attr("data-milliseconds",end.milliseconds);
             tangleDuration.text(dur.toString(tangleDuration.hasClass("active"))).attr("data-milliseconds",dur.milliseconds);
-            $(".segment-info .pointer").css("left",(parseFloat($(".Ldt-Slice-left-handle").css("left")) + parseFloat($(".Ldt-Slice-right-handle").css("left")))/2)
+            $(".segment-info .pointer").css("left", p + "%");
+            $(".media-current-section").css({
+                left: (k * start) + "%",
+                width: (k * dur) + "%"
+            })
         }
     }
     
@@ -433,6 +447,7 @@
     function setMedia(media) {
         $(".col-left .item-video").removeClass("active");
         $(".tutorial").hide();
+        //TODO: Show Tutorial when Hashcut is empty
         if (currentMedia) {
             currentMedia.pause();
         }
@@ -477,7 +492,7 @@
                         $(".annotation-description").text(this.description);
                         setPointerToCurrentAnnotation();
                     }
-                })
+                });
             }
             if (currentMedia.loaded) {
                 currentMedia.setCurrentTime(currentSegment.begin);
@@ -489,7 +504,34 @@
             $("#segment-title").val(currentSegment.title);
             $("#segment-description").val(currentSegment.description);
             $("#segment-tags").val("");
+            var relatedSegments = mashup.segments.filter(function(_s) {
+                return _s.getMedia() === currentMedia && _s.annotation !== currentSegment;
+            });
+            var html = "";
+            if (relatedSegments.length) {
+                var k = $(".Ldt-Slider").width() / currentSegment.getMedia().duration,
+                    currentleft = k * currentSegment.begin,
+                    currentwidth = k * currentSegment.getDuration();
+                relatedSegments.forEach(function(_s) {
+                    var pos = k * (_s.annotation.begin + _s.annotation.end) / 2,
+                        corrpos = Math.max(145, Math.min(305, pos));
+                    vizdata = {
+                        annotation : _s.annotation,
+                        currentleft : currentleft,
+                        currentwidth : currentwidth,
+                        popleft : corrpos,
+                        left : k * _s.annotation.begin,
+                        width : k * _s.annotation.getDuration(),
+                        pointerpos : (pos - corrpos)
+                    }
+                    html += mediasegmenttemplate(vizdata);
+                });
+                $(".self-media-segments").show();
+            } else {
+                $(".self-media-segments").hide();
+            }
         }
+        $(".self-media-segments .media-segments-list").html(html);
         if (currentMedia.elementType === "mashup") {
             showPreview();
             mashup.checkLoaded();
@@ -759,6 +801,7 @@
         if (segment) {
             mashup.setCurrentTime(segment.begin);
         }
+        return false;
     })
     
     /* Click on media items */
@@ -903,10 +946,30 @@
         }
     });
     
+    /* Click on current segment in Preview */
+    
     $(".mashup-description .edit").click(function() {
         if (mashupCurrentAnnotation) {
             currentSegment = mashupCurrentAnnotation.annotation;
             setMedia(mashupCurrentAnnotation.getMedia());
         }
-    })
+    });
+    
+    /* Handling related segments */
+   
+    $(".media-segments-list").on("mouseover", ".media-segment", function() {
+        $(this).find(".media-segment-popin").show();
+    }).on("mouseout", ".media-segment", function() {
+        $(this).find(".media-segment-popin").hide();
+    }).on("click", ".reprendre-segment", function() {
+        var s = project.getElement($(this).attr("data-segment-id"));
+        currentSegment.title = s.title;
+        currentSegment.description = s.description;
+        $("#segment-title").val(s.title);
+        $("#segment-description").val(s.description);
+        currentSegment.setBegin(s.begin);
+        currentSegment.setEnd(s.end);
+        return false;
+    });
+    
 }