# HG changeset patch
# User veltr
# Date 1333123157 -7200
# Node ID 148500c66095a1a3a5da00783ce3962283ff1da2
# Parent  3ed6fd9bd981b8e532577b0bfe077cc5929967c4
updated Metadataplayer

diff -r 3ed6fd9bd981 -r 148500c66095 src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/partial/embed_player.html
--- a/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/partial/embed_player.html	Tue Mar 13 13:00:53 2012 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/partial/embed_player.html	Fri Mar 30 17:59:17 2012 +0200
@@ -6,129 +6,100 @@
 </div>
 <script type="text/javascript">
   /* Redefine a few variables */  
-  IriSP.jwplayer_swf_path = "{{WEB_URL}}{{LDT_MEDIA_PREFIX}}swf/player.swf";
-  IriSP.libdir = "{{WEB_URL}}{{LDT_MEDIA_PREFIX}}js/";
-  
-  IriSP.paths["imgs"] = "{{WEB_URL}}{{LDT_MEDIA_PREFIX}}css/imgs";
-  IriSP.default_templates_vars["img_dir"] = IriSP.paths.imgs;
-  
-  IriSP.widgetsDefaults["createAnnotationWidget"] = {};
-  IriSP.widgetsDefaults["createAnnotationWidget"].cinecast_version = false;
-  
-  IriSP.widgetsDefaults["AnnotationsListWidget"] = {};
-  IriSP.widgetsDefaults["AnnotationsListWidget"].platform_url = "{{WEB_URL}}{% url segment_api iri_id='{content}' begin='{begin}' end='{end}' %}";
-  IriSP.widgetsDefaults["createAnnotationWidget"].keywords = ["#amateur", "#digital-humanities"];
-  
-  IriSP.platform_url = "{{WEB_URL}}{{BASE_URL}}";
-  IriSP.user = {name: '{{request.user.username}}',
-		  		avatar: '{% thumbnail request.user.get_profile.image "48x48" format="PNG" crop="center" as im %}{{WEB_URL}}{{ im.url }}{% endthumbnail %}',
-				};
+IriSP.jwplayer_swf_path = "{{WEB_URL}}{{LDT_MEDIA_PREFIX}}swf/player.swf";
+IriSP.libdir = "{{WEB_URL}}{{LDT_MEDIA_PREFIX}}js/";
+
+IriSP.paths["imgs"] = "{{WEB_URL}}{{LDT_MEDIA_PREFIX}}css/imgs";
+IriSP.default_templates_vars["img_dir"] = IriSP.paths.imgs;
+
+IriSP.platform_url = "{{WEB_URL}}{{BASE_URL}}";
+IriSP.user = {
+    name: '{{request.user.username}}',
+    avatar: '{% thumbnail request.user.get_profile.image "48x48" format="PNG" crop="center" as im %}{{WEB_URL}}{{ im.url }}{% endthumbnail %}',
+};
   
