Started work on CreateAnnotation and Mediafragment new-model
authorveltr
Thu, 26 Apr 2012 19:18:57 +0200
branchnew-model
changeset 880 4c7b33bf2795
parent 876 03967b6ada7c
child 881 f11b234497f7
Started work on CreateAnnotation and Mediafragment
src/js/model.js
src/js/serializers/PlatformSerializer.js
src/widgets/Annotation.css
src/widgets/Annotation.js
src/widgets/Arrow.js
src/widgets/Controller.js
src/widgets/CreateAnnotation.css
src/widgets/CreateAnnotation.js
src/widgets/Mediafragment.js
src/widgets/Polemic.js
src/widgets/Slice.css
src/widgets/Slice.js
src/widgets/Slider.js
src/widgets/Tagcloud.css
src/widgets/Tagcloud.js
src/widgets/Tweet.css
src/widgets/Tweet.js
src/widgets/img/slice-handles.png
src/widgets/img/widget-control.png
test/integration/polemic.htm
--- a/src/js/model.js	Tue Apr 24 20:25:40 2012 +0200
+++ b/src/js/model.js	Thu Apr 26 19:18:57 2012 +0200
@@ -73,7 +73,7 @@
 IriSP.Model.List.prototype = new Array();
 
 IriSP.Model.List.prototype.getElement = function(_id) {
-    var _index = (IriSP._(this.idIndex).indexOf(_id));
+    var _index = (IriSP._(this.idIndex).indexOf(this.source.getNamespaced(_id).fullName));
     if (_index !== -1) {
         return this[_index];
     }
@@ -538,7 +538,7 @@
 }
 
 IriSP.Model.Source.prototype.getElement = function(_elId) {
-    return this.directory.getElement(_elId);
+    return this.directory.getElement(_this.getNamespaced(_elId).fullname);
 }
 
 IriSP.Model.Source.prototype.setCurrentMediaId = function(_idRef) {
--- a/src/js/serializers/PlatformSerializer.js	Tue Apr 24 20:25:40 2012 +0200
+++ b/src/js/serializers/PlatformSerializer.js	Thu Apr 26 19:18:57 2012 +0200
@@ -97,7 +97,9 @@
                 _res.setEnd(_data.end);
                 _res.creator = _data.meta["dc:creator"] || "";
                 _res.project = _data.meta.project || "";
-                _res.source = _data.meta["dc:source"] || {};
+                if (typeof _data.meta["dc:source"] !== "undefined" && typeof _data.meta["dc:source"].content !== "undefined") {
+                    _res.source = JSON.parse(_data.meta["dc:source"].content);
+                }
                 return _res;
             },
             serializer : function(_data, _source) {
--- a/src/widgets/Annotation.css	Tue Apr 24 20:25:40 2012 +0200
+++ b/src/widgets/Annotation.css	Thu Apr 26 19:18:57 2012 +0200
@@ -3,7 +3,8 @@
     border-width: 1px;
     border-color: #b7b7b7;
     padding: 0 1px 1px;
-    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
+    margin: 0;
+    font-family: Helvetica, Arial, sans-serif;
 }
 
 .Ldt-Annotation-Widget.Ldt-Annotation-ShowTop {
@@ -14,11 +15,12 @@
 .Ldt-Annotation-Inner {
     background: url(img/pinstripe.png);
     padding: 5px;
+    margin: 0;
 }
 
 .Ldt-Annotation-Inner h3 {
     margin: 5px 0;
-    font-size: 13px;
+    font-size: 14px;
 }
 
 .Ldt-Annotation-Title {
@@ -30,7 +32,7 @@
 }
 
 .Ldt-Annotation-Inner p {
-    margin: 5px 0; font-size: 14px;
+    margin: 5px 0; font-size: 12px;
 }
 
 .Ldt-Annotation-ShareIcons {
@@ -38,7 +40,7 @@
 }
 
 .Ldt-Annotation-Share {
-    display: inline-block; width: 24px; height: 24px; margin: 2px; background: url(img/socialbuttons.png);
+    display: inline-block; width: 24px; height: 24px; margin: 2px 0 0 2px; background: url(img/socialbuttons.png);
 }
 
 .Ldt-Annotation-Twitter {
@@ -65,8 +67,16 @@
     background-position: -48px -24px;
 }
 
+.Ldt-Annotation-Tags-Block {
+    font-size: 12px;
+}
+
+.Ldt-Annotation-NoTags {
+    display: none;
+}
+
 ul.Ldt-Annotation-Tags {
-    font-size: 12px; list-style: none; padding: 0; margin: 5px 0;
+    list-style: none; padding: 0; margin: 5px 0;
 }
 
 .Ldt-Annotation-Tags li {
@@ -76,3 +86,12 @@
 .Ldt-Annotation-TagLabel {
     font-weight: bold;
 }
+
+.Ldt-Annotation-Empty .Ldt-Annotation-HiddenWhenEmpty {
+    display: none;
+}
+
+.Ldt-Annotation-Minimized .Ldt-Annotation-HiddenWhenMinimized {
+    display: none;
+}
+
--- a/src/widgets/Annotation.js	Tue Apr 24 20:25:40 2012 +0200
+++ b/src/widgets/Annotation.js	Thu Apr 26 19:18:57 2012 +0200
@@ -1,4 +1,4 @@
-// TODO: Open share links in a small window
+// TODO: Open share links in a small window - Migrate Timeupdate functions to Extract
 
 IriSP.Widgets.Annotation = function(player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
@@ -24,7 +24,14 @@
 
 IriSP.Widgets.Annotation.prototype.template =
     '<div class="Ldt-Annotation-Widget {{#show_top_border}}Ldt-Annotation-ShowTop{{/show_top_border}}">'
-    + '<div class="Ldt-Annotation-Inner"></div></div>';
+    + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty"><div class="Ldt-Annotation-ShareIcons Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty">'
+    + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Fb" title="{{l10n.share_on}} Facebook"></a>'
+    + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Twitter" title="{{l10n.share_on}} Twitter"></a>'
+    + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Gplus" title="{{l10n.share_on}} Google+"></a>'
+    + '</div><h3 class="Ldt-Annotation-HiddenWhenEmpty"><span class="Ldt-Annotation-Title"></span> <span class="Ldt-Annotation-Time">'
+    + '( <span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span> )</span></h3>'
+    + '<p class="Ldt-Annotation-Description Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></p>'
+    + '<div class="Ldt-Annotation-Tags-Block Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-NoTags">{{l10n.tags}}<ul class="Ldt-Annotation-Tags"></ul></div></div></div>';
 
 IriSP.Widgets.Annotation.prototype.defaults = {
     annotation_type : "chap",
@@ -35,6 +42,10 @@
 IriSP.Widgets.Annotation.prototype.draw = function() {
     this.renderTemplate();
     this.bindPopcorn("timeupdate","onTimeupdate");
+    this.bindPopcorn("IriSP.Annotation.hide","hide");
+    this.bindPopcorn("IriSP.Annotation.show","show");
+    this.bindPopcorn("IriSP.Annotation.minimize","minimize");
+    this.bindPopcorn("IriSP.Annotation.maximize","maximize");
     this.onTimeupdate();
 }
 
@@ -46,38 +57,56 @@
     if (_list.length) {
         if (_list[0].id !== this.lastAnnotation) {
             this.drawAnnotation(_list[0]);
+            this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",[ _list[0].begin.valueOf(), _list[0].end.valueOf() ]);
         }
+        this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: ( _list[0].begin + _list[0].end ) / 2});
     }
     else {
-        this.$.find('.Ldt-Annotation-Inner').html('');
+        this.lastAnnotation = false;
+        this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Empty");
+        this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time});
+        this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",[ _time, _time ]);
     }
 }
 
 IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) {
     this.lastAnnotation = _annotation.id;
-    console.log(_annotation);
     var _url = (typeof _annotation.url !== "undefined" 
             ? _annotation.url
-            : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.namespacedId.name)),
-        _text = this.l10n.watching + _annotation.title + (this.site_name ? this.l10n.on_site + this.site_name : ''),
-        _tmpl = '<div class="Ldt-Annotation-ShareIcons">'
-            + '<a href="{{fb_url}}" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Fb" title="{{l10n.share_on}} Facebook"></a>'
-            + '<a href="{{twitter_url}}" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Twitter" title="{{l10n.share_on}} Twitter"></a>'
-            + '<a href="{{gplus_url}}" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Gplus" title="{{l10n.share_on}} Google+"></a>'
-            + '</div>'
-            + '<h3><span class="Ldt-Annotation-Title">{{title}}</span> ( <span class="Ldt-Annotation-Time">{{begin}} - {{end}}</span> )</h3>'
-            + '<p class="Ldt-Annotation-Description">{{description}}</p>'
-            + '{{#tags.length}}<ul class="Ldt-Annotation-Tags"><li class="Ldt-Annotation-TagLabel">{{l10n.tags}}</li>{{#tags}}<li>{{.}}</li>{{/tags}}</ul>{{/tags.length}}',
-        _attr = {
-            title: _annotation.title,
-            description: _annotation.description,
-            begin: _annotation.begin.toString(),
-            end: _annotation.end.toString(),
-            tags: _annotation.getTagTexts(),
-            l10n: this.l10n
-        }
-    _attr.fb_url = "http://www.facebook.com/share.php?" + IriSP.jQuery.param({ u: _url, t: _text });
-    _attr.twitter_url = "https://twitter.com/intent/tweet?" + IriSP.jQuery.param({ url: _url, text: _text });
-    _attr.gplus_url = "https://plusone.google.com/_/+1/confirm?" + IriSP.jQuery.param({ url: _url, title: _text });
-    this.$.find('.Ldt-Annotation-Inner').html(Mustache.to_html(_tmpl, _attr));
+            : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.namespacedId.name));
+    var _text = this.l10n.watching + _annotation.title + (this.site_name ? this.l10n.on_site + this.site_name : '');
+    var _tags = _annotation.getTagTexts();
+    if (_tags.length) {
+        var _html = IriSP._(_tags).map(function(_tag) {
+            return '<li class="Ldt-Annotation-TagLabel">' + _tag + '</li>';
+        }).join("");
+        this.$.find(".Ldt-Annotation-Tags").html(_html);
+        this.$.find(".Ldt-Annotation-Tags-Block").removeClass("Ldt-Annotation-NoTags");
+    } else {
+        this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-NoTags");
+    }
+    this.$.find(".Ldt-Annotation-Title").html(_annotation.title);
+    this.$.find(".Ldt-Annotation-Description").html(_annotation.description);
+    this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString());
+    this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString());
+    this.$.find(".Ldt-Annotation-Fb").attr("href", "http://www.facebook.com/share.php?" + IriSP.jQuery.param({ u: _url, t: _text }));
+    this.$.find(".Ldt-Annotation-Twitter").attr("href", "https://twitter.com/intent/tweet?" + IriSP.jQuery.param({ url: _url, text: _text }));
+    this.$.find(".Ldt-Annotation-Gplus").attr("href", "https://plusone.google.com/_/+1/confirm?" + IriSP.jQuery.param({ url: _url, title: _text }));
+    this.$.find(".Ldt-Annotation-Inner").removeClass("Ldt-Annotation-Empty");
 }
