# HG changeset patch
# User veltr
# Date 1331228326 -3600
# Node ID 18ca612e9ff0ebc472c902242b4f06710d86613f
# Parent  ae16691d183d3dd438f210e1a2b2021f55c21767
Lots of changes

diff -r ae16691d183d -r 18ca612e9ff0 src/js/header.js
--- a/src/js/header.js	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/js/header.js	Thu Mar 08 18:38:46 2012 +0100
@@ -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 
diff -r ae16691d183d -r 18ca612e9ff0 src/js/site.js.templ
--- a/src/js/site.js.templ	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/js/site.js.templ	Thu Mar 08 18:38:46 2012 +0100
@@ -82,13 +82,14 @@
            Ldt-createAnnotation-polemic-plusplus for plusplus
            Ldt-createAnnotation-polemic-equalequal for equalequal, etc.
         */
-        polemics: {"++" : "positive", "--" : "negative", "==" : "reference", "??" : "question"}, 
+        polemics: [ { "className" : "positive", "keyword" : "++" }, { "className" : "negative", "keyword" : "--" }, { "className" : "reference", "keyword" : "==" }, { "className" : "question", "keyword" : "??" } ],
         cinecast_version: true, /* 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.
diff -r ae16691d183d -r 18ca612e9ff0 src/js/utils.js
--- a/src/js/utils.js	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/js/utils.js	Thu Mar 08 18:38:46 2012 +0100
@@ -192,3 +192,8 @@
    }
 }
 */
+
+/* Creates regexps from text */
+IriSP.regexpFromText = function(_text) {
+    return new RegExp('(' + _text.replace(/(\W)/gim,'\\$1') + ')','gim');
+}
diff -r ae16691d183d -r 18ca612e9ff0 src/js/widgets.js
--- a/src/js/widgets.js	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/js/widgets.js	Thu Mar 08 18:38:46 2012 +0100
@@ -50,29 +50,32 @@
   } 
 
   if (config.hasOwnProperty("layoutManager")) {
-     this.layoutManager = config.layoutManager;     
+     this.layoutManager = config.layoutManager;
   }
-  if (typeof this.selector != "undefined" && typeof Popcorn != "undefined") {
-      var _id = this._id;
-      this.selector.bind("click mouseover mouseout dragstart dragstop", function(_e) {
-            var _data = {
-                "type": _e.type,
-                "x": _e.clientX,
-                "y": _e.clientY,
-                "widget": _id,
-                "target_name": _e.target.localName,
-                "target_id": _e.target.id,
-                "target_class": _e.target.className,
-                "text": _e.target.textContent.trim(),
-                "title": _e.target.title,
-                "value": _e.target.value
-            };
-            Popcorn.trigger('IriSP.Widget.MouseEvents', _data);
-      })
+  if (typeof this.selector != "undefined") {
+      this.selector.addClass("Ldt-TraceMe").addClass("Ldt-Widget");
   }
   
 };
 
+// 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.
   */
diff -r ae16691d183d -r 18ca612e9ff0 src/js/widgets/createAnnotationWidget.js
--- a/src/js/widgets/createAnnotationWidget.js	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/js/widgets/createAnnotationWidget.js	Thu Mar 08 18:38:46 2012 +0100
@@ -1,15 +1,23 @@
 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) {
@@ -29,14 +37,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);
   
@@ -45,70 +48,12 @@
   else {
     this.showStartScreen();
   }
+
+  // Add onclick event to both polemic and keywords buttons
   
