diff -r 1cb099921ca8 -r 47f9a2d63a0a integration/js/editor.js
--- a/integration/js/editor.js	Mon Nov 05 15:06:14 2012 +0100
+++ b/integration/js/editor.js	Tue Nov 06 11:01:27 2012 +0100
@@ -1,5 +1,15 @@
+
+IriSP.hc_messages = {
+    duration_ : "Durée :",
+    edit_segment: "Éditer le segment",
+    segment_down: "Descendre le segment",
+    segment_up: "Remonter le segment",
+    delete_segment: "Supprimer le segment"
+}
+
 IriSP.Hashcut = function(options) {
     
+    
     /* Load Media List */
     
     var directory = new IriSP.Model.Directory(),
@@ -10,14 +20,14 @@
         mashup = new IriSP.Model.Mashup(false, project),
         mediatemplate = _.template('<li class="item-video" data-media-id="<%= id %>"><img src="<%= thumbnail %>" alt="<%= title %>" />'
             + '<span class="video-info"><span class="title-video"><%= title %></span><span class="author"><%= description %></span>'
-            + '<span class="time-length">Durée : <span><%= duration.toString() %></span></span></span></li>'),
+            + '<span class="time-length"><%= IriSP.hc_messages.duration_ %> <span><%= duration.toString() %></span></span></span></li>'),
         segmenttemplate = _.template('<li class="item-video" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">'
             + '<img src="<%= annotation.getMedia().thumbnail %>" alt="<%= annotation.getMedia().title %>" />'
             + '<span class="video-info"><span class="title-video"><%= annotation.getMedia().title %></span>'
             + '<span class="subtitle"><%= annotation.title %></span><span class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</span>'
-            + '<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>'),
+            + '<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></span></li>'),
+        viztemplate = _.template('<div class="frise-segment" data-segment-id="<%= segmentid %>" style="background-color:<%= color %>; left:<%= left %>%; width:<%= width %>%;"></div>'),
         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>'
@@ -79,7 +89,8 @@
             var vizdata = {
                 left: k * t,
                 width: k * _s.duration,
-                color: _s.getMedia().color
+                color: _s.getMedia().color,
+                segmentid: _s.annotation.id
             }
             vizhtml += viztemplate(vizdata);
             t += _s.duration.milliseconds;
@@ -182,7 +193,6 @@
     timeSlider.mousemove(function(_e) {
             var _x = _e.pageX - timeSlider.offset().left,
                 _t = new IriSP.Model.Time(
-                    currentMedia ? currentMedia.duration * _x / timeSlider.width() : 0
                 );
             timeTooltip.text(_t.toString()).css("left",_x);
         });
@@ -366,9 +376,15 @@
         mashupSegmentEnd,
         mashupTimecode = 0,
         mashupSeeking = false,
-        mashupSeekdiv,
+        seekdiv = $(".video-wait"),
         mashupTimedelta;
-        
+    
+    function showSeek() {
+        if (mashupSeeking) {
+            seekdiv.show();
+        }
+    }
+    
     function changeCurrentAnnotation() {
         if (mashupTimecode >= mashup.duration) {
             if (!mashup.paused) {
@@ -409,7 +425,7 @@
         if (!mashup.paused) {
             mashupCurrentMedia.play();
             mashupSeeking = true;
-//TODO:            _seekdiv.show();
+            setTimeout(showSeek,200);
         }
         mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
 
@@ -445,17 +461,16 @@
     var addMode;
     
     function setMedia(media) {
-        $(".col-left .item-video").removeClass("active");
-        $(".tutorial").hide();
-        //TODO: Show Tutorial when Hashcut is empty
         if (currentMedia) {
             currentMedia.pause();
         }
         currentMedia = media;
         if (currentMedia.elementType == "media") {
             $("video").hide();
-            $(".col-left .item-video[data-media-id='" + currentMedia.id + "']").addClass("active");
             showSegmentation();
+            if (!currentMedia.loaded) {
+                seekdiv.show();
+            }
             var currentvideo = $('#video_' + currentMedia.id);
             if (!currentvideo.length) {
                 addMediaPlayer(currentMedia);
@@ -491,6 +506,7 @@
                         $(".annotation-media-title").text(this.getMedia().title);
                         $(".annotation-description").text(this.description);
                         setPointerToCurrentAnnotation();
+                        highlightCurrentSegment();
                     }
                 });
             }
@@ -655,6 +671,9 @@
         // Binding UI Events and Mashup Playing to Media
         
         media.on("loadedmetadata", function() {
+            if (media === currentMedia) {
+                seekdiv.hide();
+            }
             mashup.checkLoaded();
         });
         
@@ -701,7 +720,7 @@
             media.seeking = false;
             if (mashup === currentMedia && media === mashupCurrentMedia && mashupSeeking) {
                 mashupSeeking = false;
-//TODO:                _seekdiv.hide();
+                seekdiv.hide();
             }
         });
         