+
+IriSP.Widgets.Annotation.prototype.hide = function() {
+    this.$.slideUp();
+}
+
+IriSP.Widgets.Annotation.prototype.show = function() {
+    this.$.slideDown();
+}
+
+IriSP.Widgets.Annotation.prototype.minimize = function() {
+    this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-Minimized");
+}
+
+IriSP.Widgets.Annotation.prototype.maximize = function() {
+    this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-Minimized");
+}
\ No newline at end of file
--- a/src/widgets/Arrow.js	Tue Apr 24 20:25:40 2012 +0200
+++ b/src/widgets/Arrow.js	Thu Apr 26 19:18:57 2012 +0200
@@ -1,5 +1,6 @@
 IriSP.Widgets.Arrow = function(player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
+    this.current_pilot_widget = this.pilot_widget
 };
 
 IriSP.Widgets.Arrow.prototype = new IriSP.Widgets.Widget();
@@ -7,17 +8,14 @@
 IriSP.Widgets.Arrow.prototype.defaults = {
     arrow_height : 16,
     arrow_width : 24,
-    base_height : 2,
+    base_height : 0,
     base_curve : 0,
     fill_url: IriSP.widgetsDir + '/img/pinstripe.png',
-    fill_color: "#ffffff",
-    inner_stroke_color: "#ffffff",
-    inner_stroke_width: 4,
-    outer_stroke_color: "#B6B8B8",
-    outer_stroke_width: 1,
+    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,
-    follow_current_time: false,
-    annotation_type: "chap"
+    pilot_widget: "Annotation"
 }
 
 IriSP.Widgets.Arrow.prototype.draw = function() {
@@ -25,20 +23,16 @@
     this.$.addClass("Ldt-Arrow").css("height", this.height + "px");
     this.paper = new Raphael(this.container, this.width, this.height );
     window.myArrow = this;
-    this.innerArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height);
-    this.outerArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height);
-    this.innerArrow.attr({
-        stroke: this.inner_stroke_color,
-        "stroke-width": this.inner_stroke_width,
+    this.svgArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height);
+    this.svgArrow.attr({
+        stroke: this.stroke_color,
+        "stroke-width": this.stroke_width,
         fill: this.fill_url ? ( 'url(' + this.fill_url + ')' ) : this.fill_color
     });
-    this.outerArrow.attr({
-        stroke: this.outer_stroke_color,
-        "stroke-width": this.outer_stroke_width,
-        fill: "none"
-    });
     this.moveTo(0);
-    this.bindPopcorn("timeupdate","onTimeupdate");
+    this.bindPopcorn("IriSP.Arrow.updatePosition","onUpdatePosition");
+    this.bindPopcorn("IriSP.Arrow.takeover","onTakeover");
+    this.bindPopcorn("IriSP.Arrow.release","onRelease");
 }
 
 IriSP.Widgets.Arrow.prototype.drawAt = function(_x) {
@@ -56,10 +50,7 @@
         + 'Q' + this.width + ',' + this.arrow_height
         + ' ' + this.width + ',' + Math.min( this.height, this.arrow_height + this.base_curve)
         + 'L' + this.width + ',' + this.height;
-    this.innerArrow.attr({
-        path: _d
-    });
-    this.outerArrow.attr({
+    this.svgArrow.attr({
         path: _d
     });
 }
@@ -92,17 +83,20 @@
     this.drawAt(this.currentX);
 }
 
-IriSP.Widgets.Arrow.prototype.onTimeupdate = function() {
-    var _list = [],
-        _time = Math.floor(this.player.popcorn.currentTime() * 1000);
-    if (!this.follow_current_time) {
-        _list = this.getWidgetAnnotations().filter(function(_annotation) {
-            return _annotation.begin <= _time && _annotation.end > _time;
-        });
+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());
+        }
     }
