diff -r 5a5024bc74e6 -r f39df810caab integration/js/editor.js
--- a/integration/js/editor.js	Fri Nov 16 19:23:20 2012 +0100
+++ b/integration/js/editor.js	Thu Nov 22 10:52:28 2012 +0100
@@ -25,25 +25,44 @@
             serializer: IriSP.serializers.medialist
         }),
         mashup = new IriSP.Model.Mashup(false, project),
-        mediatemplate = _.template('<li class="item-video media" data-media-id="<%= id %>"><div class="media-count-wrap"><span class="media-count"></span></div>'
-            + '<img src="<%= thumbnail %>" alt="<%= title %>" />'
+        mediatemplate = _.template(
+            '<li class="item-video media" data-media-id="<%= id %>"><div class="media-count-wrap"><span class="media-count"></span></div>'
+            + '<img class="thumbnail" src="<%= thumbnail %>" alt="<%= title %>" />'
             + '<div class="video-info"><h3 class="title-video"><%= title %></h3><p class="description"><%= description %></p>'
-            + '<p class="time-length"><%= IriSP.hc_messages.Duration_ %> <span><%= duration.toString() %></span></p></div></li>'),
-        segmenttemplate = _.template('<li class="item-video annotation" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">'
-            + '<img src="<%= annotation.thumbnail %>" alt="<%= annotation.getMedia().title %>" />'
+            + '<p class="time-length"><%= IriSP.hc_messages.Duration_ %> <span><%= duration.toString() %></span></p></div><div class="media-found-segments"></div></li>'
+        ),
+        segmenttemplate = _.template(
+            '<li class="item-video annotation" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">'
+            + '<img class="thumbnail" src="<%= annotation.thumbnail %>" alt="<%= annotation.getMedia().title %>" />'
             + '<div class="validate <%= annotation.status %>"><div class="validate-tooltip"><ul><li><%= annotation.status_messages.join("</li><li>") %></li></ul></div></div><div class="video-info"><h3 class="title-video"><%= annotation.getMedia().title %></h3>'
             + '<p class="subtitle"><%= annotation.title %></p><p class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</p>'
             + '<ul class="tools"><li><a class="edit" href="#" title="<%= IriSP.hc_messages.edit_segment %>"></a></li><li><a class="bottom" href="#" title="<%= IriSP.hc_messages.segment_down %>"></a></li>'
-            + '<li><a class="top" href="#" title="<%= IriSP.hc_messages.segment_up %>"></a></li><li><a class="delete" href="#" title="<%= IriSP.hc_messages.delete_segment %>"></a></li></ul></div></li>'),
-        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:<%= 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">'
+            + '<li><a class="top" href="#" title="<%= IriSP.hc_messages.segment_up %>"></a></li><li><a class="delete" href="#" title="<%= IriSP.hc_messages.delete_segment %>"></a></li></ul></div></li>'
+        ),
+        mediasegmenttemplate = _.template(
+            '<div class="media-segment">'
+            + '<div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;"></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><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.hc_messages.clone_segment %></a>'
             + '<p><%= IriSP.hc_messages.From_ %> <span><%= annotation.begin.toString() %></span> <%= IriSP.hc_messages.to_ %> <span><%= annotation.end.toString() %></span> (<%= IriSP.hc_messages.duration_ %> <span><%= annotation.getDuration().toString() %></span>)</p>'
-            + '</div></div></div></div>'),
+            + '</div></div></div>'
+        ),
+        mediasegmentlisttemplate = _.template(
+            '<div class="media-segment-list" style="height: <%= height %>px"><div class="media-current-section" style="left: <%= left %>px; width: <%= width %>px;"></div><div class="media-segment-list-inner"></div><%= segments %></div>'
+        ),
+        mediafoundtemplate = _.template(
+            '<div class="media-segment"><div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;"></div>'
+            + '<div class="popin media-found-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><%= title %></h3><a href="#" class="button clone-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.hc_messages.clone_segment %></a>'
+            + '</div></div></div>'
+        ),
+        mediafoundlisttemplate = _.template(
+            '<div class="media-found-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %></div>'
+        ),
         mashupstatus = '',
         addMode, currentMedia, currentSegment;
+        
+        var colors = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];
     
     IriSP.mashupcore(project, mashup);
     