-  // 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));
-      }    
+  this.selector.find(".Ldt-createAnnotation-keywords button, .Ldt-createAnnotation-polemics 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.                    
@@ -178,6 +123,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() {
   
@@ -237,24 +195,25 @@
 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];
+  this.selector.find(".Ldt-createAnnotation-keywords button").each(function() {
+      var _rx = IriSP.regexpFromText(IriSP.jQuery(this).text());
+      if (_rx.test(contents)) {
+          IriSP.jQuery(this).removeClass("Ldt-createAnnotation-absent-keyword")
+            .addClass("Ldt-createAnnotation-present-keyword");
+      } else {
+          IriSP.jQuery(this).addClass("Ldt-createAnnotation-absent-keyword")
+            .removeClass("Ldt-createAnnotation-present-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");
+  this.selector.find(".Ldt-createAnnotation-polemics button").each(function() {
+      var _rx = IriSP.regexpFromText(IriSP.jQuery(this).text());
+      if (_rx.test(contents)) {
+          IriSP.jQuery(this).addClass("Ldt-createAnnotation-polemic-active");
+      } else {
+          IriSP.jQuery(this).removeClass("Ldt-createAnnotation-polemic-active");
       }
-    }
-  }
-  
+  });
   if (this.polemic_mode) {
     /* Also go through the polemics to highlight the buttons */
     for (var polemic in this.polemics) {
@@ -327,7 +286,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")
@@ -407,20 +366,23 @@
   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";
+  
+  
+  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]*)/g);
   
   var jsonString = JSON.stringify(apiJson);
   var project_id = this._serializer._data.meta.id;
@@ -431,7 +393,7 @@
                           
   IriSP.jQuery.ajax({
       url: url,
-      type: 'PUT',
+      type: this.api_method,
       contentType: 'application/json',
       data: jsonString,               
       //dataType: 'json',
diff -r ae16691d183d -r 18ca612e9ff0 src/js/widgets/playerWidget.js
--- a/src/js/widgets/playerWidget.js	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/js/widgets/playerWidget.js	Thu Mar 08 18:38:46 2012 +0100
@@ -58,9 +58,9 @@
 /* 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)
diff -r ae16691d183d -r 18ca612e9ff0 src/js/widgets/polemicWidget.js
--- a/src/js/widgets/polemicWidget.js	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/js/widgets/polemicWidget.js	Thu Mar 08 18:38:46 2012 +0100
@@ -54,7 +54,7 @@
     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();
@@ -322,9 +322,16 @@
                   e.id = frames[i].mytweetsID[k].cinecast_id;
                   this.svgElements[e.id] = e;
                   
-                  IriSP.jQuery(e.node).mouseenter(function(element) { return function () {                    
+                  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); 
diff -r ae16691d183d -r 18ca612e9ff0 src/js/widgets/stackGraphWidget.js
--- a/src/js/widgets/stackGraphWidget.js	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/js/widgets/stackGraphWidget.js	Thu Mar 08 18:38:46 2012 +0100
@@ -158,14 +158,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.getDuration();
-            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() {
@@ -198,7 +203,7 @@
 };
 
 IriSP.StackGraphWidget.prototype.updateTooltip = function(event) {
-    var _segment = Math.floor(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;">' + IriSP._(this.tagconf).map(function(_tag, _i) {
diff -r ae16691d183d -r 18ca612e9ff0 src/js/widgets/tagCloudWidget.js
--- a/src/js/widgets/tagCloudWidget.js	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/js/widgets/tagCloudWidget.js	Thu Mar 08 18:38:46 2012 +0100
@@ -8,9 +8,9 @@
     
     var _urlRegExp = /https?:\/\/[0-9a-zA-Z\.%\/-_]+/g,
         _stopWords = [
-            'aussi', 'and', 'avec', 'aux', 'bien', 'car', 'cette', 'comme', 'dans', 'donc', 'des', 'elle', 'encore', 'est',
+            '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', 'ses' ,'son', 'sont', 'sur',
+            '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 = {},
@@ -61,7 +61,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
@@ -81,7 +81,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;
         });
     }));
diff -r ae16691d183d -r 18ca612e9ff0 src/js/widgets/tooltipWidget.js
--- a/src/js/widgets/tooltipWidget.js	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/js/widgets/tooltipWidget.js	Thu Mar 08 18:38:46 2012 +0100
@@ -21,6 +21,10 @@
       "position": "relative"
   });
   this.selector.append(templ);
+  var _this = this;
+  this.selector.mouseover(function() {
+      _this.hide();
+  });
   this.hide();
 
 };
diff -r ae16691d183d -r 18ca612e9ff0 src/js/widgets/traceWidget.js
--- a/src/js/widgets/traceWidget.js	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/js/widgets/traceWidget.js	Thu Mar 08 18:38:46 2012 +0100
@@ -12,23 +12,14 @@
         "IriSP.SliceWidget.show",
         "IriSP.SliceWidget.hide",
         "IriSP.createAnnotationWidget.addedAnnotation",
-//        "IriSP.PlayerWidget.AnnotateButton.clicked",
-//        "IriSP.PlayerWidget.MouseOver",
-//        "IriSP.PlayerWidget.MouseOut",
         "IriSP.search.open",
         "IriSP.search.closed",
         "IriSP.search",
         "IriSP.search.cleared",
-//        "IriSP.PolemicTweet.click",
         "IriSP.search.matchFound",
         "IriSP.search.noMatchFound",
-//        "IriSP.SegmentsWidget.click",
-        "IriSP.SliceWidget.zoneChange",
-//        "IriSP.SparklineWidget.clicked",
-//        "IriSP.StackGraphWidget.mouseOver",
-//        "IriSP.StackGraphWidget.clicked",
         "IriSP.search.triggeredSearch",
-        "IriSP.Widget.MouseEvents",
+        "IriSP.TraceWidget.MouseEvents",
         "play",
         "pause",
         "volumechange",
@@ -38,8 +29,8 @@
         "pause"
     ];
     IriSP._(_listeners).each(function(_listener) {
-      _this._Popcorn.listen(_listener, function() {
-          _this.eventHandler(_listener, arguments);
+      _this._Popcorn.listen(_listener, function(_arg) {
+          _this.eventHandler(_listener, _arg);
       });
     });
   
@@ -48,55 +39,89 @@
 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 = this.id.match('LdtPlayer_widget_([^_]+)')[1],
+            _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 ? '#' + _id : '') + (_class.length ? '.' + _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, _args) {
-    var _traceName = 'Mdp_',
-        _data = {};
-        
-    function packArgs() {
-        for (var _i = 0; _i < _args.length; _i++) {
-            _data[_i] = _args[_i];
-        }
+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.Widget.MouseEvents':
-            var _type = _args[0].type,
-                _name = _args[0].target_name,
-                _class = _args[0].target_class,
-                _id = _args[0].target_id,
-                _widget = _args[0].widget.match(/[^_]+widget/i)[0];
-            _traceName += _widget + '_' + _type;
-            _data.x = _args[0].x;
-            _data.y = _args[0].y;
-            _data.target = _name + (_id.length ? '#' + _id : '') + (_class.length ? '.' + _class.replace(/\s/g,'.') : '');
-            if (typeof _args[0].value == "string" && _args[0].value.length) {
-                _data.value = _args[0].value;
-            }
-            if ((_name == "button" || /button/.test(_class)) && typeof _args[0].text == "string" && _args[0].text.length) {
-                _data.text = _args[0].text;
-            }
-            if (typeof _args[0].title == "string" && _args[0].title.length) {
-                _data.title = _args[0].title;
-            }
-            // Filtrer les événements mouseover quand on se déplace vers des éléments non pertinents
-            if (!_id.length && !_class.length && ( _type == 'mouseover' || _type == 'mouseout' ) && this.lastEvent.search('Mdp_' + _widget) == 0) {
-                return;
-            }
+        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 'timeupdate':
         case 'volumechange':
-            _traceName += 'Popcorn' + _listener;
-            packArgs();
+            _traceName += 'Popcorn_' + _listener;
         break;
         default:
             _traceName += _listener.replace('IriSP.','').replace('.','_');
-            packArgs();
     }
     this.lastEvent = _traceName;
-    console.log("trace('" + _traceName + "', " + JSON.stringify(_data) + ");");
+    console.log("trace('" + _traceName + "', " + JSON.stringify(_arg) + ");");
 }
diff -r ae16691d183d -r 18ca612e9ff0 src/templates/annotation.html
--- a/src/templates/annotation.html	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/templates/annotation.html	Thu Mar 08 18:38:46 2012 +0100
@@ -1,6 +1,6 @@
 {{! template for an annotation displayed in a segmentWidget }}
 <div title='{{divTitle}}' id='{{id}}'
-	class='Ldt-iri-chapter' 
+	class='Ldt-iri-chapter Ldt-TraceMe' 
 	style='left: {{startPixel}}px; 
          width: {{pxWidth}}px; 
          background-color:#{{hexa_color}};' 
diff -r ae16691d183d -r 18ca612e9ff0 src/templates/annotationWidget.html
--- a/src/templates/annotationWidget.html	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/templates/annotationWidget.html	Thu Mar 08 18:38:46 2012 +0100
@@ -5,9 +5,9 @@
   
     <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>
+         <a target='_blank' class='Ldt-fbShare Ldt-TraceMe' title='share on facebook'></a>
+         <a target='_blank' class='Ldt-TwShare Ldt-TraceMe' title='share on twitter'></a>
+         <a target='_blank'  class='Ldt-GplusShare Ldt-TraceMe' title='share on google+'></a>
         </div>
 
         <div class='Ldt-SaTitle'></div>
diff -r ae16691d183d -r 18ca612e9ff0 src/templates/annotationsListWidget.html
--- a/src/templates/annotationsListWidget.html	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/templates/annotationsListWidget.html	Thu Mar 08 18:38:46 2012 +0100
@@ -4,7 +4,7 @@
   <div class='Ldt-Annotation-DoubleBorder'>
     <ul>
     {{#annotations}}
-      <li>
+      <li id='Ldt-Annotation-li-{{id}}' class='Ldt-TraceMe'>
         {{! if the url is not present, it means that the annotation exists 
             in the current project }}
         {{^url}}
diff -r ae16691d183d -r 18ca612e9ff0 src/templates/createAnnotationWidget.html
--- a/src/templates/createAnnotationWidget.html	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/templates/createAnnotationWidget.html	Thu Mar 08 18:38:46 2012 +0100
@@ -1,61 +1,67 @@
 {{! 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}}
+    <!-- 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-screen Ldt-createAnnotation-Container'>
+                {{#show_from_field}}
+                <label>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-profileArrow'></div>
+                <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>
+            <div class='Ldt-createAnnotation-submitButton Ldt-TraceMe'>
+                <div style='position: absolute; bottom: 5px; right: 5px;'>
+                    Submit
+                </div>
+            </div>
+            {{#keywords.length}}
+            <div class='Ldt-createAnnotation-keywords'>
+                Add keywords :
+                {{#keywords}}
+                    <button class='Ldt-createAnnotation-absent-keyword Ldt-TraceMe'>{{.}}</button>
+                {{/keywords}}
+            </div>
+            {{/keywords.length}}
+            {{#polemic_mode}}
+            <div class='Ldt-createAnnotation-polemics'>
+                Add polemic keywords :
+                {{#polemics}}
+                    <button class='Ldt-createAnnotation-polemic-{{className}} Ldt-createAnnotation-polemic-button Ldt-TraceMe'>{{keyword}}</button>
+                {{/polemics}}
+            </div>
+            {{/polemic_mode}}
         </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 class='Ldt-createAnnotation-screen 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-screen 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-screen 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 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>
-
-    <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>
diff -r ae16691d183d -r 18ca612e9ff0 src/templates/player.html
--- a/src/templates/player.html	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/templates/player.html	Thu Mar 08 18:38:46 2012 +0100
@@ -1,11 +1,11 @@
 {{! template for the radio player }}
-<div class='Ldt-controler demo'>
+<div class='Ldt-controler'>
 	<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='Ldt-button Ldt-CtrlPlay Ldt-CtrlPlay-PlayState Ldt-TraceMe' title='Play/Pause'></div>
+		<div class='Ldt-button Ldt-CtrlAnnotate Ldt-TraceMe' title='Annotate'></div>
+    <div class='Ldt-button Ldt-CtrlSearch Ldt-TraceMe' title='Search'></div>
     <div class='LdtSearch'>
-      <input class='LdtSearchInput' style='margin-top: 2px; margin-bottom: 2px;'></input>
+      <input class='LdtSearchInput Ldt-TraceMe' style='margin-top: 2px; margin-bottom: 2px;'></input>
     </div>
     
 	</div>
@@ -15,6 +15,6 @@
       <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 class='Ldt-button Ldt-CtrlSound Ldt-CtrlSound-MuteState Ldt-TraceMe' title='Mute/Unmute'></div>
 	</div>
 </div>
diff -r ae16691d183d -r 18ca612e9ff0 src/templates/sliderWidget.html
--- a/src/templates/sliderWidget.html	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/templates/sliderWidget.html	Thu Mar 08 18:38:46 2012 +0100
@@ -2,4 +2,4 @@
     of the other }}
 <div class='Ldt-sliderBackground'></div>
 <div class='Ldt-sliderForeground'></div>
-<div class='Ldt-sliderPositionMarker'></div>
+<div class='Ldt-sliderPositionMarker Ldt-TraceMe'></div>
diff -r ae16691d183d -r 18ca612e9ff0 src/templates/tweetWidget.html
--- a/src/templates/tweetWidget.html	Tue Mar 06 13:26:51 2012 +0100
+++ b/src/templates/tweetWidget.html	Thu Mar 08 18:38:46 2012 +0100
@@ -2,13 +2,13 @@
 <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-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'><div class='Ldt-RetweetIcon'></div> - Retweet </a>
-      <a href='' target='_blank' class='Ldt-TweetReply'><div class='Ldt-TweetReplyIcon'></div> - Reply</a>
+      <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>
diff -r ae16691d183d -r 18ca612e9ff0 test/integration/allocine_dossier_independant/polemic-allocine.htm
--- a/test/integration/allocine_dossier_independant/polemic-allocine.htm	Tue Mar 06 13:26:51 2012 +0100
+++ b/test/integration/allocine_dossier_independant/polemic-allocine.htm	Thu Mar 08 18:38:46 2012 +0100
@@ -25,11 +25,6 @@
     
     IriSP.user = {name: 'awesome_user_name', avatar: 'allocine_test/avatar.png'};
     IriSP.libdir = "js/libs/";
-    IriSP.widgetsDefaults["createAnnotationWidget"] = {};
-    IriSP.widgetsDefaults["createAnnotationWidget"].cinecast_version = true;
-    IriSP.widgetsDefaults["createAnnotationWidget"].polemic_mode = false;
-    IriSP.widgetsDefaults["createAnnotationWidget"].keywords = ["#allocine", "#vodkaster", "#universcine"];
-    IriSP.widgetsDefaults["createAnnotationWidget"].api_endpoint_template = "coucou/{{id}}.json";
     IriSP.defaults.user = function(){ return IriSP.user; };
     
     var config = {            
@@ -57,13 +52,17 @@
             },            
             {type: "AnnotationsListWidget",
              container: "AnnotationsListContainer"},
-            {type: "SliderWidget"},        
+            {type: "SliderWidget"},
             {type: "PlayerWidget", // please note that type refers directly to the constructor of the widget.
              mode: "radio"},                     
             {type: "ArrowWidget"},
             {type: "TweetsWidget"},
-            {type: "createAnnotationWidget"},
-            {type: "TraceWidget"}
+            {type: "createAnnotationWidget",
+            polemic_mode: false,
+            cinecast_version: true,
+            keywords: ['#vodkaster', '#allocine', '#universcine'],
+            api_endpoint_template : "coucou/{{id}}.json",
+            api_method: 'POST'}
             ]
         },
       player:{
diff -r ae16691d183d -r 18ca612e9ff0 test/integration/polemic.htm
--- a/test/integration/polemic.htm	Tue Mar 06 13:26:51 2012 +0100
+++ b/test/integration/polemic.htm	Thu Mar 08 18:38:46 2012 +0100
@@ -21,6 +21,7 @@
   <div id="LdtPlayer"></div>
   
   <script  type="text/javascript">
+IriSP.jwplayer_swf_path = "../libs/player.swf";
     var file = "polemic_fr.json";
     var config = {            
         gui:{
@@ -46,7 +47,8 @@
             },
             {type: "StackGraphWidget",
              width: 640, /* required for this widget */
-             height: 50,              
+             height: 50,
+            streamgraph: true,         
              requires: [{
               type: "TooltipWidget",
               width: 180,
@@ -71,7 +73,9 @@
             {type: "TweetsWidget"},
             {type: "createAnnotationWidget"},
             {type: "TagCloudWidget",
-            excludeWords: ['#museoweb']}
+            excludeWords: ['#museoweb']},
+            {type: "AnnotationsListWidget"},
+            {type: "TraceWidget"}
             ]
         },
       player:{