diff -r 7c394ea40f28 -r b2d068afdbd8 integration/js/model.js
--- a/integration/js/model.js	Mon Oct 29 18:11:09 2012 +0100
+++ b/integration/js/model.js	Tue Oct 30 18:44:45 2012 +0100
@@ -301,16 +301,16 @@
 }
 
 Model.Time.prototype.setMilliseconds = function(_milliseconds) {
-    var _ante = _milliseconds;
+    var _ante = this.milliseconds;
     switch(typeof _milliseconds) {
         case "string":
-            this.milliseconds = parseFloat(_milliseconds);
+            this.milliseconds = parseInt(_milliseconds);
             break;
         case "number":
-            this.milliseconds = _milliseconds;
+            this.milliseconds = Math.floor(_milliseconds);
             break;
         case "object":
-            this.milliseconds = parseFloat(_milliseconds.valueOf());
+            this.milliseconds = parseInt(_milliseconds.valueOf());
             break;
         default:
             this.milliseconds = 0;
@@ -333,7 +333,8 @@
     return {
         hours : Math.floor(_totalSeconds / 3600),
         minutes : (Math.floor(_totalSeconds / 60) % 60),
-        seconds : _totalSeconds % 60
+        seconds : _totalSeconds % 60,
+        milliseconds: this.milliseconds % 1000
     } 
 }
 
@@ -345,7 +346,7 @@
     return this.milliseconds;
 }
 
-Model.Time.prototype.toString = function() {
+Model.Time.prototype.toString = function(showCs) {
     function pad(_n) {
         var _res = _n.toString();
         while (_res.length < 2) {
@@ -359,6 +360,9 @@
         _res += _hms.hours + ':'
     }
     _res += pad(_hms.minutes) + ':' + pad(_hms.seconds);
+    if (showCs) {
+        _res += "." + Math.round(_hms.milliseconds / 100)
+    }
     return _res;
 }
 
@@ -526,6 +530,9 @@
     this.trigger("setpause");
 }
 
+Model.Playable.prototype.show = function() {}
+
+Model.Playable.prototype.hide = function() {}
 
 /* */
 
@@ -680,13 +687,18 @@
     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;
     this.on("click", function() {
         _mashup.setCurrentTime(_this.begin);
     });
+    this.on("enter", function() {
+        _this.annotation.trigger("enter");
+    });
+    this.on("leave", function() {
+        _this.annotation.trigger("leave");
+    });
 }
 
 Model.MashedAnnotation.prototype = new Model.Element(null);
@@ -724,16 +736,17 @@
     this.elementType = 'mashup';
     this.duration = new Model.Time();
     this.segments = new Model.List(_source.directory);
