diff -r c9dc489913af -r eea45f9b124b integration/js/editor.js
--- a/integration/js/editor.js	Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/js/editor.js	Mon Oct 29 18:02:10 2012 +0100
@@ -7,12 +7,18 @@
             url: "data/bpidata.json",
             serializer: IriSP.serializers.medialist
         }),
+        mashup = new IriSP.Model.Mashup(false, project),
         mediatemplate = '<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}}</span></span></span></li>';
+            + '<span class="time-length">Durée : <span>{{duration}}</span></span></span></li>',
+        segmenttemplate = '<li class="item-video" data-segment-id="{{id}}"><img src="{{annotation.thumbnail}}" alt="{{media_title}}" />'
+            + '<span class="video-info"><span class="title-video">{{media_title}}</span>'
+            + '<span class="subtitle">{{title}}</span><span class="duration">{{begin}} - {{end}} ({{duration}})</span>'
+            + '<ul class="tools"><li><a class="edit" href="#"></a></li><li><a class="bottom" href="#"></a></li>'
+            + '<li><a class="top" href="#"></a></li><li><a class="delete" href="#"></a></li></ul></span></li>';
 
     /* Fill left column with Media List */
-    
+
     project.onLoad(function() {
         var html = '';
         project.getMedias().forEach(function(_m) {
@@ -47,6 +53,18 @@
         })
     });
     
+    /* Fill right column when mashup is updated */
+   
+    function fillRightColumn() {
+        var html = '';
+        mashup.segments.forEach(function(_s) {
+            html += Mustache.to_html(segmenttemplate, _s);
+        });
+        $(".col-right .list-video").html(html);
+    }
+    
+    mashup.on("add-segments",fillRightColumn);
+    
     /* Slider */
    
     var timeSlider = $(".Ldt-Slider"),
@@ -150,8 +168,13 @@
     /* Controller Widget */
    
     var volBlock = $(".Ldt-Ctrl-Volume-Control");
+    
     $('.Ldt-Ctrl-Sound')
-        .click(function(){}) //TODO: Add Mute and Volume Handlers
+        .click(function() {
+            if (currentMedia) {
+                currentMedia.setMuted(!currentMedia.getMuted());
+            }
+        })
         .mouseover(function() {
             volBlock.show();
         })
@@ -165,13 +188,33 @@
     });
     
     var volBar = $(".Ldt-Ctrl-Volume-Bar");
+    
+    function ctrlVolumeUpdater() {
+        if (currentMedia) {
+            var _muted = currentMedia.getMuted(),
+                _vol = currentMedia.getVolume();
+            if (_vol === false) {
+                _vol = .5;
+            }
+            var _soundCtl = $(".Ldt-Ctrl-Sound");
+            _soundCtl.removeClass("Ldt-Ctrl-Sound-Mute Ldt-Ctrl-Sound-Half Ldt-Ctrl-Sound-Full");
+            if (_muted) {        
+                _soundCtl.attr("title", "Activer le son")
+                    .addClass("Ldt-Ctrl-Sound-Mute");    
+            } else {
+                _soundCtl.attr("title", "Couper le son")
+                    .addClass(_vol < .5 ? "Ldt-Ctrl-Sound-Half" : "Ldt-Ctrl-Sound-Full" )
+            }
+            volBar.slider("value", _muted ? 0 : 100 * _vol);
+            volBar.attr("title",'Volume : ' + Math.floor(100 * _vol) + '%');
+        }
+    }
+    
     volBar.slider({
         slide: function(event, ui) {
-            volBar.attr("title",'Volume : ' + ui.value + '%');
-            //_this.media.setVolume(ui.value / 100);
-        },
-        stop: function() {
-            // IriSP.Widgets.Controller.prototype.volumeUpdater
+            if (currentMedia) {
+                currentMedia.setVolume(ui.value / 100);
+            }
         }
     });
     
@@ -185,54 +228,60 @@
         }
     });
     
+    $(".Ldt-Ctrl-SetIn").click(function() {
+        if (currentMedia && currentMedia.currentSegment) {
+            currentMedia.currentSegment.setBegin(currentMedia.getCurrentTime());
+        }
+    });
+    $(".Ldt-Ctrl-SetOut").click(function() {
+        if (currentMedia && currentMedia.currentSegment) {
+            currentMedia.currentSegment.setEnd(currentMedia.getCurrentTime());
+        }
+    });
+    
     /* Slice Widget */
+   
     var sliceSlider = $(".Ldt-Slice"),
         sliceStartTime;