-    if (_list.length) {
-        _time = ( _list[0].begin + _list[0].end ) / 2;
-    }
-    var _x = this.width * _time / this.source.getDuration();
-    this.moveTo(_x);
+}
+
+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/Controller.js	Tue Apr 24 20:25:40 2012 +0200
+++ b/src/widgets/Controller.js	Thu Apr 26 19:18:57 2012 +0200
@@ -122,7 +122,7 @@
     // Allow Volume Cursor Dragging
     this.$volumeBar.slider({
         slide: function(event, ui) {
-            _this.$volumeBar.attr("title",this.l10n.volume+': ' + ui.value + '%');
+            _this.$volumeBar.attr("title",_this.l10n.volume+': ' + ui.value + '%');
             _this.player.popcorn.volume(ui.value / 100);
         },
         stop: this.functionWrapper("volumeUpdater")
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/CreateAnnotation.css	Thu Apr 26 19:18:57 2012 +0200
@@ -0,0 +1,4 @@
+/*
+ * 
+ */
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/CreateAnnotation.js	Thu Apr 26 19:18:57 2012 +0200
@@ -0,0 +1,129 @@
+IriSP.Widgets.CreateAnnotation = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+    this.lastAnnotation = false;
+};
+
+IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.CreateAnnotation.prototype.defaults = {
+    single_time_mode : false,
+    
+}
+
+IriSP.Widgets.CreateAnnotation.prototype.messages = {
+    "en": {
+        "from_time" : "from",
+        "to_time" : "to",
+        "submit": "Submit",
+        "add_keywords": "Add keywords",
+        "add_polemic_keywords": "Add polemic keywords",
+        "your_name": "Your name",
+        "type_description": "Type the full description of your annotation here.",
+        "wait_while_processing": "Please wait while your request is being processed...",
+        "error_while_contacting": "An error happened while contacting the server. Your annotation has not been saved.",
+        "empty_annotation": "Your annotation is empty. Please write something before submitting.",
+        "annotation_saved": "Thank you, your annotation has been saved.",
+        "share_annotation": "Would you like to share it on social networks ?",
+        "share_on": "Share on",
+        "more_tags": "More tags",
+        "cancel": "Cancel"
+    },
+    "fr": {
+        "from_time" : "from",
+        "to_time" : "à",
+        "submit": "Envoyer",
+        "add_keywords": "Ajouter des mots-clés",
+        "add_polemic_keywords": "Ajouter des mots-clés polémiques",
+        "your_name": "Votre nom",
+        "type_description": "Rédigez le contenu de votre annotation ici.",
+        "wait_while_processing": "Veuillez patienter pendant le traitement de votre requête...",
+        "error_while_contacting": "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée",
+        "empty_annotation": "Votre annotation est vide. Merci de rédiger un texte avant de l'envoyer.",
+        "annotation_saved": "Merci, votre annotation a été enregistrée.",
+        "share_annotation": "Souhaitez-vous la partager sur les réseaux sociaux ?",
+        "share_on": "Partager sur",
+        "more_tags": "Plus de mots-clés",
+        "cancel": "Cancel"
+    }
+}
+
+IriSP.Widgets.CreateAnnotation.prototype.template =
+    '<div class="Ldt-CreateAnnotation">'
+    + '    <div class="Ldt-CreateAnnotation-Inner">'
+    
+    
+    + '    </div>'
+    + '</div>'
+    
+/*    
+    + '        <div class="Ldt-CreateAnnotation-Screen Ldt-createAnnotation-startScreen">'
+    + '            <div style="margin-bottom: 7px; overflow: auto;">'
+    + '                <div class="Ldt-createAnnotation-Title"></div>'
+    + '                <div class="Ldt-createAnnotation-TimeFrame"></div>'
+    + '                {{^cinecast_version}} <div class="Ldt-createAnnotation-Minimize Ldt-TraceMe" title="Cancel"></div>'
+    + '                {{/cinecast_version}}'
+    + '            </div>'
+    + '            <div class="Ldt-createAnnotation-Container">'
+    + '                {{#show_from_field}}'
+    + '                <label>{{l10n.your_name}}&nbsp;: </label><input class="Ldt-createAnnotation-userName Ldt-TraceMe" value="{{user_name}}" />'
+    + '                {{/show_from_field}}'
+    + '                <textarea class="Ldt-createAnnotation-Description Ldt-TraceMe"></textarea>'
+    + '                <div class="Ldt-createAnnotation-userAvatar Ldt-TraceMe">'
+    + '                    {{^user_avatar}} <img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png"></img>'
+    + '                    {{/user_avatar}}'
+    + '                    {{#user_avatar}} <img src="{{ user_avatar }}"></img>'
+    + '                    {{/user_avatar}}'
+    + '                </div>'
+    + '                <div class="Ldt-createAnnotation-profileArrow"></div>'
+    + '            </div>'
+    + '            <button class="Ldt-createAnnotation-submitButton Ldt-TraceMe">{{l10n.submit}}</button>'
+    + '            {{#tags.length}}'
+    + '            <div class="Ldt-createAnnotation-btnblock Ldt-createAnnotation-keywords">'
+    + '                <label>{{l10n.add_keywords}} :</label>'
+    + '                <ul class="Ldt-floatList">'
+    + '                {{#tags}}'
+    + '                    <li><button class="Ldt-createAnnotation-keyword-button Ldt-TraceMe" tag-id="{{id}}">{{meta.description}}</button></li>'
+    + '                {{/tags}}'
+    + '                </ul>'
+    + '            </div>'
+    + '            {{#random_tags}}'
+    + '                <button class="Ldt-createAnnotation-moar-keywordz">{{l10n.more_tags}}</button>'
+    + '            {{/random_tags}}'
+    + '            {{/tags.length}}'
+    + '            {{#polemic_mode}}'
+    + '            {{#polemics.length}}'
+    + '            <div class="Ldt-createAnnotation-btnblock Ldt-createAnnotation-polemics">'
+    + '                <label>{{l10n.add_polemic_keywords}} :</label>'
+    + '                <ul class="Ldt-floatList">'
+    + '                {{#polemics}}'
+    + '                    <li><button class="Ldt-createAnnotation-polemic-{{className}} Ldt-createAnnotation-polemic-button Ldt-TraceMe">{{keyword}}</button></li>'
+    + '                {{/polemics}}'
+    + '                </ul>'
+    + '            </div>'
+    + '            {{/polemics.length}}'
+    + '            {{/polemic_mode}}'
+    + '        </div>'
+    + '        <div class="Ldt-createAnnotation-screen Ldt-createAnnotation-waitScreen" style="display: none; text-align: center">'
+    + '            <div class="Ldt-createAnnotation-spinner"></div>'
+    + '            {{l10n.wait_while_processed}}'
+    + '        </div>'
+    + '        <div class="Ldt-createAnnotation-screen Ldt-createAnnotation-errorScreen" style="display: none; text-align: center">'
+    + '            <div class="Ldt-createAnnotation-Minimize" title="Hide"></div>'
+    + '            {{l10n.error_while_contacting}}'
+    + '        </div>'
+    + '        <div class="Ldt-createAnnotation-screen Ldt-createAnnotation-endScreen" style="display: none">'
+    + '            <div class="Ldt-createAnnotation-Minimize" title="Hide"></div>'
+    + '            {{l10n.annotation_saved}}'
+    + '            <br>'
+    + '            {{^disable_share}}'
+    + '            {{l10n.share_annotation}}'
+    + '            <div style="margin-top: 12px; text-align: center;">'
+    + '                <a target="_blank" class="Ldt-createAnnotation-endScreen-TweetLink Ldt-TraceMe"></a>'
+    + '                <a target="_blank" class="Ldt-createAnnotation-endScreen-FbLink Ldt-TraceMe"></a>'
+    + '                <a target="_blank" class="Ldt-createAnnotation-endScreen-GplusLink Ldt-TraceMe"></a>'
+    + '            </div>'
+    + '            {{/disable_share}}'
+    + '        </div>'
+    + '        <div class="Ldt-floatClear"></div>'
+*/
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/Mediafragment.js	Thu Apr 26 19:18:57 2012 +0200
@@ -0,0 +1,44 @@
+IriSP.Widgets.Mediafragment = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+    this.last_hash = "";
+    window.onhashchange = this.functionWrapper("goToHash");
+    this.player.bindPopcorn("pause","setHashToTime");
+}
+
+IriSP.Widgets.Mediafragment.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.Mediafragment.prototype.draw = function() {
+    this.goToHash();
+}
+
+IriSP.Widgets.Mediafragment.prototype.goToHash = function() {
+    if (document.location.hash !== this.last_hash) {
+        this.last_hash = document.location.hash;
+        var _tab = this.last_hash.split("=");
+        if (_tab[0] === '#id') {
+            var _annotation = this.source.getElement(_tab[1]);
+            if (typeof _annotation !== "undefined") {
+                this.player.popcorn.currentTime(_annotation.begin.getSeconds());
+            }
+        }
+        if (_tab[0] === '#t') {
+            this.player.popcorn.currentTime(_tab[1]);
+        }
+    }
+}
+
+IriSP.Widgets.Mediafragment.prototype.setHashToAnnotation = function(_annotationId) {
+    this.last_hash = '#id=' + this.source.unNamespace(_annotationId);
+    
+}
+
+IriSP.Widgets.Mediafragment.prototype.setHashToTime = function() {
+    this.last_hash = '#t=' + this.source.popcorn.currentTime();
+}
+
+IriSP.Widgets.Mediafragment.prototype.setHash = function(_hash) {
+    if (this.last_hash !== _hash) {
+        this.last_hash = _hash;
+        document.location.hash = _hash;
+    }
+}
\ No newline at end of file
--- a/src/widgets/Polemic.js	Tue Apr 24 20:25:40 2012 +0200
+++ b/src/widgets/Polemic.js	Thu Apr 26 19:18:57 2012 +0200
@@ -10,7 +10,7 @@
     annotation_type : "tweet",
     defaultcolor : "#585858",
     foundcolor : "#fc00ff",
