# HG changeset patch
# User veltr
# Date 1351530130 -3600
# Node ID eea45f9b124bdfcd43935ce7877c621a1dbafaaa
# Parent  c9dc489913afd891c6f7f4bcf522ea856075eace
commit before merge

diff -r c9dc489913af -r eea45f9b124b integration/css/common.css
--- a/integration/css/common.css	Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/css/common.css	Mon Oct 29 18:02:10 2012 +0100
@@ -62,6 +62,9 @@
 	color:#000;
 	text-decoration: none;
 }
+textarea {
+    resize: none;
+}
 /* common */
 .wrap{
 	min-height:100%;
@@ -161,15 +164,19 @@
 .popin-content input[type=text],
 .popin-content input[type=password], 
 .popin-content textarea{
-	padding: 0 6px;
-	height: 20px;
-	line-height: 20px;
+	padding: 0 4px;
+	font-family: 'OpenSans';
 	font-size: 12px;
 	border: 1px solid #867a97;
 	-webkit-border-radius: 4px;
   	-moz-border-radius: 4px;
   	border-radius: 4px;
 }
+.popin-content input[type=text],
+.popin-content input[type=password] {
+    line-height: 20px;
+    height: 20px;
+}
 /* popin - user */
 
 .popin {
diff -r c9dc489913af -r eea45f9b124b integration/css/edition.css
--- a/integration/css/edition.css	Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/css/edition.css	Mon Oct 29 18:02:10 2012 +0100
@@ -226,6 +226,14 @@
     content: "glisser pour modifier"
 }
 
+.time-tangle.deactivate:hover {
+    border: none; color: #7628DF;
+}
+
+.time-tangle.deactivate:hover:after {
+    display: none;
+}
+
 .segmentation form{
 	overflow: hidden;
 }
@@ -501,9 +509,8 @@
 }
 .item-video img{
 	float: left;
-}
-.item-video img{
 	margin-right: 4px;
+	box-shadow: 2px 2px 2px #333333;
 }
 .item-video .video-info{
 	display: block;
@@ -667,9 +674,45 @@
   background-position: -30px -50px;
 }
 
+.Ldt-Ctrl-InOutBlock {
+    display: none;
+}
+
+.segment-mode .Ldt-Ctrl-InOutBlock {
+    display: block;
+}
+
+.Ldt-Ctrl-SetIn, .Ldt-Ctrl-SetOut {
+    margin: 0 2px;
+}
+
+.Ldt-Ctrl-SetIn {
+    background-position: -60px 0;
+}
+
+.Ldt-Ctrl-SetIn:hover {
+  background-position: -60px -25px;
+}
+
+.Ldt-Ctrl-SetIn:active {
+  background-position: -60px -50px;
+}
+
+.Ldt-Ctrl-SetOut {
+    background-position: -90px 0;
+}
+
+.Ldt-Ctrl-SetOut:hover {
+  background-position: -90px -25px;
+}
+
+.Ldt-Ctrl-SetOut:active {
+  background-position: -90px -50px;
+}
+
 .Ldt-Ctrl-Time {
   float: left;
-  margin: 5px;
+  margin: 7px 5px 0;
   font-size: 12px;
   font-family: Arial, Verdana, sans-serif;
 }
diff -r c9dc489913af -r eea45f9b124b integration/edition.html
--- a/integration/edition.html	Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/edition.html	Mon Oct 29 18:02:10 2012 +0100
@@ -25,17 +25,17 @@
                         <form class="clearfix" action="#" method="">
                             <div class="form-left">
                                 <p class="titre-wrap">
-                                    <label for="titre-video">Titre :</label>
-                                    <input type="text" id="titre-video" name="" value="Mon Hashcut" />
+                                    <label for="hashcut-title">Titre :</label>
+                                    <input type="text" id="hashcut-title" name="" value="Mon Hashcut" />
                                 </p>
                                 <p>