+    this.loaded = false;
     var _currentMedia = null;
     var _this = this;
     this.on("timeupdate", function(_time) {
-        _this.getAnnotations().filter(function(_a) {
+        _this.getSegments().filter(function(_a) {
             return (_a.end <= _time || _a.begin > _time) && _a.playing
         }).forEach(function(_a) {
             _a.playing = false;
             _a.trigger("leave");
         });
-        _this.getAnnotations().filter(function(_a) {
+        _this.getSegments().filter(function(_a) {
             return _a.begin <= _time && _a.end > _time && !_a.playing
         }).forEach(function(_a) {
             _a.playing = true;
@@ -750,13 +763,25 @@
     });
     this._updateTimes = function() {
         _this.updateTimes();
+        _this.trigger("change");
     }
-    this.on("add-segments", this._updateTimes);
-    this.on("remove-segments", this._updateTimes);
+    this.on("add", this._updateTimes);
+    this.on("remove", this._updateTimes);
 }
 
 Model.Mashup.prototype = new Model.Playable();
 
+Model.Mashup.prototype.checkLoaded = function() {
+    var loaded = !!this.segments.length;
+    this.getMedias().forEach(function(_m) {
+        loaded = loaded && _m.loaded;
+    });
+    this.loaded = loaded;
+    if (loaded) {
+        this.trigger("loadedmetadata");
+    }
+}
+
 Model.Mashup.prototype.updateTimes = function() {
     var _time = 0;
     this.segments.forEach(function(_segment) {
@@ -766,70 +791,102 @@
     this.duration.setMilliseconds(_time);
 }
 
-Model.Mashup.prototype.addSegment = function(_annotation, _defer) {
+Model.Mashup.prototype.addAnnotation = function(_annotation, _defer) {
     var _mashedAnnotation = new Model.MashedAnnotation(this, _annotation),
         _defer = _defer || false;
     this.segments.push(_mashedAnnotation);
     _annotation.on("change-begin", this._updateTimes);
     _annotation.on("change-end", this._updateTimes);
     if (!_defer) {
-        this.trigger("add-segments");
+        this.trigger("add");
+    }
+}
+
+Model.Mashup.prototype.addAnnotationById = function(_elId, _defer) {
+    var _annotation = this.source.getElement(_elId),
+        _defer = _defer || false;
+    if (typeof _annotation !== "undefined") {
+        this.addAnnotation(_annotation, _defer);
     }
 }
 
-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.addAnnotations = function(_segments) {
+    var _this = this;
+    ns._(_segments).forEach(function(_segment) {
+        _this.addAnnotation(_segment, true);
+    });
+    this.trigger("add");
+}
+
+Model.Mashup.prototype.addAnnotationsById = function(_segments) {
+    var _this = this;
+    ns._(_segments).forEach(function(_segment) {
+        _this.addAnnotationById(_segment, true);
+    });
+    this.trigger("add");
+}
+
+Model.Mashup.prototype.removeAnnotation = function(_annotation, _defer) {
+    var _defer = _defer || false;
+    _annotation.off("change-begin", this._updateTimes);
+    _annotation.off("change-end", this._updateTimes);
+    this.segments.removeId(this.id + "_" + _annotation.id);
+    if (!_defer) {
+        this.trigger("remove");
     }
 }
 
-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.removeAnnotationById = function(_annId, _defer) {
+    var _defer = _defer || false;
+    var _annotation = this.source.getElement(_annId);
 
-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 (_annotation) {
+        this.removeAnnotation(_annotation, _defer);
+    }
     if (!_defer) {
-        this.trigger("remove-segments");
+        this.trigger("remove");
     }
 }
 
-Model.Mashup.prototype.removeSegmentById = function(_annId, _defer) {
-    var _defer = _defer || false;
-    var _annotation = this.source.getElementById(_annId);
-    if (_annotation) {
-        this.removeSegment(_annotation, _defer);
+Model.Mashup.prototype.setAnnotations = function(_segments) {
+    while (this.segments.length) {
+        this.removeAnnotation(this.segments[0].annotation, true);
     }
-    this.segments.removeElement(_annotation);
-    if (!_defer) {
-        this.trigger("remove-segments");
+    this.addAnnotations(_segments);
+}
+
+Model.Mashup.prototype.setAnnotationsById = function(_segments) {
+    while (this.segments.length) {
+        this.removeAnnotation(this.segments[0].annotation, true);
     }
+    this.addAnnotationsById(_segments);
 }
 
-Model.Mashup.prototype.getAnnotations = function() {
+Model.Mashup.prototype.hasAnnotation = function(_annotation) {
+    return !!ns._(this.segments).find(function(_s) {
+        return _s.annotation === _annotation
+    });
+}
+
+Model.Mashup.prototype.getAnnotation = function(_annotation) {
+    return ns._(this.segments).find(function(_s) {
+        return _s.annotation === _annotation
+    });
+}
+
+Model.Mashup.prototype.getAnnotationById = function(_id) {
+    return ns._(this.segments).find(function(_s) {
+        return _s.annotation.id === _id
+    });
+}
+
+Model.Mashup.prototype.getSegments = function() {
     return this.segments;
 }
 
 Model.Mashup.prototype.getMedias = function() {
-    var medias = new Model.List(_source.directory);
-    this.segments.each(function(_annotation) {
+    var medias = new Model.List(this.source.directory);
+    this.segments.forEach(function(_annotation) {
         medias.push(_annotation.getMedia())
     })
     return medias;