-    tags : [
+    polemics : [
         {
             "keywords" : [ "++" ],
             "description" : "positif",
@@ -101,12 +101,12 @@
                 polemicStacks : []
             }
             
-        for (var _j = 0; _j < this.tags.length; _j++) {
-            var _polemic = _res.annotations.searchByDescription(this.tags[_j].keywords);
+        for (var _j = 0; _j < this.polemics.length; _j++) {
+            var _polemic = _res.annotations.searchByDescription(this.polemics[_j].keywords);
             _count += _polemic.length;
             _res.polemicStacks.push(_polemic);
         }
-        for (var _j = 0; _j < this.tags.length; _j++) {
+        for (var _j = 0; _j < this.polemics.length; _j++) {
             _res.annotations.removeElements(_res.polemicStacks[_j]);
         }
         _count += _res.annotations.length;
@@ -156,13 +156,13 @@
         var _y = _this.height;
         _slice.annotations.forEach(function(_annotation) {
             _y -= _this.element_height;
-            displayElement(_x, _y, _this.defaultcolor, _annotation.namespacedId.name, _annotation.title);
+            displayElement(_x, _y, _this.defaultcolor, _annotation.id, _annotation.title);
         });
         IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) {
-            var _color = _this.tags[_j].color;
+            var _color = _this.polemics[_j].color;
             _annotations.forEach(function(_annotation) {
                 _y -= _this.element_height;
-                displayElement(_x, _y, _color, _annotation.namespacedId.name, _annotation.title);
+                displayElement(_x, _y, _color, _annotation.id, _annotation.title);
             });
         });
         _x += _this.element_width;
@@ -183,10 +183,11 @@
         })
         .mouseout(function() {
             _this.tooltip.hide();
+        })
+        .click(function() {
+            _this.player.popcorn.trigger("IriSP.Tweet.show", IriSP.jQuery(this).attr("annotation-id"));
         });
     