-	  
-    var config = {            
-        gui:{
-            width:{{ player_width }},             
-            container:'{{ player_id }}_embed',
-            css:'{{WEB_URL}}{{LDT_MEDIA_PREFIX}}css/LdtPlayer.css',
-            widgets: [
-            {type: "PolemicWidget",
-             width: {{ player_width }}, /* required for this widget */
-             height: 50,
-             metadata:{
-              format:'cinelab',
-              src:'{{ json_url }}',
-              type:'json'},
-             requires: [{
-							type: "TooltipWidget",
-							width: 180,
-							heigh: 160,
-							metadata : {
-								format:'cinelab',
-								src:'polemic_fr.json',
-								type:'empty'
-							}
-						 }]
+      
+var config = {            
+    gui: {
+        width: {{ player_width }},
+        height: 600,  
+        container: '{{ player_id }}_embed',
+        css: '{{WEB_URL}}{{LDT_MEDIA_PREFIX}}css/LdtPlayer.css',
+        default_options: {
+            metadata:{
+                format:'cinelab',
+                src: '{{ json_url }}',
+                type:'json'
             },
-            {type: "SparklineWidget",
-             width: {{ player_width }}, /* required for this widget */
-             height: 50,
-             metadata:{
-              format:'cinelab',
-              src:'{{ json_url }}',
-              type:'json'}
-            },
-            {type: "SliderWidget",
-             metadata:{
-              format:'cinelab',
-              src:'{{ json_url }}',
-              type:'json'}
+            width: {{ player_width }},
+            cinecast_version: false
+        },
+        widgets: [
+            {
+                type: "PolemicWidget",
+                height: 50,
+                requires: [
+                    {
+                        type: "TooltipWidget",
+                        width: 180,
+                        height: 160,
+                        metadata : {
+                            type:'empty'
+                        }
+                    }
+                ]
             },
-            {type: "AnnotationsListWidget",
-             container: "annot_media",             
-             metadata:{
-              format:'cinelab',
-              src:'{{ json_url }}',
-              type:'json'}
+            {
+                type: "SparklineWidget",
+                height: 50
             },
-            {type: "PlayerWidget", // please note that type refers directly to the constructor of the widget.
-             mode: "radio",
-             metadata:{
-              format:'cinelab',
-              src:'{{ json_url }}',
-              type:'json'}
+            {
+                type: "SliderWidget"
             },
-            {type: "SegmentsWidget",
-             metadata:{
-              format:'cinelab',
-              src:'{{ json_url }}',
-              type:'json'},
-             requires: [{
-              type: "TooltipWidget",
-              width: 180,
-              heigh: 160,
-              metadata : {
-                type:'empty'
-              }
-             }],
+            {
+                type: "AnnotationsListWidget",
+                container: "annot_media"
+            },
+            {
+                type: "PlayerWidget",
+                mode: "radio"
             },
-            {type: "SliceWidget", // please note that type refers directly to the constructor of the widget.
-             mode: "radio",
-             metadata:{
-              format:'cinelab',
-              src:'{{ json_url }}',
-              type:'json'}
-            },            
-            {type: "ArrowWidget",
-             metadata:{
-              format:'cinelab',
-              src:'{{ json_url }}',
-              type:'json'}
+            {
+                type: "SegmentsWidget",
+             requires: [
+                    {
+                        type: "TooltipWidget",
+                        width: 180,
+                        height: 160,
+                        metadata : {
+                            type:'empty'
+                        }
+                    }
+                ],
             },
-
-
-            {type: "AnnotationsWidget",
-             metadata:{
-              format:'cinelab',
-              src:'{{ json_url }}',
-              type:'json'}
+            {
+                type: "SliceWidget",
+                mode: "radio"
+            },            
+            {
+                type: "ArrowWidget"
+            },
+            {
+                type: "AnnotationsWidget"
             },
-            {type: "TweetsWidget",
-             metadata:{
-              format:'cinelab',
-              src:'{{ json_url }}',
-              type:'json'}
+            {
+                type: "TweetsWidget"
             },
-            {type: "createAnnotationWidget",
-             metadata:{
-              format:'cinelab',
-              src:'{{ json_url }}',
-              type:'json'}
+            {
+                type: "createAnnotationWidget",
+                api_endpoint_template: "{{WEB_URL}}{{BASE_URL}}/ldtplatform/api/ldt/annotations/{% templatetag openvariable %}id{% templatetag closevariable %}{% templatetag closebrace %}.json",
+                keywords: ["#amateur", "#digital-humanities"]
             }      
-            ]
-        },
+        ]
+    },
       {% if external_url %}
       player:{
-    	  type:{% if "youtube.com" in external_url %}'youtube'{% else %}'dailymotion'{% endif %}, // player type
+          type: {% if "youtube.com" in external_url %}'youtube'{% else %}'dailymotion'{% endif %}, // player type
           height: 300, 
           width: {{ player_width }}, 
           video: '{{ external_url }}'
diff -r 3ed6fd9bd981 -r 148500c66095 src/ldt/ldt/static/ldt/css/LdtPlayer.css
--- a/src/ldt/ldt/static/ldt/css/LdtPlayer.css	Tue Mar 13 13:00:53 2012 +0100
+++ b/src/ldt/ldt/static/ldt/css/LdtPlayer.css	Fri Mar 30 17:59:17 2012 +0200
@@ -1,3 +1,20 @@
+/* Some general styling classes */
+
+.Ldt-floatClear {
+    display: block; width: 100%; height: 0; clear: both;
+}
+
+ul.Ldt-floatList {
+    padding: 0; margin: 0; list-style: none;
+}
+
+.Ldt-floatList li {
+    float: left;
+}
+
+
+/* */
+
 #demo-frame > div.demo { padding: 5px !important; };
 
 button.ui-button-icon-only  {
@@ -6,10 +23,9 @@
 }
 
 #Ldt-loader {
-  background:url(imgs/loader.gif) no-repeat;
-  width:20px;
-  height:16px;
-  float:left;
+    background:url(imgs/loader.gif) center no-repeat;
+    text-indent: -9999px;
+    position: absolute;
 }
 
 /* general class for all buttons */
@@ -139,12 +155,12 @@
 
 /* player */
 .Ldt-controler {
-  font-size: 62.5%;
+  font-size: 10px;
   font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
   background:url('imgs/player_gradient.png') repeat-x transparent ;
   height: 25px;
-  border-top: 1px solid #b6b8b8;
-  border-bottom: 1px solid #b6b8b8;
+  border: 1px solid #b6b8b8;
+  position: relative;
 }
 
 
@@ -156,67 +172,70 @@
   float: right;
 }
 
-.Ldt-button {
-  border-left: 1px solid #b6b8b8;
+.Ldt-Ctrl-button {
   float: left;
+  width: 30px; height: 25px;
+  background: url('imgs/player-sprites.png');
   cursor: pointer;
- 
+}
+
+.Ldt-Ctrl-spacer {
+    float: left; width: 1px; height: 25px; background: #b6b8b8;
 }
 
 .Ldt-CtrlPlay {
-
-  background-position: 0 0;
-  width: 59px;
-  height: 25px;
+  margin: 0 15px;
 }
 
 .Ldt-CtrlPlay-PlayState {
-  background:url('imgs/play_sprite.png') no-repeat transparent ;
+  background-position: 0 0;
 }
 
-.Ldt-CtrlPlay-PauseState {
-  background:url('imgs/pause_sprite.png') no-repeat transparent ;
-}
-
-.Ldt-CtrlPlay:hover {
+.Ldt-CtrlPlay-PlayState:hover {
   background-position: 0 -25px;
 }
 
-.Ldt-CtrlPlay:active {
+.Ldt-CtrlPlay-PlayState:active {
   background-position: 0 -50px;
 }
 
+.Ldt-CtrlPlay-PauseState {
+  background-position: -30px 0;
+}
+
+.Ldt-CtrlPlay-PauseState:hover {
+  background-position: -30px -25px;
+}
+
+.Ldt-CtrlPlay-PauseState:active {
+  background-position: -30px -50px;
+}
+
+
 .Ldt-CtrlAnnotate {
-  background:url('imgs/annotate_sprite.png') no-repeat scroll 0 0 transparent ;
-  width: 33px;
-  height: 25px;
-  border-right: 1px solid #b6b8b8;
-  float: left;
+  margin: 0 2px;
+  background-position: -60px 0;
 }
 
 .Ldt-CtrlAnnotate:hover {
-  background-position: 0 -25px;
+  background-position: -60px -25px;
 }
 
 .Ldt-CtrlAnnotate:active {
-  background-position: 0 -50px;
+  background-position: -60px -50px;
 }
 
 .Ldt-CtrlSearch {
-  background:url('imgs/search_sprite.png') no-repeat scroll 0 0 transparent ;
-  width: 33px;
-  height: 25px;
-  border-right: 1px solid #b6b8b8;
-  float: left;
-  border-left: none;
+  margin: 0 2px;
+  background-position: -90px 0;
 }
 
 .Ldt-CtrlSearch:hover {
-  background-position: 0 -25px;
+  background-position: -90px -25px;
 }
 
 .Ldt-CtrlSearch:active {
-  background-position: 0 -50px;
+  background-position: -90px -50px;
 }
 
 .LdtSearch {
@@ -230,68 +249,94 @@
 }
 
 .Ldt-Time {
-  position: inherit;
   float: left;
-  border-right: 1px solid #b6b8b8;
-  height: 25px;
-  padding-right: 2px;
+  margin: 5px;
   font-size: 12px;
   font-family: Arial, Verdana, sans-serif;
 }
 
 .Ldt-ElapsedTime {
-  margin-top: 4px;
-  margin-right: 2px;
   float: left;
   color: #4a4a4a;
 }
 
 .Ldt-TimeSeparator {
-  margin-top: 4px;      
+  margin: 0 4px;      
   float: left;
-  padding-left: 1px;
-  padding-right: 1px;
 }
 
 .Ldt-TotalTime {
-  margin-top: 4px;
-  margin-left: 2px;
   float: left;
   color: #b2b2b2; 
 }
 
 .Ldt-CtrlSound {
-  width: 33px;
-  height: 25px;
-  border-right: 1px solid #b6b8b8;
-  float: right;
-  border-left: none;
+  margin: 0 2px;
+}
+
+.Ldt-CtrlSound-Full {
+  background-position: -120px 0;
+}
+
+.Ldt-CtrlSound-Full:hover {
+  background-position: -120px -25px;
+}
+
+.Ldt-CtrlSound-Full:active {
+  background-position: -120px -50px;
 }
 
-.Ldt-CtrlSound-SoundState {
-  background:url('imgs/sound_sprite.png') no-repeat scroll 0 0 transparent ;
+.Ldt-CtrlSound-Mute {
+  background-position: -150px 0;
 }
 
-.Ldt-CtrlSound-MuteState {
-  background:url('imgs/mute_sprite.png') no-repeat scroll 0 0 transparent ;
+.Ldt-CtrlSound-Mute:hover {
+  background-position: -150px -25px;
+}
+
+.Ldt-CtrlSound-Mute:active {
+  background-position: -150px -50px;
+}
+
+.Ldt-CtrlSound-Half {
+  background-position: -180px 0;
 }
 
-.Ldt-CtrlSound:hover {
-  background-position: 0 -25px;
+.Ldt-CtrlSound-Half:hover {
+  background-position: -180px -25px;
+}
+
+.Ldt-CtrlSound-Half:active {
+  background-position: -180px -50px;
+}
+
+.Ldt-Ctrl-Volume-Control {
+    display: none;
+  position: absolute;
+  background:url('imgs/player_gradient.png') repeat-x transparent ;
+  height: 25px;
+  width: 100px; top: 25px; right: -1px; z-index: 100;
+  padding: 0 2px;
+  border: 1px solid #b6b8b8;
 }
 
-.Ldt-CtrlSound:active {
-  background-position: 0 -50px;
+.Ldt-Ctrl-Volume-Bar { 
+    height: 5px; margin: 9px 3px 0; background: #cccccc; border: 1px solid #999999; border-radius: 2px;
+}
+
+.Ldt-Ctrl-Volume-Cursor {
+    position: absolute; top: 2px; width: 6px; height: 19px; background: #a8a8a8; border: 1px solid #999999; border-radius: 2px;
+    cursor: pointer;
 }
-/*
-.Ldt-CtrlSound {
-  float: right;
-  border-left: none;
-  height: 25px;
-  top: 7px;
-  position: inherit;
+
+.Ldt-Ctrl-Volume-Cursor:hover {
+     background: #cccccc;
 }
-*/    
+
+.Ldt-Ctrl-Volume-Cursor.ui-draggable-dragging {
+    background: #999999;
+}
+
 .Ldt-cleaner {
   clear:both;
 }
@@ -360,17 +405,22 @@
   max-width: 200px;
   background: transparent url("imgs/white_arrow_long.png");
   font-size: 12px;
-  height: 125px;
+  height: 115px;
   width: 180px;
-  padding: 10px;
-  padding-left: 15px;
-  padding-top: 15px;
-  padding-right: 15px;
+  padding: 15px 15px 20px;
   color: black;
   font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
   overflow:hidden;
 }
 
+.tipcolor {
+    float: left; margin: 2px 4px 2px 0;
+}
+
+.tip img {
+    max-width: 140px; max-height: 70px; margin: 0 20px;
+}
+
 /* slider */
 .Ldt-SliderMinimized {
   height: 6px;
@@ -652,63 +702,59 @@
   float: left;
 }
 
-.Ldt-createAnnotation-Container {  
-  display: table;
-  border-collapse: collapse;
-  width: 100%;
+.Ldt-createAnnotation-Container {
+  float: left; width: 100%; clear: both;
 }
 
-.Ldt-createAnnotation-userAvatar {  
+.Ldt-createAnnotation-userAvatar { 
+  float: right; 
   width: 48px;
-  display: table-cell;
-  vertical-align: top;
-}
-
-.Ldt-createAnnotation-userAvatar img {  
-  display: block;
+  height: 48px;
+  margin: 7px 0;
   border: 1px solid #babcbc;
 }
 
+.Ldt-createAnnotation-userAvatar img { 
+  float: right; 
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .Ldt-createAnnotation-profileArrow {
-  display: table-cell;
+  float: right;
   vertical-align: top;
   height: 48px;
   width: 15px;
-  padding-right: 5px;
-  padding-left: 3px;
-  background:url('imgs/profile_arrow.png');
-  background-repeat: no-repeat;
-  background-position: center;
+  margin: 7px 5px;
+  background:url('imgs/profile_arrow.png') center no-repeat;
 }
 
 .Ldt-createAnnotation-Description {
-  display: table-cell;   
-  width: 100%;
-  height: 48px;  
-  vertical-align: top;
-  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
-  box-sizing: border-box;         /* Opera/IE 8+ */
+  float: left;
+  width: 450px;
+  height: 56px; padding: 2px;
+  resize: none;
 }
 
-.Ldt-createAnnotation-present-keyword {
+.Ldt-createAnnotation-btnblock {
+   float: left; width: 450px;  margin: 5px 0;
+}
+
+.Ldt-createAnnotation-btnblock label {
+    float: left; margin-left: 12px; margin: 2px 8px 2px 0; font-size: 12px;
+}
+
+.Ldt-createAnnotation-keyword-button {
   border: 1px solid #ffffff;
   background-color: #217bcb;
   color: #ffffff;
-  padding: 3px;
-  padding-left: 4px;
-  padding-right: 4px;
+  padding: 3px 4px;
   cursor: pointer;
 }
 
-.Ldt-createAnnotation-absent-keyword {
-  border: 1px solid #ffffff;
+.Ldt-createAnnotation-active-button .Ldt-createAnnotation-keyword-button {
   background-color: #d93c71;
-  color: #ffffff;
-  padding: 3px;
-  padding-left: 4px;
-  padding-right: 4px;
-  cursor: pointer;
 }
 
 .Ldt-createAnnotation-submitButton {
@@ -722,6 +768,10 @@
   width: 48px;
   position: relative;
   margin-top: 3px;
+  padding: 28px 0 0;
+  font-size: 13px;
+  border: none;
+  text-align: center;
 }
 
 .Ldt-createAnnotation-endScreen {
@@ -750,9 +800,6 @@
 }
 
 /* polemic tweet annotation buttons */
-.Ldt-createAnnotation-polemics {
-  padding-top: 2px;
-}
 
 .Ldt-createAnnotation-polemic-button {
   margin: 0;
@@ -763,12 +810,13 @@
   height: 26px;
   text-indent: -999px;
   background: url(imgs/polemic_buttons_sprite.png);
+  cursor: pointer;
 }
 
 .Ldt-createAnnotation-polemic-positive:hover {
     background-position: 0 -26px;
 }
-.Ldt-createAnnotation-polemic-positive.Ldt-createAnnotation-polemic-active {
+.Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-positive {
     background-position: 0 -52px;
 }
 
@@ -778,7 +826,7 @@
 .Ldt-createAnnotation-polemic-negative:hover {
     background-position: -38px -26px;
 }
-.Ldt-createAnnotation-polemic-negative.Ldt-createAnnotation-polemic-active {
+.Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-negative {
     background-position: -38px -52px;
 }
 
@@ -788,7 +836,7 @@
 .Ldt-createAnnotation-polemic-reference:hover {
     background-position: -76px -26px;
 }
-.Ldt-createAnnotation-polemic-reference.Ldt-createAnnotation-polemic-active {
+.Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-reference {
     background-position: -76px -52px;
 }
 
@@ -798,7 +846,7 @@
 .Ldt-createAnnotation-polemic-question:hover {
     background-position: -114px -26px;
 }
-.Ldt-createAnnotation-polemic-question.Ldt-createAnnotation-polemic-active {
+.Ldt-createAnnotation-active-button .Ldt-createAnnotation-polemic-question {
     background-position: -114px -52px;
 }
 
@@ -836,47 +884,65 @@
   max-height: 480px;
 }
 
-.Ldt-AnnotationsListWidget ul {
-  padding: 5px;
+ul.Ldt-AnnotationsList-ul {
+  list-style: none;
+  padding: 0 3px;
 }
 
-.Ldt-AnnotationsListWidget li {
-  list-style-type: none;
+li.Ldt-AnnotationsList-li {
   cursor: pointer;
-  display: table-row;
-  padding-top: 2px;
-  height: 64px;
+  float: left; width: 100%; clear: both;
+  margin: 2px 0; padding: 2px 0;
 }
 
-.Ldt-AnnotationsListWidget li:hover {
+.Ldt-AnnotationsList-li:hover {
   background-color: #e9e9e9;
 }
 
-.Ldt-AnnotationsListWidget li a {
+.Ldt-AnnotationsList-highlight {
+    background: #cc80ff;
+}
+
+.Ldt-AnnotationsListWidget a {
   text-decoration: none;
 }
 
-.Ldt-AnnotationsList-Caption {
+.Ldt-AnnotationsList-Thumb-Placeholder {
   float: left;
-  display: table-cell;
-  vertical-align: middle;
   height: 64px;
   width: 64px;
   background-image: url('imgs/video_sequence.png');
 }
 
+.Ldt-AnnotationsList-Thumbnail {
+    border: none;
+    float: left;
+    max-width: 64px;
+    max-height: 64px;
+}
+
 .Ldt-AnnotationsList-Duration {  
-  color : #f7268e;  
-  float: right;
-  text-align: left;
-  width: 120px;
+  color : #f7268e;
+  float: right; text-align: right;
 }
 
 .Ldt-AnnotationsList-Title {
   color: #0068c4;
   font-size: 13px;
-  display: table-cell;
-  width: 80%;
+  margin: 0 0 2px 64px;
+}
+
+.Ldt-AnnotationsList-Description {
+    clear: both;
+    margin: 2px 0;
+}
+
+ul.Ldt-AnnotationsList-Tags {
+    width: 100%; list-style: none; clear: both; padding: 0; margin: 2px 0;
+}
+
+li.Ldt-AnnotationsList-Tag-Li {
+    float: left; margin: 2px; background: #cc0066; color: #fff; padding: 4px;
 }
 
 /* Tagcloud */
diff -r 3ed6fd9bd981 -r 148500c66095 src/ldt/ldt/static/ldt/css/front_player.css
--- a/src/ldt/ldt/static/ldt/css/front_player.css	Tue Mar 13 13:00:53 2012 +0100
+++ b/src/ldt/ldt/static/ldt/css/front_player.css	Fri Mar 30 17:59:17 2012 +0200
@@ -38,6 +38,10 @@
     float: left; width: 550px; background: url(./imgs/annot_bg.png); margin: 0 0 25px;
 }
 
+.ldt_player {
+    position: relative;
+}
+
 /* COLONNE DE DROITE */
 
 #player_col_d {
diff -r 3ed6fd9bd981 -r 148500c66095 src/ldt/ldt/static/ldt/css/imgs/loader.gif
Binary file src/ldt/ldt/static/ldt/css/imgs/loader.gif has changed
diff -r 3ed6fd9bd981 -r 148500c66095 src/ldt/ldt/static/ldt/css/imgs/minimize.png
Binary file src/ldt/ldt/static/ldt/css/imgs/minimize.png has changed
diff -r 3ed6fd9bd981 -r 148500c66095 src/ldt/ldt/static/ldt/css/imgs/player-sprites.png
Binary file src/ldt/ldt/static/ldt/css/imgs/player-sprites.png has changed
diff -r 3ed6fd9bd981 -r 148500c66095 src/ldt/ldt/static/ldt/js/LdtPlayer-release.js
--- a/src/ldt/ldt/static/ldt/js/LdtPlayer-release.js	Tue Mar 13 13:00:53 2012 +0100
+++ b/src/ldt/ldt/static/ldt/js/LdtPlayer-release.js	Fri Mar 30 17:59:17 2012 +0200
@@ -1,7 +1,7 @@
 /* 
  * 	
  *	Copyright 2010-2012 Institut de recherche et d'innovation 
- *	contributor(s) : Karim Hamidou, Samuel Huron 
+ *	contributor(s) : Karim Hamidou, Samuel Huron, Raphael Velt, Thibaut Cavalie
  *	 
  *	contact@iri.centrepompidou.fr
  *	http://www.iri.centrepompidou.fr 
@@ -1022,17 +1022,17 @@
     var $L = $LAB.script(libs.jQuery).script(libs.swfObject).wait()
                 .script(libs.jQueryUI);
                                    
-    if (config.player.type === "jwplayer") {
+    if (config.player.type === "jwplayer" || config.player.type === "allocine") {
       // load our popcorn.js lookalike
-      $L = $L.script(libs.jwplayer);
+      $L.script(libs.jwplayer);
     } else {
       // load the real popcorn
-      $L = $L.script(libs.popcorn).script(libs["popcorn.code"]);
+      $L.script(libs.popcorn).script(libs["popcorn.code"]);
       if (config.player.type === "youtube") {
-        $L = $L.script(libs["popcorn.youtube"]);
+        $L.script(libs["popcorn.youtube"]);
       } 
       if (config.player.type === "vimeo")
-        $L = $L.script(libs["popcorn.vimeo"]);
+        $L.script(libs["popcorn.vimeo"]);
       
       /* do nothing for html5 */
     }       
@@ -1040,12 +1040,12 @@
     /* widget specific requirements */
     for (var idx in config.gui.widgets) {
       if (config.gui.widgets[idx].type === "PolemicWidget" ||
-          config.gui.widgets[idx].type === "StackGraphWidget") {        
+          config.gui.widgets[idx].type === "StackGraphWidget" ||
+          config.gui.widgets[idx].type === "SparklineWidget") {        
         $L.script(libs.raphael);
       }
-
-      if (config.gui.widgets[idx].type === "SparklineWidget") {
-        $L.script(libs.jquery_sparkline);
+      if (config.gui.widgets[idx].type === "TraceWidget") {
+          $L.script(libs.tracemanager)
       }
     }
     
@@ -1085,24 +1085,24 @@
             IriSP.__jsonMetadata = data;
             callback.call(window) });
     });
-};
-IriSP.SparklineWidget_template = "<div class='Ldt-sparklineWidget' style='width: {{width}}px; height: {{height}}px'>    <div class='Ldt-sparkLinePositionMarker' style='width: 0px; height: {{height}}px'></div>    <div class='Ldt-sparkLineClickOverlay' style='width: {{width}}px; height: {{height}}px'></div>    <div class='Ldt-sparkLine' style='width: {{width}}px; height: {{height}}px'>Loading</div></div>";
-IriSP.annotation_template = "{{! template for an annotation displayed in a segmentWidget }}<div title='{{divTitle}}' id='{{id}}'	class='Ldt-iri-chapter' 	style='left: {{startPixel}}px;          width: {{pxWidth}}px;          background-color:#{{hexa_color}};' 	></div>";
-IriSP.annotationWidget_template = "{{! template for the annotation widget }}<div class='Ldt-AnnotationsWidget'>  <!-- ugly div because we want to have a double border -->  <div class='Ldt-Annotation-DoubleBorder'>      <div class='Ldt-AnnotationContent'>          <div class='Ldt-AnnotationShareIcons'>         <a target='_blank' class='Ldt-fbShare' title='share on facebook'></a>         <a target='_blank' class='Ldt-TwShare' title='share on twitter'></a>         <a target='_blank'  class='Ldt-GplusShare' title='share on google+'></a>        </div>        <div class='Ldt-SaTitle'></div>        <div class='Ldt-SaDescription'></div>        <div class='Ldt-SaKeywords'></div>    </div>  </div></div>";
-IriSP.annotation_loading_template = "{{! template shown while the annotation widget is loading }}<div id='Ldt-load-container'><div id='Ldt-loader'>&nbsp;</div> Chargement... </div>";
-IriSP.annotationsListWidget_template = "{{! template for the annotation list widget }}<div class='Ldt-AnnotationsListWidget'>  <!-- ugly div because we want to have a double border -->  <div class='Ldt-Annotation-DoubleBorder'>    <ul>    {{#annotations}}      <li>        {{! if the url is not present, it means that the annotation exists             in the current project }}        {{^url}}        <a href='#id={{id}}'>        {{/url}}        {{! otherwise link to url }}        {{#url}}        <a href='{{url}}#id={{id}}'>        {{/url}}          <div style='overflow: auto; margin-top: 5px; margin-bottom: 5px;'>            <div class='Ldt-AnnotationsList-Caption'>            </div>            <div class='Ldt-AnnotationsList-Duration'>{{begin}} - {{end}}</div>            <div class='Ldt-AnnotationsList-Title'>{{title}}</div>            <div class='Ldt-AnnotationsList-Description'>{{desc}}</div>          </div>        </a>      </li>    {{/annotations}}    </ul>  </div></div>";
-IriSP.arrowWidget_template = "<div class='Ldt-arrowWidget Ldt-arrowLeftEdge'></div>";
-IriSP.createAnnotationWidget_template = "{{! template for the annotation creation widget }}<div class='Ldt-createAnnotationWidget'>  <!-- ugly div because we want to have a double border -->  <div class='Ldt-createAnnotation-DoubleBorder'>    <div class='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' title='Cancel'></div>        {{/cinecast_version}}      </div>            <div class='Ldt-createAnnotation-Container'>        <textarea class='Ldt-createAnnotation-Description'></textarea>        <div class='Ldt-createAnnotation-profileArrow'>                  </div>        <div class='Ldt-createAnnotation-userAvatar'>        {{^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>      <div class='Ldt-createAnnotation-submitButton'>        <div style='position: absolute; bottom: 5px; right: 5px;'>Submit</div>      </div>      <div class='Ldt-createAnnotation-keywords'>        Add keywords :             </div>      {{#polemic_mode}}      <div class='Ldt-createAnnotation-polemics'>        Add polemic keywords           </div>      {{/polemic_mode}}    </div>    <div class='Ldt-createAnnotation-waitScreen' style='display: none; text-align: center'>      <div class='Ldt-createAnnotation-spinner'></div>      Please wait while your request is being processed...    </div>    <div class='Ldt-createAnnotation-errorScreen' style='display: none; text-align: center'>      <div class='Ldt-createAnnotation-Minimize' title='Hide'></div>      An error happened while contacting the server. Your annotation has not been saved.    </div>        <div class='Ldt-createAnnotation-endScreen' style='display: none'>      <div class='Ldt-createAnnotation-Minimize' title='Hide'></div>      Thank you, your annotation has been saved.<br>      Would you like to share it on social networks ?      <div style='margin-top: 12px; text-align: center;'>          <a target='_blank' class='Ldt-createAnnotation-endScreen-TweetLink'></a>          <a target='_blank' class='Ldt-createAnnotation-endScreen-FbLink'></a>          <a target='_blank' class='Ldt-createAnnotation-endScreen-GplusLink'></a>                          </div>    </div>  </div></div>";
-IriSP.createAnnotation_errorMessage_template = "<p class='Ldt-createAnnotation-errorMessage'>  You must enter text to submit an annotation</p>";
-IriSP.overlay_marker_template = "{{! the template for the small bars which is z-indexed over our segment widget }}<div class='Ldt-SegmentPositionMarker' style='background-color: #F7268E;'></div>";
-IriSP.player_template = "{{! template for the radio player }}<div class='Ldt-controler demo'>	<div class='Ldt-LeftPlayerControls'>    <div class='Ldt-button Ldt-CtrlPlay Ldt-CtrlPlay-PlayState' title='Play/Pause'></div>		<div class='Ldt-button Ldt-CtrlAnnotate' title='Annotate'></div>    <div class='Ldt-button Ldt-CtrlSearch' title='Search'></div>    <div class='LdtSearch'>      <input class='LdtSearchInput' style='margin-top: 2px; margin-bottom: 2px;'></input>    </div>    	</div>	<div class='Ldt-RightPlayerControls'>    <div class='Ldt-Time'>      <div class='Ldt-ElapsedTime' title='Elapsed time'>00:00</div>      <div class='Ldt-TimeSeparator'>/</div>      <div class='Ldt-TotalTime' title='Total time'>00:00</div>    </div>		<div class='Ldt-button Ldt-CtrlSound Ldt-CtrlSound-MuteState' title='Mute/Unmute'></div>	</div></div>";
-IriSP.search_template = "{{! template for the search container }}<div class='LdtSearchContainer'	style='margin-left: {{margin_left}}; position: absolute; margin-top: -60px;'>	<div class='LdtSearch'		style='display: none; background-color: #EEE; width: 165px; border-color: #CFCFCF; position: absolute; text-align: center;'>		<input class='LdtSearchInput'			style='margin-top: 1px; margin-bottom: 2px;' />	</div></div><div class='cleaner'></div>";
-IriSP.share_template = "{{! social network sharing template }}<a onclick='__IriSP.MyApiPlayer.share(\'delicious\');' title='partager avec delicious'><span class='share shareDelicious'>&nbsp;</span></a>		<a onclick='__IriSP.MyApiPlayer.share(\'facebook\');' title='partager avec facebook'> <span class='share shareFacebook'>&nbsp;</span></a><a onclick='__IriSP.MyApiPlayer.share(\'twitter\');' title='partager avec twitter'>  <span class='share shareTwitter'>&nbsp;</span></a><a onclick='__IriSP.MyApiPlayer.share(\'myspace\');' title='partager avec Myspace'>  <span class='share shareMySpace'>&nbsp;</span></a>";
-IriSP.sliceWidget_template = "{{! template for the slice widget }}<div class='Ldt-sliceWidget'>  {{! the whole bar }}  <div class='Ldt-sliceBackground'></div>    <div class='Ldt-sliceLeftHandle'></div>  {{! the zone which represents our slice }}  <div class='Ldt-sliceZone'></div>     <div class='Ldt-sliceRightHandle'></div></div>";
-IriSP.sliderWidget_template = "{{! template for the slider widget - it's composed of two divs we one overlayed on top    of the other }}<div class='Ldt-sliderBackground'></div><div class='Ldt-sliderForeground'></div><div class='Ldt-sliderPositionMarker'></div>";
-IriSP.tooltip_template = "{{! template used by the jquery ui tooltip }}<div class='Ldt-tooltip'>  <div class='title'>{{title}}</div>  <div class='time'>{{begin}} : {{end}} </div>  <div class='description'>{{description}}</div></div>";
-IriSP.tooltipWidget_template = "{{! template for the tooltip widget }}<div class='tip'>	<div class='tipcolor' style='height:10px;width:10px'></div>	<div class='tiptext'></div>";
-IriSP.tweetWidget_template = "{{! template for the tweet widget }}<div class='Ldt-tweetWidget'>  <div class='Ldt-tweet-DoubleBorder'>      <div class='Ldt-tweetWidgetKeepOpen' title='dont minimize automatically'></div>      <div class='Ldt-tweetWidgetMinimize' title='minimize window'></div>      <div class='Ldt-tweetAvatar'></div>      <div class='Ldt-tweetAvatar-profileArrow'></div>      <div class='Ldt-tweetContents'></div>      <a href='' target='_blank' class='Ldt-Retweet'><div class='Ldt-RetweetIcon'></div> - Retweet </a>      <a href='' target='_blank' class='Ldt-TweetReply'><div class='Ldt-TweetReplyIcon'></div> - Reply</a>  </div></div>";/* utils.js - various utils that don't belong anywhere else */
+};
+IriSP.annotation_template = "{{! template for an annotation displayed in a segmentWidget }}<div title='{{divTitle}}' id='{{id}}'	class='Ldt-iri-chapter Ldt-TraceMe' 	style='left: {{startPixel}}px;          width: {{pxWidth}}px;          background-color:{{hexa_color}};'    data-seek='{{seekPlace}}'    thumbnail-url='{{thumbnailUrl}}'	></div>";
+IriSP.annotationWidget_template = "{{! template for the annotation widget }}<div class='Ldt-AnnotationsWidget'>  <!-- ugly div because we want to have a double border -->  <div class='Ldt-Annotation-DoubleBorder'>      <div class='Ldt-AnnotationContent'>          <div class='Ldt-AnnotationShareIcons'>         <a target='_blank' class='Ldt-fbShare Ldt-TraceMe' title='{{i10n.share_on}} Facebook'></a>         <a target='_blank' class='Ldt-TwShare Ldt-TraceMe' title='{{i10n.share_on}} Twitter'></a>         <a target='_blank'  class='Ldt-GplusShare Ldt-TraceMe' title='{{i10n.share_on}} Google+'></a>        </div>        <div class='Ldt-SaTitle'></div>        <div class='Ldt-SaDescription'></div>        <div class='Ldt-SaKeywords'></div>    </div>  </div></div>";
+IriSP.annotation_loading_template = "{{! template shown while the annotation widget is loading }}<div id='Ldt-load-container'><div id='Ldt-loader'>&nbsp;</div> Chargement... </div>";
+IriSP.annotationsListWidget_template = "{{! template for the annotation list widget }}<div class='Ldt-AnnotationsListWidget'>    <ul class='Ldt-AnnotationsList-ul'>        {{#annotations}}        <li id='Ldt-Annotation-li-{{id}}' class='Ldt-AnnotationsList-li Ldt-TraceMe'>            <img class='Ldt-AnnotationsList-Thumbnail' src='{{thumbnail}}' />            <div class='Ldt-AnnotationsList-Duration'>                <span class='Ldt-AnnotationsList-Begin'>{{begin}}</span>                <span class='Ldt-AnnotationsList-TcSeparator'>-</span>                <span class='Ldt-AnnotationsList-End'>{{end}}</span>            </div>            <div class='Ldt-AnnotationsList-Title'>            {{! if the url is not present, it means that the annotation exists            in the current project }}            {{^url}} <a href='#id={{id}}'> {{/url}}            {{! otherwise link to url }}            {{#url}} <a href='{{url}}'> {{/url}}                {{title}}            </a>            </div>            <div class='Ldt-AnnotationsList-Description'>                {{desc}}            </div>            {{#tags.length}}            <ul class='Ldt-AnnotationsList-Tags'>                {{#tags}}                <li class='Ldt-AnnotationsList-Tag-Li'>                    <div class='Ldt-AnnotationsList-Tag-Div'>{{.}}</div>                </li>                {{/tags}}            </ul>            {{/tags.length}}        </li>        {{/annotations}}    </ul></div>";
+IriSP.arrowWidget_template = "<div class='Ldt-arrowWidget Ldt-arrowLeftEdge'></div>";
+IriSP.createAnnotationWidget_template = "{{! template for the annotation creation widget }}<div class='Ldt-createAnnotationWidget'>    <!-- ugly div because we want to have a double border -->    <div class='Ldt-createAnnotation-DoubleBorder'>        <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>            {{#keywords.length}}            <div class='Ldt-createAnnotation-btnblock Ldt-createAnnotation-keywords'>                <label>{{l10n.add_keywords}} :</label>                <ul class='Ldt-floatList'>                {{#keywords}}                    <li><button class='Ldt-createAnnotation-keyword-button Ldt-TraceMe'>{{.}}</button></li>                {{/keywords}}                </ul>            </div>            {{/keywords.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>            {{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>        </div>        <div class='Ldt-floatClear'></div>    </div></div>";
+IriSP.createAnnotation_errorMessage_template = "<p class='Ldt-createAnnotation-errorMessage'>  {{l10n.empty_annotation}}</p>";
+IriSP.loading_template = "<div id='Ldt-loader' style='width: {{width}}px; height: {{height}}px;'>{{l10n.loading_wait}}</div>";
+IriSP.overlay_marker_template = "{{! the template for the small bars which is z-indexed over our segment widget }}<div class='Ldt-SegmentPositionMarker' style='background-color: #F7268E;'></div>";
+IriSP.player_template = "{{! template for the radio player }}<div class='Ldt-controler'>	<div class='Ldt-LeftPlayerControls'>        <div class='Ldt-Ctrl-button Ldt-CtrlPlay Ldt-CtrlPlay-PlayState Ldt-TraceMe' title='{{l10n.play_pause}}'></div>        <div class='Ldt-Ctrl-spacer'></div>        {{^disable_annotate_btn}}    	<div class='Ldt-Ctrl-button Ldt-CtrlAnnotate Ldt-TraceMe' title='{{l10n.annotate}}'></div>        <div class='Ldt-Ctrl-spacer'></div>        {{/disable_annotate_btn}}        {{^disable_search_btn}}        <div class='Ldt-Ctrl-button Ldt-CtrlSearch Ldt-TraceMe' title='{{l10n.search}}'></div>        <div class='Ldt-Ctrl-spacer'></div>        {{/disable_search_btn}}        <div class='LdtSearch'>          <input class='LdtSearchInput Ldt-TraceMe'></input>        </div>	</div>	<div class='Ldt-RightPlayerControls'>        <div class='Ldt-Ctrl-spacer'></div>        <div class='Ldt-Time'>          <div class='Ldt-ElapsedTime' title='{{l10n.elapsed_time}}'>00:00</div>          <div class='Ldt-TimeSeparator'>/</div>          <div class='Ldt-TotalTime' title='{{l10n.total_time}}'>00:00</div>        </div>        <div class='Ldt-Ctrl-spacer'></div>		<div class='Ldt-Ctrl-button Ldt-CtrlSound Ldt-CtrlSound-Full Ldt-TraceMe' title='{{l10n.mute_unmute}}'></div>	</div>	<div class='Ldt-Ctrl-Volume-Control' title='{{l10n.volume_control}}'>	    <div class='Ldt-Ctrl-Volume-Bar'></div>	    <div class='Ldt-Ctrl-Volume-Cursor'></div>	</div></div>";
+IriSP.search_template = "{{! template for the search container }}<div class='LdtSearchContainer'	style='margin-left: {{margin_left}}; position: absolute; margin-top: -60px;'>	<div class='LdtSearch'		style='display: none; background-color: #EEE; width: 165px; border-color: #CFCFCF; position: absolute; text-align: center;'>		<input class='LdtSearchInput'			style='margin-top: 1px; margin-bottom: 2px;' />	</div></div><div class='cleaner'></div>";
+IriSP.share_template = "{{! social network sharing template }}<a onclick='__IriSP.MyApiPlayer.share(\'delicious\');' title='{{l10n.share_on}} delicious'><span class='share shareDelicious'>&nbsp;</span></a>		<a onclick='__IriSP.MyApiPlayer.share(\'facebook\');' title='{{l10n.share_on}} facebook'> <span class='share shareFacebook'>&nbsp;</span></a><a onclick='__IriSP.MyApiPlayer.share(\'twitter\');' title='{{l10n.share_on}} twitter'>  <span class='share shareTwitter'>&nbsp;</span></a><a onclick='__IriSP.MyApiPlayer.share(\'myspace\');' title='{{l10n.share_on}} Myspace'>  <span class='share shareMySpace'>&nbsp;</span></a>";
+IriSP.sliceWidget_template = "{{! template for the slice widget }}<div class='Ldt-sliceWidget'>  {{! the whole bar }}  <div class='Ldt-sliceBackground'></div>    <div class='Ldt-sliceLeftHandle'></div>  {{! the zone which represents our slice }}  <div class='Ldt-sliceZone'></div>     <div class='Ldt-sliceRightHandle'></div></div>";
+IriSP.sliderWidget_template = "{{! template for the slider widget - it's composed of two divs we one overlayed on top    of the other }}<div class='Ldt-sliderBackground'></div><div class='Ldt-sliderForeground'></div><div class='Ldt-sliderPositionMarker Ldt-TraceMe'></div>";
+IriSP.tooltip_template = "{{! template used by the jquery ui tooltip }}<div class='Ldt-tooltip'>  <div class='title'>{{title}}</div>  <div class='time'>{{begin}} : {{end}} </div>  <div class='description'>{{description}}</div></div>";
+IriSP.tooltipWidget_template = "{{! template for the tooltip widget }}<div class='tip'>	<div class='tipcolor' style='height:10px;width:10px'></div>	<div class='tiptext'></div>";
+IriSP.tweetWidget_template = "{{! template for the tweet widget }}<div class='Ldt-tweetWidget'>  <div class='Ldt-tweet-DoubleBorder'>      <div class='Ldt-tweetWidgetKeepOpen Ldt-TraceMe' title='dont minimize automatically'></div>      <div class='Ldt-tweetWidgetMinimize Ldt-TraceMe' title='minimize window'></div>      <div class='Ldt-tweetAvatar'></div>      <div class='Ldt-tweetAvatar-profileArrow'></div>      <div class='Ldt-tweetContents'></div>      <a href='' target='_blank' class='Ldt-Retweet Ldt-TraceMe'><div class='Ldt-RetweetIcon'></div> - Retweet </a>      <a href='' target='_blank' class='Ldt-TweetReply Ldt-TraceMe'><div class='Ldt-TweetReplyIcon'></div> - Reply</a>  </div></div>";/* utils.js - various utils that don't belong anywhere else */
 
 /* trace function, for debugging */
 
@@ -1217,7 +1217,11 @@
 
 /* shortcut to have global variables in templates */
 IriSP.templToHTML = function(template, values) {
-  var params = IriSP.jQuery.extend(IriSP.default_templates_vars, values);
+  var params = IriSP.underscore.extend(
+      { "defaults" : IriSP.default_templates_vars,
+        "l10n" : IriSP.i18n.getMessages()
+        },
+      values);
   return Mustache.to_html(template, params);
 };
 
@@ -1227,7 +1231,15 @@
 IriSP.encodeURI = function(str) {
   return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').  
                                  replace(/\)/g, '%29').replace(/\*/g, '%2A');  
-}  
+}
+
+IriSP.jqEscape = function(text) {
+   return text.replace(/(:|\.)/g,'\\$1')
+}
+
+IriSP.jqId = function (text) { 
+   return IriSP.jQuery('#' + IriSP.jqEscape(text));
+ }  
 
 IriSP.__guidCounter = 0;
 IriSP.guid = function(prefix) {
@@ -1261,6 +1273,17 @@
   return (typeof(val) === "undefined" || val === null);
 };
 
+/** get a property that can have multiple names **/
+
+IriSP.get_aliased = function(_obj, _aliases) {
+    for (var _i = 0; _i < _aliases.length; _i++) {
+        if (typeof _obj[_aliases[_i]] !== "undefined") {
+            return _obj[_aliases[_i]];
+        }
+    }
+    return null;
+}
+
 /** issue a call to an url shortener and return the shortened url */
 IriSP.shorten_url = function(url) {
   if (IriSP.config.shortener.hasOwnProperty("shortening_function"))
@@ -1269,14 +1292,7 @@
   return url;
 };
 
-/** Similar to substr but remove the last word if
-    we're breaking a word in two.
- */ 
-IriSP.clean_substr = function(str, start, end) {
-  var s = str.substr(start, end).substr(start, end).split(" ");
-  s.pop();
-  return s.join(" ");
-};
+
 /* for ie compatibility
 if (Object.prototype.__defineGetter__&&!Object.defineProperty) {
    Object.defineProperty=function(obj,prop,desc) {
@@ -1285,6 +1301,11 @@
    }
 }
 */
+
+/* Creates regexps from text */
+IriSP.regexpFromText = function(_text) {
+    return new RegExp('(' + _text.replace(/(\W)/gim,'\\$1') + ')','gim');
+}
 /* wrapper that simulates popcorn.js because
    popcorn is a bit unstable at the time */
 
@@ -1431,6 +1452,22 @@
   }
 };
 
+IriSP.PopcornReplacement.player.prototype.volume = function(val) {
+    if (typeof this.playerFns.getVolume == "undefined" || typeof this.playerFns.setVolume == "undefined") {
+        return false;
+    }
+    var _vol = this.playerFns.getVolume();
+    if (typeof(val) !== "undefined" && parseFloat(val) !== NaN) {
+        val = Math.max(0, Math.min(1, val));
+        if (parseFloat(val) != parseFloat(_vol)) {
+            this.playerFns.setVolume(val);
+            this.trigger("volumechange");
+            _vol = this.playerFns.getVolume();
+        }
+    }
+    return _vol;
+};
+
 IriSP.PopcornReplacement.player.prototype.mute = IriSP.PopcornReplacement.player.prototype.muted;
 
 IriSP.PopcornReplacement.player.prototype.code = function(options) {
@@ -1625,11 +1662,13 @@
 
 IriSP.paths = {};
 
-IriSP.libdir = "../src/js/libs/";
+IriSP.libdir = "/metadataplayer/src/js/libs/";
 IriSP.jwplayer_swf_path = "../test/libs/player.swf";
-IriSP.platform_url = "http://localhost/pf";
+IriSP.platform_url = "http://192.168.56.101/pf";
 IriSP.default_templates_vars = { };
 
+IriSP.language = 'fr';
+
 /** ugly ugly ugly ugly - returns an object defining 
     the paths to the libs
     We need it that way cause it's called at runtime by
@@ -1640,11 +1679,16 @@
     libdir = IriSP.libdir;
   
   return { 
-      jQuery : "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js",
-      jQueryUI : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js",
-      jQueryToolTip : "http://cdn.jquerytools.org/1.2.4/all/jquery.tools.min.js",
-      swfObject : "http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js",
-      cssjQueryUI : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css",
+//      jQuery : "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js",
+    jQuery : libdir + "jquery.min.js",
+//      jQueryUI : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js",
+    jQueryUI : libdir + "jquery-ui.min.js",
+//      jQueryToolTip : "http://cdn.jquerytools.org/1.2.4/all/jquery.tools.min.js",
+    jQueryToolTip : libdir + "jquery.tools.min.js",
+//      swfObject : "http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js",
+    swfObject : libdir + "swfobject.js",
+//      cssjQueryUI : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css",
+    cssjQueryUI : libdir + "jquery-ui.css",
       popcorn : libdir + "popcorn.js",
       jwplayer : libdir + "jwplayer.js",
       popcornReplacement: libdir + "pop.js",
@@ -1653,7 +1697,8 @@
       "popcorn.mediafragment" : libdir + "popcorn.mediafragment.js",
       "popcorn.code" : libdir + "popcorn.code.js",
       "popcorn.jwplayer": libdir + "popcorn.jwplayer.js",
-      "popcorn.youtube": libdir + "popcorn.youtube.js"    
+      "popcorn.youtube": libdir + "popcorn.youtube.js",
+      "tracemanager": libdir + "tracemanager.js"
   };
 };
 
@@ -1689,18 +1734,20 @@
         minimize_period: 850 // how long does the slider stays maximized after the user leaves the zone ?
     },
     "createAnnotationWidget" : {
-        keywords: ["#faux-raccord", "#mot-clef"],
+        keywords: ["#amateur", "#digital-studies"],
         polemic_mode: true, /* enable polemics ? */
         /* polemics - the corresponding class names defined in the css should be for instance :
-           Ldt-createAnnotation-polemic-plusplus for plusplus
+           Ldt-createAnnotation-polemic-positive for positive
            Ldt-createAnnotation-polemic-equalequal for equalequal, etc.
         */
-        polemics: {"++" : "positive", "--" : "negative", "==" : "reference", "??" : "question"}, 
-        cinecast_version: true, /* put to false to enable the platform version, true for the festival cinecast one. */        
+        polemics: [ { "className" : "positive", "keyword" : "++" }, { "className" : "negative", "keyword" : "--" }, { "className" : "reference", "keyword" : "==" }, { "className" : "question", "keyword" : "??" } ], 
+        cinecast_version: false, /* put to false to enable the platform version, true for the festival cinecast one. */
+        
         /* where does the widget PUT the annotations - this is a mustache template. id refers to the id of the media ans is filled
            by the widget. 
         */
-        api_endpoint_template: platform_url + "/ldtplatform/api/ldt/annotations/{{id}}.json"
+        api_endpoint_template: platform_url + "/ldtplatform/api/ldt/annotations/{{id}}.json",
+        api_method: "PUT"
     },
     "SparklineWidget" : {
         column_width: 10 // the width of a column in pixels.
@@ -1712,15 +1759,17 @@
         ajax_mode: true, /* use ajax to get information about the annotations.
                            if set to false, only search in the annotations for the
                            current project. */
-                           
         /* the platform generates some funky urls. We replace them afterwards to point to the
            correct place - this setting will probably be overwritten by the platform 
            implementers.
            Note that the player has to replace the variables between {{ and }} by its own values.
         */
         ajax_url: platform_url + "/ldtplatform/api/ldt/segments/{media}/{begin}/{end}", 
+        
         ajax_granularity: 10000, /* how much ms should we look before and after the
                                    current timecode */
+      
+        default_thumbnail: "/metadataplayer/src/css/imgs/video_sequence.png",
         
         project_url: platform_url + "/ldtplatform/ldt/front/player/" /* the beginning 
                                                                         of a link to the
@@ -1729,28 +1778,28 @@
   };
 };
 
-IriSP.defaults.paths = {
-//  "imgs": "/tweetlive/res/metadataplayer/src/css/imgs"
-  "imgs": "/mdp/src/css/imgs"
-};
-
-IriSP.defaults.default_templates_vars = function() { 
-  return {
-  //"img_dir" : IriSP.paths.imgs 
-  };
-}
-
 /*
 Override this if you want to change the info the player receives about the user.
 It's typically overrided in server-side templates with user-specific data.
 */
-IriSP.defaults.user = function() {
-  return {
+IriSP.defaults.user = function() { return {
       "name" : "Anonymous user",
       "avatar" : IriSP.paths.imgs + "/user_default_icon.png"
-    }  
-};
-/* the widget classes and definitions */
+    }
+};
+
+
+IriSP.defaults.paths = {
+//  "imgs": "/tweetlive/res/metadataplayer/src/css/imgs"
+  "imgs": "/metadataplayer/src/css/imgs"
+};
+
+
+IriSP.defaults.default_templates_vars = function() { 
+  return {
+  "img_dir" : IriSP.paths.imgs 
+  };
+}/* the widget classes and definitions */
 
 /**
   * @class Widget is an "abstract" class. It's mostly used to define some properties common to every widget.
@@ -1802,11 +1851,33 @@
   } 
 
   if (config.hasOwnProperty("layoutManager")) {
-     this.layoutManager = config.layoutManager;     
+     this.layoutManager = config.layoutManager;
+  }
+  if (typeof this.selector != "undefined") {
+      this.selector.addClass("Ldt-TraceMe").addClass("Ldt-Widget");
+      this.selector.attr("widget-type", this._config.type);
   }
   
 };
 
+// This functions checks for configuration options
+
+IriSP.Widget.prototype.checkOption = function(_name, _default) {
+    this[_name] = (
+        typeof this._config[_name] != "undefined"
+        ? this._config[_name]
+        : (
+            (typeof IriSP.widgetsDefaults[this._config.type] != "undefined" && IriSP.widgetsDefaults[this._config.type][_name] != "undefined")
+            ? IriSP.widgetsDefaults[this._config.type][_name]
+            : (
+                typeof _default != "undefined"
+                ? _default
+                : null
+            )
+        )
+    )
+}
+
 /**
   * This method responsible of drawing a widget on screen.
   */
@@ -1864,7 +1935,10 @@
     /* this is a shortcut */
     this.selector = IriSP.jQuery("#" + this._div);
     
-    this.selector.css("width", this._width);
+    this.selector.css({
+        "width": this._width,
+        "clear": "both"
+    });
     
     if (this._height !== undefined)
       this.selector.css("height", this._height);
@@ -1894,7 +1968,7 @@
     var spacerDiv = IriSP.guid("LdtPlayer_spacer_");
     this._widgets.push([widgetName, newDiv]);    
 
-    var divTempl = "<div id='{{id}}' style='width: {{width}}px; position: relative;'></div";
+    var divTempl = "<div id='{{id}}' style='width: {{width}}px; position: relative; clear: both;'></div";
     var spacerTempl = "<div id='{{spacer_id}}' style='width: {{width}}px; position: relative; height: {{spacer_div_height}};'></div";
     
     var divCode = Mustache.to_html(divTempl, {id: newDiv, width: this._width});
@@ -1983,14 +2057,9 @@
             */
             opts.file = "";
             opts.streamer = "";
-            var fullPath = IriSP.__jsonMetadata["medias"][0]["href"];
+            var fullPath = IriSP.get_aliased(IriSP.__jsonMetadata["medias"][0], ["href","url"]);
             
-            /* files can either use href or url to refer to the stream */
-            if (IriSP.null_or_undefined(fullPath)) {
-              fullPath = IriSP.__jsonMetadata["medias"][0]["url"];
-            }
-            
-            if (IriSP.null_or_undefined(fullPath)) {
+            if (fullPath === null) {
               console.log("no url or href field defined in the metadata.");
             }
             
@@ -2137,8 +2206,14 @@
       
       var i = 0;
       for(i = 0; i < widgetConfig.requires.length; i++) {
-        var widgetName = widgetConfig.requires[i]["type"];
-        widget[widgetName] = IriSP.instantiateWidget(popcornInstance, serialFactory, layoutManager, widgetConfig.requires[i], defaultOptions);
+        var widgetName = widgetConfig.requires[i]["type"],
+            _configobj = IriSP.jQuery.extend({}, widgetConfig.requires[i]),
+            _div = document.createElement('div'),
+            _container = IriSP.guid(arr.container + '_' + widgetName + '_');
+        _configobj.container = _container;
+        _div.id = _container;
+        widget.selector.append(_div);
+        widget[widgetName] = IriSP.instantiateWidget(popcornInstance, serialFactory, layoutManager, _configobj, defaultOptions);
       }
     }       
      
@@ -2183,6 +2258,7 @@
 
 /** single point of entry for the metadataplayer */
 IriSP.initPlayer = function(config, metadata_url, libdir, platform_url) {
+    document.getElementById(config.gui.container).innerHTML = IriSP.templToHTML(IriSP.loading_template, config.gui);
     IriSP.configureDefaults(libdir, platform_url);
     IriSP.loadLibs(IriSP.lib, config, metadata_url,
       function() {   
@@ -2193,7 +2269,205 @@
               
               var widgets = IriSP.configureWidgets(pop, layoutManager, config.gui); 
               var modules = IriSP.configureModules(pop, config.modules); 
+              IriSP.jQuery('#Ldt-loader').detach();
       });
+};IriSP.I18n = function() {
+    this.messages = {};
+    this.base_lang = 'en';
+}
+
+IriSP.I18n.prototype.getLanguage = function(lang) {
+    var _lang = (
+        typeof lang != "undefined"
+        ? lang
+        : (
+            typeof IriSP.language != "undefined"
+            ? IriSP.language
+            : this.base_lang
+        )
+    );
+    return (
+        typeof this.messages[_lang] == "object"
+        ? _lang
+        : (
+            typeof this.messages[this.base_lang] == "object"
+            ? this.base_lang
+            : null
+        )
+    )
+}
+
+IriSP.I18n.prototype.getMessages = function(lang) {
+    var _lang = this.getLanguage(lang);
+    return (
+        _lang != null
+        ? this.messages[_lang]
+        : {}
+    );
+}
+
+IriSP.I18n.prototype.getMessage = function(message, lang) {
+    var _msgs = this.getMessages(lang);
+    return (
+        typeof _msgs[message] != "undefined"
+        ? _msgs[message]
+        : message
+    )
+}
+
+IriSP.I18n.prototype.addMessage = function(lang, messagekey, messagevalue) {
+    if (typeof this.messages[lang] == "undefined") {
+        this.messages[lang] = {};
+    }
+    this.messages[lang][messagekey] = messagevalue;
+}
+
+IriSP.I18n.prototype.addMessages = function(messagesObj) {
+    var _this = this;
+    IriSP.underscore(messagesObj).each(function(_messages, _lang) {
+        IriSP.underscore(_messages).each(function(_value, _key) {
+            _this.addMessage(_lang, _key, _value);
+        })
+    });
+}
+
+IriSP.i18n = new IriSP.I18n();
+
+IriSP.i18n.addMessages({
+    "fr": {
+        "loading_wait": "Chargement en cours, veuillez patienter&hellip;"
+    },
+    "en": {
+        "loading_wait": "Loading, please wait&hellip;"
+    }
+})
+/* To wrap a player the develop should create a new class derived from
+the IriSP.PopcornReplacement.player and defining the correct functions */
+
+/** allocine player wrapper */
+IriSP.PopcornReplacement.allocine = function(container, options) {
+//    console.log("Calling allocine player");
+    /* appel du parent pour initialiser les structures communes à tous les players */
+    IriSP.PopcornReplacement.player.call(this, container, options);   
+    
+    var _this = this;
+
+    /* Définition des fonctions de l'API -  */
+
+    this.playerFns = {
+        play : function() {
+            if (_this.player) {
+            //    console.log("ask play _this.player = " + _this.player);
+                return _this.player.sendToActionScript("play");
+            } else {
+                return false;
+            }
+        },
+        pause : function() {
+            if (_this.player) {
+            //    console.log("ask pause _this.player = " + _this.player);
+                return _this.player.sendToActionScript("pause");
+            } else {
+                return false;
+            }
+        },
+        getPosition : function() {
+            if (_this.player) {
+                return _this.player.sendToActionScript("getSeek","return");
+            } else {
+                return 0;
+            }
+        },
+        seek : function(pos) {
+            if (_this.player) {
+                return _this.player.sendToActionScript("seek",pos);
+            } else {
+                return false;
+            }
+        },
+        getMute : function() {
+            if (_this.player) {
+                return _this.player.sendToActionScript("getMute","return");
+            } else {
+                return false;
+            }
+        },
+        setMute : function(p) {
+            if (_this.player) {
+                //return p ? _this.player.sendToActionScript("setMute") : _this.player.sendToActionScript("setMute");
+            	_this.player.sendToActionScript("setMute");
+            } else {
+                return false;
+            }
+        }
+    }
+
+    window.onReady = IriSP.wrap(this, this.ready);
+    window.onAllocineStateChange = IriSP.wrap(this, this.stateHandler);
+    window.onTime = IriSP.wrap(this, this.progressHandler);
+    
+    var _videoUrl = (
+        typeof options.directVideoPath == "string"
+        ? options.directVideoPath
+        : IriSP.get_aliased(IriSP.__jsonMetadata["medias"][0], ["href","url"])
+    );
+    
+    var fv = "streamFMS=true&adVast=false&lg=fr_cinecast&autoPlay=" + options.autoPlay + "&directVideoTitle=&urlAcData=" + options.urlAcData + "&directVideoPath=" + _videoUrl + "&host=http://allocine.fr";
+//    console.log("fv = " + fv);
+    
+    var params = {
+        "allowScriptAccess" : "always",
+        "wmode": "opaque",
+        "flashvars" : fv
+    };
+    var atts = {
+        id : this.container
+    };
+    swfobject.embedSWF(options.acPlayerUrl, this.container, options.width, options.height, "8", null, null, params, atts);
+
+};
+
+IriSP.PopcornReplacement.allocine.prototype = new IriSP.PopcornReplacement.player("", {});
+
+IriSP.PopcornReplacement.allocine.prototype.ready = function() {
+    this.player = document.getElementById(this.container);
+    this.player.addEventListener("onStateChange", "onAllocineStateChange");
+    this.player.addEventListener("onVideoProgress", "onAllocineVideoProgress");
+    this.player.cueVideoByUrl(this._options.video);
+    this.callbacks.onReady();
+};
+
+IriSP.PopcornReplacement.allocine.prototype.progressHandler = function(progressInfo) {
+    this.callbacks.onTime({
+        position: progressInfo.mediaTime
+    });
+}
+
+
+IriSP.PopcornReplacement.allocine.prototype.stateHandler = function(state) {
+    console.log("stateHandler");
+    switch(state) {
+        case 1:
+            this.callbacks.onPlay();
+            break;
+
+        case 2:
+            this.callbacks.onPause();
+            break;
+
+        case 3:
+            this.callbacks.onSeek({
+                position: this.player.getCurrentTime()
+            });
+            break;
+
+        /*
+        case 5:
+            this.callbacks.onReady();
+            break;
+        */
+    }
+    
 };/* To wrap a player the develop should create a new class derived from
 the IriSP.PopcornReplacement.player and defining the correct functions */
 
@@ -2245,11 +2519,26 @@
         },
         setMute : function(p) {
             if (_this.player) {
-                return p ? _this.player.mute() : _this.player.unMute();
+                if (p) {
+                    _this.player.mute();
+                }
+                else {
+                    _this.player.unMute();
+                }
+            }
+        },
+        getVolume : function() {
+            if (_this.player) {
+                return _this.player.getVolume() / 100;
             } else {
                 return false;
             }
-        }
+        },
+        setVolume : function(p) {
+            if (_this.player) {
+                _this.player.setVolume(Math.floor(100 * p));
+            }
+        },
     }
 
     window.onDailymotionPlayerReady = IriSP.wrap(this, this.ready);
@@ -2316,7 +2605,6 @@
 
 /** jwplayer player wrapper */
 IriSP.PopcornReplacement.jwplayer = function(container, options) {
-
   /* appel du parent pour initialiser les structures communes à tous les players */
   IriSP.PopcornReplacement.player.call(this, container, options);
   
@@ -2329,7 +2617,9 @@
     getPosition: function() { return jwplayer(this.container).getPosition(); },
     seek: function(pos) { return jwplayer(this.container).seek(pos); },
     getMute: function() { return jwplayer(this.container).getMute() },
-    setMute: function(p) { return jwplayer(this.container).setMute(p); }
+    setMute: function(p) { return jwplayer(this.container).setMute(p); },
+    getVolume: function() { return jwplayer(this.container).getVolume() / 100; },
+    setVolume: function(p) { return jwplayer(this.container).setVolume(Math.floor(100*p)); }
   }
 
   options.events = this.callbacks;
@@ -2483,9 +2773,24 @@
   IriSP.Widget.call(this, Popcorn, config, Serializer);
   this.__counter = 0;
   this.__oldList = [];
-  
-  this.ajax_mode = IriSP.widgetsDefaults["AnnotationsListWidget"].ajax_mode;
-  this.project_url = IriSP.widgetsDefaults["AnnotationsListWidget"].project_url;  
+ 
+  this.checkOption('ajax_mode');
+  this.checkOption('project_url');
+  this.checkOption('default_thumbnail');
+  this.checkOption("cinecast_version", false);
+  this.searchRe = null;
+  this._ajax_cache = [];
+  var _this = this;
+  
+  this._Popcorn.listen("IriSP.search", function(searchString) {
+      _this.searchHandler(searchString);
+  });
+  this._Popcorn.listen("IriSP.search.closed", function() {
+      _this.searchHandler(false);
+  });
+  this._Popcorn.listen("IriSP.search.cleared", function() {
+      _this.searchHandler(false);
+  });
 };
 
 
@@ -2497,77 +2802,136 @@
 IriSP.AnnotationsListWidget.prototype.clearWidget = function() {
 };
 
+IriSP.AnnotationsListWidget.prototype.searchHandler = function(searchString) {
+  this.searchRe = (searchString && searchString.length) ? IriSP.regexpFromText(searchString) : null;
+  if (this.ajax_mode) {
+      var _this = this,
+        _annotations = (
+            this.searchRe === null
+            ? this._ajax_cache
+            : IriSP.underscore.filter(this._ajax_cache, function(_a) {
+               return (_this.searchRe.test(_a.desc) || _this.searchRe.test(_a.title)); 
+            })
+        );
+    this.do_redraw(_annotations);
+    if (_annotations.length) {
+        this._Popcorn.trigger("IriSP.search.matchFound");
+      } else {
+        this._Popcorn.trigger("IriSP.search.noMatchFound");
+      }    
+  } else {
+      this.drawList();
+  }
+}
+
 /** effectively redraw the widget - called by drawList */
 IriSP.AnnotationsListWidget.prototype.do_redraw = function(list) {
-    var widgetMarkup = IriSP.templToHTML(IriSP.annotationsListWidget_template, {annotations: list});
-    this.selector.html(widgetMarkup);
-};
+    var _html = IriSP.templToHTML(
+        IriSP.annotationsListWidget_template, {
+            annotations: list
+        }),
+        _this = this;
+      
+    this.selector.html(_html);
+    
+    if (this.searchRe !== null) {
+        this.selector.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description")
+            .each(function()  {
+                var _$ = IriSP.jQuery(this);
+                _$.html(_$.text().replace(_this.searchRe, '<span class="Ldt-AnnotationsList-highlight">$1</span>'))
+            })
+    }
+};
+
+IriSP.AnnotationsListWidget.prototype.transformAnnotation = function(a) {
+    var _this = this
+    return {
+        "id" : a.id,
+        "title": this.cinecast_version ? IriSP.get_aliased(a.meta, ['creator_name', 'creator']) : a.content.title,
+        "desc" : this.cinecast_version ? a.content.data : a.content.description,
+        "begin": IriSP.msToTime(a.begin),
+        "end" : IriSP.msToTime(a.end),
+        "thumbnail" : (typeof a.meta == "object" && typeof a.meta.thumbnail == "string") ? a.meta.thumbnail : this.default_thumbnail,
+        "url" : (typeof a.meta == "object" && typeof a.meta.url == "string") ? a.meta.url : null,
+        "tags": typeof a.tags == "object"
+            ? IriSP.underscore(a.tags)
+                .chain()
+                .map(function(_t) {
+                    if (typeof _t == "string") {
+                        return _t.replace(/^.*:/,'#');
+                    } else {
+                        if (typeof _t['id-ref'] != "undefined") {
+                            var _f = IriSP.underscore.find(_this._serializer._data.tags, function(_tag) {
+                                return _tag.id == _t['id-ref'];
+                            });
+                            if (typeof _f != "undefined") {
+                                return IriSP.get_aliased(_f.meta, ['dc:title', 'title']);
+                            }
+                        }
+                    }
+                    return null;
+                })
+                .filter(function(_t) {
+                    return _t !== null && _t !== ""
+                })
+                .value()
+            : []
+    }    
+}
 
 /** draw the annotation list */
 IriSP.AnnotationsListWidget.prototype.drawList = function(force_redraw) {
   var _this = this;
   
-  var view_type = this._serializer.getContributions();
+//  var view_type = this._serializer.getContributions();
   var annotations = this._serializer._data.annotations;
   var currentTime = this._Popcorn.currentTime();
-    
   var list = [];
 
-  if (typeof(view_type) === "undefined") {    
+/*  if (typeof(view_type) === "undefined") {    
     return;
-  }
-
+} */
   for (i = 0; i < annotations.length; i++) {
-    var annotation = annotations[i];
-
-    /* filter the annotations whose type is not the one we want */
-    if (typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined"
-          && annotation.meta["id-ref"] !== view_type) {
-        continue;
+    var obj = this.transformAnnotation(annotations[i]);
+    obj.iterator = i;
+    obj.distance = Math.abs((annotations[i].end + annotations[i].begin) / 2000 - currentTime);
+    if (!this.cinecast_version || annotations[i].type == "cinecast:UserAnnotation") {
+        list.push(obj);
     }
-
-    /* only get the annotations happening in the current chapter */
-    if (!(annotation.begin <= currentTime * 1000 && annotation.end > currentTime * 1000)) {        
-        continue;
+    
+  }
+  
+    if (this.searchRe !== null) {
+        list = list.filter(function(_a) {
+            return (_this.searchRe.test(_a.desc) || _this.searchRe.test(_a.title)); 
+        });
+        if (list.length) {
+            this._Popcorn.trigger("IriSP.search.matchFound");
+          } else {
+            this._Popcorn.trigger("IriSP.search.noMatchFound");
+          }
     }
-
-    var a = annotation;
-    var obj = {};
-
-    obj["id"] = a.id;
-    obj["title"] = a.content.title;
-    obj["desc"] = a.content.description;
-    obj["begin"] = IriSP.msToTime(annotation.begin);
-    obj["end"] = IriSP.msToTime(annotation.end);
-
-    list.push(obj);
-  }
+  
+  list = IriSP.underscore(list)
+    .chain()
+    .sortBy(function(_o) {
+        return _o.distance;
+    })
+    .first(10)
+    .sortBy(function(_o) {
+        return _o.iterator;
+    })
+    .value();
   
   var idList = IriSP.underscore.pluck(list, "id").sort();
 
-  if (idList.length !== this.__oldList.length) {
+  
+  if (!IriSP.underscore.isEqual(this.__oldList, idList) || typeof(force_redraw) !== "undefined") {
     this.do_redraw(list);
-  }
-    
-  var res = 1;
-  for (var i = 0; i < idList.length; i++) {
-    if (idList[i] !== this.__oldList[i])
-      res = 0;
-      break;
+    this.__oldList = idList;
   }
-  
-  this.__oldList = idList; /* save for next call */
-  
-  if (typeof(force_redraw) !== "undefined") {
-    this.do_redraw(list);
-  }
-  
-  /* the two lists are equal, no need to redraw */
-  if (res === 1) {
-    return;
-  } else {
-    this.do_redraw(list);
-  }
+   /* save for next call */
+  
   
 };
 
@@ -2588,10 +2952,10 @@
      we have to do that because the platform only knows at run time what view it's displaying.
   */
      
-  var platf_url = IriSP.widgetsDefaults["AnnotationsListWidget"].ajax_url
+  var platf_url = IriSP.widgetsDefaults.AnnotationsListWidget.ajax_url
                                       .replace(/\{/g, '{{').replace(/\}/g, '}}');
   var media_id = this._serializer.currentMedia()["id"];
-  var duration = +this._serializer.currentMedia().meta["dc:duration"];
+  var duration = this._serializer.getDuration();
   
   var begin_timecode = (Math.floor(tcode) - 300) * 1000;
   if (begin_timecode < 0)
@@ -2606,7 +2970,7 @@
 
   /* we create on the fly a serializer to get the ajax */
   var serializer = new IriSP.JSONSerializer(IriSP.__dataloader, templ);
-  serializer.sync(IriSP.wrap(this, function(json) { this.processJson(json, serializer) }));                  
+  serializer.sync(IriSP.wrap(this, function(json) { this.processJson(json, serializer) }));
 };
 
 /** process the received json - it's a bit hackish */
@@ -2625,39 +2989,23 @@
   var media = this._serializer.currentMedia()["id"];
   
   for (i = 0; i < annotations.length; i++) {
-      var annotation = annotations[i];
-
-      /* filter the annotations whose type is not the one we want */
-      /* We want _all_ the annotations.
-      if (typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined"
-            && !IriSP.underscore.include(view_types, annotation.meta["id-ref"])) {
-          continue;
-      }
-      */
-      var a = annotation;
-      var obj = {};
-
-      obj["id"] = a.id;
-      obj["title"] = a.content.title;
-      obj["desc"] = a.content.description;
-      obj["begin"] = IriSP.msToTime(annotation.begin);
-      obj["end"] = IriSP.msToTime(annotation.end);
-
-      /* only if the annotation isn't present in the document create an
-         external link */
-      if (!this.annotations_ids.hasOwnProperty(obj["id"])) {
-        // braindead url; jacques didn't want to create a new one in the platform,
-        // so we append the cutting id to the url.
-        obj["url"] = this.project_url + "/" + media + "/" + 
-                     annotation.meta["project"] + "/" +
-                     annotation.meta["id-ref"];
-        
-        // obj["url"] = document.location.href.split("#")[0] + "/" + annotation.meta["project"];
-      }
-      
+    var obj = this.transformAnnotation(annotations[i])
+      if (typeof obj.url == "undefined" || !obj.url) {
+          /* only if the annotation isn't present in the document create an
+             external link */
+          if (this.annotations_ids.indexOf(obj.id.toLowerCase()) == -1) {
+            // braindead url; jacques didn't want to create a new one in the platform,
+            // so we append the cutting id to the url.
+            obj.url = this.project_url + "/" + media + "/" + 
+                         annotations[i].meta.project + "/" +
+                         annotations[i].meta["id-ref"] + '#id=' + annotations[i].id;
+                         
+            // obj.url = document.location.href.split("#")[0] + "/" + annotation.meta.project;
+          }
+          }
       l.push(obj);
   }
-
+  this._ajax_cache = l;
   this.do_redraw(l);
 };
 IriSP.AnnotationsListWidget.prototype.draw = function() {
@@ -2665,19 +3013,19 @@
   /* build a table of the annotations present in the document for faster 
      lookup
   */
-  this.annotations_ids = {};
-  
-  var annotations = this._serializer._data.annotations;
-  var i = 0;
-  for(i = 0; i < annotations.length; i++) {
-    this.annotations_ids[annotations[i]["id"]] = 1;
-  }
-  
-  this.drawList();
+  this.annotations_ids = IriSP.underscore(this._serializer._data.annotations).map(function(_a) {
+    return _a.id.toLowerCase();
+  });
+  
+  var _this = this;
     
-  if (!this.ajax_mode) {    
-    this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", IriSP.wrap(this, function() { this.drawList(true); }));
-    this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.redraw));
+    if (!this.ajax_mode) {
+        var _throttled = IriSP.underscore.throttle(function() {
+            _this.drawList();
+        }, 1500);
+        _throttled();
+        this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", _throttled);
+        this._Popcorn.listen("timeupdate", _throttled);
   } else {
     /* update the widget when the video has finished loading and when it's seeked and paused */
     this._Popcorn.listen("seeked", IriSP.wrap(this, this.ajaxRedraw));
@@ -2687,11 +3035,20 @@
     this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", IriSP.wrap(this, this.ajaxRedraw));
   }
 
-};
-
-IriSP.AnnotationsListWidget.prototype.redraw = function() {
-  this.drawList();
-};IriSP.AnnotationsWidget = function(Popcorn, config, Serializer) {
+};/* Internationalization for this widget */
+
+IriSP.i18n.addMessages(
+    {
+        "fr": {
+            "keywords": "Mots-clés"
+        },
+        "en": {
+            "keywords": "Keywords"
+        }
+    }
+);
+
+IriSP.AnnotationsWidget = function(Popcorn, config, Serializer) {
   IriSP.Widget.call(this, Popcorn, config, Serializer);
   /* flag used when we're creating an annotation */
   this._hidden = false;
@@ -2712,7 +3069,7 @@
     var keywords =  "";
     var begin = +annotation.begin / 1000;
     var end = +annotation.end / 1000;
-    var duration = +this._serializer.currentMedia().meta["dc:duration"];
+    var duration = this._serializer.getDuration();
     var tags = "";
     
     var title_templ = "{{title}} - ( {{begin}} - {{end}} )";
@@ -2727,7 +3084,7 @@
       var tag_list = {};
       for (var i = 0; i < this._serializer._data.tags.length; i++) {
         var id = this._serializer._data.tags[i]["id"];
-        var keyword = this._serializer._data.tags[i]["meta"]["dc:title"];
+        var keyword = IriSP.get_aliased(this._serializer._data.tags[i]["meta"], ["dc:title", "title"]);
 
         tag_list[id] = keyword;
       }
@@ -2739,7 +3096,7 @@
       }
     }
     
-    tags = "Keywords: " + tags.slice(0, tags.length - 2);
+    tags = IriSP.i18n.getMessage("keywords") + ": " + tags.slice(0, tags.length - 2);
     
     this.selector.find(".Ldt-SaKeywords").text(tags);
     
@@ -2866,7 +3223,7 @@
     var begin = (+ currentAnnotation.begin) / 1000;
     var end = (+ currentAnnotation.end) / 1000;
 
-    var duration = +this._serializer.currentMedia().meta["dc:duration"] / 1000;
+    var duration = this._serializer.getDuration() / 1000;
     var middle_time = (begin + end) / 2;
     var percents = middle_time / duration;
 
@@ -2912,18 +3269,59 @@
 IriSP.ArrowWidget.prototype.releaseArrow = function() {
   this._blockArrow = false;   
 };
+/* Internationalization for this widget */
+
+IriSP.i18n.addMessages(
+    {
+        "en": {
+            "submit": "Submit",
+            "add_keywords": "Add keywords",
+            "add_polemic_keywords": "Add polemic keywords",
+            "your_name": "Your name",
+            "type_here": "Type your annotation here.",
+            "wait_while_processed": "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"
+        },
+        "fr": {
+            "submit": "Envoyer",
+            "add_keywords": "Ajouter des mots-clés",
+            "add_polemic_keywords": "Ajouter des mots-clés polémiques",
+            "your_name": "Votre nom",
+            "type_here": "Rédigez votre annotation ici.",
+            "wait_while_processed": "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"
+        }
+    }
+);
+
 IriSP.createAnnotationWidget = function(Popcorn, config, Serializer) {
   IriSP.Widget.call(this, Popcorn, config, Serializer);
   this._hidden = true;
-  this.keywords = IriSP.widgetsDefaults["createAnnotationWidget"].keywords;
-  
-  this.polemic_mode = IriSP.widgetsDefaults["createAnnotationWidget"].polemic_mode;
-  this.polemics = IriSP.widgetsDefaults["createAnnotationWidget"].polemics;
-  
-  this.cinecast_version = IriSP.widgetsDefaults["createAnnotationWidget"].cinecast_version;
-  this.api_endpoint_template = IriSP.widgetsDefaults["createAnnotationWidget"].api_endpoint_template;
-  
-  this.ids = {}; /* a dictionnary linking buttons ids to keywords */
+  
+  this.checkOption("keywords");
+  this.checkOption("polemic_mode", true);
+  this.checkOption("polemics");
+  this.checkOption("cinecast_version", false);
+  this.checkOption("api_endpoint_template");
+  this.checkOption("show_from_field", true);
+  this.checkOption("api_method");
+                         
+  if (!IriSP.null_or_undefined(IriSP.user)) {
+      if (!IriSP.null_or_undefined(IriSP.user.avatar)) {
+        this.user_avatar = IriSP.user.avatar;
+      }
+      if (!IriSP.null_or_undefined(IriSP.user.name)) {
+        this.user_name = IriSP.user.name;
+      }
+  }
   
   /* variables to save the current position of the slicer */
   if (this.cinecast_version) {
@@ -2943,14 +3341,9 @@
 
 IriSP.createAnnotationWidget.prototype.draw = function() {
   var _this = this;
-  var template_params = {cinecast_version: this.cinecast_version, 
-                         polemic_mode: this.polemic_mode};
-                         
-  if (!IriSP.null_or_undefined(IriSP.user) && !IriSP.null_or_undefined(IriSP.user.avatar))
-    template_params["user_avatar"] = IriSP.user.avatar;
   
   var annotationMarkup = IriSP.templToHTML(IriSP.createAnnotationWidget_template, 
-                                           template_params);
+                                           this);
   
 	this.selector.append(annotationMarkup);
   
@@ -2959,70 +3352,12 @@
   else {
     this.showStartScreen();
   }
-  
-  // add the keywords.
-  for (var i = 0; i < this.keywords.length; i++) {
-    var keyword = this.keywords[i];
-    var id = IriSP.guid("button_");
-    var templ = IriSP.templToHTML("<button id={{id}} class='Ldt-createAnnotation-absent-keyword'>{{keyword}}</button>", 
-                                  {keyword: keyword, id: id});
-                                  
-    this.ids[keyword] = id; // save it for the function that handle textarea changes.
-    
-    this.selector.find(".Ldt-createAnnotation-keywords").append(templ);
-    this.selector.find("#" + id).click(function(keyword) { return function() {
-      var contents = _this.selector.find(".Ldt-createAnnotation-Description").val();
-      if (contents.indexOf(keyword) != -1) {
-        var newVal = contents.replace(" " + keyword, "");
-        if (newVal == contents)
-          newVal = contents.replace(keyword, "");
-      } else {
-        if (contents === "")
-          var newVal = keyword;
-        else
-          var newVal = contents + " " + keyword;      
-      }
-      
-      _this.selector.find(".Ldt-createAnnotation-Description").val(newVal);
-      // we use a custom event because there's no simple way to test for a js
-      // change in a textfield.
-      _this.selector.find(".Ldt-createAnnotation-Description").trigger("js_mod");
-      // also call our update function.
-      //_this.handleTextChanges();
-    }
-   }(keyword));
-  }
-
-  // add the polemic buttons.
-  if(this.polemic_mode)
-    for (var polemic in this.polemics) {
-
-      var classname = IriSP.templToHTML("Ldt-createAnnotation-polemic-{{classname}}", {classname : this.polemics[polemic]});
-
-      var templ = IriSP.templToHTML("<button class='{{classname}} Ldt-createAnnotation-polemic-button'>{{polemic}}</button>",
-                  {classname: classname, polemic: polemic});
-                  
-      this.selector.find(".Ldt-createAnnotation-polemics").append(templ);
-      this.selector.find("." + classname).click(function(polemic) { return function() {
-          var contents = _this.selector.find(".Ldt-createAnnotation-Description").val();
-          if (contents.indexOf(polemic) != -1) {
-            var newVal = contents.replace(" " + polemic, "");
-            if (newVal == contents)
-              newVal = contents.replace(polemic, "");
-          } else {
-            if (contents === "")
-              var newVal = polemic;
-            else
-              var newVal = contents + " " + polemic;      
-          }
-          
-          _this.selector.find(".Ldt-createAnnotation-Description").val(newVal);
-          
-          // also call our update function.
-          _this.handleTextChanges();
-        }
-       }(polemic));
-      }    
+
+  // Add onclick event to both polemic and keywords buttons
+  
+  this.selector.find(".Ldt-createAnnotation-btnblock button").click(function() {
+      _this.addKeyword(IriSP.jQuery(this).text());
+  });
   
   // js_mod is a custom event because there's no simple way to test for a js
   // change in a textfield.                    
@@ -3030,11 +3365,7 @@
                .bind("propertychange keyup input paste js_mod", IriSP.wrap(this, this.handleTextChanges));
                
   /* the cinecast version of the player is supposed to pause when the user clicks on the button */
-  if (this.cinecast_version) {
-    this.selector.find(".Ldt-createAnnotation-Description")
-                 .one("propertychange keyup input paste js_mod", 
-                 function() { if (!_this._Popcorn.media.paused) _this._Popcorn.pause() });
-  }
+
   /* the cinecast version expects the user to comment on a defined segment.
      As the widget is always shown, we need a way to update it's content as
      time passes. We do this like we did with the annotationsWidget : we schedule
@@ -3092,6 +3423,19 @@
   }
 };
 
+/* Handles adding keywords and polemics */
+IriSP.createAnnotationWidget.prototype.addKeyword = function(_keyword) {
+    var _field = this.selector.find(".Ldt-createAnnotation-Description"),
+        _rx = IriSP.regexpFromText(_keyword),
+        _contents = _field.val();
+    _contents = ( _rx.test(_contents)
+        ? _contents.replace(_rx,"").replace("  "," ").trim()
+        : _contents.trim() + " " + _keyword
+    );
+    _field.val(_contents);
+    _field.trigger("js_mod");
+}
+
 /** handles clicks on the annotate button. Works only for the non-cinecast version */
 IriSP.createAnnotationWidget.prototype.handleAnnotateSignal = function() {
   
@@ -3114,7 +3458,7 @@
     // block the arrow.
     this._Popcorn.trigger("IriSP.ArrowWidget.blockArrow");
     
-    var duration = +this._serializer.currentMedia().meta["dc:duration"];
+    var duration = this._serializer.getDuration();
         
     var currentChapter = this._serializer.currentChapitre(currentTime);
 
@@ -3150,51 +3494,31 @@
 /** watch for changes in the textfield and change the buttons accordingly */
 IriSP.createAnnotationWidget.prototype.handleTextChanges = function(event) {
   var contents = this.selector.find(".Ldt-createAnnotation-Description").val();
-
-  for(var keyword in this.ids) {
-  
-    var id = this.ids[keyword];
-
-    if (contents.indexOf(keyword) != -1) {
-      /* the word is present in the textarea but the button is not toggled */
-      if (this.selector.find("#" + id).hasClass("Ldt-createAnnotation-absent-keyword"))
-          this.selector.find("#" + id).removeClass("Ldt-createAnnotation-absent-keyword")
-                                      .addClass("Ldt-createAnnotation-present-keyword");      
-    } else {
-      /* the word is absent from the textarea but the button is toggled */
-      if (this.selector.find("#" + id).hasClass("Ldt-createAnnotation-present-keyword")) {
-          this.selector.find("#" + id).removeClass("Ldt-createAnnotation-present-keyword")
-                                      .addClass("Ldt-createAnnotation-absent-keyword");
+  if (this.cinecast_version && !this._Popcorn.media.paused) {
+      this._Popcorn.pause();
+  }
+  this.selector.find(".Ldt-createAnnotation-btnblock button").each(function() {
+      var _rx = IriSP.regexpFromText(IriSP.jQuery(this).text());
+      if (_rx.test(contents)) {
+          IriSP.jQuery(this).parent().addClass("Ldt-createAnnotation-active-button");
+      } else {
+          IriSP.jQuery(this).parent().removeClass("Ldt-createAnnotation-active-button");
       }
-    }
-  }
-  
-  if (this.polemic_mode) {
-    /* Also go through the polemics to highlight the buttons */
-    for (var polemic in this.polemics) {
-      /* Add the active class to the button */
-      var classname = "Ldt-createAnnotation-polemic-" + this.polemics[polemic];
-      if (contents.indexOf(polemic) != -1) {        
-        this.selector.find("." + classname).addClass("Ldt-createAnnotation-polemic-active");
-      } else {
-        if (this.selector.find("." + classname).addClass("Ldt-createAnnotation-polemic-active"))
-          this.selector.find("." + classname).removeClass("Ldt-createAnnotation-polemic-active")
-      }
-    }
-  }
+  });
+  
 };
 
 IriSP.createAnnotationWidget.prototype.showStartScreen = function() {
-  this.selector.find(".Ldt-createAnnotation-DoubleBorder").children().hide();
+  this.selector.find(".Ldt-createAnnotation-screen").hide();
   this.selector.find(".Ldt-createAnnotation-startScreen").show();
   
   var jqTextfield = this.selector.find(".Ldt-createAnnotation-Description"); // handle on the textfield. used for the closure
   
   /* test if the browser supports the placeholder attribute */
   if (!IriSP.null_or_undefined(jqTextfield.get(0).placeholder)) {
-    jqTextfield.attr("placeholder", "Type your annotation here."); 
+    jqTextfield.attr("placeholder", IriSP.i18n.getMessage('type_here')); 
   } else {
-    jqTextfield.val("Type your annotation here.");
+    jqTextfield.val(IriSP.i18n.getMessage('type_here'));
     jqTextfield.one("click", IriSP.wrap(this, function() { jqTextfield.val(""); }));    
   }
   
@@ -3204,26 +3528,30 @@
 };
 
 IriSP.createAnnotationWidget.prototype.showWaitScreen = function() {
-  this.selector.find(".Ldt-createAnnotation-DoubleBorder").children().hide();
+  this.selector.find(".Ldt-createAnnotation-screen").hide();
   this.selector.find(".Ldt-createAnnotation-waitScreen").show();
   this._state = "waitScreen";
 };
 
 IriSP.createAnnotationWidget.prototype.showErrorScreen = function() {
-  this.selector.find(".Ldt-createAnnotation-DoubleBorder").children().hide();
+  this.selector.find(".Ldt-createAnnotation-screen").hide();
   this.selector.find(".Ldt-createAnnotation-errorScreen").show();
   this._state = "errorScreen";
+  var _this = this;
+  window.setTimeout(function() { _this.showStartScreen(); }, 2000);
 };
 
 /** update show the final screen with links to share the created annotation */
 IriSP.createAnnotationWidget.prototype.showEndScreen = function(annotation) {
-  this.selector.find(".Ldt-createAnnotation-DoubleBorder").children().hide();
+  this.selector.find(".Ldt-createAnnotation-screen").hide();
   
   if (this.cinecast_version) {
     this.selector.find(".Ldt-createAnnotation-Title").parent().show();      
   }
 
-  var url = document.location.href + "#id=" + annotation.id;
+  var url = ( (typeof annotation.meta == "object" && typeof annotation.meta.url == "string" && annotation.meta.url.length)
+    ? annotation.meta.url
+    : ( document.location.href + "#id=" + annotation.id ) );
   var twStatus = IriSP.mkTweetUrl(url);
   var gpStatus = IriSP.mkGplusUrl(url);
   var fbStatus = IriSP.mkFbUrl(url);
@@ -3241,7 +3569,7 @@
   var _this = this;
   var textfield = this.selector.find(".Ldt-createAnnotation-Description");
   var contents = textfield.val();
-
+  
   if (contents === "") {  
     if (this.selector.find(".Ldt-createAnnotation-errorMessage").length === 0) {
       this.selector.find(".Ldt-createAnnotation-Container")
@@ -3271,7 +3599,7 @@
                       if (_this._state == "waitScreen") {
                         _this.showEndScreen(annotation);
                         if (_this.cinecast_version) {
-                          window.setTimeout(IriSP.wrap(_this, function() { this.showStartScreen(); }), 5000);
+                          window.setTimeout(function() { _this.showStartScreen(); }, 5000);
                         }
                       }
                       // hide the slicer widget
@@ -3290,51 +3618,58 @@
 IriSP.createAnnotationWidget.prototype.sendLdtData = function(contents, callback) {
   var _this = this;
   var apiJson = {annotations : [{}], meta: {}};
-  var annotation = apiJson["annotations"][0];
-  
-  annotation["media"] = this._serializer.currentMedia()["id"];
-  var duration_part = Math.round(this._serializer.currentMedia().meta["dc:duration"] / 20);
+  var annotation = apiJson.annotations[0];
+  
+  annotation.media = this._serializer.currentMedia()["id"];
   
   if (this.cinecast_version) {   
-      annotation["begin"] = Math.round(this._Popcorn.currentTime() * 1000 - duration_part);
-      annotation["end"] = Math.round(this._Popcorn.currentTime() * 1000 + duration_part);      
+      annotation.begin = Math.round(this._Popcorn.currentTime() * 1000);
+      annotation.end = annotation.begin;      
   } else {
-    var duration = +this._serializer.currentMedia().meta["dc:duration"];    
-    annotation["begin"] = +((duration * (this.sliceLeft / 100)).toFixed(0));
-    annotation["end"] = +((duration * ((this.sliceWidth + this.sliceLeft) / 100)).toFixed(0));
+    var duration = this._serializer.getDuration();    
+    annotation.begin = +((duration * (this.sliceLeft / 100)).toFixed(0));
+    annotation.end = +((duration * ((this.sliceWidth + this.sliceLeft) / 100)).toFixed(0));
   }
 
   // boundary checks
-  if (annotation["begin"] < 0)
-        annotation["begin"] = 0;
-  
-  if (annotation["end"] > this._serializer.currentMedia().meta["dc:duration"])
-    annotation["end"] = this._serializer.currentMedia().meta["dc:duration"];
-      
-  
-  annotation["type"] = this._serializer.getContributions();
-  if (typeof(annotation["type"]) === "undefined")
-    annotation["type"] = "";
-  
-  annotation["type_title"] = "Contributions";
+  annotation.begin = Math.max(0, annotation.begin);
+  annotation.end = Math.min(this._serializer.getDuration(), annotation.end);
+  
+  annotation.type = ( this.cinecast_version ? "cinecast:UserAnnotation" : ( this._serializer.getContributions() || "" ));
+  if (typeof(annotation.type) === "undefined")
+    annotation.type = "";
+  
+  annotation.type_title = "Contributions";
   annotation.content = {};
-  annotation.content["data"] = contents;
-  
-  var meta = apiJson["meta"];
-  if (!IriSP.null_or_undefined(IriSP.user) && !IriSP.null_or_undefined(IriSP.user.name))
-    meta.creator = IriSP.user.name;    
-  else 
-    meta.creator = "An User";
+  annotation.content.data = contents;
+  if (this.cinecast_version) {
+      var _extract = IriSP.underscore(this._serializer._data.annotations)
+          .filter(function(_a) {
+              return (_a.begin <= annotation.begin && _a.end >= annotation.begin && _a.type == "cinecast:MovieExtract");
+          })
+      if (_extract.length) {
+          annotation.extract = _extract[0].id;
+      }
+  }
+  
+  var meta = apiJson.meta;
+  
+  
+  var _username = this.selector.find(".Ldt-createAnnotation-userName").val();
+  meta.creator = (
+      (_username && _username.length)
+      ? _username
+      : (
+          (!IriSP.null_or_undefined(IriSP.user) && !IriSP.null_or_undefined(IriSP.user.name))
+          ? IriSP.user.name
+          : "Anonymous user"
+      )
+  );
   
   meta.created = Date().toString();
   
-  annotation["tags"] = [];
-  
-  for (var i = 0; i < this.keywords.length; i++) {
-    var keyword = this.keywords[i];
-    if (contents.indexOf(keyword) != -1)
-      annotation["tags"].push(keyword);
-  }
+  // All #hashtags are added to tags
+  annotation.tags = contents.match(/#[^#\s]+\b/gim) || [];
   
   var jsonString = JSON.stringify(apiJson);
   var project_id = this._serializer._data.meta.id;
@@ -3345,31 +3680,35 @@
                           
   IriSP.jQuery.ajax({
       url: url,
-      type: 'PUT',
+      type: this.api_method,
       contentType: 'application/json',
       data: jsonString,               
       //dataType: 'json',
       success: IriSP.wrap(this, function(json, textStatus, XMLHttpRequest) {                   
                     /* add the annotation to the annotation and tell the world */
-                    
-                    /* if the media doesn't have a contributions line, we need to add one */
-                    if (typeof(this._serializer.getContributions()) === "undefined") {
-                      /* set up a basic view */
-                      var tmp_view = {"dc:contributor": "perso", "dc:creator": "perso", "dc:title": "Contributions",
-                                      "id": json.annotations[0].type}
-
-                      this._serializer._data["annotation-types"].push(tmp_view);
-                    }
+                    var annotation = json.annotations[0];
                     
-                    delete annotation.tags;
-                    annotation.content.description = annotation.content.data;
-                    annotation.content.title = "";
-                    delete annotation.content.data;
-                    annotation.id = json.annotations[0].id;
-
-                    annotation.meta = meta;
-                    annotation.meta["id-ref"] = json.annotations[0]["type"];
-                    
+                    if (!this.cinecast_version) {
+                    /* if the media doesn't have a contributions line, we need to add one */
+                        if (typeof(this._serializer.getContributions()) === "undefined") {
+                          /* set up a basic view */
+                          var tmp_view = {"dc:contributor": "perso", "dc:creator": "perso", "dc:title": "Contributions",
+                                          "id": json.annotations[0].type}
+    
+                          
+                            IriSP.get_aliased(this._serializer._data, ["annotation_types", "annotation-types"]).push(tmp_view);
+                        }
+                        
+                        delete annotation.tags;
+                        annotation.content.description = annotation.content.data;
+                        annotation.content.title = "";
+                        delete annotation.content.data;
+                        annotation.id = json.annotations[0].id;
+    
+                        annotation.meta = meta;
+                        annotation.meta["id-ref"] = json.annotations[0]["type"];
+                    }
+                        
                     // everything is shared so there's no need to propagate the change
                     _this._serializer._data.annotations.push(annotation);
  
@@ -3398,6 +3737,42 @@
         
     console.log(this);
 }
+/* Internationalization for this widget */
+
+IriSP.i18n.addMessages(
+    {
+        "en": {
+            "play_pause": "Play/Pause",
+            "mute_unmute": "Mute/Unmute",
+            "play": "Play",
+            "pause": "Pause",
+            "mute": "Mute",
+            "unmute": "Unmute",
+            "annotate": "Annotate",
+            "search": "Search",
+            "elapsed_time": "Elapsed time",
+            "total_time": "Total time",
+            "volume": "Volume",
+            "volume_control": "Volume control"
+        },
+        "fr": {
+            "play_pause": "Lecture/Pause",
+            "mute_unmute": "Couper/Activer le son",
+            "play": "Lecture",
+            "pause": "Pause",
+            "mute": "Couper le son",
+            "unmute": "Activer le son",
+            "annotate": "Annoter",
+            "search": "Rechercher",
+            "elapsed_time": "Durée écoulée",
+            "total_time": "Durée totale",
+            "volume": "Niveau sonore",
+            "volume_control": "Réglage du niveau sonore"
+        }
+    }
+);
+
+
 IriSP.PlayerWidget = function(Popcorn, config, Serializer) {
   IriSP.Widget.call(this, Popcorn, config, Serializer);
   
@@ -3413,7 +3788,7 @@
 	var height = this.height;
 	var heightS = this.height-20;
 	  
-	var playerTempl = IriSP.templToHTML(IriSP.player_template, {"share_template" : IriSP.share_template});
+	var playerTempl = IriSP.templToHTML(IriSP.player_template, this._config);
   this.selector.append(playerTempl);		
 	
   this.selector.children(".Ldt-controler").show();
@@ -3422,7 +3797,7 @@
   this._Popcorn.listen("play", IriSP.wrap(this, this.playButtonUpdater));
   this._Popcorn.listen("pause", IriSP.wrap(this, this.playButtonUpdater));
   
-  this._Popcorn.listen("volumechange", IriSP.wrap(this, this.muteButtonUpdater));
+  this._Popcorn.listen("volumechange", IriSP.wrap(this, this.volumeUpdater));
 
   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeDisplayUpdater));  
   // update the time display for the first time.
@@ -3438,9 +3813,20 @@
                                             { self._Popcorn.trigger("IriSP.PlayerWidget.AnnotateButton.clicked"); });
   this.selector.find(".Ldt-CtrlSearch").click(function() { self.searchButtonHandler.call(self); });
   
-  this.selector.find('.Ldt-CtrlSound').click(function() { self.muteHandler.call(self); } );
-
-  this.selector.find(".Ldt-CtrlPlay").attr( "style", "background-color:#CD21C24;" );
+	var _volctrl = this.selector.find(".Ldt-Ctrl-Volume-Control");
+    this.selector.find('.Ldt-CtrlSound')
+        .click(function() { self.muteHandler.call(self); } )
+        .mouseover(function() {
+            _volctrl.show();
+        })
+        .mouseout(function() {
+            _volctrl.hide();
+        });
+    _volctrl.mouseover(function() {
+        _volctrl.show();
+    }).mouseout(function() {
+        _volctrl.hide();
+    });
   
   /*
   var searchButtonPos = this.selector.find(".Ldt-CtrlSearch").position();
@@ -3451,16 +3837,27 @@
   // trigger an IriSP.PlayerWidget.MouseOver to the widgets that are interested (i.e : sliderWidget)
   this.selector.hover(function() { self._Popcorn.trigger("IriSP.PlayerWidget.MouseOver"); }, 
                       function() { self._Popcorn.trigger("IriSP.PlayerWidget.MouseOut"); });
+  this.selector.find(".Ldt-Ctrl-Volume-Cursor").draggable({
+      axis: "x",
+      drag: function(event, ui) {
+          var _vol = Math.max(0, Math.min( 1, ui.position.left / (ui.helper.parent().width() - ui.helper.outerWidth())));
+          ui.helper.attr("title",IriSP.i18n.getMessage('volume')+': ' + Math.floor(100*_vol) + '%');
+          self._Popcorn.volume(_vol);
+      },
+      containment: "parent"
+  });
  
-  this.muteButtonUpdater(); /* some player - jwplayer notable - save the state of the mute button between sessions */
+ setTimeout(function() {
+     self.volumeUpdater();
+ }, 1000); /* some player - jwplayer notable - save the state of the mute button between sessions */
 };
 
 /* Update the elasped time div */
 IriSP.PlayerWidget.prototype.timeDisplayUpdater = function() {
   
-  if (this._previousSecond === undefined)
+  if (this._previousSecond === undefined) {
     this._previousSecond = this._Popcorn.roundTime();
-  
+  }
   else {
     /* we're still in the same second, so it's not necessary to update time */
     if (this._Popcorn.roundTime() == this._previousSecond)
@@ -3469,7 +3866,7 @@
   }
   
   // we get it at each call because it may change.
-  var duration = +this._serializer.currentMedia().meta["dc:duration"] / 1000; 
+  var duration = this._serializer.getDuration() / 1000; 
   var totalTime = IriSP.secondsToTime(duration);
   var elapsedTime = IriSP.secondsToTime(this._Popcorn.currentTime());
   
@@ -3487,10 +3884,10 @@
   
   if ( status == true ){
     /* the background sprite is changed by adding/removing the correct classes */
-    this.selector.find(".Ldt-CtrlPlay").attr("title", "Play");
+    this.selector.find(".Ldt-CtrlPlay").attr("title", IriSP.i18n.getMessage('play'));
     this.selector.find(".Ldt-CtrlPlay").removeClass("Ldt-CtrlPlay-PauseState").addClass("Ldt-CtrlPlay-PlayState");
   } else {
-    this.selector.find(".Ldt-CtrlPlay").attr("title", "Pause");
+    this.selector.find(".Ldt-CtrlPlay").attr("title", IriSP.i18n.getMessage('pause'));
     this.selector.find(".Ldt-CtrlPlay").removeClass("Ldt-CtrlPlay-PlayState").addClass("Ldt-CtrlPlay-PauseState");
   }  
 
@@ -3509,25 +3906,28 @@
 };
 
 IriSP.PlayerWidget.prototype.muteHandler = function() {
-  if (!this._Popcorn.muted()) {    
-      this._Popcorn.mute(true);
-    } else {
-      this._Popcorn.mute(false);
+  this._Popcorn.mute(!this._Popcorn.muted());
+};
+
+IriSP.PlayerWidget.prototype.volumeUpdater = function() {
+    var _muted = this._Popcorn.muted(),
+        _vol = this._Popcorn.volume();
+    if (_vol === false) {
+        _vol = .5;
     }
-};
-
-IriSP.PlayerWidget.prototype.muteButtonUpdater = function() {
-  var status = this._Popcorn.media.muted;
-  
-  if ( status == true ){        
-    this.selector.find(".Ldt-CtrlSound").attr("title", "Unmute");
-    this.selector.find(".Ldt-CtrlSound").removeClass("Ldt-CtrlSound-MuteState").addClass("Ldt-CtrlSound-SoundState");    
-  } else {
-    this.selector.find(".Ldt-CtrlSound").attr("title", "Mute");
-    this.selector.find(".Ldt-CtrlSound").removeClass("Ldt-CtrlSound-SoundState").addClass("Ldt-CtrlSound-MuteState");
-  }  
-
-  return;
+    var _soundCtl = this.selector.find(".Ldt-CtrlSound");
+    _soundCtl.removeClass("Ldt-CtrlSound-Mute Ldt-CtrlSound-Half Ldt-CtrlSound-Full");
+    if (_muted) {        
+        _soundCtl.attr("title", IriSP.i18n.getMessage('unmute'))
+            .addClass("Ldt-CtrlSound-Mute");    
+    } else {
+        _soundCtl.attr("title", IriSP.i18n.getMessage('mute'))
+            .addClass(_vol < .5 ? "Ldt-CtrlSound-Half" : "Ldt-CtrlSound-Full" )
+    }
+    var _cursor = this.selector.find(".Ldt-Ctrl-Volume-Cursor");
+    _cursor.css({
+        "left": ( _muted ? 0 : Math.floor(_vol * (_cursor.parent().width() - _cursor.outerWidth())) ) + "px"
+    })
 };
 
 IriSP.PlayerWidget.prototype.showSearchBlock = function() {
@@ -3674,10 +4074,10 @@
     var lineSize      = this.width;        // timeline pixel width 
     var nbrframes     = lineSize/frameSize;     // frame numbers
     var numberOfTweet   = 0;            // number of tweet overide later 
-    var duration      = +this._serializer.currentMedia().meta["dc:duration"];      // timescale width 
+    var duration      = this._serializer.getDuration();      // timescale width 
     var frameLength   = lineSize / frameSize;    // frame timescale  
     var timeline;
-    var colors  = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858");
+    var colors  = new Array("","#1D973D","#036AAE","#CE0A15","#C5A62D","#585858");
     
     // array 
     //var tweets  = new Array();
@@ -3794,9 +4194,10 @@
           && typeof(item.meta["id-ref"]) !== "undefined"
           && item.meta["id-ref"] === view_type) {
             
-            var MyTJson = {};
-            if (typeof(item.meta['dc:source']) !== "undefined") {
-              var MyTJson = JSON.parse(item.meta['dc:source']['content']);
+            var MyTJson = {},
+                _source = IriSP.get_aliased(item.meta, ['dc:source', 'source']);
+            if (_source !== null) {
+              var MyTJson = JSON.parse(_source['content']);
             }
             
             if (item.content['polemics'] != undefined 
@@ -3942,15 +4343,18 @@
                   e.time = frames[i].mytweetsID[k].timeframe;
                   e.title = frames[i].mytweetsID[k].title;
                   e.id = frames[i].mytweetsID[k].cinecast_id;
-                  var pos = IriSP.jQuery(e.node).offset();                  
-                  e.x = pos.left;
-                  e.y = pos.top;
                   this.svgElements[e.id] = e;
                   
-                  IriSP.jQuery(e.node).mouseenter(function(element) { return function (event) {                        
-                        // event.clientX and event.clientY are to raphael what event.pageX and pageY are to jquery.                        
-                        self.TooltipWidget.show.call(self.TooltipWidget, element.title, element.attr("fill"), event.pageX - 106, event.pageY - 160);
+                  IriSP.jQuery(e.node).mouseenter(function(element) { return function (_e) {                    
+                        self.TooltipWidget.show.call(self.TooltipWidget, element.title, element.attr("fill"), element.attrs.x + element.attrs.width / 2, element.attrs.y - 2);
                         element.displayed = true;
+                        self._Popcorn.trigger("IriSP.TraceWidget.MouseEvents", {
+                            "widget" : "StackGraphWidget",
+                            "type": "mousemove",
+                            "x": _e.pageX,
+                            "y": _e.pageY,
+                            "annotation_id": element.id
+                        });
                   }}(e)).mousedown(function(element) { return function () {                    
                     self._Popcorn.currentTime(element.time/1000);
                     self._Popcorn.trigger("IriSP.PolemicTweet.click", element.id); 
@@ -4004,7 +4408,7 @@
 IriSP.PolemicWidget.prototype.sliderUpdater = function() {
 
     var time = +this._Popcorn.currentTime();
-    var duration = +this._serializer.currentMedia().meta["dc:duration"];
+    var duration = this._serializer.getDuration();
     
     this.paperSlider.attr("width", time * (this.width / (duration / 1000)));
         
@@ -4075,36 +4479,13 @@
   this._Popcorn.listen("IriSP.search", function(searchString) { self.searchHandler.call(self, searchString); });
   this._Popcorn.listen("IriSP.search.closed", function() { self.searchFieldClosedHandler.call(self); });
   this._Popcorn.listen("IriSP.search.cleared", function() { self.searchFieldClearedHandler.call(self); });
+  
+  this.checkOption("cinecast_version");
+  this.defaultColors = ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"]
 };
 
 IriSP.SegmentsWidget.prototype = new IriSP.Widget();
 
-/* Get the width of a segment, in pixels. */
-IriSP.SegmentsWidget.prototype.segmentToPixel = function(annotation) {  
-  var begin = Math.round((+ annotation.begin) / 1000);
-  var end = Math.round((+ annotation.end) / 1000);    
-  var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
-  
-  var startPourcent 	= IriSP.timeToPourcent(begin, duration);
-  var startPixel = Math.floor(this.selector.parent().width() * (startPourcent / 100));
-  
-  var endPourcent 	= Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent);
-  var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100));
-  
-  return endPixel;
-};
-
-/* compute the total length of a group of segments */
-IriSP.SegmentsWidget.prototype.segmentsLength = function(segmentsList) {
-  var self = this;
-  var total = 0;
-  
-  for (var i = 0; i < segmentsList.length; i++)
-    total += self.segmentToPixel(segmentsList[i].annotation);
-  
-  return total;  
-};
-
 IriSP.SegmentsWidget.prototype.draw = function() {
 
   var self = this;
@@ -4112,33 +4493,45 @@
 
   this.selector.addClass("Ldt-SegmentsWidget");
   this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
-          
-  var view_type = this._serializer.getChapitrage();
-  if (typeof(view_type) === "undefined") {
-    view_type = this._serializer.getNonTweetIds()[0];  
-  }
-  this.positionMarker = this.selector.children(":first");
+  
+  this.positionMarker = this.selector.find(".Ldt-SegmentPositionMarker");
   
   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater));
-
-  
-  var i = 0;
-  
-  var segments_annotations = [];
-  
-  for (i = 0; i < annotations.length; i++) {
-    var annotation = annotations[i];
-
-    /* filter the annotations whose type is not the one we want */
-    if (view_type != "" && typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined"
-          && annotation.meta["id-ref"] != view_type) {
-        continue;
-    }
-
-    segments_annotations.push(annotation);
+  var duration = this._serializer.getDuration();
+  
+  if (this.cinecast_version) {
+      var segments_annotations = IriSP.underscore.filter(
+          this._serializer._data.annotations,
+          function(_a) {
+              return _a.type == "cinecast:MovieExtract";
+          }
+      );
   }
+  else {
+
+      var view_type = this._serializer.getChapitrage();
+      if (typeof(view_type) === "undefined") {
+        view_type = this._serializer.getNonTweetIds()[0];  
+      }
     
-  var totalWidth = this.selector.width() - segments_annotations.length;
+      
+      var i = 0;
+      
+      var segments_annotations = [];
+      
+      for (i = 0; i < annotations.length; i++) {
+        var annotation = annotations[i];
+    
+        /* filter the annotations whose type is not the one we want */
+        if (view_type != "" && typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined"
+              && annotation.meta["id-ref"] != view_type) {
+            continue;
+        }
+    
+        segments_annotations.push(annotation);
+      }
+}    
+    var _w = this.selector.width();
   var lastSegment = IriSP.underscore.max(segments_annotations, function(annotation) { return annotation.end; });
   
   for (i = 0; i < segments_annotations.length; i++) {
@@ -4146,107 +4539,87 @@
     var annotation = segments_annotations[i];
     var begin = (+ annotation.begin);
     var end = (+ annotation.end);
-    var duration = this._serializer.currentMedia().meta["dc:duration"];
     var id = annotation.id;
         
-    var startPixel = Math.floor(this.selector.parent().width() * (begin / duration));
-
-    var endPixel = Math.floor(this.selector.parent().width() * (end / duration));
-    
+    var startPixel = Math.floor(_w * (begin / duration));
+
+    var endPixel = Math.floor(_w * (end / duration));
     if (annotation.id !== lastSegment.id) 
       var pxWidth = endPixel - startPixel -1;
     else
       /* the last segment has no segment following it */
       var pxWidth = endPixel - startPixel;
- 
-    var divTitle = IriSP.clean_substr(annotation.content.title + " -<br>" + annotation.content.description, 0, 132) + "...";
-
-    if (typeof(annotation.content.color) !== "undefined")
-      var color = annotation.content.color;
-    else
-      var color = annotation.color;
+    
+    var divTitle = this.cinecast_version
+        ? annotation.content.data
+        : annotation.content.title + ( annotation.content.title ? "<br />" : "" ) + annotation.content.description.replace(/(^.{120,140})[\s].+$/,'$1&hellip;');
     
-    var hexa_color = IriSP.DEC_HEXA_COLOR(color);
+    var thumbUrl = annotation.meta.thumbnail || '';
+    
+    var hexa_color = typeof(annotation.content.color) !== "undefined"
+        ? '#' + IriSP.DEC_HEXA_COLOR(annotation.content.color)
+        : typeof(annotation.color) !== "undefined"
+            ? '#' + IriSP.DEC_HEXA_COLOR(annotation.color)
+            : this.defaultColors[i % this.defaultColors.length];
 
     /*
     if (hexa_color === "FFCC00")
       hexa_color = "333";
     */
-    if (hexa_color.length == 4)
+    if (hexa_color.length == 5)
       hexa_color = hexa_color + '00';
     
+    
     var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
         {"divTitle" : divTitle, "id" : id, "startPixel" : startPixel,
         "pxWidth" : pxWidth, "hexa_color" : hexa_color,
-        "seekPlace" : Math.round(begin/1000)});
+        "seekPlace" : Math.round(begin/1000), "thumbnailUrl": thumbUrl});
 
         
     this.selector.append(annotationTemplate);
     
     /* add a special class to the last segment and change its border */
     if (annotation.id === lastSegment.id) {
-        this.selector.find("#" + id).addClass("Ldt-lastSegment");        
-        this.selector.find(".Ldt-lastSegment").css("border-color", "#" + hexa_color);        
+        IriSP.jqId(id).addClass("Ldt-lastSegment").css("border-color", hexa_color);  
     }
-
-    IriSP.jQuery("#" + id).fadeTo(0, 0.3);
-
-    IriSP.jQuery("#" + id).mouseover(
-    /* we wrap the handler in another function because js's scoping
-       rules are function-based - otherwise, the internal vars like
-       divTitle are preserved but they are looked-up from the draw
-       method scope, so after that the loop is run, so they're not
-       preserved */
-    (function(divTitle) { 
-     return function(event) {
-          IriSP.jQuery(this).animate({opacity: 0.6}, 5);
-          var offset = IriSP.jQuery(this).offset();
-          var correction = IriSP.jQuery(this).outerWidth() / 2;
-
-          var offset_x = offset.left + correction - 106;
-          if (offset_x < 0)
-            offset_x = 0;
-          
-          var offset_y = offset.top;          
-
-          self.TooltipWidget.show(divTitle, color, offset_x, offset_y - 160);
-    } })(divTitle)).mouseout(function(){
-      IriSP.jQuery(this).animate({opacity: 0.3}, 5);
-      self.TooltipWidget.hide();
-    });
-
+   }
     // react to mediafragment messages.
     this._Popcorn.listen("IriSP.Mediafragment.showAnnotation", 
-      function(id, divTitle) { 
-      return function(annotation_id) { 
-        if (annotation_id !== id)
-          return;
+        function(id, divTitle) {
         
-          var divObject = IriSP.jQuery("#" + id);
-          divObject.animate({opacity: 0.6}, 5);
-          var offset = divObject.offset();
-          var correction = divObject.outerWidth() / 2;
-
-          var offset_x = offset.left + correction - 106;
-          if (offset_x < 0)
-            offset_x = 0;
-          
-          var offset_y = offset.top;          
-
-          self.TooltipWidget.show(divTitle, color, offset_x, offset_y - 160);
-          IriSP.jQuery(document).one("mousemove", function() { divObject.animate({opacity: 0.3}, 5);
+            var divObject = IriSP.jqId(id);
+            if (divObject.length) {
+            divObject.fadeTo(0,1);
+            var offset_x = divObject.position().left + divObject.outerWidth() / 2;
+            self.TooltipWidget.show(divObject.attr("title"), IriSP.jQuery(this).css("background-color"), offset_x, 0);
+            IriSP.jQuery(document).one("mousemove", function() { divObject.fadeTo(0,.5);
                                                                 self.TooltipWidget.hide(); });
-      }; }(id, divTitle));
-    
-    IriSP.jQuery("#" + id).click(function(_this, annotation) {
-                                    return function() { _this.clickHandler(annotation)};
-                                 }(this, annotation));
-    }
+        }
+      });
+      
+    this.selector.find(".Ldt-iri-chapter")
+        .fadeTo(0, .5)
+        .click(function() {
+            self._Popcorn.trigger("IriSP.SegmentsWidget.click", this.id);
+            self._Popcorn.currentTime(IriSP.jQuery(this).attr("data-seek"));
+        })
+        .mouseover( function(event) {
+            var divObject = IriSP.jQuery(this);
+            divObject.fadeTo(0,1);
+            var offset_x = divObject.position().left + divObject.outerWidth() / 2;
+            var thumb = divObject.attr("thumbnail-url");
+            var txt = divObject.attr("title") + (thumb && thumb.length ? '<br /><img src="' + thumb + '" />' : '');
+            self.TooltipWidget.show(txt, IriSP.jQuery(this).css("background-color"), offset_x, 0);
+        })
+        .mouseout(function(){
+            IriSP.jQuery(this).fadeTo(0,.5);
+            self.TooltipWidget.hide();
+        });
 };
 
 /* restores the view after a search */
 IriSP.SegmentsWidget.prototype.clear = function() {
-  this.selector.children(".Ldt-iri-chapter").animate({opacity:0.3}, 100);
+  this.selector.children(".Ldt-iri-chapter").fadeTo(0,.5);
 };
 
 IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) {
@@ -4291,7 +4664,7 @@
 };
 
 IriSP.SegmentsWidget.prototype.positionUpdater = function() {  
-  var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+  var duration = this._serializer.getDuration() / 1000;
   var time = this._Popcorn.currentTime();
   //var position 	= ((time / duration) * 100).toFixed(2);
   var position 	= ((time / duration) * 100).toFixed(2);
@@ -4518,7 +4891,7 @@
   
   var time = this._Popcorn.currentTime();
 
-  var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+  var duration = this._serializer.getDuration() / 1000;
   var percents = time / duration;
   
   /* we do these complicated calculations to center exactly
@@ -4558,7 +4931,7 @@
   var width = this.sliderBackground.width();
   var relX = event.pageX - parentOffset.left;
 
-  var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+  var duration = this._serializer.getDuration() / 1000;
   var newTime = ((relX / width) * duration).toFixed(2);
 
   this._Popcorn.currentTime(newTime);
@@ -4571,7 +4944,7 @@
   var width = this.sliderBackground.width();
   var relX = event.pageX - parentOffset.left;
 
-  var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+  var duration = this._serializer.getDuration() / 1000;
   var newTime = ((relX / width) * duration).toFixed(2);
 
   this._Popcorn.currentTime(newTime);
@@ -4620,16 +4993,16 @@
 };
 
 IriSP.SliderWidget.prototype.positionMarkerDraggedHandler = function(event, ui) {   
-  this._disableUpdate = true; // disable slider position updates while dragging is ongoing.
+
+/*  this._disableUpdate = true; // disable slider position updates while dragging is ongoing.
   window.setTimeout(IriSP.wrap(this, function() { this._disableUpdate = false; }), 500);
-
+*/
   var parentOffset = this.sliderForeground.parent().offset();
   var width = this.sliderBackground.width();
-  var relX = event.pageX - parentOffset.left;
-
-  var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+  var relX = event.originalEvent.pageX - parentOffset.left;
+
+  var duration = this._serializer.getDuration() / 1000;
   var newTime = ((relX / width) * duration).toFixed(2);
-
   this._Popcorn.currentTime(newTime);
   
   this.draggingOngoing = false;
@@ -4641,6 +5014,22 @@
 
   this._oldAnnotation = null;
   this._results = [];
+  
+  this.lineColor = this._config.lineColor || "#7492b4";
+  this.fillColor = this._config.fillColor || "#aeaeb8";
+  this.lineWidth = this._config.lineWidth || 2;
+  this.slices = this._config.slices || Math.floor(this.width/20);
+  if (!this.width) {
+      this.width = this.selector.width();
+  }
+  if (!this.height) {
+      this.height = 40;
+  }
+  this.selector.css("height", this.height + "px");
+  if (this._config.background) {
+      this.selector.css("background", this._config.background);
+  }
+  this.checkOption('cinecast_version');
 };
 
 
@@ -4652,19 +5041,14 @@
 
 /** draw the sparkline using jquery sparkline */
 IriSP.SparklineWidget.prototype.draw = function() {
-  var templ = Mustache.to_html(IriSP.SparklineWidget_template, {width: this.width, height: this.height});
-  /** this widget uses three divs -
-    the first is the sparkline, which is generated by jquery sparkline,
-    the second is an overlay div to display the progression in the video,
-    and the third is a div to react to clicks
-  */
+    this.duration = this._serializer.getDuration();
+    this.paper = new Raphael(this.selector[0], this.width, this.height);
+    var _this = this;
   
   var views = this._serializer._data.views;
   var stat_view;
   if (!IriSP.null_or_undefined(views)) {
-    
-    var i;
-    for (i = 0; i < views.length; i++) {
+    for (var i = 0; i < views.length; i++) {
       var view = views[i];
       if (view.id === "stat") {
           stat_view = view;
@@ -4673,107 +5057,103 @@
     }
   }
   
+    var _ = IriSP.underscore;
   // If we've found the correct view, feed the directly the data from the view
   // to jquery sparkline. Otherwise, compute it ourselves.
-  if (!IriSP.null_or_undefined(stat_view)) {
-    console.log("sparklinewidget : using stats embedded in the json");
-    var results = stat_view.meta.stat.split(",");      
-  } else {
-    console.log("sparklinewidget : computing stats ourselves");
-    var num_columns = (this.selector.width()) / IriSP.widgetsDefaults["SparklineWidget"].column_width;
-    var duration = +this._serializer.currentMedia().meta["dc:duration"];
-    var time_step = duration / num_columns; /* the time interval between two columns */
-    var results = [];
-    var i = 0; /* the index in the loop */  
-
-    /* this algorithm makes one assumption : that the array is sorted 
-       (it's done for us by the JSONSerializer). We go through the array 
-       and count how many comments fall within a peculiar time piece.
-       As i is preserved between each iteration, it's O(n).
-    */
-    
-    for(var j = 0; j < num_columns && i < this._serializer._data.annotations.length; j++) {    
-      var count = 0;
-      var annotation_begin = +(this._serializer._data.annotations[i].begin);
-      
-      while(annotation_begin >= j * time_step && annotation_begin <= (j + 1) * time_step ) {
-        count++;
-        i++;
-        if (i >= this._serializer._data.annotations.length)
-          break;
-          
-        annotation_begin = +(this._serializer._data.annotations[i].begin);
-        
-      }
-      
-      results.push(count);
+    if (!IriSP.null_or_undefined(stat_view)) {
+        //console.log("sparklinewidget : using stats embedded in the json");
+        var _results = stat_view.meta.stat.split(",");      
+    } else {
+        var _annotations = this._serializer._data.annotations,
+            _sliceDuration = Math.floor( this.duration / this.slices),
+            _results = _(_.range(this.slices)).map(function(_i) {
+                return _(_annotations).filter(function(_a){
+                    return (_a.begin <= (1 + _i) * _sliceDuration) && (_a.end >= _i * _sliceDuration) && (!_this.cinecast_version || _a.type == "cinecast:UserAnnotation")
+                }).length;
+            });
     }
-  }
-  
+    var _max = Math.max(1, _(_results).max()),
+        _h = this.height,
+        _scale = (_h - this.lineWidth) / _max,
+        _width = this.width / this.slices,
+        _y = _(_results).map(function(_v) {
+            return _h - (_scale * _v);
+        }),
+        _d = _(_y).reduce(function(_memo, _v, _k) {
+               return _memo + ( _k
+                   ? 'C' + (_k * _width) + ' ' + _y[_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v
+                   : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v )
+            },'') + 'L' + this.width + ' ' + _y[_y.length - 1],
+        _d2 = _d + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height;
+    this.paper.path(_d2).attr({
+        "stroke" : "none",
+        "fill" : this.fillColor
+    });
+         
+    this.paper.path(_d).attr({
+        "fill" : "none",
+        "stroke" : this.lineColor,
+        "stroke-width" : this.lineWidth
+    });
+  
+    this.rectangleProgress = this.paper.rect(0,0,0,this.height)
+        .attr({
+            "stroke" : "none",
+            "fill" : "#808080",
+            "opacity" : .3
+        });
+    this.ligneProgress = this.paper.path("M0 0L0 "+this.height).attr({"stroke":"#ff00ff", "line-width" : 2});
   // save the results in an array so that we can re-use them when a new annotation
   // is added.
-  this._results = results;
-  
-  this.selector.append(templ);
-  this.selector.find(".Ldt-sparkLine").css("background", "#c7c8cc");
-  this.selector.find(".Ldt-sparkLine").sparkline(results, {lineColor: "#7492b4", fillColor: "#aeaeb8",
-                                                           spotColor: "#b70056",
-                                                           width: this.width, height: this.height});
+  this._results = _results;
+  
   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler));
-  this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", IriSP.wrap(this, this.handleNewAnnotation));
-  
-  IriSP.jQuery(".Ldt-sparkLineClickOverlay").click(IriSP.wrap(this, this.clickHandler));  
+//  this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", IriSP.wrap(this, this.handleNewAnnotation));
+  
+  this.selector.click(IriSP.wrap(this, this.clickHandler));  
 };
 
 /** react to a timeupdate event */
 IriSP.SparklineWidget.prototype.timeUpdateHandler = function() {
-  var currentTime = this._Popcorn.currentTime();  
-  var duration = +this._serializer.currentMedia().meta["dc:duration"] / 1000;
-  var proportion = ((currentTime / duration) * 100).toFixed(4);
-  
-  IriSP.jQuery(".Ldt-sparkLinePositionMarker").css("width", proportion + "%");                                    
+    var _currentTime = this._Popcorn.currentTime(),
+        _x = (1000 * _currentTime / this.duration) * this.width;
+    this.rectangleProgress.attr({
+        "width" : _x
+    });
+    this.ligneProgress.attr({
+        "path" : "M" + _x + " 0L" + _x + " " + this.height
+    });
+                                  
 }
 
 /** handle clicks on the widget */
 IriSP.SparklineWidget.prototype.clickHandler = function(event) {
-  /* this piece of code is a little bit convoluted - here's how it works :
-     we want to handle clicks on the progress bar and convert those to seeks in the media.
-     However, jquery only gives us a global position, and we want a number of pixels relative
-     to our container div, so we get the parent position, and compute an offset to this position,
-     and finally compute the progress ratio in the media.
-     Finally we multiply this ratio with the duration to get the correct time
-  */
-
-  var parentOffset = this.selector.offset();
-  var width = this.selector.width();
-  var relX = event.pageX - parentOffset.left;
-
-  var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
-  var newTime = ((relX / width) * duration).toFixed(2);
+  var relX = event.pageX - this.selector.offset().left;
+  var newTime = ((relX / this.width) * this.duration/1000).toFixed(2);
     
   this._Popcorn.trigger("IriSP.SparklineWidget.clicked", newTime);
-  this._Popcorn.currentTime(newTime);                                 
+  this._Popcorn.currentTime(newTime);
 };
 
 /** react when a new annotation is added */
 IriSP.SparklineWidget.prototype.handleNewAnnotation = function(annotation) {
-  var num_columns = this._results.length;
-  var duration = +this._serializer.currentMedia().meta["dc:duration"];
-  var time_step = Math.round(duration / num_columns); /* the time interval between two columns */
-  var begin = +annotation.begin;
-  var end = +annotation.end;
-  
-  /* increment all the values between the beginning and the end of the annotation */
-  var index_begin = Math.floor(begin / time_step);
-  var index_end = Math.floor(end / time_step);
-  
-  for (var i = index_begin; i < Math.min(index_end, this._results.length); i++) {
-    this._results[i]++;
-  }
-  
-  this.selector.find(".Ldt-sparkLine").sparkline(this._results, {lineColor: "#7492b4", fillColor: "#aeaeb8",
-                                                           spotColor: "#b70056",
-                                                           width: this.width, height: this.height});
+//  var num_columns = this._results.length;
+//  var duration = this._serializer.getDuration();
+//  var time_step = Math.round(duration / num_columns); /* the time interval between two columns */
+//  var begin = +annotation.begin;
+//  var end = +annotation.end;
+//  
+//  /* increment all the values between the beginning and the end of the annotation */
+//  var index_begin = Math.floor(begin / time_step);
+//  var index_end = Math.floor(end / time_step);
+//  
+//  for (var i = index_begin; i < Math.min(index_end, this._results.length); i++) {
+//    this._results[i]++;
+//  }
+//  
+//  this.selector.find(".Ldt-sparkLine").sparkline(this._results, {lineColor: "#7492b4", fillColor: "#aeaeb8",
+//                                                           spotColor: "#b70056",
+//                                                           width: this.width, height: this.height});
 };IriSP.StackGraphWidget = function(Popcorn, config, Serializer) {
   IriSP.Widget.call(this, Popcorn, config, Serializer);
 }
@@ -4781,7 +5161,8 @@
 IriSP.StackGraphWidget.prototype = new IriSP.Widget();
 
 IriSP.StackGraphWidget.prototype.draw = function() {
-    var _defaultTags = [
+    var _ = IriSP._,
+        _defaultTags = [
             {
                 "keywords" : [ "++" ],
                 "description" : "positif",
@@ -4812,7 +5193,7 @@
         ? this._config.tags
         : _defaultTags);
     IriSP._(this.tagconf).each(function(_a) {
-        _a.regexp = new RegExp(_a.keywords.map(function(_k) {
+        _a.regexp = new RegExp(_(_a.keywords).map(function(_k) {
             return _k.replace(/([\W])/gm,'\\$1');
         }).join("|"),"im")
     });
@@ -4821,13 +5202,13 @@
         : _defaultDefColor);
     this.paper = new Raphael(this.selector[0], this.width, this.height);
     this.groups = [];
-    this.duration = this._serializer.currentMedia().meta["dc:duration"];
+    this.duration = this._serializer.getDuration();
     
     var _annotationType = this._serializer.getTweets(),
         _sliceDuration = ~~ ( this.duration / this.sliceCount),
         _annotations = this._serializer._data.annotations,
-        _groupedAnnotations = IriSP._.range(this.sliceCount).map(function(_i) {
-            return _annotations.filter(function(_a){
+        _groupedAnnotations = _(_.range(this.sliceCount)).map(function(_i) {
+            return _(_annotations).filter(function(_a){
                 return (_a.begin <= (1 + _i) * _sliceDuration) && (_a.end >= _i * _sliceDuration)
             });
         }),
@@ -4835,12 +5216,12 @@
             return _g.length
         }).length,
         _scale = this.height / _max,
-        _width = this.width / this.sliceCount
+        _width = this.width / this.sliceCount,
         _showTitle = !this._config.excludeTitle,
         _showDescription = !this._config.excludeDescription;
     
     
-    var _paths = this.tagconf.map(function() {
+    var _paths = _(this.tagconf).map(function() {
         return [];
     });
     _paths.push([]);
@@ -4848,15 +5229,15 @@
     for (var i = 0; i < this.sliceCount; i++) {
         var _group = _groupedAnnotations[i];
         if (_group) {
-            var _vol = this.tagconf.map(function() {
+            var _vol = _(this.tagconf).map(function() {
                 return 0;
             });
             for (var j = 0; j < _group.length; j++){
            var _txt = (_showTitle ? _group[j].content.title : '') + ' ' + (_showDescription ? _group[j].content.description : '')
-                var _tags = this.tagconf.map(function(_tag) {
+                var _tags = _(this.tagconf).map(function(_tag) {
                         return (_txt.search(_tag.regexp) == -1 ? 0 : 1)
                     }),
-                    _nbtags = _tags.reduce(function(_a,_b) {
+                    _nbtags = _(_tags).reduce(function(_a,_b) {
                         return _a + _b;
                     }, 0);
                 if (_nbtags) {
@@ -4865,7 +5246,7 @@
                     });
                 }
             }
-            var _nbtags = _vol.reduce(function(_a,_b) {
+            var _nbtags = _(_vol).reduce(function(_a,_b) {
                     return _a + _b;
                 }, 0),
                 _nbneutre = _group.length - _nbtags,
@@ -4889,14 +5270,14 @@
                 }
                 _paths[j+1].push(_base);
             }
-            this.groups.push(_vol.map(function(_v) {
+            this.groups.push(_(_vol).map(function(_v) {
                 return _v / _group.length;
             }))
         } else {
             for (var j = 0; j < _paths.length; j++) {
                 _paths[j].push(this.height);
             }
-            this.groups.push(this.tagconf.map(function() {
+            this.groups.push(_(this.tagconf).map(function() {
                 return 0;
             }));
         }
@@ -4904,7 +5285,7 @@
     
     if (this.isStreamGraph) {
         for (var j = _paths.length - 1; j >= 0; j--) {
-            var _d = _paths[j].reduce(function(_memo, _v, _k) {
+            var _d = _(_paths[j]).reduce(function(_memo, _v, _k) {
                return _memo + ( _k
                    ? 'C' + (_k * _width) + ' ' + _paths[j][_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v
                    : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v )
@@ -4933,14 +5314,19 @@
     var _this = this;
     this.selector
         .click(IriSP.wrap(this, this.clickHandler))
-        .mousemove(function(event) {
-            _this.updateTooltip(event);
-            
-            // Also tell the world where the mouse is hovering.
-            var relX = event.pageX - _this.selector.offset().left;
-            var duration = _this._serializer.currentMedia().meta["dc:duration"];
-            var Time = ((relX / _this.width) * duration).toFixed(2);
-            _this._Popcorn.trigger("IriSP.StackGraphWidget.mouseOver", Time);
+        .mousemove(function(_e) {
+            _this.updateTooltip(_e);
+            // Trace
+            var relX = _e.pageX - _this.selector.offset().left;
+            var _duration = _this._serializer.getDuration();
+            var _time = parseInt((relX / _this.width) * _duration);
+            _this._Popcorn.trigger("IriSP.TraceWidget.MouseEvents", {
+                "widget" : "StackGraphWidget",
+                "type": "mousemove",
+                "x": _e.pageX,
+                "y": _e.pageY,
+                "time": _time
+            });
 
         })
         .mouseout(function() {
@@ -4973,10 +5359,10 @@
 };
 
 IriSP.StackGraphWidget.prototype.updateTooltip = function(event) {
-    var _segment = ~~(this.sliceCount * (event.pageX - this.selector.offset().left)/this.width),
+    var _segment = Math.max(0,Math.min(this.groups.length - 1, Math.floor(this.sliceCount * (event.pageX - this.selector.offset().left)/this.width))),
         _valeurs = this.groups[_segment],
         _width = this.width / this.sliceCount,
-        _html = '<ul style="list-style: none; margin: 0; padding: 0;">' + this.tagconf.map(function(_tag, _i) {
+        _html = '<ul style="list-style: none; margin: 0; padding: 0;">' + IriSP._(this.tagconf).map(function(_tag, _i) {
             return '<li style="clear: both;"><span style="float: left; width: 10px; height: 10px; margin: 2px; background: '
                 + _tag.color
                 + ';"></span>'
@@ -4986,7 +5372,7 @@
                 + '</li>';
         }).join('') + '</ul>';
     this.TooltipWidget._shown = false; // Vraiment, on ne peut pas ouvrir le widget s'il n'est pas encore ouvert ?
-    this.TooltipWidget.show('','',event.pageX - 105, event.pageY - 160);
+    this.TooltipWidget.show('','',(_segment + .5)* this.width / this.sliceCount, 0);
     this.TooltipWidget.selector.find(".tip").html(_html);
     this.rectangleFocus.attr({
         "x" : _segment * _width,
@@ -5002,23 +5388,29 @@
 
 IriSP.TagCloudWidget.prototype.draw = function() {
     
-    var _stopwords = [
-            'aussi', 'and', 'avec', 'aux', 'car', 'cette', 'comme', 'dans', 'donc', 'des', 'elle', 'est',
-            'être', 'eux', 'fait', 'ici', 'ils', 'les', 'leur', 'leurs', 'mais', 'mes', 'même', 'mon', 'notre',
-            'non', 'nos', 'nous', 'ont', 'par', 'pas', 'peu', 'pour', 'que', 'qui', 'ses' ,'son', 'sont', 'sur',
-            'tes', 'très', 'the', 'ton', 'tous', 'tout', 'une', 'votre', 'vos', 'vous'
-        ],
+    var _urlRegExp = /https?:\/\/[0-9a-zA-Z\.%\/-_]+/g,
+        _stopWords = [
+            'aussi', 'and', 'avec', 'aux', 'bien', 'car', 'cette', 'comme', 'dans', 'donc', 'des', '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', 'que', 'qui', 'sans', 'ses' ,'son', 'sont', 'sur',
+            'tes', 'très', 'the', 'ton', 'tous', 'tout', 'une', 'votre', 'vos', 'vous' ],
         _regexpword = /[^\s\.&;,'"!\?\d\(\)\+\[\]\\\…\-«»:\/]{3,}/g,
         _words = {},
         _showTitle = !this._config.excludeTitle,
         _showDescription = !this._config.excludeDescription,
+        _excludePattern = this._config.excludePattern || null,
         _tagCount = this._config.tagCount || 30;
+    if (typeof this._config.excludeWords !== "undefined" && this._config.excludeWords.length) {
+        IriSP._(this._config.excludeWords).each(function(_w) {
+            _stopWords.push(_w.toLowerCase());
+        });
+    }
     
     IriSP._(this._serializer._data.annotations).each(function(_annotation) {
        if (_annotation.content && _annotation.content.description) {
            var _txt = (_showTitle ? _annotation.content.title : '') + ' ' + (_showDescription ? _annotation.content.description : '')
-           IriSP._(_txt.toLowerCase().match(_regexpword)).each(function(_mot) {
-               if (_stopwords.indexOf(_mot) == -1) {
+           IriSP._(_txt.toLowerCase().replace(_urlRegExp, '').match(_regexpword)).each(function(_mot) {
+               if (_stopWords.indexOf(_mot) == -1 && (_excludePattern == null || !_excludePattern.test(_mot))) {
                    _words[_mot] = 1 + (_words[_mot] || 0);
                }
            })
@@ -5051,7 +5443,7 @@
                 .shuffle()
                 .map(function(_word) {
                     var _size = 10 + _scale * Math.sqrt(_word.count - _min);
-                    return '<li style="font-size:'
+                    return '<li class="Ldt-TraceMe" style="font-size:'
                         + _size
                         + 'px;">'
                         + _word.word
@@ -5071,7 +5463,7 @@
         var _rgxp = new RegExp("(" + searchString.replace(/(\W)/g,'\\$1') + ")","gi");
         this.selector.find("li").each(function(_i, _e) {
             _e.innerHTML = searchString.length ?
-                _e.textContent.replace(_rgxp,'<span class="Ldt-TagCloud-actif">$1</span>')
+                _e.textContent.replace(_rgxp,'<span class="Ldt-TagCloud-actif Ldt-TraceMe">$1</span>')
                 : _e.textContent;
         });
     }));
@@ -5097,9 +5489,20 @@
 
 IriSP.TooltipWidget.prototype.draw = function() {
   var templ = Mustache.to_html(IriSP.tooltipWidget_template);
-  // position the widget absolutely relative to document.
-  this.selector.css("position", "static");
+  // position the widget absolutely relative to document. --- NOOOO !!!!
+  this.selector.css({
+      "position": "absolute",
+      "top": 0,
+      "left": 0
+  });
+  this.selector.parent().css({
+      "position": "relative"
+  });
   this.selector.append(templ);
+  var _this = this;
+  this.selector.mouseover(function() {
+      _this.hide();
+  });
   this.hide();
 
 };
@@ -5115,22 +5518,153 @@
 
   this.selector.find(".tipcolor").css("background-color", color);
   this._displayedText = text;
-	this.selector.find(".tiptext").html(text);
-  
-  if (x < 0)
-    x = 0;
-  if (y < 0)
-    y = 0;
-  
-  this.selector.find(".tip").css("left", x).css("top", y);
-  this.selector.find(".tip").show();
+  this.selector.find(".tiptext").html(text);
+  
+  var _tip = this.selector.find(".tip");
+  _tip.show();
+  _tip.css({
+      "left": Math.floor(x - _tip.outerWidth() / 2)+"px",
+      "top": Math.floor(y - _tip.outerHeight())+"px"
+  });
   this._shown = true;
 };
 
 IriSP.TooltipWidget.prototype.hide = function() {                                                   
   this.selector.find(".tip").hide();
   this._shown = false;  
-};/* a widget that displays tweet - used in conjunction with the polemicWidget */
+};IriSP.TraceWidget = function(Popcorn, config, Serializer) {
+  IriSP.Widget.call(this, Popcorn, config, Serializer);
+  this.lastEvent = "";
+  var _this = this,
+    _listeners = {
+        "IriSP.createAnnotationWidget.addedAnnotation" : 0,
+        "IriSP.search.open" : 0,
+        "IriSP.search.closed" : 0,
+        "IriSP.search" : 0,
+        "IriSP.search.cleared" : 0,
+        "IriSP.search.matchFound" : 0,
+        "IriSP.search.noMatchFound" : 0,
+        "IriSP.search.triggeredSearch" : 0,
+        "IriSP.TraceWidget.MouseEvents" : 0,
+        "play" : 0,
+        "pause" : 0,
+        "volumechange" : 0,
+        "seeked" : 0,
+        "play" : 0,
+        "pause" : 0,
+        "timeupdate" : 2000
+    };
+    IriSP._(_listeners).each(function(_ms, _listener) {
+        var _f = function(_arg) {
+            _this.eventHandler(_listener, _arg);
+        }
+        if (_ms) {
+            _f = IriSP.underscore.throttle(_f, _ms);
+        }
+        _this._Popcorn.listen(_listener, _f);
+    });
+    this._Popcorn.listen("timeupdate", IriSP.underscore.throttle(function(_arg) {
+        _this.eventHandler(_listener, _arg);
+    }));
+    
+    this.tracer = IriSP.TraceManager(IriSP.jQuery).init_trace("test", this._config);
+    this.tracer.set_default_subject("default_subject");
+    this.tracer.trace("StartTracing", { "hello": "world" });
+    
+}
+
+IriSP.TraceWidget.prototype = new IriSP.Widget();
+
+IriSP.TraceWidget.prototype.draw = function() {
+    this.mouseLocation = '';
+    var _this = this;
+    IriSP.jQuery(".Ldt-Widget").bind("click mouseover mouseout dragstart dragstop", function(_e) {
+        var _widget = IriSP.jQuery(this).attr("widget-type"),
+            _class = _e.target.className;
+        var _data = {
+            "type": _e.type,
+            "x": _e.clientX,
+            "y": _e.clientY,
+            "widget": _widget
+        }
+        if (typeof _class == "string" && _class.indexOf('Ldt-TraceMe') != -1) {
+            var _name = _e.target.localName,
+                _id = _e.target.id,
+                _text = _e.target.textContent.trim(),
+                _title = _e.target.title,
+                _value = _e.target.value;
+            _data.target = _name + (_id.length ? '#' + IriSP.jqEscape(_id) : '') + (_class.length ? ('.' + IriSP.jqEscape(_class).replace(/\s/g,'.')).replace(/\.Ldt-(Widget|TraceMe)/g,'') : '');
+            if (typeof _title == "string" && _title.length && _title.length < 140) {
+                _data.title = _title;
+            }
+            if (typeof _text == "string" && _text.length && _text.length < 140) {
+                _data.text = _text;
+            }
+            if (typeof _value == "string" && _value.length) {
+                _data.value = _value;
+            }
+            _this._Popcorn.trigger('IriSP.TraceWidget.MouseEvents', _data);
+        } else {
+            //console.log(_e.type+','+_this.mouseLocation+','+_widget);
+            if (_e.type == "mouseover") {
+                if (_this.mouseLocation != _widget) {
+                    _this._Popcorn.trigger('IriSP.TraceWidget.MouseEvents', _data);
+                } else {
+                    if (typeof _this.moTimeout != "undefined") {
+                        clearTimeout(_this.moTimeout);
+                        delete _this.moTimeout;
+                    }
+                }
+            }
+            if (_e.type == "click") {
+                _this._Popcorn.trigger('IriSP.TraceWidget.MouseEvents', _data);
+            }
+            if (_e.type == "mouseout") {
+                if (typeof _this.moTimeout != "undefined") {
+                    clearTimeout(_this.moTimeout);
+                }
+                _this.moTimeout = setTimeout(function() {
+                   if (_data.widget != _this.mouseLocation) {
+                       _this._Popcorn.trigger('IriSP.TraceWidget.MouseEvents', _data);
+                   }
+                },100);
+            }
+        }
+        _this.mouseLocation = _widget;
+    });
+}
+
+IriSP.TraceWidget.prototype.eventHandler = function(_listener, _arg) {
+    var _traceName = 'Mdp_';
+    if (typeof _arg == "string" || typeof _arg == "number") {
+        _arg = { "value" : _arg }
+    }
+    if (typeof _arg == "undefined") {
+        _arg = {}
+    }
+    switch(_listener) {
+        case 'IriSP.TraceWidget.MouseEvents':
+            _traceName += _arg.widget + '_' + _arg.type;
+            delete _arg.widget;
+            delete _arg.type;
+        break;
+        case 'timeupdate':
+        case 'play':
+        case 'pause':
+            _arg.time = this._Popcorn.currentTime() * 1000;
+        case 'seeked':
+        case 'volumechange':
+            _traceName += 'Popcorn_' + _listener;
+        break;
+        default:
+            _traceName += _listener.replace('IriSP.','').replace('.','_');
+    }
+    this.lastEvent = _traceName;
+    this.tracer.trace(_traceName, _arg);
+    console.log("trace('" + _traceName + "', " + JSON.stringify(_arg) + ");");
+    
+}
+/* a widget that displays tweet - used in conjunction with the polemicWidget */
 
 IriSP.TweetsWidget = function(Popcorn, config, Serializer) {
   IriSP.Widget.call(this, Popcorn, config, Serializer);
@@ -5157,8 +5691,8 @@
     var imageMarkup = IriSP.templToHTML("<img src='{{src}}' alt='user image'></img>", 
                                        {src : img});
     
-    if (typeof(annotation.meta["dc:source"].content) !== "undefined") {
-      var tweetContents = JSON.parse(annotation.meta["dc:source"].content);
+    if (typeof(IriSP.get_aliased(annotation.meta, ["dc:source", "source"]).content) !== "undefined") {
+      var tweetContents = JSON.parse(IriSP.get_aliased(annotation.meta, ["dc:source", "source"]).content);
       var creator = tweetContents.user.screen_name;
       var real_name = tweetContents.user.name;
 
@@ -5559,29 +6093,23 @@
      We've got to jump through a few hoops because the json sometimes defines
      fields with underscores and sometimes with dashes
   */
-  var annotation_types = this._data.views[0]["annotation_types"];
-  if (IriSP.null_or_undefined(annotation_types)) {
-    annotation_types = this._data.views[0]["annotation-types"];
-    if (IriSP.null_or_undefined(annotation_types)) {
+  var annotation_types = IriSP.get_aliased(this._data.views[0], ["annotation_types", "annotation-types"]);
+  if (annotation_types === null) {
       console.log("neither view.annotation_types nor view.annotation-types are defined");      
       return;
-    }
   }
 
-  var available_types = this._data["annotation_types"];    
-  if (IriSP.null_or_undefined(available_types)) {
-    available_types = this._data["annotation-types"];
-    if (IriSP.null_or_undefined(available_types)) {
-      console.log("neither annotation_types nor annotation-types are defined");      
+  var available_types = IriSP.get_aliased(this._data, ["annotation_types", "annotation-types"]);    
+  if (available_types === null) {
+      console.log("neither view.annotation_types nor view.annotation-types are defined");      
       return;
-    }
   }
   
   var potential_types = [];
   
   // Get the list of types which contain "Tw" in their content
   for (var i = 0; i < available_types.length; i++) {
-    if (/Tw/i.test(available_types[i]["dc:title"])) {
+    if (/Tw/i.test(IriSP.get_aliased(available_types[i], ['dc:title', 'title']))) {
       potential_types.push(available_types[i].id);
     }
   }
@@ -5602,29 +6130,23 @@
      We've got to jump through a few hoops because the json sometimes defines
      fields with underscores and sometimes with dashes
   */
-  var annotation_types = this._data.views[0]["annotation_types"];
-  if (IriSP.null_or_undefined(annotation_types)) {
-    annotation_types = this._data.views[0]["annotation-types"];
-    if (IriSP.null_or_undefined(annotation_types)) {
+  var annotation_types = IriSP.get_aliased(this._data.views[0], ["annotation_types", "annotation-types"]);
+  if (annotation_types === null) {
       console.log("neither view.annotation_types nor view.annotation-types are defined");      
       return;
-    }
   }
 
-  var available_types = this._data["annotation_types"];    
-  if (IriSP.null_or_undefined(available_types)) {
-    available_types = this._data["annotation-types"];
-    if (IriSP.null_or_undefined(available_types)) {
-      console.log("neither annotation_types nor annotation-types are defined");      
+  var available_types = IriSP.get_aliased(this._data, ["annotation_types", "annotation-types"]);    
+  if (available_types === null) {
+      console.log("neither view.annotation_types nor view.annotation-types are defined");      
       return;
-    }
   }
 
   var potential_types = [];
   
   // Get the list of types which do not contain "Tw" in their content
   for (var i = 0; i < available_types.length; i++) {
-    if (!(/Tw/i.test(available_types[i]["dc:title"]))) {
+    if (!(/Tw/i.test(IriSP.get_aliased(available_types[i], ['dc:title', 'title'])))) {
       potential_types.push(available_types[i].id);
     }
   }
@@ -5640,17 +6162,19 @@
     @param name of the ligne de temps
 */
 IriSP.JSONSerializer.prototype.getId = function(name) {
-  if (IriSP.null_or_undefined(this._data["annotation-types"]))
+   var available_types = IriSP.get_aliased(this._data, ["annotation_types", "annotation-types"]);  
+   
+  if (available_types == null)
     return;
 
   name = name.toUpperCase();
   var e;  
-  e = IriSP.underscore.find(this._data["annotation-types"], 
-                                  function(entry) { 
-                                    if (IriSP.null_or_undefined(entry["dc:title"]))
-                                      return false;
-                                    
-                                    return (entry["dc:title"].toUpperCase().indexOf(name) !== -1) });
+  e = IriSP.underscore.find(available_types, 
+    function(entry) {
+        if (IriSP.get_aliased(entry, ['dc:title', 'title']) === null)
+          return false;
+        return (entry["dc:title"].toUpperCase().indexOf(name) !== -1);
+    });
   
   if (typeof(e) === "undefined")
     return;
@@ -5664,13 +6188,15 @@
     @param name of the ligne de temps
 */
 IriSP.JSONSerializer.prototype.getIds = function(name) {
-  if (IriSP.null_or_undefined(this._data["annotation-types"]))
+   var available_types = IriSP.get_aliased(this._data, ["annotation_types", "annotation-types"]);  
+   
+  if (available_types == null)
     return;
 
   name = name.toUpperCase();
   var e = [];  
-  e = IriSP.underscore.filter(this._data["annotation-types"], 
-                                  function(entry) { return (entry["dc:title"].toUpperCase().indexOf(name) !== -1) });
+  e = IriSP.underscore.filter(available_types, 
+                                  function(entry) { return (IriSP.get_aliased(entry, ['dc:title', 'title']).toUpperCase().indexOf(name) !== -1) });
   return IriSP.underscore.pluck(e, "id");  
 };
 
@@ -5713,4 +6239,8 @@
     val = this.getId("Publ");
     
   return val;
-};
\ No newline at end of file
+};
+
+IriSP.JSONSerializer.prototype.getDuration = function() {
+    return +(IriSP.get_aliased(this.currentMedia().meta, ["dc:duration", "duration"]) || 0);
+}