Improvements in widget communication
authorveltr
Mon, 24 Sep 2012 18:32:22 +0200
changeset 965 eadb7290c325
parent 964 d7d56ea2d0a6
child 966 c1c762ad1697
Improvements in widget communication
src/js/defaults.js
src/js/model.js
src/js/widgets.js
src/widgets/Annotation.js
src/widgets/AnnotationsList.js
src/widgets/Arrow.js
src/widgets/CreateAnnotation.css
src/widgets/CreateAnnotation.js
src/widgets/MashupPlayer.js
src/widgets/MediaList.js
src/widgets/Slice.css
src/widgets/Slice.js
src/widgets/Slider.css
src/widgets/Slider.js
src/widgets/Slideshare.js
src/widgets/Tagcloud.js
src/widgets/Tagger.css
src/widgets/Tagger.js
test/dailymotion.htm
test/jwplayer.htm
test/mashup/moon.htm
test/mashup/player-html.htm
test/mashup/player-jwpmashup.htm
test/mashup/player-local-html.htm
test/mp4video.htm
test/oggvideo.htm
test/renkan.htm
test/slideshare.htm
test/vimeo.htm
test/youtube.htm
--- a/src/js/defaults.js	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/js/defaults.js	Mon Sep 24 18:32:22 2012 +0200
@@ -55,6 +55,12 @@
         noCss: true,
         requires: [ "swfObject" ]
     },
+    AutoPlayer: {
+        noCss: true
+    },
+    MashupPlayer: {
+        noCss: true
+    },
     Sparkline: {
         noCss: true,
         requires: [ "raphael" ]
--- a/src/js/model.js	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/js/model.js	Mon Sep 24 18:32:22 2012 +0200
@@ -446,6 +446,21 @@
     this.elementType = 'media';
     this.duration = new IriSP.Model.Time();
     this.video = '';
+    var _this = this;
+    this.on("timeupdate", function(_time) {
+        _this.getAnnotations().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) {
+            return _a.begin <= _time && _a.end > _time && !_a.playing
+        }).forEach(function(_a) {
+            _a.playing = true;
+            _a.trigger("enter");
+        });
+    });
 }
 
 IriSP.Model.Media.prototype = new IriSP.Model.Element();
@@ -520,10 +535,11 @@
     this.elementType = 'annotation';
     this.begin = new IriSP.Model.Time();
     this.end = new IriSP.Model.Time();
+    this.playing = false;
     var _this = this;
     this.on("click", function() {
         _this.getMedia().setCurrentTime(_this.begin);
-    })
+    });
 }
 
 IriSP.Model.Annotation.prototype = new IriSP.Model.Element(null);
@@ -579,6 +595,10 @@
     this.title = this.annotation.title;
     this.description = this.annotation.description;
     this.color = this.annotation.color;
+    var _this = this;
+    this.on("click", function() {
+        _mashup.setCurrentTime(_this.begin);
+    });
 }
 
 IriSP.Model.MashedAnnotation.prototype = new IriSP.Model.Element(null);
@@ -611,6 +631,30 @@
     this.duration = new IriSP.Model.Time();
     this.segments = new IriSP.Model.List(_source.directory);
     this.medias = new IriSP.Model.List(_source.directory);
+    var _currentMedia = null;
+    var _this = this;
+    this.on("timeupdate", function(_time) {
+        _this.getAnnotations().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) {
+            return _a.begin <= _time && _a.end > _time && !_a.playing
+        }).forEach(function(_a) {
+            _a.playing = true;
+            _a.trigger("enter");
+            var _m = _a.getMedia();
+            if (_m !== _currentMedia) {
+                if (_currentMedia) {
+                    _currentMedia.trigger("leave");
+                }
+                _m.trigger("enter");
+                _currentMedia = _m;
+            }
+        });
+    });
 }
 
 IriSP.Model.Mashup.prototype = new IriSP.Model.Element();
--- a/src/js/widgets.js	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/js/widgets.js	Mon Sep 24 18:32:22 2012 +0200
@@ -97,7 +97,7 @@
             return _function.apply(_this, Array.prototype.slice.call(arguments, 0));
         }
     } else {
-        console.log("Error, Unknown function IriSP.Widgets" + this.type + "." + _name)
+        console.log("Error, Unknown function IriSP.Widgets." + this.type + "." + _name)
     }
 }
 
--- a/src/widgets/Annotation.js	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/widgets/Annotation.js	Mon Sep 24 18:32:22 2012 +0200
@@ -27,7 +27,8 @@
 }
 
 IriSP.Widgets.Annotation.prototype.template =
-    '<div class="Ldt-Annotation-Widget {{#show_top_border}}Ldt-Annotation-ShowTop{{/show_top_border}}">'
+    '{{#show_arrow}}<div class="Ldt-Annotation-Arrow"></div>{{/show_arrow}}'
+    + '<div class="Ldt-Annotation-Widget {{^show_arrow}}Ldt-Annotation-ShowTop{{/show_arrow}}">'
     + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty{{#start_minimized}} Ldt-Annotation-Minimized{{/start_minimized}}">'
     + '<div class="Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-MaxMinButton"></div>'
     + '<div class="Ldt-Annotation-Social Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></div>'
@@ -43,41 +44,103 @@
 
 IriSP.Widgets.Annotation.prototype.defaults = {
     annotation_type : "chap",
-    start_minimized: true,
-    show_top_border : false,
+    start_minimized: false,
+    show_arrow : true,
     site_name : "Lignes de Temps",
     search_on_tag_click: true
 }
 
 IriSP.Widgets.Annotation.prototype.draw = function() {
+    
+    var _this = this;
+    
+    function timeupdate(_time) {
+        var _list = _this.getWidgetAnnotationsAtTime();
+        if (!_list.length) {
+            _this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Empty");
+            if (_this.arrow) {
+                _this.arrow.moveToTime(_time);
+            }
+            _this.bounds = [ _time, _time ];
+            _this.sendBounds();
+        }
+    }
+    
+    function drawAnnotation(_annotation) {
+        var _url = (typeof _annotation.url !== "undefined" 
+                ? _annotation.url
+                : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.id)),
+            _text = _this.l10n.watching + _annotation.title + (_this.site_name ? _this.l10n.on_site + _this.site_name : ''),
+            _tags = _annotation.getTags(),
+            _tagblock = _this.$.find(".Ldt-Annotation-Tags");
+        if (_tags.length) {
+            _this.$.find(".Ldt-Annotation-Tags-Block").removeClass("Ldt-Annotation-EmptyBlock");
+            _tags.forEach(function(_tag) {
+                var _trimmedTitle =  _tag.title.replace(/(^\s+|\s+$)/g,'');
+                if (_trimmedTitle) {
+                    var _el = IriSP.jQuery('<li class="Ldt-Annotation-TagLabel"></li>').append(IriSP.jQuery('<span>').text(_trimmedTitle));
+                    _el.click(function() {
+                        if (_this.search_on_tag_click) {
+                            _this.player.trigger("search.triggeredSearch",_trimmedTitle);
+                        }
+                        _tag.trigger("click");
+                    });
+                    _tagblock.append(_el);
+                }
+            });
+        } else {
+            _this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-EmptyBlock");
+        }
+        _this.$.find(".Ldt-Annotation-Title").html(_annotation.title);
+        var _desc = _annotation.description.replace(/(^\s+|\s+$)/g,'');
+        if (_desc) {
+            _this.$.find(".Ldt-Annotation-Description-Block").removeClass("Ldt-Annotation-EmptyBlock");
+            _this.$.find(".Ldt-Annotation-Description").html(_desc);
+        } else {
+            _this.$.find(".Ldt-Annotation-Description-Block").addClass("Ldt-Annotation-EmptyBlock");
+        }
+        _this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString());
+        _this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString());
+        if (_annotation.elementType === "mashedAnnotation") {
+            _this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-isMashup");
+            _this.$.find(".Ldt-Annotation-MashupMedia").html(_annotation.getMedia().title);
+            _this.$.find(".Ldt-Annotation-MashupBegin").html(_annotation.annotation.begin.toString());
+            _this.$.find(".Ldt-Annotation-MashupEnd").html(_annotation.annotation.end.toString());
+        } else {
+            _this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-isMashup");
+        }
+        if (typeof _this.socialWidget !== "undefined") {
+            _this.socialWidget.updateUrls(_url, _text);
+        } else {
+            setTimeout(function() {
+                if (typeof _this.socialWidget !== "undefined") {
+                    _this.socialWidget.updateUrls(_url, _text);
+                }
+            },800);
+        }
+        _this.$.find(".Ldt-Annotation-Inner").removeClass("Ldt-Annotation-Empty");
+        _this.bounds = [ _annotation.begin, _annotation.end ];
+        if (_this.arrow) {
+            _this.arrow.moveToTime((_annotation.begin + _annotation.end)/2);
+        }
+        _this.sendBounds();
+    }
+    
     this.renderTemplate();
     this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), { type: "Social" }, "socialWidget");