-                                    <label for="tags-video">Tags :</label>
-                                    <input type="text" id="tags-video" name="" value="Lune, Espace, Lune" />
+                                    <label for="hashcut-tags">Tags :</label>
+                                    <input type="text" id="hashcut-tags" name="" value="Lune, Espace, Lune" />
                                 </p>
                             </div>
                             <p class="form-right">
-                                <label for="description-video">Description :</label>
-                                <textarea name="" id="description-video" cols="30" rows="10"></textarea>
+                                <label for="hashcut-description">Description :</label>
+                                <textarea name="" id="hashcut-description"></textarea>
                             </p>
                         </form>
                     </div>
@@ -162,6 +162,12 @@
                             <div class="Ldt-Ctrl-Left">
                                 <div class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState" title="Lecture/Pause"></div>
                                 <div class="Ldt-Ctrl-spacer"></div>
+                                <div class="Ldt-Ctrl-InOutBlock">
+                                    <div class="Ldt-Ctrl-button Ldt-Ctrl-SetIn" title="Débuter le segment ici"></div>
+                                    <div class="Ldt-Ctrl-spacer"></div>
+                                    <div class="Ldt-Ctrl-button Ldt-Ctrl-SetOut" title="Finir le segment ici"></div>
+                                    <div class="Ldt-Ctrl-spacer"></div>
+                                </div>
                             </div>
                             <div class="Ldt-Ctrl-Right">
                                <div class="Ldt-Ctrl-spacer"></div>
@@ -194,21 +200,21 @@
                                     (durée:
                                     <span class="time-tangle tangle-duration"></span>)
                                 </h2>
-                                <form action="#">
+                                <form action="#" id="segment-form">
                                     <div class="form-segment-left">
                                         <p>
-                                            <label for="titre">Titre :</label>
-                                            <input type="text" id="titre" />
+                                            <label for="segment-title">Titre :</label>
+                                            <input type="text" id="segment-title" />
                                         </p>
                                         <p>
-                                            <label for="tags">Tags :</label>
-                                            <input type="text" id="tags" />
+                                            <label for="segment-tags">Tags :</label>
+                                            <input type="text" id="segment-tags" />
                                         </p>
                                     </div>
                                     <div class="form-segment-right">
                                         <p>
-                                            <label for="description">Description :</label>
-                                            <textarea id="description"></textarea>
+                                            <label for="segment-description">Description :</label>
+                                            <textarea id="segment-description"></textarea>
                                         </p>
                                     </div>
                                     <input class="button add-segment" type="submit" value="Ajouter au Hashcut" />
@@ -216,7 +222,7 @@
                                 </form>
                             </div>
                         </div><!-- popin segmentation -->
-
+<!-- //TODO: Add "Existing Segments"
                         <div class="existant">
                             <h2>Segments existants :</h2>
                             <div class="segments">
@@ -232,7 +238,8 @@
                                             <a href="#" class="button reprendre-segment">Reprendre le segment</a>
                                         </div>
                                     </div><!-- popin segment-section -->
-                                </div>
+<!--
+                                    </div>
                                 <div class="segment">
                                     <div class="section" style="left:20%;width:20%;"></div>
                                 </div>
@@ -244,6 +251,7 @@
                                 </div>
                             </div>
                         </div>
+-->
                     </div><!-- bloc-segmentation -->
 
                     <div class="bloc-pvw">
@@ -303,8 +311,10 @@
                         <h2>Liste des segments</h2>
                         <div class="frise clearfix">
 
-                            <span class="indication" style="left:64%;">00:30</span>
-                            <span class="indication" style="left:84%;">00:30</span>
+                            <div class="indications">
+                                <span class="indication" style="left:30%;">00:30</span>
+                                <span class="indication" style="left:84%;">00:30</span>
+                            </div>
                             <div class="segments">
                                  <div class="segment" style="background-color:red;width:20%;"></div>
                                  <div class="segment" style="background-color:yellow;width:20%;"></div>