@@ -821,6 +840,11 @@
         $(".col-middle").removeClass("empty-mode segment-mode").addClass("pvw-mode");
         return false;
     }
+    function showEmpty() {
+        $("video").hide();
+        $(".col-middle").removeClass("pvw-mode segment-mode").addClass("empty-mode");
+        return false;
+    }
     
     $(".tab-pvw").click(function() {
         if (mashup.segments.length) {
@@ -836,17 +860,42 @@
     }
     
     function highlightCurrentSegment() {
-        $(".organize-segments .item-video").removeClass("active");
+        $(".organize-segments .item-video, .col-left .item-video, .frise-segment").removeClass("active");
+        var segmentid = undefined;
         if (currentMedia && currentSegment) {
-            $(".item-video[data-segment-id='" + currentSegment.id + "']").addClass("active");
+            segmentid = currentSegment.id;
+        }
+        if (currentMedia === mashup && mashupCurrentAnnotation) {
+            segmentid = mashupCurrentAnnotation.annotation.id;
         }
+        $(".item-video[data-segment-id='" + segmentid + "']").addClass("active");
+        var mediaid = undefined;
+        if (currentMedia) {
+            mediaid = currentMedia.id;
+        }
+        if (currentMedia === mashup && mashupCurrentMedia) {
+            mediaid = mashupCurrentMedia.id
+        }
+        $(".col-left .item-video[data-media-id='" + mediaid + "']").addClass("active");
     }
     
-    $(".organize-segments").sortable({
+    function hoverSegment() {
+        var segmentid = $(this).attr("data-segment-id");
+        $(".organize-segments .item-video, .frise-segment").removeClass("active");
+        $(".item-video[data-segment-id='" + segmentid + "'], .frise-segment[data-segment-id='" + segmentid + "']").addClass("active");
+    }
+    
+    $(".frise")
+    .on("mouseover", ".frise-segment", hoverSegment)
+    .on("mouseout", ".frise-segment", highlightCurrentSegment)
+    
+    $(".organize-segments")
+    .sortable({
         stop : reorganizeMashup
-    });
-    
-    $(".organize-segments").on("click", ".item-video", function(e) {
+    })
+    .on("mouseover", ".item-video", hoverSegment)
+    .on("mouseout", ".item-video", highlightCurrentSegment)
+    .on("click", ".item-video", function(e) {
         var el = $(this),
             segment = mashup.getAnnotationById(el.attr("data-segment-id"));
         setMedia(mashup);
@@ -854,34 +903,33 @@
             mashup.setCurrentTime(segment.begin);
         }
         return false;
-    });
-    
-    $(".organize-segments").on("click", ".edit", function(e) {
+    })
+    .on("click", ".edit", function(e) {
         var currentItem = $(this).parents(".item-video"),
             media = project.getElement(currentItem.attr("data-media-id")),
             segment = project.getElement(currentItem.attr("data-segment-id"));
         currentSegment = segment;
         setMedia(media);
         return false;
-    });
-    
-    $(".organize-segments").on("click", ".top", function(e){
+    })
+    .on("click", ".top", function(e){
         var currentItem = $(this).parents(".item-video");
         currentItem.insertBefore(currentItem.prev());
 		reorganizeMashup();
 		return false;
-    });
-    
-    $(".organize-segments").on("click", ".bottom", function(e){
+    })
+    .on("click", ".bottom", function(e){
         var currentItem = $(this).parents(".item-video");
         currentItem.insertAfter(currentItem.next());
 		reorganizeMashup();
         return false;
-    });
-    
-    $(".organize-segments").on("click", ".delete", function(e){
+    })
+    .on("click", ".delete", function(e){
         var id = $(this).parents(".item-video").attr("data-segment-id");
         mashup.removeAnnotationById(id);
+        if (!mashup.segments.length) {
+            showEmpty();
+        }
         return false;
     });
     
@@ -972,4 +1020,11 @@
         return false;
     });
     
+    /* Changing Hashcut Title and description */
+   
+    $("#hashcut-title").on("keyup change input paste", function() {
+        mashup.title = $(this).val();
+        $(".title-video-wrap a").text(mashup.title);
+    });
+    
 }