-        
-    function setTangles(sliderValues) {
-        //TODO: Move to Annotation.on("changebounds")
-        if (currentMedia) {
-            startTime = new IriSP.Model.Time(currentMedia.duration * sliderValues[0] / slidersRange),
-            endTime = new IriSP.Model.Time(currentMedia.duration * sliderValues[1] / slidersRange),
-            duration = new IriSP.Model.Time(endTime - startTime);
-            $(".tangle-start").text(startTime.toString()).attr("data-milliseconds",startTime.milliseconds);
-            $(".tangle-end").text(endTime.toString()).attr("data-milliseconds",endTime.milliseconds);
-            $(".tangle-duration").text(duration.toString()).attr("data-milliseconds",duration.milliseconds);
-        }
-    }
     
     sliceSlider.slider({
         range: true,
         values: [0, slidersRange],
         min: 0,
         max: slidersRange,
-        change: function(event, ui) {
-            setTangles(ui.values); // Not the right place to put it
-        },
         start: function() {
             if (currentMedia) {
                 if (!currentMedia.getPaused()) {
                     currentMedia.pause();
                 }
-//                sliceStartTime = currentMedia.getCurrentTime(); 
             }
         },
         slide: function(event, ui) {
-            if (currentMedia) {
+            if (currentMedia && currentMedia.currentSegment) {
                 var t = currentMedia.duration * ui.value / slidersRange;
-                currentMedia.setCurrentTime(t);
-            }
-            setTangles(ui.values);
-        },
-        stop: function() {
-            if (currentMedia && sliceStartTime) {
-//                currentMedia.setCurrentTime(sliceStartTime);
+                if (ui.value === ui.values[0]) {
+                    currentMedia.currentSegment.setBegin(t);
+                } else {
+                    currentMedia.currentSegment.setEnd(t);
+                }
             }
         }
     });
     
-    sliceSlider.find(".ui-slider-handle:first").addClass("Ldt-Slice-left-handle");
-    sliceSlider.find(".ui-slider-handle:last").addClass("Ldt-Slice-right-handle");
+    sliceSlider.find(".ui-slider-handle:first")
+        .addClass("Ldt-Slice-left-handle")
+        .click(function() {
+            if (currentMedia && currentMedia.currentSegment) {
+                currentMedia.setCurrentTime(currentMedia.currentSegment.begin);
+            }
+        });
+    sliceSlider.find(".ui-slider-handle:last")
+        .addClass("Ldt-Slice-right-handle")
+        .click(function() {
+            if (currentMedia && currentMedia.currentSegment) {
+                currentMedia.setCurrentTime(currentMedia.currentSegment.end);
+            }
+        });
     
     /* UI Events */
 
@@ -256,8 +305,23 @@
     }
     
     /* Set current Media */
+   
     var currentMedia;
     
+    function updateSliderAndTangles() {
+        if (currentMedia && currentMedia.currentSegment) {
+            var start = currentMedia.currentSegment.begin,
+                end = currentMedia.currentSegment.end,
+                dur = currentMedia.currentSegment.getDuration(),
+                f = slidersRange / currentMedia.duration;
+            sliceSlider.slider( "values", [ f * start, f * end ] );
+            $(".tangle-start").text(start.toString()).attr("data-milliseconds",start.milliseconds);
+            $(".tangle-end").text(end.toString()).attr("data-milliseconds",end.milliseconds);
+            $(".tangle-duration").text(dur.toString()).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)
+        }
+    }
+    
     function setMedia(mediaid) {
         $(".col-left .item-video").removeClass("active");
         $(".tutorial").hide();
@@ -275,10 +339,34 @@
                 currentvideo = $('#video_' + mediaid);
             }
             $(".tab-media-title").text(currentMedia.title);
-            sliceSlider.slider("values",[0, slidersRange]);
+            if (!currentMedia.currentSegment) {
+                currentMedia.currentSegment = new IriSP.Model.Annotation(false, project);
+                currentMedia.currentSegment.setMedia(currentMedia.id);
+                currentMedia.currentSegment.setBegin(0);
+                currentMedia.currentSegment.setEnd(currentMedia.duration);
+                currentMedia.currentSegment.thumbnail = currentMedia.thumbnail;
+                currentMedia.currentSegment.title = "Segment sans titre";
+                currentMedia.currentSegment.description = "Extrait de « " + currentMedia.title + " »";
+                currentMedia.currentSegment.on("change-begin", function() {
+                    if (currentMedia && currentMedia.currentSegment === this) {
+                        currentMedia.setCurrentTime(this.begin);
+                        updateSliderAndTangles();
+                    }
+                });
+                currentMedia.currentSegment.on("change-end", function() {
+                    if (currentMedia && currentMedia.currentSegment === this) {
+                        currentMedia.setCurrentTime(this.end);
+                        updateSliderAndTangles();
+                    }
+                });
+            }
+            updateSliderAndTangles();
         }
         currentvideo.show();
         $(".Ldt-Ctrl-Time-Total").text(currentMedia.duration.toString());