-    this.onMediaEvent("timeupdate","onTimeupdate");
+    this.insertSubwidget(this.$.find(".Ldt-Annotation-Arrow"), { type: "Arrow" }, "arrow");
+    this.onMediaEvent("timeupdate",timeupdate);
     this.onMdpEvent("Annotation.hide","hide");
     this.onMdpEvent("Annotation.show","show");
     this.onMdpEvent("Annotation.minimize","minimize");
     this.onMdpEvent("Annotation.maximize","maximize");
     this.onMdpEvent("Annotation.getBounds","sendBounds");
     this.$.find(".Ldt-Annotation-MaxMinButton").click(this.functionWrapper("toggleSize"));
-    this.onTimeupdate();
-}
-
-IriSP.Widgets.Annotation.prototype.onTimeupdate = function(_time) {
-    var _list = this.getWidgetAnnotationsAtTime();
-    if (_list.length) {
-        if (_list[0].id !== this.lastAnnotation) {
-            this.drawAnnotation(_list[0]);
-            this.bounds = [ _list[0].begin.valueOf(), _list[0].end.valueOf() ];
-        }
-        this.player.trigger("Arrow.updatePosition",{widget: this.type, time: ( _list[0].begin + _list[0].end ) / 2});
-    }
-    else {
-        this.lastAnnotation = false;
-        this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Empty");
-        this.player.trigger("Arrow.updatePosition",{widget: this.type, time: _time});
-        this.bounds = [ _time, _time ];
-    }
-    this.sendBounds();
+    this.getWidgetAnnotations().forEach(function(_a) {
+        _a.on("enter", function() {
+            drawAnnotation(_a)
+        });
+    });
 }
 
 IriSP.Widgets.Annotation.prototype.sendBounds = function() {
@@ -86,60 +149,7 @@
 
 IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) {
     this.lastAnnotation = _annotation.id;
-    var _url = (typeof _annotation.url !== "undefined" 
-            ? _annotation.url
-            : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.id)),
-        _text = this.l10n.watching + _annotation.title + (this.site_name ? this.l10n.on_site + this.site_name : ''),
-        _tags = _annotation.getTags(),
-        _tagblock = this.$.find(".Ldt-Annotation-Tags"),
-        _this = this;
-    _tagblock.empty();
-    if (_tags.length) {
-        this.$.find(".Ldt-Annotation-Tags-Block").removeClass("Ldt-Annotation-EmptyBlock");
-        _tags.forEach(function(_tag) {
-            var _trimmedTitle =  _tag.title.replace(/(^\s+|\s+$)/g,'');
-            if (_trimmedTitle) {
-                var _el = IriSP.jQuery('<li class="Ldt-Annotation-TagLabel"></li>').append(IriSP.jQuery('<span>').text(_trimmedTitle));
-                _el.click(function() {
-                    if (_this.search_on_tag_click) {
-                        _this.player.trigger("search.triggeredSearch",_trimmedTitle);
-                    }
-                    _tag.trigger("click");
-                });
-                _tagblock.append(_el);
-            }
-        });
-    } else {
-        this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-EmptyBlock");
-    }
-    this.$.find(".Ldt-Annotation-Title").html(_annotation.title);
-    var _desc = _annotation.description.replace(/(^\s+|\s+$)/g,'');
-    if (_desc) {
-        this.$.find(".Ldt-Annotation-Description-Block").removeClass("Ldt-Annotation-EmptyBlock");
-        this.$.find(".Ldt-Annotation-Description").html(_desc);
-    } else {
-        this.$.find(".Ldt-Annotation-Description-Block").addClass("Ldt-Annotation-EmptyBlock");
-    }
-    this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString());
-    this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString());
-    if (_annotation.elementType === "mashedAnnotation") {
-        this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-isMashup");
-        this.$.find(".Ldt-Annotation-MashupMedia").html(_annotation.getMedia().title);
-        this.$.find(".Ldt-Annotation-MashupBegin").html(_annotation.annotation.begin.toString());
-        this.$.find(".Ldt-Annotation-MashupEnd").html(_annotation.annotation.end.toString());
-    } else {
-        this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-isMashup");
-    }
-    if (typeof this.socialWidget !== "undefined") {
-        this.socialWidget.updateUrls(_url, _text);
-    } else {
-        setTimeout(function() {
-            if (typeof _this.socialWidget !== "undefined") {
-                _this.socialWidget.updateUrls(_url, _text);
-            }
-        },800);
-    }
-    this.$.find(".Ldt-Annotation-Inner").removeClass("Ldt-Annotation-Empty");
+
 }
 
 IriSP.Widgets.Annotation.prototype.hide = function() {
--- a/src/widgets/AnnotationsList.js	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/widgets/AnnotationsList.js	Mon Sep 24 18:32:22 2012 +0200
@@ -129,7 +129,7 @@
     if (this.mashupMode) {
         var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime);
         if (typeof _currentAnnotation !== "undefined") {
-            _currentTime = _currentTime - _currentAnnotation.begin.getSeconds() + _currentAnnotation.annotation.begin.getSeconds();
+            _currentTime = _currentTime - _currentAnnotation.begin + _currentAnnotation.annotation.begin;
             var _mediaId = _currentAnnotation.getMedia().id;
             _list = _list.filter(function(_annotation) {
                 return _annotation.getMedia().id === _mediaId;
@@ -140,8 +140,9 @@
         _list = _list.searchByTextFields(this.searchString);
     }
     if (this.limit_count) {
+        /* Get the n annotations closest to current timecode */
         _list = _list.sortBy(function(_annotation) {
-            return Math.abs(_annotation.begin.getSeconds() - _currentTime);
+            return Math.abs((_annotation.begin + _annotation.end) / 2 - _currentTime);
         }).slice(0, this.limit_count)
     }
     if (this.newest_first) {
--- a/src/widgets/Arrow.js	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/widgets/Arrow.js	Mon Sep 24 18:32:22 2012 +0200
@@ -6,25 +6,25 @@
 IriSP.Widgets.Arrow.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Arrow.prototype.defaults = {
-    arrow_height : 16,
-    arrow_width : 24,
+    arrow_height : 12,
+    arrow_width : 20,
     base_height : 0,
     base_curve : 0,
     fill_url: IriSP.widgetsDir + '/img/pinstripe.png',
     fill_color: "#ffffff", //Gradients can be used, e.g. "90-#000-#fff" for vertical white-to-black
     stroke_color: "#b7b7b7",
     stroke_width: 1.5,
-    animation_speed: 20,
-    pilot_widget: "Annotation"
+    animation_speed: 20
 }
 
 IriSP.Widgets.Arrow.prototype.draw = function() {
     this.height = this.arrow_height + this.base_height;
     this.$.addClass("Ldt-Arrow").css({
-        height: this.height + "px",
-        "margin-top": "1px"
+        height: (1+this.height) + "px",
+        "margin-top": "1px",
+        overflow: "hidden"
     });
-    this.paper = new Raphael(this.container, this.width, this.height );
+    this.paper = new Raphael(this.container, this.width, 1+this.height );
     window.myArrow = this;
     this.svgArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height);
     this.svgArrow.attr({
@@ -32,14 +32,11 @@
         "stroke-width": this.stroke_width,
         fill: this.fill_url ? ( 'url(' + this.fill_url + ')' ) : this.fill_color
     });
-    this.moveTo(0);
-    this.onMdpEvent("Arrow.updatePosition","onUpdatePosition");
-    this.onMdpEvent("Arrow.takeover","onTakeover");
-    this.onMdpEvent("Arrow.release","onRelease");
+    this.moveToX(0);
 }
 
 IriSP.Widgets.Arrow.prototype.drawAt = function(_x) {
-    _x = Math.floor(Math.max(0, Math.min(_x, this.width)));
+    _x = Math.max(0, Math.min(_x, this.width));
     var _d = 'M0,' + this.height
         + 'L0,' + Math.min( this.height, this.arrow_height + this.base_curve)
         + 'Q0,' + this.arrow_height
@@ -58,8 +55,8 @@
     });
 }
 
-IriSP.Widgets.Arrow.prototype.moveTo = function(_x) {
-    this.targetX = Math.floor(Math.max(0, Math.min(_x, this.width)));
+IriSP.Widgets.Arrow.prototype.moveToX = function(_x) {
+    this.targetX = Math.max(0, Math.min(_x, this.width));
     if (typeof this.animInterval === "undefined") {
         this.animInterval = window.setInterval(
             this.functionWrapper("increment"),
@@ -69,6 +66,10 @@
     this.increment();
 }
 
+IriSP.Widgets.Arrow.prototype.moveToTime = function(_t) {
+    this.moveToX(this.width * _t / this.media.duration);
+}
+
 IriSP.Widgets.Arrow.prototype.increment = function() {
     if (typeof this.currentX === "undefined") {
         this.currentX = this.targetX;
@@ -85,21 +86,3 @@
     }
     this.drawAt(this.currentX);
 }
-
-IriSP.Widgets.Arrow.prototype.onUpdatePosition = function(_param) {
-    if (_param.widget === this.current_pilot_widget) {
-        if (typeof _param.x !== "undefined") {
-            this.moveTo(_param.x);
-        } else {
-            this.moveTo(this.width * _param.time / this.source.getDuration());
-        }
-    }
-}
-
-IriSP.Widgets.Arrow.prototype.onTakeover = function(_widget) {
-    this.current_pilot_widget = _widget;
-}
-
-IriSP.Widgets.Arrow.prototype.onRelease = function(_widget) {
-    this.current_pilot_widget = this.pilot_widget;
-}
--- a/src/widgets/CreateAnnotation.css	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/widgets/CreateAnnotation.css	Mon Sep 24 18:32:22 2012 +0200
@@ -11,9 +11,7 @@
 }
 
 .Ldt-CreateAnnotation-Inner {
-    background: url(img/pinstripe.png);
-    padding: 5px;
-    margin: 0;
+    background: url(img/pinstripe.png); padding: 5px; margin: 0; position: relative;
 }
 
 .Ldt-CreateAnnotation-Inner h3 {
--- a/src/widgets/CreateAnnotation.js	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/widgets/CreateAnnotation.js	Mon Sep 24 18:32:22 2012 +0200
@@ -1,4 +1,4 @@
-/* TODO: Add Social Network Sharing, Finish Current Timecode Sync & Arrow Takeover */
+/* TODO: Add Social Network Sharing */
 
 IriSP.Widgets.CreateAnnotation = function(player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
@@ -11,8 +11,8 @@
     show_creator_field : true,
     start_visible : true,
     always_visible : false,
-    sync_on_slice_widget : true, /* If false, syncs on current timecode */
-    takeover_arrow : false,
+    show_slice : true,
+    show_arrow : true,
     minimize_annotation_widget : true,
     creator_name : "",
     creator_avatar : "",
@@ -37,6 +37,7 @@
         background_color: "#f0e000",
         text_color: "#000000"
     }],
+    slice_annotation_type: "chap",
     annotation_type: "Contributions",
     api_serializer: "ldt_annotate",
     api_endpoint_template: "",
@@ -91,12 +92,14 @@
 }
 
 IriSP.Widgets.CreateAnnotation.prototype.template =
-    '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">'
+    '{{#show_slice}}<div class="Ldt-CreateAnnotation-Slice"></div>{{/show_slice}}'
+    + '{{^show_slice}}{{#show_arrow}}<div class="Ldt-CreateAnnotation-Arrow"></div>{{/show_arrow}}{{/show_slice}}'
+    + '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">'
     + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">'
     + '<h3><span class="Ldt-CreateAnnotation-h3Left">{{#show_title_field}}<input class="Ldt-CreateAnnotation-Title" placeholder="{{l10n.type_title}}" />{{/show_title_field}}'
     + '{{^show_title_field}}<span class="Ldt-CreateAnnotation-NoTitle">{{l10n.no_title}} </span>{{/show_title_field}}'
-    + ' <span class="Ldt-CreateAnnotation-Times">{{#sync_on_slice_widget}}{{l10n.from_time}} {{/sync_on_slice_widget}}{{^sync_on_slice_widget}}{{l10n.at_time}} {{/sync_on_slice_widget}} <span class="Ldt-CreateAnnotation-Begin">00:00</span>'
-    + '{{#sync_on_slice_widget}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">00:00</span>{{/sync_on_slice_widget}}</span></span>'
+    + ' <span class="Ldt-CreateAnnotation-Times">{{#show_slice}}{{l10n.from_time}} {{/show_slice}}{{^show_slice}}{{l10n.at_time}} {{/show_slice}} <span class="Ldt-CreateAnnotation-Begin">00:00</span>'
+    + '{{#show_slice}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">00:00</span>{{/show_slice}}</span></span>'
     + '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator" value="{{creator_name}}" /></h3>{{/show_creator_field}}'
     + '<textarea class="Ldt-CreateAnnotation-Description" placeholder="{{l10n.type_description}}"></textarea>'
     + '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>'
@@ -138,6 +141,35 @@
         /* We have to use the map function because Mustache doesn't like our tags object */
     }
     this.renderTemplate();
+    if (this.show_slice) {
+        this.insertSubwidget(
+            this.$.find(".Ldt-CreateAnnotation-Slice"),
+            {
+                type: "Slice",
+                show_arrow: this.show_arrow,
+                annotation_type: this.slice_annotation_type,
+                onBoundsChanged: function(_from, _to) {
+                    _this.begin = new IriSP.Model.Time(_from || 0);
+                    _this.end = new IriSP.Model.Time(_to || 0);
+                    _this.$.find(".Ldt-CreateAnnotation-Begin").html(_this.begin.toString());
+                    _this.$.find(".Ldt-CreateAnnotation-End").html(_this.end.toString());
+                }
+            },
+            "slice"
+        );
+    } else {
+        if (this.show_arrow) {
+            this.insertSubwidget(this.$.find(".Ldt-CreateAnnotation-Arrow"), {type: "Arrow"},"arrow");
+        }
+        this.onMediaEvent("timeupdate", function(_time) {
+            _this.begin = new IriSP.Model.Time(_time || 0);
+            _this.end = new IriSP.Model.Time(_time || 0);
+            _this.$.find(".Ldt-CreateAnnotation-Begin").html(_this.begin.toString());
+            if (_this.arrow) {
+                _this.arrow.moveToTime(_time);
+            }
+        });
+    }
     this.$.find(".Ldt-CreateAnnotation-Close").click(function() {
         _this.close_after_send
         ? _this.hide()
@@ -164,7 +196,6 @@
     }
     
     this.onMdpEvent("CreateAnnotation.toggle","toggle");
-    this.onMdpEvent("Slice.boundsChanged","onBoundsChanged");
     this.begin = new IriSP.Model.Time();
     this.end = this.source.getDuration();
     this.$.find("form").submit(this.functionWrapper("onSubmit"));
@@ -190,7 +221,6 @@
     if (this.minimize_annotation_widget) {
         this.player.trigger("Annotation.minimize");
     }
-    this.player.trigger("Slice.show");
 }
 
 IriSP.Widgets.CreateAnnotation.prototype.hide = function() {
@@ -200,7 +230,6 @@
         if (this.minimize_annotation_widget) {
             this.player.trigger("Annotation.maximize");
         }
-        this.player.trigger("Slice.hide");
     }
 }
 
