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) {