@@ -116,25 +135,6 @@
         });
         $(".col-left .list-video").html(html);
         project.getMedias().forEach(function(_m) {
-/*            var dataType = (IriSP.Model.isLocalURL(options.segment_api_endpoint) ? "json" : "jsonp");
-            $.ajax({
-                url: ,
-                dataType: dataType,
-                data: {
-                    format: dataType,
-                    iri_id: _m.id
-                },
-                success: function(data) {
-                    console.log(data);
-                    if (data.objects && data.objects.length) {
-                        var mediaid = data.objects[0].iri_id;
-                        mediasegmentscache[mediaid] = data.objects;
-                       if (currentMedia && mediaid === currentMedia.id && currentSegment) {
-                            showOtherSegments();
-                        }
-                    }
-                }
-            }); */
             apidirectory.remoteSource({
                 url: options.segment_api_endpoint,
                 url_params: {
@@ -168,17 +168,60 @@
         }
         $(".col-left .item-video").each(function() {
             var li = $(this),
-                title = $(this).find(".title-video"),
-                titletext = title.text();
-            if (val && find.test(titletext)) {
-                title.html(titletext.replace(replace, '<span style="background: yellow;">$1</span>'));
+                mediaid = li.attr("data-media-id"),
+                media = directory.getElement(mediaid);
+            if (!val) {
+                li.find(".title-video").text(media.title);
+                li.find(".description").text(media.description);
+                li.find(".media-found-segments").html("");
                 li.show();
             } else {
-                title.text(titletext);
-                if (val) {
+                var apimedia = apidirectory.getElement(mediaid);
+                if (apimedia) {
+                    var annotations = apimedia.getAnnotations().searchByTextFields(val);
+                } else {
+                    var annotations = [];
+                }   
+                var found = find.test(media.title) || find.test(media.description) || annotations.length;
+                if (found) {
+                    li.find(".title-video").html(media.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'));
+                    li.find(".description").html(media.description.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'));
+                    var html = '',
+                        k = 230 / media.duration,
+                        lines = [];
+                    _(annotations).each(function(_a, i) {
+                        var pos = k * (_a.begin + _a.end) / 2,
+                            corrpos = Math.max(76, Math.min(156, 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,
+                            left : k * _a.begin,
+                            width : k * _a.getDuration(),
+                            top: 8 * line.index,
+                            color: colors[i % colors.length],
+                            title: _a.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'),
+                            popleft : corrpos,
+                            pointerpos : (pos - corrpos),
+                        }
+                        html += mediafoundtemplate(vizdata);
+                    });
+                    html = mediafoundlisttemplate({
+                        height: 8 * lines.length,
+                        segments: html
+                    });
+                    li.find(".media-found-segments").html(html);
+                    li.show();
+                } else {
                     li.hide();
-                } else {
-                    li.show();
                 }
             }
         })
@@ -343,8 +386,8 @@
             if (!currentSegment) {
                 currentSegment = new IriSP.Model.Annotation(false, project);
                 currentSegment.setMedia(currentMedia.id);
-                currentSegment.setBegin(0);
-                currentSegment.setEnd(currentMedia.duration);
+                currentSegment.setBegin(currentMedia.getCurrentTime());
+                currentSegment.setEnd(Math.min(currentMedia.getCurrentTime() +  180000, currentMedia.duration));
                 currentSegment.title = IriSP.hc_messages.segment_title_placeholder;
                 currentSegment.color = currentMedia.color;
                 currentSegment.thumbnail = currentMedia.thumbnail;
@@ -385,30 +428,12 @@
             var relatedSegments = mashup.segments.filter(function(_s) {
                 return _s.getMedia() === currentMedia && _s.annotation !== currentSegment;
             });
-            var html = "",
-                k = $(".Ldt-Slider").width() / currentMedia.duration,
-                currentleft = k * currentSegment.begin,
-                currentwidth = k * currentSegment.getDuration();
             if (relatedSegments.length) {
-                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);
+            $(".self-media-segments .media-segments-list").html(mediaSegmentList(_(relatedSegments).pluck("annotation")));
             showOtherSegments();
             project.trigger("mouseout-annotation");
         }
@@ -417,36 +442,53 @@
         }
     }
     
+    function mediaSegmentList(_annotations) {
+        var html = '',
+            k = $(".Ldt-Slider").width() / currentMedia.duration,
+            lines = [];
+        _(_annotations).each(function(_a, i) {
+            var pos = k * (_a.begin + _a.end) / 2,
+                corrpos = Math.max(145, Math.min(305, 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: colors[i % colors.length]
+            }
+            html += mediasegmenttemplate(vizdata);
+        });
+        return mediasegmentlisttemplate({
+            height: 8 * lines.length,
+            left: k * currentSegment.begin,
+            width: k * currentSegment.getDuration(),
+            segments: html
+        });
+    }
+    
     /* Show Related Segments */
     
     function showOtherSegments() {
-        var annotations = mediasegmentscache[currentMedia.id]
+        var annotations = mediasegmentscache[currentMedia.id];
+        $(".other-media-segments .media-segments-list").html(mediaSegmentList(annotations));
         if (annotations && annotations.length) {
-            var html = "",
-                k = $(".Ldt-Slider").width() / currentMedia.duration,
-                currentleft = k * currentSegment.begin,
-                currentwidth = k * currentSegment.getDuration();
-            annotations.forEach(function(_a) {
-                var pos = k * (_a.begin + _a.end) / 2,
-                    corrpos = Math.max(145, Math.min(305, pos));
-                vizdata = {
-                    annotation : _a,
-                    currentleft : currentleft,
-                    currentwidth : currentwidth,
-                    popleft : corrpos,
-                    left : k * _a.begin,
-                    width : k * _a.getDuration(),
-                    pointerpos : (pos - corrpos),
-                    color: currentMedia.color
-                }
-                html += mediasegmenttemplate(vizdata);
-            });
             $(".other-media-segments").show();
-            $(".other-media-segments .media-segments-list").html(html);
         }
         else {
             $(".other-media-segments").hide();
-            $(".other-media-segments .media-segments-list").html("");
         }
      }
     /* Set In, Out */
@@ -485,15 +527,16 @@
     $("#segment-form").submit(function() {
         if (addMode) {
             mashup.addAnnotation(currentSegment);
+            currentSegment = undefined;
+            setMedia(currentMedia);
         } else {
             mashup.trigger("change");
-        }
-        var segment = mashup.getAnnotation(currentSegment);
-        currentSegment = undefined;
-        setMedia(mashup);
-        if (segment) {
-            mashup.setCurrentTime(segment.begin);
-            mashup.trigger("enter-annotation",segment);
+            currentSegment = undefined;
+            setMedia(mashup);
+            if (segment) {
+                mashup.setCurrentTime(segment.begin);
+                mashup.trigger("enter-annotation",segment);
+            }
         }
         return false;
     });
@@ -684,23 +727,52 @@
     
     /* Handling related segments */
    
+    function cloneSegment(sid) {
+        var s = directory.getElement(sid) || apidirectory.getElement(sid),
+            media = directory.getElement(s.getMedia().id);
+        
+        currentSegment = new IriSP.Model.Annotation(false, project);
+        currentSegment.setMedia(media.id);
+        currentSegment.setBegin(s.begin);
+        currentSegment.setEnd(s.end);
+        currentSegment.title = IriSP.hc_messages.copy_of_ + s.title;
+        currentSegment.description = s.description;
+        currentSegment.keywords = s.keywords;
+        currentSegment.color = media.color;
+        currentSegment.thumbnail = media.thumbnail;
+        currentSegment.created = new Date();
+        currentSegment.on("change-begin", function() {
+            if (currentMedia && currentSegment === this) {
+                currentMedia.setCurrentTime(this.begin);
+                updateSegmentUI();
+            }
+        });
+        currentSegment.on("change-end", function() {
+            if (currentMedia && currentSegment === this) {
+                currentMedia.setCurrentTime(this.end);
+                updateSegmentUI();
+            }
+        });
+        setMedia(media);
+    }
+    
     $(".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 sid = $(this).attr("data-segment-id"),
-            s = directory.getElement(sid) || apidirectory.getElement(sid);
-        currentSegment.title = IriSP.hc_messages.copy_of_ + s.title;
-        currentSegment.description = s.description;
-        $("#segment-title").val(IriSP.hc_messages.copy_of_ + s.title);
-        $("#segment-description").val(s.description);
-        currentSegment.setBegin(s.begin);
-        currentSegment.setEnd(s.end);
-        //TODO: ET LES TAGS !
+        cloneSegment($(this).attr("data-segment-id"));
         return false;
     });
     
+    $(".col-left").on("mouseover", ".media-segment", function() {
+        $(this).find(".media-found-popin").show();
+    }).on("mouseout", ".media-segment", function() {
+        $(this).find(".media-found-popin").hide();
+    }).on("click", ".clone-segment", function() {
+        cloneSegment($(this).attr("data-segment-id"));
+        return false;
+    });
     /* Changing Hashcut Title and description */
     
     mashup.title = IriSP.hc_messages.mashup_title_placeholder;