@@ -214,13 +243,6 @@
     }
 }
 
-IriSP.Widgets.CreateAnnotation.prototype.onBoundsChanged = function(_values) {
-    this.begin = new IriSP.Model.Time(_values[0] || 0);
-    this.end = new IriSP.Model.Time(_values[1] || 0);
-    this.$.find(".Ldt-CreateAnnotation-Begin").html(this.begin.toString());
-    this.$.find(".Ldt-CreateAnnotation-End").html(this.end.toString());
-}
-
 IriSP.Widgets.CreateAnnotation.prototype.addKeyword = function(_keyword) {
     var _field = this.$.find(".Ldt-CreateAnnotation-Description"),
         _rx = IriSP.Model.regexpFromTextOrArray(_keyword),
--- a/src/widgets/MashupPlayer.js	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/widgets/MashupPlayer.js	Mon Sep 24 18:32:22 2012 +0200
@@ -9,6 +9,7 @@
 
 IriSP.Widgets.MashupPlayer.prototype.defaults = {
     aspect_ratio: 14/9,
+    split_screen: false,
     player_type: "PopcornPlayer"
 }
 
@@ -44,7 +45,9 @@
             
             for (var _i = 0; _i < _mashup.medias.length; _i++) {
                 if (_mashup.medias[_i].id !== _currentMedia.id) {
-                    _mashup.medias[_i].hide();
+                    if (!_this.split_screen) {
+                        _mashup.medias[_i].hide();
+                    }
                     _mashup.medias[_i].pause();
                 } else {
                     _mashup.medias[_i].show();
@@ -70,12 +73,12 @@
     //        console.log("changeCurrentAnnotation called, but segment hasn't changed");
         }
 
+        if (!_pauseState) {
+            _currentMedia.play();
+        }
         _currentMedia.setCurrentTime( _timecode + _timedelta);
         _mashup.trigger("timeupdate", new IriSP.Model.Time(_timecode));
 
-        if (!_pauseState) {
-            _currentMedia.play();
-        }
     }
     
     if (!this.height) {
@@ -84,27 +87,32 @@
             height: this.height
         });
     }