-    //TODO: Display Tweet in Tweet Widget on click
-    
     this.$zone.click(function(_e) {
         var _x = _e.pageX - _this.$zone.offset().left;
         _this.player.popcorn.currentTime(_this.source.getDuration().getSeconds() * _x / _this.width);
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/Slice.css	Thu Apr 26 19:18:57 2012 +0200
@@ -0,0 +1,22 @@
+/* Slider Widget */
+
+.Ldt-Slice {
+    border-radius: 0; border: none; padding: 0; margin: 2px 0 12px; background: #B6B8B8; height: 8px;
+}
+
+.Ldt-Slice .ui-slider-handle {
+    width: 6px; height: 20px; top: 0; border: none; margin: 0; padding: 0; background: url(img/slice-handles.png);
+}
+
+.ui-slider-handle.Ldt-Slice-left-handle {
+    margin-left: -6px;
+}
+
+.ui-slider-handle.Ldt-Slice-right-handle {
+    margin-left: 0; background-position: -6px 0;
+}
+
+.Ldt-Slice .ui-slider-range {
+    background: url(img/pinstripe.png);
+}
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/Slice.js	Thu Apr 26 19:18:57 2012 +0200
@@ -0,0 +1,66 @@
+/*
+ The Slider Widget shows time position and allows seek
+ */
+
+IriSP.Widgets.Slice = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.Slice.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.Slice.prototype.defaults = {
+    start_visible : false
+};
+
+IriSP.Widgets.Slice.prototype.draw = function() {
+    
+    this.$slider = IriSP.jQuery('<div>')
+        .addClass("Ldt-Slice")
+    
+    this.$.append(this.$slider);
+    
+    this.min = 0;
+    this.max = this.source.getDuration().getSeconds();
+    
+    var _this = this;
+    
+    this.$slider.slider({
+        range: true,
+        values: [0, 0],
+        min: 0,
+        max: this.max,
+        change: function(event, ui) {
+            _this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{
+                widget:_this.type,
+                time:Math.floor((ui.values[0]+ui.values[1])*500)
+            });
+            _this.player.popcorn.trigger("IriSP.Slice.valuesChanged",[ui.values[0]*1000, ui.values[1]*1000]);
+        }
+    });
+    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.bindPopcorn("IriSP.Slice.show","show");
+    this.bindPopcorn("IriSP.Slice.hide","hide");
+    this.bindPopcorn("IriSP.Annotation.boundsChanged","storeBounds")
+};
+
+IriSP.Widgets.Slice.prototype.show = function() {
+    this.$slider.show();
+    this.player.popcorn.trigger("IriSP.Arrow.takeover",this.type);
+    this.$slider.slider("values", [this.min, this.max]);
+}
+
+IriSP.Widgets.Slice.prototype.hide = function() {
+    this.$slider.hide();
+    this.player.popcorn.trigger("IriSP.Arrow.release");
+}
+
+IriSP.Widgets.Slice.prototype.storeBounds = function(_values) {
+    this.min = Math.floor(_values[0]/1000);
+    this.max = Math.floor(_values[1]/1000);
+}
\ No newline at end of file
--- a/src/widgets/Slider.js	Tue Apr 24 20:25:40 2012 +0200
+++ b/src/widgets/Slider.js	Thu Apr 26 19:18:57 2012 +0200
@@ -50,7 +50,9 @@
 };
 
 IriSP.Widgets.Slider.prototype.onTimeupdate = function() {
-    this.$slider.slider("value",this.player.popcorn.currentTime());
+    var _time = this.player.popcorn.currentTime();
+    this.$slider.slider("value",_time);
+    this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: 1000 * _time});
 }
 
 IriSP.Widgets.Slider.prototype.onMouseover = function() {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/Tagcloud.css	Thu Apr 26 19:18:57 2012 +0200
@@ -0,0 +1,32 @@
+/*
+ * 
+ */
+.Ldt-Tagcloud-Container {
+    font-family: "Open Sans", Arial, Helvetica, sans-serif;
+    border: 1px solid #b7b7b7;
+    padding: 1px;
+    margin: 0;
+}
+
+ul.Ldt-Tagcloud-List {
+    background: url(img/pinstripe.png);
+    padding: 5px;
+    margin: 0;
+    list-style: none;
+    text-align: center;
+}
+
+li.Ldt-Tagcloud-item {
+    display: inline-block;
+    margin: 2px;
+    cursor: pointer;
+}
+
+li.Ldt-Tagcloud-item:hover {
+    color: #0099ff;
+}
+
+.Ldt-Tagcloud-active {
+    color: #c000c0;
+    padding: 0; margin: 0;
+}
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/Tagcloud.js	Thu Apr 26 19:18:57 2012 +0200
@@ -0,0 +1,101 @@
+IriSP.Widgets.Tagcloud = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+    this.stopwords = IriSP._.uniq(IriSP._.extend([], this.custom_stopwords, this.stopword_lists[this.stopword_language]));
+}
+
+IriSP.Widgets.Tagcloud.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.Tagcloud.prototype.template =
+    '<div class="Ldt-Tagcloud-Container"><ul class="Ldt-Tagcloud-List">'
+    + '{{#words}}<li class="Ldt-Tagcloud-item" content="{{word}}" style="font-size: {{size}}px">{{word}}</li>{{/words}}'
+    + '</ul></div>';
+
+IriSP.Widgets.Tagcloud.prototype.defaults = {
+    include_titles: true,
+    include_descriptions: true,
+    tag_count: 30,
+    stopword_language: "fr",
+    custom_stopwords: [],
+    exclude_pattern: false,
+    annotation_type: false,
+    min_font_size: 10,
+    max_font_size: 26
+}
+
+IriSP.Widgets.Tagcloud.prototype.stopword_lists = {
+    "fr" : [
+        'aussi', 'avec', 'aux', 'bien', 'car', 'cette', 'comme', 'dans', 'des', 'donc', 'dont', 'elle', 'encore', 'entre', 'est',
+        'être', 'eux', 'faire', 'fait', 'http', 'ici', 'ils', 'les', 'leur', 'leurs', 'mais', 'mes', 'même', 'mon', 'notre',
+        'non', 'nos', 'nous', 'ont', 'par', 'pas', 'peu', 'peut', 'plus', 'pour', 'quand', 'que', 'qui', 'quoi', 'sans',
+        'ses' ,'son', 'sont', 'sur', 'tes', 'très', 'the', 'ton', 'tous', 'tout', 'une', 'votre', 'vos', 'vous'
+    ],
+    "en" : [
+        'about', 'again', 'are', 'and', 'because', 'being', 'but', 'can', 'done', 'have', 'for', 'from',
+        'get', 'here', 'http', 'like', 'more', 'one', 'our', 'she', 'that', 'the', 'their', 'then', 'there',
+        'they', 'this', 'very', 'what', 'when', 'where', 'who', 'why', 'will', 'with', 'www', 'you', 'your'
+    ]
+}
+
+IriSP.Widgets.Tagcloud.prototype.draw = function() {
+    
+    var _urlRegExp = /https?:\/\/[0-9a-zA-Z\.%\/-_]+/g,
+        _regexpword = /[^\s\.&;,'"!\?\d\(\)\+\[\]\\\…\-«»:\/]{3,}/g,
+        _words = {},
+        _this = this;
+    this.getWidgetAnnotations().forEach(function(_annotation) {
+       var _txt = (_this.include_titles ? _annotation.title : '') + ' ' + (_this.include_descriptions ? _annotation.description : '');
+       IriSP._(_txt.toLowerCase().replace(_urlRegExp, '').match(_regexpword)).each(function(_word) {
+           if (IriSP._(_this.stopwords).indexOf(_word) == -1 && (!_this.exclude_pattern || !_this.exclude_pattern.test(_word))) {
+               _words[_word] = 1 + (_words[_word] || 0);
+           }
+       })
+    });
+    _words = IriSP._(_words)
+        .chain()
+        .map(function(_v, _k) {
+            return {
+                "word" : _k,
+                "count" : _v
+            }
+        })
+        .filter(function(_v) {
+            return _v.count > 2;
+        })
+        .sortBy(function(_v) {
+            return - _v.count;
+        })
+        .first(this.tag_count)
+        .value();
+    var _max = _words[0].count,
+        _min = Math.min(_words[_words.length - 1].count, _max - 1),
+        _scale = (this.max_font_size - this.min_font_size) / Math.sqrt(_max - _min);
+    IriSP._(_words).each(function(_word) {
+            _word.size = Math.floor( _this.min_font_size + _scale * Math.sqrt(_word.count - _min) );
+        });
+    this.words = _words;
+    this.renderTemplate();
+    this.$words = this.$.find(".Ldt-Tagcloud-item");
+    this.$words.click(function() {
+        var _txt = IriSP.jQuery(this).attr("content");
+        _this.player.popcorn.trigger("IriSP.search.triggeredSearch", _txt);
+    });
+    this.bindPopcorn("IriSP.search", "onSearch");
+    this.bindPopcorn("IriSP.search.closed", "onSearch");
+    this.bindPopcorn("IriSP.search.cleared", "onSearch");
+}
+
+IriSP.Widgets.Tagcloud.prototype.onSearch = function(searchString) {
+    searchString = typeof searchString !== "undefined" ? searchString : '';
+    if (searchString) {
+        var _rgxp = IriSP.Model.regexpFromTextOrArray(searchString);
+    }
+    this.$words.each(function() {
+        var _el = IriSP.jQuery(this),
+            _txt = _el.attr("content");
+        if (searchString) {
+            _el.html(_txt.replace(_rgxp, '<span class="Ldt-Tagcloud-active">$1</span>'));
+        } else {
+            _el.html(_txt);
+        }
+    });
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/Tweet.css	Thu Apr 26 19:18:57 2012 +0200
@@ -0,0 +1,105 @@
+.Ldt-Tweet-Widget {
+    border: 1px solid #b7b7b7;
+    padding: 1px;
+    margin: 0;
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+.Ldt-Tweet-Inner {
+    background: url(img/pinstripe.png);
+    padding: 5px;
+    margin: 0;
+    min-height: 50px;
+}
+
+.Ldt-Tweet-PinClose-Buttons {
+    float: right;
+}
+
+.Ldt-Tweet-PinClose-Buttons a {
+    display: inline-block; width: 17px; height: 17px; margin: 2px;
+    background: url(img/widget-control.png);
+}
+
+a.Ldt-Tweet-Pin {
+    background-position: 0 -17px;
+}
+
+a.Ldt-Tweet-Pin:hover, a.Ldt-Tweet-Pin.active {
+    background-position: -17px -17px;
+}
+
+a.Ldt-Tweet-Pin.active:hover {
+    background-position: 0 -17px;
+}
+
+a.Ldt-Tweet-Close:hover {
+    background-position: -17px 0;
+}
+
+.Ldt-Tweet-AvatarContainer {
+    float: left; width: 48px; height: 48px; margin: 2px 4px 2px 0;
+}
+
+.Ldt-Tweet-Avatar {
+    border: none; width: 48px; height: 48px;
+}
+
+.Ldt-Tweet-Inner h3 {
+    margin: 2px 0 5px 52px;
+    font-size: 14px;
+}
+
+a.Ldt-Tweet-ScreenName {
+    color: #0068c4;
+    text-decoration: none;
+}
+
+a.Ldt-Tweet-ScreenName:hover {
+    color: #000000;
+    text-decoration: underline;
+}
+
+p.Ldt-Tweet-Contents {
+    margin: 5px 0 5px 52px;
+    font-size: 12px;
+}
+
+.Ldt-Tweet-Bottom {
+    margin: 5px 0 0;
+    font-size: 12px;
+    text-align: right;
+}
+
+.Ldt-Tweet-Time {
+    display: inline-block;
+}
+
+.Ldt-Tweet-Bottom a {
+    display: inline-block;
+    margin-left: 12px;
+    color: #000000;
+    text-decoration: none;
+}
+
+.Ldt-Tweet-Bottom a:hover {
+    text-decoration: underline;
+}
+
+.Ldt-Tweet-Icon {
+    display: inline-block; width: 16px; height: 16px;
+    margin: 0 2px -2px;
+    background: url(img/twitter_sprites.png);
+}
+
+.Ldt-Tweet-Retweet .Ldt-Tweet-Icon {
+    background-position: -80px 0;
+}
+
+.Ldt-Tweet-Retweet:hover .Ldt-Tweet-Icon {
+    background-position: -96px 0;
+}
+
+.Ldt-Tweet-Reply:hover .Ldt-Tweet-Icon {
+    background-position: -16px 0;
+}
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/Tweet.js	Thu Apr 26 19:18:57 2012 +0200
@@ -0,0 +1,196 @@
+IriSP.Widgets.Tweet = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+    this.lastAnnotation = false;
+};
+
+IriSP.Widgets.Tweet.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.Tweet.prototype.defaults = {
+    hide_timeout: 5000,
+    polemics : [
+        {
+            "keywords" : [ "++" ],
+            "description" : "positif",
+            "color" : "#30d765"
+        },
+        {
+            "keywords" : [ "--" ],
+            "description" : "negatif",
+            "color" : "#f51123"
+        },
+        {
+            "keywords" : [ "==" ],
+            "description" : "reference",
+            "color" : "#f1e24a"  
+        },
+        {
+            "keywords" : [ "??" ],
+            "description" : "question",
+            "color" : "#05aae6"
+        }
+    ]
+}
+
+IriSP.Widgets.Tweet.prototype.messages = {
+    "fr": {
+        retweet: "Retweeter",
+        reply: "Répondre",
+        keep_visible: "Garder visible",
+        dont_keep_visible: "Permettre la fermeture automatique",
+        close_widget: "Fermer l'affichage du tweet",
+        original_time: "Heure d'envoi&nbsp; ",
+        video_time: "Temps de la vidéo&nbsp;: "
+    },
+    "en": {
+        retweet: "Retweet",
+        reply: "Reply",
+        keep_visible: "Keep visible",
+        dont_keep_visible: "Don't keep visible",
+        close_widget: "Close tweet display",
+        original_time: "Tweet sent at: ",
+        video_time: "Video time: "
+    }
+}
+
+IriSP.Widgets.Tweet.prototype.template =
+    '<div class="Ldt-Tweet-Widget"><div class="Ldt-Tweet-Inner"><div class="Ldt-Tweet-PinClose-Buttons">'
+    + '<a href="#" class="Ldt-Tweet-Pin" title="{{l10n.keep_visible}}"></a>'
+    + '<a href="#" class="Ldt-Tweet-Close" title="{{l10n.close_widget}}"></a>'
+    + '</div><div class="Ldt-Tweet-AvatarContainer"><a href="#" class="Ldt-Tweet-ProfileLink" target="_blank">'
+    + '<img src="" class="Ldt-Tweet-Avatar"/></a></div><h3><a href="#" class="Ldt-Tweet-ProfileLink Ldt-Tweet-ScreenName" target="_blank">'
+    + '</a> (<span class="Ldt-Tweet-FullName"></span>)</h3><p class="Ldt-Tweet-Contents"></p><div class="Ldt-Tweet-Bottom">'
+    + '<span class="Ldt-Tweet-Time"></span><a href="" target="_blank" class="Ldt-Tweet-Retweet"><div class="Ldt-Tweet-Icon"></div>{{l10n.retweet}}</a>'
+    + '<a href="" target="_blank" class="Ldt-Tweet-Reply"><div class="Ldt-Tweet-Icon"></div>{{l10n.reply}}</a></div></div></div>';
+    
+
+IriSP.Widgets.Tweet.prototype.draw = function() {
+    this.renderTemplate();
+    this.bindPopcorn("IriSP.Tweet.show","show");
+    this.pinned = false;
+    var _this = this;
+    this.$.find(".Ldt-Tweet-Pin").click(function() {
+        _this.pinned = !_this.pinned;
+        var _el = IriSP.jQuery(this)
+        if (_this.pinned) {
+            _el.addClass("active").attr("title",_this.l10n.dont_keep_visible);
+            _this.cancelTimeout();
+        } else {
+            _el.removeClass("active").attr("title",_this.l10n.keep_visible);
+            _this.hideTimeout();
+        }
+    });
+    this.$.find(".Ldt-Tweet-Close").click(function() {
+        _this.hide();
+    });
+    this.$.hide();
+}
+
+IriSP.Widgets.Tweet.prototype.show = function(_id) {
+    var _tweet = this.source.getElement(_id);
+    if (typeof _tweet !== "undefined" && typeof _tweet.source !== "undefined") {
+        var _entities = [];
+        for (var _i = 0; _i < _tweet.source.entities.hashtags.length; _i++) {
+            var _hash = _tweet.source.entities.hashtags[_i];
+            _entities.push({
+                is_link: true,
+                text: '#' + _hash.text,
+                url: 'http://twitter.com/search?q=%23' + encodeURIComponent(_hash.text),
+                indices: _hash.indices
+            });
+        }
+        for (var _i = 0; _i < _tweet.source.entities.urls.length; _i++) {
+            var _url = _tweet.source.entities.urls[_i],
+                _displayurl = (typeof _url.display_url !== "undefined" && _url.display_url !== null ? _url.display_url : _url.url),
+                _linkurl = (typeof _url.expanded_url !== "undefined" && _url.expanded_url !== null ? _url.expanded_url : _url.url);
+            _displayurl = _displayurl.replace(/^\w+:\/\//,'');
+            if (!/^\w+:\/\//.test(_linkurl)) {
+                _linkurl = 'http://' + _linkurl;
+            }
+            _entities.push({
+                is_link: true,
+                text: _displayurl,
+                url: _linkurl,
+                indices: _url.indices
+            });
+        }
+        for (var _i = 0; _i < _tweet.source.entities.user_mentions.length; _i++) {
+            var _user = _tweet.source.entities.user_mentions[_i];
+            _entities.push({
+                is_link: true,
+                text: '@' + _user.screen_name,
+                url: 'http://twitter.com/' + encodeURIComponent(_user.screen_name),
+                indices: _user.indices
+            });
+        }
+        for (var _i = 0; _i < this.polemics.length; _i++) {
+            for (var _j = 0; _j < this.polemics[_i].keywords.length; _j++) {
+                var _p = _tweet.source.text.indexOf(this.polemics[_i].keywords[_j]);
+                while (_p !== -1) {
+                    var _end = (_p + this.polemics[_i].keywords[_j].length);
+                    _entities.push({
+                        is_link: false,
+                        text: this.polemics[_i].keywords[_j],
+                        color: this.polemics[_i].color,
+                        indices: [_p, _end]
+                    });
+                    _p = _tweet.source.text.indexOf(this.polemics[_i].keywords[_j], _end);
+                }
+            }
+        }
+        _entities = IriSP._(_entities).sortBy(function(_entity) {
+            return _entity.indices[0];
+        });
+        var _currentPos = 0,
+            _txt = '';
+        for (var _i = 0; _i < _entities.length; _i++) {
+            if (_entities[_i].indices[0] >= _currentPos) {
+                _txt += _tweet.source.text.substring(_currentPos, _entities[_i].indices[0]);
+                _currentPos = _entities[_i].indices[1];
+                if (_entities[_i].is_link) {
+                    _txt += '<a href="' + _entities[_i].url + '" target="_blank">';
+                } else {
+                    _txt += '<span style="background:' + _entities[_i].color + '">';
+                }
+                _txt += _entities[_i].text;
+                if (_entities[_i].is_link) {
+                    _txt += '</a>';
+                } else {
+                    _txt += '</span>';
+                }
+            }
+        }
+        _txt += _tweet.source.text.substring(_currentPos);
+        this.$.find(".Ldt-Tweet-Avatar").attr("src",_tweet.source.user.profile_image_url);
+        this.$.find(".Ldt-Tweet-ScreenName").html('@'+_tweet.source.user.screen_name);
+        this.$.find(".Ldt-Tweet-ProfileLink").attr("href", "http://twitter.com/" + _tweet.source.user.screen_name);
+        this.$.find(".Ldt-Tweet-FullName").html(_tweet.source.user.name);
+        this.$.find(".Ldt-Tweet-Contents").html(_txt);
+        this.$.find(".Ldt-Tweet-Time").html(this.l10n.original_time + new Date(_tweet.source.created_at).toLocaleTimeString() + " / " + this.l10n.video_time + _tweet.begin.toString());
+        this.player.popcorn.trigger("IriSP.Annotation.minimize");
+        this.$.slideDown();
+        this.cancelTimeout();
+        if (!this.pinned) {
+            this.hideTimeout();
+        }
+    } else {
+        this.hide();
+    }
+}
+
+IriSP.Widgets.Tweet.prototype.hide = function() {
+    this.player.popcorn.trigger("IriSP.Annotation.maximize");
+    this.$.slideUp();
+    this.cancelTimeout();
+}
+
+IriSP.Widgets.Tweet.prototype.cancelTimeout = function() {
+    if (typeof this.hide_timer !== "undefined") {
+        window.clearTimeout(this.hide_timer);
+        this.hide_timer = undefined;
+    }  
+}
+
+IriSP.Widgets.Tweet.prototype.hideTimeout = function() {
+    this.cancelTimeout();
+    this.hide_timer = window.setTimeout(this.functionWrapper("hide"), this.hide_timeout);
+}
Binary file src/widgets/img/slice-handles.png has changed
Binary file src/widgets/img/widget-control.png has changed
--- a/test/integration/polemic.htm	Tue Apr 24 20:25:40 2012 +0200
+++ b/test/integration/polemic.htm	Thu Apr 26 19:18:57 2012 +0200
@@ -25,7 +25,7 @@
   IriSP.widgetsDir = "/metadataplayer/src/widgets"
 IriSP.jwplayer_swf_path = "../libs/player.swf";
     var _metadata = {
-        url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/f1a17368-2bc8-11e1-b21a-00145ea49a02?callback=?',
+        url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02?callback=?',
         format: 'ldt'
     };
     var _config = {            
@@ -91,18 +91,28 @@
                     type: "Segments"
                 },
                 {
+                    type: "Slice"
+                },
+                {
                     type: "Arrow"
                 },
                 {
                     type: "Annotation"
                 },
                 {
+                    type: "Tweet"
+                },
+                {
+                    type: "Tagcloud"
+                },
+                {
                     type: "AnnotationsList",
                     //ajax_url : "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?", 
                     foreign_url : "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/{{project}}/{{annotationType}}#id={{annotation}}",
                     annotation_type : "tweet",
                     container: "AnnotationsListContainer"
-                }
+                },
+                { type: "Mediafragment"}
             ]
         },
       player:{