+        $("#segment-title").val(currentMedia.currentSegment.title);
+        $("#segment-description").text(currentMedia.currentSegment.description);
+        // TODO: Do something with the tags !
         onCurrentMediaTimeupdate(currentMedia.getCurrentTime());
         onCurrentMediaPause();
     }
@@ -392,9 +480,33 @@
             if (media === currentMedia) {
                 onCurrentMediaTimeupdate(_time);
             }
+        });
+        
+        media.on("volumechange", function() {
+            if (media === currentMedia) {
+                ctrlVolumeUpdater();
+            }
         })
         
     }
+    
+    /* Segment Form interaction */
+   
+    $("#segment-title").on("keyup change input paste", function() {
+        if (currentMedia && currentMedia.currentSegment) {
+            currentMedia.currentSegment.title = $(this).val();
+        }
+    });
+    $("#segment-description").on("keyup change input paste", function() {
+        if (currentMedia && currentMedia.currentSegment) {
+            currentMedia.currentSegment.title = $(this).val();
+        }
+    });
+    $("#segment-form").submit(function() {
+        mashup.addSegment(currentMedia.currentSegment);
+        currentMedia.currentSegment = undefined;
+    })
+    
     /* Click on media items */
    
     $(".col-left").on("click", ".item-video", function() {
@@ -437,34 +549,65 @@
         disableMoveItemVideo();
     });
     
-    /* Tangle */
-    var activeTangle,
+    /* Tangles */
+    var tangleMsPerPixel = 100,
+        activeTangle,
         tangleStartX,
-        tangleStartVal;
+        tangleStartVal,
+        tangleHasMoved;
+    
     $(".time-tangle").mousedown(function(evt) {
         activeTangle = $(this);
         activeTangle.addClass("active");
         tangleStartVal = +activeTangle.attr("data-milliseconds");
         tangleStartX = evt.pageX;
+        tangleHasMoved = false;
+        $(this).siblings(".time-tangle").addClass("deactivate");
         return false;
     });
     $(document)
         .mousemove(function(evt) {
             if (activeTangle) {
-                var newval = new IriSP.Model.Time(100 * (evt.pageX - tangleStartX) + tangleStartVal);
-                activeTangle.text(newval.toString());
-                activeTangle.attr("data-milliseconds",newval.milliseconds);
+                tangleHasMoved = true;
+                var newval = new IriSP.Model.Time(tangleMsPerPixel * (evt.pageX - tangleStartX) + tangleStartVal);
                 activeTangle.trigger("valuechange", newval);
                 return false;
             }
         })
         .mouseup(function() {
             if (activeTangle) {
-                activeTangle.removeClass("active");
+                $(".time-tangle").removeClass("active deactivate");
                 activeTangle = undefined;
             }
+        });
+        
+    $(".tangle-start")
+        .mouseup(function(evt) {
+            if (!tangleHasMoved && currentMedia && currentMedia.currentSegment) {
+                currentMedia.setCurrentTime(currentMedia.currentSegment.begin);
+            }
         })
-    
+        .on("valuechange", function(evt, val) {
+            if (currentMedia && currentMedia.currentSegment) {
+                currentMedia.currentSegment.setBegin(val);
+            }
+        });
+    $(".tangle-end")
+        .mouseup(function(evt) {
+            if (!tangleHasMoved && currentMedia && currentMedia.currentSegment) {
+                currentMedia.setCurrentTime(currentMedia.currentSegment.end);
+            }
+        })
+        .on("valuechange", function(evt, val) {
+            if (currentMedia && currentMedia.currentSegment) {
+                currentMedia.currentSegment.setEnd(val);
+            }
+        });
+    $(".tangle-duration").on("valuechange", function(evt, val) {
+        if (currentMedia && currentMedia.currentSegment) {
+            currentMedia.currentSegment.setDuration(val);
+        }
+    });
 }
 
 $(function() {