@@ -312,52 +322,11 @@
                                  <div class="segment" style="background-color:green;width:20%;"></div>
                                  <div class="segment" style="background-color:brown;width:20%;"></div>
                             </div>
+
                         </div>
                     </div>
 
                     <ul class="list-video organize-segments">
-                        <li class="item-video">
-                            <img src="img/apercu-video.jpg" alt="aperçu" />
-                            <span class="video-info">
-                                <span class="title-video">Voyage à la Lune 1</span>
-                                <span class="subtitle">Chargement de la Capsule</span>
-                                <span class="duration">01:17 - 02:01 (00:44)</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><!-- item-video -->
-                        <li class="item-video">
-                            <img src="img/apercu-video.jpg" alt="aperçu" />
-                            <span class="video-info">
-                                <span class="title-video">Voyage à la Lune 2</span>
-                                <span class="subtitle">Chargement de la Capsule</span>
-                                <span class="duration">01:17 - 02:01 (00:44)</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><!-- item-video -->
-                        <li class="item-video">
-                            <img src="img/apercu-video.jpg" alt="aperçu" />
-                            <span class="video-info">
-                                <span class="title-video">Voyage à la Lune 3</span>
-                                <span class="subtitle">Chargement de la Capsule</span>
-                                <span class="duration">01:17 - 02:01 (00:44)</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><!-- item-video -->
                         
                     </ul>
                 </div><!-- col-right -->
diff -r c9dc489913af -r eea45f9b124b integration/img/player-sprites.png
Binary file integration/img/player-sprites.png has changed
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() {
diff -r c9dc489913af -r eea45f9b124b integration/js/model.js
--- a/integration/js/model.js	Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/js/model.js	Mon Oct 29 18:02:10 2012 +0100
@@ -356,7 +356,7 @@
     var _hms = this.getHMS(),
         _res = '';
     if (_hms.hours) {
-        _res += pad(_hms.hours) + ':'
+        _res += _hms.hours + ':'
     }
     _res += pad(_hms.minutes) + ':' + pad(_hms.seconds);
     return _res;
@@ -619,11 +619,23 @@
 Model.Annotation.prototype = new Model.Element();
 
 Model.Annotation.prototype.setBegin = function(_beginMs) {
-    this.begin.setMilliseconds(_beginMs);
+    this.begin.setMilliseconds(Math.max(0,_beginMs));
+    this.trigger("change-begin");
+    if (this.end < this.begin) {
+        this.setEnd(this.begin);
+    }
 }
 
-Model.Annotation.prototype.setEnd = function(_beginMs) {
-    this.end.setMilliseconds(_beginMs);
+Model.Annotation.prototype.setEnd = function(_endMs) {
+    this.end.setMilliseconds(Math.min(_endMs, this.getMedia().duration.milliseconds));
+    this.trigger("change-end");
+    if (this.end < this.begin) {
+        this.setBegin(this.end);
+    }
+}
+
+Model.Annotation.prototype.setDuration = function(_durMs) {
+    this.setEnd(_durMs + this.begin.milliseconds);
 }
 
 Model.Annotation.prototype.setMedia = function(_idRef) {
@@ -664,9 +676,11 @@
     Model.Element.call(this, _mashup.id + "_" + _annotation.id, _annotation.source);
     this.elementType = 'mashedAnnotation';
     this.annotation = _annotation;
-    this.begin = new Model.Time(_mashup.duration);
-    this.end = new Model.Time(_mashup.duration + _annotation.getDuration());
+    this.begin = new Model.Time();
+    this.end = new Model.Time();
+    this.duration = new Model.Time();
     this.title = this.annotation.title;
+    this.media_title = this.getMedia().title;
     this.description = this.annotation.description;
     this.color = this.annotation.color;
     var _this = this;
@@ -697,6 +711,12 @@
     return this.annotation.getDuration();
 }
 
+Model.MashedAnnotation.prototype.setBegin = function(_begin) {
+    this.begin.setMilliseconds(_begin);
+    this.duration.setMilliseconds(this.annotation.getDuration());
+    this.end.setMilliseconds(_begin + this.duration);
+}
+
 /* */
 
 Model.Mashup = function(_id, _source) {
@@ -704,7 +724,6 @@
     this.elementType = 'mashup';
     this.duration = new Model.Time();
     this.segments = new Model.List(_source.directory);
-    this.medias = new Model.List(_source.directory);
     var _currentMedia = null;
     var _this = this;
     this.on("timeupdate", function(_time) {
@@ -729,21 +748,78 @@
             }
         });
     });