+    
+    var _grid = Math.ceil(Math.sqrt(_mashup.medias.length)),
+        _width = (this.split_screen ? this.width / _grid : this.width),
+        _height = (this.split_screen ? this.height / _grid : this.height)
 
-    IriSP._(_mashup.medias).each(function(_media) {
-        var _el = IriSP.jQuery('<div>');
+    IriSP._(_mashup.medias).each(function(_media, _key) {
+        var _el = IriSP.jQuery('<div class="Ldt-MashupPlayer-Media"><div class="Ldt-MashupPlayer-Subwidget"></div></div>');
         _el.css({
             position: "absolute",
-            top: 0,
-            left: 0,
-            height: _this.height,
-            width: _this.width
+            top: (_this.split_screen ? _height * Math.floor(_key / _grid) : 0),
+            left: (_this.split_screen ? _width * (_key % _grid) : 0),
+            height: _height,
+            width: _width,
+            display: (_this.split_screen ? "block" : "none")
         });
         _this.$.append(_el);
         
         _this.insertSubwidget(
-            _el,
-            {
+            _el.find(".Ldt-MashupPlayer-Subwidget"),
+            IriSP._({
                 type: _this.player_type,
                 media_id: _media.id,
-                height: _this.height,
-                width: _this.width,
+                height: _height,
+                width: _width,
                 url_transform: _this.url_transform
-            }
+            }).extend(_this.player_options)
         );
         
         _media.loadedMetadata = false;
--- a/src/widgets/MediaList.js	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/widgets/MediaList.js	Mon Sep 24 18:32:22 2012 +0200
@@ -57,9 +57,16 @@
 }
 
 IriSP.Widgets.MediaList.prototype.draw = function() {
-    this.onMediaEvent("timeupdate","onTimeupdate");
     this.$.addClass("Ldt-MediaListWidget")
     this.renderTemplate();
+    var _this = this;
+    if (typeof this.media.getMedias === "function") {
+        this.media.getMedias().forEach(function(_m) {
+            _m.on("enter", function() {
+                _this.redraw(_m);
+            });
+        })
+    }
     this.redraw();
 };
 
@@ -123,14 +130,3 @@
         this.$.find('.Ldt-MediaList-Other').hide();
     }
 };
-
-IriSP.Widgets.MediaList.prototype.onTimeupdate = function(_time) {
-    var _media = this.source.currentMedia;
-    if (_media.elementType === "mashup") {
-        _media = _media.getMediaAtTime(_time);
-    }
-    if (typeof _media !== "undefined" && _media.id !== this.lastMedia) {
-        this.lastMedia = _media.id;
-        this.redraw(_media);
-    }
-}
--- a/src/widgets/Slice.css	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/widgets/Slice.css	Mon Sep 24 18:32:22 2012 +0200
@@ -1,7 +1,7 @@
 /* Slider Widget */
 
 .Ldt-Slice {
-    border-radius: 0; border: none; padding: 0; margin: 2px 0 12px; background: #B6B8B8; height: 8px;
+    border-radius: 0; border: none; padding: 0; margin: 12px 0 12px; background: #B6B8B8; height: 8px;
 }
 
 .Ldt-Slice .ui-slider-handle {
--- a/src/widgets/Slice.js	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/widgets/Slice.js	Mon Sep 24 18:32:22 2012 +0200
@@ -10,41 +10,41 @@
 IriSP.Widgets.Slice.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Slice.prototype.defaults = {
-    start_visible : false,
-    live_update : true,
-        /* Shall the bounds change each time
-        the Annotation Widget sends an update (true)
-        or only when "show" is triggered (false) ?
-        - true is to be recommended when the widget is permanently displayed.
-        */
-    override_bounds : true
-        /* Can the Annotation Widget bounds be overriden ? */
+    show_arrow: false
 };
 
+IriSP.Widgets.Slice.prototype.template =
+    '<div class="Ldt-Slice"></div>'
+    + '{{#show_arrow}}<div class="Ldt-Slice-Arrow"></div>{{/show_arrow}}'
+
 IriSP.Widgets.Slice.prototype.draw = function() {
     
-    this.$slider = IriSP.jQuery('<div>')
-        .addClass("Ldt-Slice")
+    this.renderTemplate();
+    
+    this.$slider = this.$.find(".Ldt-Slice");
     
-    this.$.append(this.$slider);
+    if (this.show_arrow) {
+        this.insertSubwidget(this.$.find(".Ldt-Slice-Arrow"), { type: "Arrow" },"arrow");
+    }
     
     this.min = 0;
-    this.max = this.source.getDuration().valueOf();
+    this.max = this.media.duration.valueOf();
     
     var _this = this,
         _currentTime;
     
     this.$slider.slider({
         range: true,
-        values: [0, 0],
+        values: [0, this.max],
         min: 0,
         max: this.max,
         change: function(event, ui) {
-            _this.player.trigger("Arrow.updatePosition",{
-                widget:_this.type,
-                time:Math.floor((ui.values[0]+ui.values[1])/2)
-            });
-            _this.player.trigger("Slice.boundsChanged",[ui.values[0], ui.values[1]]);
+            if (_this.arrow) {
+                _this.arrow.moveToTime((ui.values[0]+ui.values[1])/2)
+            }
+            if (_this.onBoundsChanged) {
+                _this.onBoundsChanged(ui.values[0],ui.values[1]);
+            }
         },
         start: function() {
             _this.sliding = true;
@@ -54,9 +54,6 @@
             _currentTime = _this.media.getCurrentTime();
         },
         slide: function(event, ui) {
-            if (!_this.override_bounds && (ui.value < _this.min || ui.value > _this.max)) {
-                return false;
-            }
             _this.media.setCurrentTime(ui.value);
         },
         stop: function() {
@@ -64,36 +61,21 @@
             _this.media.setCurrentTime(_currentTime);
         }
     });
+    
     this.$slider.find(".ui-slider-handle:first").addClass("Ldt-Slice-left-handle");
     this.$slider.find(".ui-slider-handle:last").addClass("Ldt-Slice-right-handle");
-    if (this.start_visible) {
-        this.show();
-    } else {
-        this.hide();
-    }
-    this.onMdpEvent("Slice.show","show");
-    this.onMdpEvent("Slice.hide","hide");
-    this.onMdpEvent("Annotation.boundsChanged","storeBounds");
-    this.player.trigger("Annotation.getBounds");
+    
+    this.getWidgetAnnotations().forEach(function(_a) {
+        _a.on("enter", function() {
+            _this.$slider.slider("values",[_a.begin, _a.end]);
+        });
+    });
 };
 
 IriSP.Widgets.Slice.prototype.show = function() {
     this.$slider.show();
-    this.player.trigger("Arrow.takeover",this.type);
-    this.$slider.slider("values", [this.min, this.max]);
 }
 
 IriSP.Widgets.Slice.prototype.hide = function() {
     this.$slider.hide();
-    this.player.trigger("Arrow.release");
 }
-
-IriSP.Widgets.Slice.prototype.storeBounds = function(_values) {
-    if (!this.media.getPaused() && (this.min != _values[0] || this.max != _values[1])) {
-        this.min = _values[0];
-        this.max = _values[1];
-        if (this.live_update && !this.sliding) {
-            this.$slider.slider("values", [this.min, this.max]);
-        }
-    }
-}
\ No newline at end of file
--- a/src/widgets/Slider.css	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/widgets/Slider.css	Mon Sep 24 18:32:22 2012 +0200
@@ -12,3 +12,8 @@
     background: #747474;
 }
 
+.Ldt-Slider-Time {
+    position: absolute; top: -16px; background: #ffffc0; color: #000000; border-radius: 3px; z-index: 8;
+    font-size: 9px; width: 34px; border: 1px solid #999999; padding: 1px; margin-left: -20px;
+    display: none; text-align: center; font-weight: bold;
+}
--- a/src/widgets/Slider.js	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/widgets/Slider.js	Mon Sep 24 18:32:22 2012 +0200
@@ -15,12 +15,16 @@
                                 set to zero for fixed slider */
 };
 