+    this._updateTimes = function() {
+        _this.updateTimes();
+    }
+    this.on("add-segments", this._updateTimes);
+    this.on("remove-segments", this._updateTimes);
 }
 
 Model.Mashup.prototype = new Model.Playable();
 
-Model.Mashup.prototype.addSegment = function(_annotation) {
-    var _mashedAnnotation = new Model.MashedAnnotation(this, _annotation);
-    this.duration.setMilliseconds(_mashedAnnotation.end);
+Model.Mashup.prototype.updateTimes = function() {
+    var _time = 0;
+    this.segments.forEach(function(_segment) {
+        _segment.setBegin(_time);
+        _time = _segment.end;
+    });
+    this.duration.setMilliseconds(_time);
+}
+
+Model.Mashup.prototype.addSegment = function(_annotation, _defer) {
+    var _mashedAnnotation = new Model.MashedAnnotation(this, _annotation),
+        _defer = _defer || false;
     this.segments.push(_mashedAnnotation);
-    this.medias.push(_annotation.getMedia());
+    _annotation.on("change-begin", this._updateTimes);
+    _annotation.on("change-end", this._updateTimes);
+    if (!_defer) {
+        this.trigger("add-segments");
+    }
+}
+
+Model.Mashup.prototype.addSegmentById = function(_elId, _defer) {
+    var _annotation = this.source.getElement(_elId),
+        _defer = _defer || false;
+    if (typeof _annotation !== "undefined") {
+        this.addSegment(_annotation, _defer);
+    }
 }
 
-Model.Mashup.prototype.addSegmentById = function(_elId) {
-    var _annotation = this.source.getElement(_elId);
-    if (typeof _annotation !== "undefined") {
-        this.addSegment(_annotation);
+Model.Mashup.prototype.addSegments = function(_segments) {
+    var _this = this;
+    ns._(_segments).forEach(function(_segment) {
+        _this.addSegment(_segment, true);
+    });
+    this.trigger("add-segments");
+}
+
+Model.Mashup.prototype.addSegmentsById = function(_segments) {
+    var _this = this;
+    ns._(_segments).forEach(function(_segment) {
+        _this.addSegmentById(_segment, true);
+    });
+    this.trigger("add-segments");
+}
+
+Model.Mashup.prototype.removeSegment = function(_annotation, _defer) {
+    var _defer = _defer || false;
+    _annotation.off("change-begin", this._updateTimes);
+    _annotation.off("change-end", this._updateTimes);
+    this.segments.removeElement(_annotation);
+    if (!_defer) {
+        this.trigger("remove-segments");
+    }
+}
+
+Model.Mashup.prototype.removeSegmentById = function(_annId, _defer) {
+    var _defer = _defer || false;
+    var _annotation = this.source.getElementById(_annId);
+    if (_annotation) {
+        this.removeSegment(_annotation, _defer);
+    }
+    this.segments.removeElement(_annotation);
+    if (!_defer) {
+        this.trigger("remove-segments");
     }
 }
 
@@ -752,7 +828,11 @@
 }
 
 Model.Mashup.prototype.getMedias = function() {
-    return this.medias;
+    var medias = new Model.List(_source.directory);
+    this.segments.each(function(_annotation) {
+        medias.push(_annotation.getMedia())
+    })
+    return medias;
 }
 
 Model.Mashup.prototype.getAnnotationsByTypeTitle = function(_title) {