+IriSP.Widgets.Slider.prototype.template =
+    '<div class="Ldt-Slider"></div><div class="Ldt-Slider-Time">00:00</div>'
+
 IriSP.Widgets.Slider.prototype.draw = function() {
     
-    this.$slider = IriSP.jQuery('<div>')
-        .addClass("Ldt-Slider");
+    this.renderTemplate();
     
-    this.$.append(this.$slider);
+    this.$time = this.$.find(".Ldt-Slider-Time");
+    
+    this.$slider = this.$.find(".Ldt-Slider");
     
     var _this = this;
     
@@ -45,13 +49,21 @@
         this.$slider.css(this.calculateSliderCss(this.minimized_height));
         this.$handle.css(this.calculateHandleCss(this.minimized_height));
         
-        this.$
-            .mouseover(this.functionWrapper("onMouseover"))
-            .mouseout(this.functionWrapper("onMouseout"));
-        
         this.maximized = false;
         this.timeoutId = false;
     }
+    
+    this.$
+        .mouseover(function() {
+            _this.$time.show();
+            _this.onMouseover();
+        })
+        .mouseout(this.functionWrapper("onMouseout"))
+        .mousemove(function(_e) {
+            var _x = _e.pageX - _this.$.offset().left,
+                _t = new IriSP.Model.Time(_this.media.duration * _x / _this.width);
+            _this.$time.text(_t.toString()).css("left",_x);
+        });
 };
 
 IriSP.Widgets.Slider.prototype.onTimeupdate = function(_time) {
@@ -73,6 +85,7 @@
 }
 
 IriSP.Widgets.Slider.prototype.onMouseout = function() {
+    this.$time.hide();
     if (this.minimize_timeout) {
         if (this.timeoutId) {
             window.clearTimeout(this.timeoutId);
--- a/src/widgets/Slideshare.js	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/widgets/Slideshare.js	Mon Sep 24 18:32:22 2012 +0200
@@ -2,12 +2,6 @@
 
 IriSP.Widgets.Slideshare = function(player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
-    this.lastSlide = {
-        presentation: "",
-        slide: 0
-    }
-    this.embedObject = null;
-    this.oembedCache = {}
 }
 
 IriSP.Widgets.Slideshare.prototype = new IriSP.Widgets.Widget();
@@ -32,99 +26,94 @@
     '<div class="Ldt-SlideShare"><h2>{{l10n.slides_}}</h2><hr /><div class="Ldt-SlideShare-Container"></div></div>';
 
 IriSP.Widgets.Slideshare.prototype.draw = function() {
-    var _hide = false;
-    if (typeof this.annotation_type !== "undefined" && this.annotation_type) {
-        var _annType = this.source.getAnnotationTypes().searchByTitle(this.annotation_type);
-        _hide = !_annType.length;
+    
+    var _embedObject = null,
+        $container,
+        _lastEmbedded = "",
+        _this = this;
+    
+    function insertSlideshare(_presentation, _slide) {
+        if (_lastEmbedded === _presentation) {
+            if (_.embedObject && typeof _embedObject.jumpTo === "function") {
+                _embedObject.jumpTo(parseInt(_slide));
+            }
+        } else {
+            _lastEmbedded = _presentation;
+            var _id = IriSP.Model.getUID(),
+                _params = {
+                    allowScriptAccess: "always"
+                }
+                _atts = {
+                    id: _id
+                },
+                _flashvars = {
+                    doc : _presentation,
+                    startSlide : _slide
+                };
+            $container.html('<div id="' + _id + '"></div>');
+            swfobject.embedSWF(
+                "http://static.slidesharecdn.com/swf/ssplayer2.swf",
+                _id,
+                _this.embed_width,
+                _this.embed_height,
+                "8",
+                null,
+                _flashvars,
+                _params,
+                _atts
+            );
+            _embedObject = document.getElementById(_id);
+        }
+        $container.show();
     }
-    if (_hide) {
+    
+    var _annotations = this.getWidgetAnnotations();
+    if (!_annotations.length) {
         this.$.hide();
     } else {
         this.renderTemplate();
-        this.$container = this.$.find(".Ldt-SlideShare-Container");
-        this.onMediaEvent("timeupdate","onTimeupdate");
-        this.onTimeupdate(0);
+        var _lastPres = "",
+            _embedObject = null,
+            _oembedCache = {},
+            _this = this;
+        $container = this.$.find(".Ldt-SlideShare-Container");
+        _annotations.forEach(function(_a) {
+            _a.on("leave", function() {
+                $container.hide();
+                _lastPres = "";
+            });
+            _a.on("enter", function() {
+                var _description = _a.description,
+                    _isurl = /^https?:\/\//.test(_description),
+                    _presentation = _description.replace(/#.*$/,''),
+                    _slidematch = _description.match(/(#|\?|&)id=(\d+)/),
+                    _slide = parseInt(_slidematch && _slidematch.length > 2 ? _slidematch[2] : 1);
+                if (_presentation !== _lastPres) {
+                    if (_isurl) {
+                        if (typeof _oembedCache[_presentation] === "undefined") {
+                            var _ajaxUrl = "http://www.slideshare.net/api/oembed/1?url="
+                                + encodeURIComponent(_presentation)
+                                + "&format=jsonp&callback=?";
+                            IriSP.jQuery.getJSON(_ajaxUrl, function(_oembedData) {
+                                var _presmatch = _oembedData.html.match(/doc=([a-z0-9\-_%]+)/i);
+                                if (_presmatch && _presmatch.length > 1) {
+                                    _oembedCache[_presentation] =  _presmatch[1];
+                                    insertSlideshare(_presmatch[1], _slide);
+                                }
+                            });
+                        } else {
+                            insertSlideshare(_oembedCache[_presentation], _slide);
+                        }
+                    } else {
+                        insertSlideshare(_presentation, _slide);
+                    }
+                }
+                if (_this.sync && _embedObject && typeof _embedObject.jumpTo === "function") {
+                    _embedObject.jumpTo(parseInt(_slide));
+                }
+                _lastPres = _presentation;
+                
+            })
+        })
     }
 }
-
-IriSP.Widgets.Slideshare.prototype.onTimeupdate = function(_time) {
-    var _list = this.getWidgetAnnotationsAtTime();
-    if (_list.length) {
-        var _description = _list[0].description,
-            _isurl = /^https?:\/\//.test(_description),
-            _presentation = _description.replace(/#.*$/,''),
-            _slidematch = _description.match(/(#|\?|&)id=(\d+)/),
-            _slide = parseInt(_slidematch && _slidematch.length > 2 ? _slidematch[2] : 1),
-            _this = this;
-        if (_presentation !== this.lastSlide.presentation) {
-            if (_isurl) {
-                if (typeof this.oembedCache[_presentation] === "undefined") {
-                    var _ajaxUrl = "http://www.slideshare.net/api/oembed/1?url="
-                        + encodeURIComponent(_presentation)
-                        + "&format=jsonp&callback=?";
-                    IriSP.jQuery.getJSON(_ajaxUrl, function(_oembedData) {
-                        var _presmatch = _oembedData.html.match(/doc=([a-z0-9\-_%]+)/i);
-                        if (_presmatch && _presmatch.length > 1) {
-                            _this.oembedCache[_presentation] =  _presmatch[1];
-                            _this.insertSlideshare(_presmatch[1], _slide);
-                        }
-                    });
-                } else {
-                    this.insertSlideshare(this.oembedCache[_presentation], _slide);
-                }
-            } else {
-                this.insertSlideshare(_presentation, _slide);
-            }
-        }
-        if (_slide != this.lastSlide.slide && this.sync && this.embedObject && typeof this.embedObject.jumpTo === "function") {
-            this.embedObject.jumpTo(parseInt(_slide));
-        }
-        this.lastSlide = {
-            presentation: _presentation,
-            slide: _slide
-        }
-    } else {
-        if (this.lastSlide.presentation) {
-            this.$container.hide();
-            this.lastSlide = {
-                presentation: "",
-                slide: 0
-            }
-        }
-    }
-}
-
-IriSP.Widgets.Slideshare.prototype.insertSlideshare = function(_presentation, _slide) {
-    if (this.lastEmbedded === _presentation) {
-        if (this.embedObject && typeof this.embedObject.jumpTo === "function") {
-            this.embedObject.jumpTo(parseInt(_slide));
-        }
-    } else {
-        this.lastEmbedded = _presentation;
-        var _id = IriSP.Model.getUID(),
-            _params = {
-                allowScriptAccess: "always"
-            }
-            _atts = {
-                id: _id
-            },
-            _flashvars = {
-                doc : _presentation,
-                startSlide : _slide
-            };
-        this.$container.html('<div id="' + _id + '"></div>');
-        swfobject.embedSWF(
-            "http://static.slidesharecdn.com/swf/ssplayer2.swf",
-            _id,
-            this.embed_width,
-            this.embed_height,
-            "8",
-            null,
-            _flashvars,
-            _params,
-            _atts
-        );
-        this.embedObject = document.getElementById(_id);
-    }
-    this.$container.show();
-}
--- a/src/widgets/Tagcloud.js	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/widgets/Tagcloud.js	Mon Sep 24 18:32:22 2012 +0200
@@ -44,35 +44,27 @@
     this.onMdpEvent("search.cleared", "onSearch");
     
     if (this.segment_annotation_type) {
-        this.onMediaEvent("timeupdate","onTimeupdate");
+        var _this = this;
+        this.source.getAnnotationsByTypeTitle(this.segment_annotation_type).forEach(function(_a) {
+            _a.on("enter", function() {
+                _this.redraw(_a.begin, _a.end);
+            })
+        });
     } else {
         this.redraw();
     }
 }
 
-IriSP.Widgets.Tagcloud.prototype.onTimeupdate = function(_time) {
-    var _list = this.source.getAnnotationsByTypeTitle(this.segment_annotation_type).filter(function(_annotation) {
-            return _annotation.begin <= _time && _annotation.end > _time;
-        });
-    if (_list.length) {
-        if (_list[0].begin !== this.begin_time || _list[0].end !== this.end_time) {
-            this.begin_time = _list[0].begin;
-            this.end_time = _list[0].end;
-            this.redraw();
-        }
-    }
-}
-
-IriSP.Widgets.Tagcloud.prototype.redraw = function() {
+IriSP.Widgets.Tagcloud.prototype.redraw = function(_from, _to) {
     var _urlRegExp = /https?:\/\/[0-9a-zA-Z\.%\/-_]+/g,
         _regexpword = /[^\s\.&;,'"!\?\d\(\)\+\[\]\\\…\-«»:\/]{3,}/g,
         _words = {},
         _this = this,
         _annotations = this.getWidgetAnnotations();
         
-    if (typeof this.begin_time !== "undefined" && typeof this.end_time !== "undefined") {
+    if (typeof _from !== "undefined" && typeof _to !== "undefined") {
         _annotations = _annotations.filter(function(_annotation) {
-            return _annotation.begin >= _this.begin_time && _annotation.end <= _this.end_time;
+            return _annotation.begin >= _from && _annotation.end <= _to;
         })
     }
     
--- a/src/widgets/Tagger.css	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/widgets/Tagger.css	Mon Sep 24 18:32:22 2012 +0200
@@ -1,3 +1,14 @@
-/*
- * 
- */
\ No newline at end of file
+
+.Ldt-Tagger {
+    border-style: solid;
+    border-width: 1px;
+    border-color: #b7b7b7;
+    padding: 1px;
+    margin: 0;
+}
+
+.Ldt-Tagger-Inner {
+    background: url(img/pinstripe.png);
+    padding: 5px;
+    margin: 0;
+}
--- a/src/widgets/Tagger.js	Fri Sep 21 11:18:57 2012 +0900
+++ b/src/widgets/Tagger.js	Mon Sep 24 18:32:22 2012 +0200
@@ -26,8 +26,8 @@
 }
 
 IriSP.Widgets.Tagger.prototype.template =
-    '<form class="Ldt-Tagger"><input class="Ldt-Tagger-Input" placeholder="{{l10n.add_a_tag}}" />'
-    + '<input class="Ldt-Tagger-Submit" type="submit" value="{{l10n.submit}}" /></form>';
+    '<div class="Ldt-Tagger"><form class="Ldt-Tagger-Inner"><input class="Ldt-Tagger-Input" placeholder="{{l10n.add_a_tag}}" />'
+    + '<input class="Ldt-Tagger-Submit" type="submit" value="{{l10n.submit}}" /></form></div>';
 
 IriSP.Widgets.Tagger.prototype.draw = function() {
     this.renderTemplate();
@@ -39,7 +39,7 @@
     });
     if (this.pause_on_write) {
         _input.keyup(function() {
-            _this.player.popcorn.pause();
+            _this.media.pause();
         });
     }
     this.$.find(".Ldt-Tagger").submit(function() {
@@ -72,7 +72,7 @@
              * Nous remplissons les données de l'annotation générée à la volée
              * ATTENTION: Si nous sommes sur un MASHUP, ces éléments doivent se référer AU MEDIA D'ORIGINE
              * */
-            var _now = 1000*_this.player.popcorn.currentTime(),
+            var _now = _this.media.getCurrentTime(),
                 _pilotAnnotation = null;
             if (_this.source.currentMedia.elementType == "mashup") {
                 /* Si c'est un mashup, on récupère l'annotation d'origine pour caler le temps */
@@ -126,8 +126,8 @@
                     _export.deSerialize(_data);
                     /* On récupère les données réimportées dans l'espace global des données */
                     _this.source.merge(_export);
-                    if (_this.pause_on_write && _this.player.popcorn.media.paused) {
-                        _this.player.popcorn.play();
+                    if (_this.pause_on_write && _this.media.getPaused()) {
+                        _this.media.play();
                     }
                     /* On force le rafraîchissement du widget AnnotationsList */
                     _this.player.trigger("AnnotationsList.refresh");
--- a/test/dailymotion.htm	Fri Sep 21 11:18:57 2012 +0900
+++ b/test/dailymotion.htm	Mon Sep 24 18:32:22 2012 +0200
@@ -35,8 +35,6 @@
         { type: "Controller" },
         { type: "Polemic" },
         { type: "Segments" },
-        { type: "Slice" },
-        { type: "Arrow" },
         { type: "Annotation" },
         { type: "CreateAnnotation" },
         { type: "Tweet" },
--- a/test/jwplayer.htm	Fri Sep 21 11:18:57 2012 +0900
+++ b/test/jwplayer.htm	Mon Sep 24 18:32:22 2012 +0200
@@ -50,11 +50,6 @@
             { type: "Controller" },
             { type: "Polemic" },
             { type: "Segments" },
-            { type: "Slice" },
-            {
-                type: "Arrow",
-                base_height: 4
-            },
             { type: "Annotation" },
             {
                 type: "CreateAnnotation",
@@ -75,9 +70,8 @@
                 type: "AnnotationsList",
                 container: "AnnotationsListContainer",
                 default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
-                ajax_url: "/pf/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}",
-                ajax_granularity : 300000,
-                default_thumbnail : "http://capsicum//pf/static/site/ldt/css/imgs/video_sequence.png"
+                //ajax_url: "/pf/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}",
+                //ajax_granularity : 300000
             },
             { type: "Mediafragment"}
         ]
--- a/test/mashup/moon.htm	Fri Sep 21 11:18:57 2012 +0900
+++ b/test/mashup/moon.htm	Mon Sep 24 18:32:22 2012 +0200
@@ -64,6 +64,7 @@
     widgets: [
         {
             type: "MashupPlayer",
+//            split_screen: true,
             url_transform: function(_url) {
                 if (_canPlayMp4 == "maybe" || _canPlayMp4 == "probably") {
                     return _url.replace(/\.webm$/i,'.mp4');
@@ -79,7 +80,6 @@
             type: "Segments",
             annotation_type: false
         },
-        { type: "Arrow" },
         {
             type: "Annotation",
             annotation_type: false
--- a/test/mashup/player-html.htm	Fri Sep 21 11:18:57 2012 +0900
+++ b/test/mashup/player-html.htm	Mon Sep 24 18:32:22 2012 +0200
@@ -98,7 +98,6 @@
             type: "Segments",
             annotation_type: false
         },
-        { type: "Arrow" },
         {
             type: "Annotation",
             annotation_type: false
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/test/mashup/player-jwpmashup.htm	Mon Sep 24 18:32:22 2012 +0200
@@ -0,0 +1,119 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Preuve de concept Mashup</title>
+        <link rel="stylesheet" type="text/css" href="style.css" />
+        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+        <script type="text/javascript" src="../metadataplayer/LdtPlayer-core.js" type="text/javascript"></script>
+    </head>
+    <body>
+        <div class="main-container">
+            <div class="header">
+                <h1>Hash Cut #</h1>
+            </div>
+            <div class="steps">
+                <h2>Créer un Hash-cut en 3 étapes&nbsp;:</h2>
+                <div class="steps-frame">
+                    <div class="step">
+                        <div class="step-icon step-1"></div>
+                        <div class="step-title">S'inscrire et<br />créer un projet</div>
+                    </div>
+                    <div class="step-separator"></div>
+                    <div class="step">
+                        <div class="step-icon step-2"></div>
+                        <div class="step-title">Découper et<br />Assembler</div>
+                    </div>
+                    <div class="step-separator"></div>
+                    <div class="step active">
+                        <div class="step-icon step-3"></div>
+                        <div class="step-title">Partager et<br />regarder&nbsp;!</div>
+                    </div>
+                </div>
+            </div>
+            <div class="colgauche">
+                <h2>Mon HashCut, avec des instances de Jw Player</h2>
+                <hr />
+                <div id="LdtPlayer"></div>
+            </div>
+            <div class="coldroite">
+                <div id="mediaList"></div>
+                <h2>Annotations</h2>
+                <hr />
+                <div id="annotationList"></div>
+            </div>
+            <div class="footer">
+                <hr />
+                <p style="text-align: right;">&copy; IRI 2012</p>
+            </div>
+        </div>
+    <script type="text/javascript">
+    
+IriSP.libFiles.defaultDir = "../libs/";
+IriSP.widgetsDir = "../metadataplayer";
+IriSP.language = 'fr';
+var _metadata = {
+    url: 'bab_files/mashup.json',
+//    url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/b2754186-a0c9-11e0-b8bd-00145ea49a02?callback=?',
+//    url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/5afd8bbe-9b75-11e1-9e5d-00145ea4a2be?callback=?'
+    format: 'ldt'
+};
+var _config = {
+    width : 630,
+    container : 'LdtPlayer',
+    default_options: {
+        metadata: _metadata
+    },
+    css : '../metadataplayer/LdtPlayer-core.css',
+    widgets: [
+        {
+            type: "MashupPlayer",
+            player_type: "JwpPlayer",
+            player_options: {
+                live: true,
+                provider: "rtmp",
+                streamer: function(_url) {
+                    var _matches = _url.match(/^[^\/]+\/\/[^\/]+\/[^\/]+\//);
+                    if (_matches) {
+                        return _matches[0];
+                    } else {
+                        return _url;
+                    }
+                }
+            },
+//            split_screen: true
+        },
+        { type: "Slider" },
+        { type: "Controller" },
+        {
+            type: "Segments",
+            annotation_type: false
+        },
+        {
+            type: "Annotation",
+            annotation_type: false
+        },
+        {
+            type: "Tagger",
+            api_endpoint: "../post-test.php",
+            tags: ["actif","amour","bonheur","captif","charité","désir","dieu","doute","famille","idéal","internationale","passif","patrie","peur","politique","président","spleen","travail"]
+        },
+        {
+            type: "MediaList",
+            container: "mediaList"
+        },
+        {
+            type: "AnnotationsList",
+            container: "annotationList",
+            //ajax_url: "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?",
+            //ajax_granularity: 30000,
+            //limit_count: 3
+        },
+        { type: "Mediafragment" }
+    ]
+};
+
+_myPlayer = new IriSP.Metadataplayer(_config);
+
+    </script>
+    </body>
+</html>
\ No newline at end of file
--- a/test/mashup/player-local-html.htm	Fri Sep 21 11:18:57 2012 +0900
+++ b/test/mashup/player-local-html.htm	Mon Sep 24 18:32:22 2012 +0200
@@ -70,7 +70,6 @@
             type: "Segments",
             annotation_type: false
         },
-        { type: "Arrow" },
         {
             type: "Annotation",
             annotation_type: false
--- a/test/mp4video.htm	Fri Sep 21 11:18:57 2012 +0900
+++ b/test/mp4video.htm	Mon Sep 24 18:32:22 2012 +0200
@@ -37,10 +37,7 @@
         { type: "Controller" },
         { type: "Polemic" },
         { type: "Segments" },
-        { type: "Slice" },
-        { type: "Arrow" },
         { type: "Annotation" },
-        { type: "CreateAnnotation" },
         { type: "Tweet" },
         { type: "Tagcloud" },
         {
--- a/test/oggvideo.htm	Fri Sep 21 11:18:57 2012 +0900
+++ b/test/oggvideo.htm	Mon Sep 24 18:32:22 2012 +0200
@@ -34,10 +34,7 @@
         { type: "Controller" },
         { type: "Polemic" },
         { type: "Segments" },
-        { type: "Slice" },
-        { type: "Arrow" },
         { type: "Annotation" },
-        { type: "CreateAnnotation" },
         { type: "Tweet" },
         { type: "Tagcloud" },
         {
--- a/test/renkan.htm	Fri Sep 21 11:18:57 2012 +0900
+++ b/test/renkan.htm	Mon Sep 24 18:32:22 2012 +0200
@@ -63,11 +63,6 @@
         { type: "Controller" },
         { type: "Polemic" },
         { type: "Segments" },
-        { type: "Slice" },
-        {
-            type: "Arrow",
-            base_height: 4
-        },
         { type: "Annotation" },
         { type: "Tweet" },
         {
--- a/test/slideshare.htm	Fri Sep 21 11:18:57 2012 +0900
+++ b/test/slideshare.htm	Mon Sep 24 18:32:22 2012 +0200
@@ -56,13 +56,10 @@
         { type: "Controller" },
         { type: "Polemic" },
         { type: "Segments" },
-        { type: "Slice" },
-        { type: "Arrow" },
         { type: "Annotation" },
         {
-            type: "CreateAnnotation",
-            api_endpoint_template: "/pf/ldtplatform/api/ldt/annotations/{{id}}.json",
-            creator_name: "Metadataplayer"
+            type: "Segments",
+            annotation_type: "Slide"
         },
         { type: "Tweet" },
         {
--- a/test/vimeo.htm	Fri Sep 21 11:18:57 2012 +0900
+++ b/test/vimeo.htm	Mon Sep 24 18:32:22 2012 +0200
@@ -34,8 +34,6 @@
         { type: "Controller" },
         { type: "Polemic" },
         { type: "Segments" },
-        { type: "Slice" },
-        { type: "Arrow" },
         { type: "Annotation" },
         { type: "CreateAnnotation" },
         { type: "Tweet" },
--- a/test/youtube.htm	Fri Sep 21 11:18:57 2012 +0900
+++ b/test/youtube.htm	Mon Sep 24 18:32:22 2012 +0200
@@ -34,8 +34,6 @@
         { type: "Controller" },
         { type: "Polemic" },
         { type: "Segments" },
-        { type: "Slice" },
-        { type: "Arrow" },
         { type: "Annotation" },
         { type: "CreateAnnotation" },
         { type: "Tweet" },