--- a/src/ldt/ldt/static/ldt/js/LdtPlayer-release.js	Mon Jan 16 16:57:10 2012 +0100
+++ b/src/ldt/ldt/static/ldt/js/LdtPlayer-release.js	Mon Jan 16 16:57:19 2012 +0100
@@ -1613,6 +1613,9 @@
       keywords: ["#faux-raccord", "#mot-clef"],
       cinecast_version: true /* put to false to enable the platform version, true for the festival cinecast one. */
   },
+  "SparklineWidget" : {
+      column_width: 10 // the width of a column in pixels.
+  },
   "Main" : {
       autoplay: true
   }
@@ -2274,7 +2277,7 @@
   }
   
   var idList = IriSP.underscore.pluck(list, "id").sort();
-  
+
   if (idList.length !== this.__oldList.length) {
     this.do_redraw(list);
   }
@@ -2305,7 +2308,7 @@
 IriSP.AnnotationsListWidget.prototype.draw = function() {
 
   this.drawList();
-  this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", IriSP.wrap(this, function() { this.redraw(true); }));
+  this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", IriSP.wrap(this, function() { this.drawList(true); }));
   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.redraw));
 };
 
@@ -2815,7 +2818,6 @@
                       console.log(tmp_view);
                       this._serializer._data["annotation-types"].push(tmp_view);
                     }
-                    annotation["type"] = "";
                     
                     delete annotation.tags;
                     annotation.content.description = annotation.content.data;
@@ -2824,11 +2826,12 @@
                     annotation.id = json.annotations[0].id;
 
                     annotation.meta = meta;
-                    annotation.meta["id-ref"] = annotation["type"];
+                    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);
                     console.log(_this._serializer._data);
-                    _this._Popcorn.trigger("IriSP.createAnnotationWidget.addedAnnotation");
+                    _this._Popcorn.trigger("IriSP.createAnnotationWidget.addedAnnotation", annotation);
                     callback();
       }), 
       error: 
@@ -3987,7 +3990,7 @@
   IriSP.Widget.call(this, Popcorn, config, Serializer);
 
   this._oldAnnotation = null;
-  
+  this._results = [];
 };
 
 
@@ -4005,9 +4008,8 @@
     the second is an overlay div to display the progression in the video,
     and the third is a div to react to clicks
   */
-    
-  /* we suppose that a column is 5 pixels wide */
-  var num_columns = (this.selector.width()) / 10;
+  
+  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 = [];
@@ -4036,6 +4038,9 @@
     results.push(count);
   }
 
+  // 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");
@@ -4043,6 +4048,8 @@
                                                            spotColor: "#b70056",
                                                            width: this.width, height: this.height});
   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));  
 };
 
@@ -4075,6 +4082,20 @@
   
   this._Popcorn.trigger("IriSP.SparklineWidget.clicked", newTime);
   this._Popcorn.currentTime(newTime);                                 
+};
+
+/** react when a new annotation is added */
+IriSP.SparklineWidget.prototype.handleNewAnnotation = function(annotation) {
+  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 begin = +annotation.begin;
+  
+  var index = Math.floor(begin / time_step);
+  this._results[index]++;
+  this.selector.find(".Ldt-sparkLine").sparkline(this._results, {lineColor: "#7492b4", fillColor: "#aeaeb8",
+                                                           spotColor: "#b70056",
+                                                           width: this.width, height: this.height});
 };/* this widget displays a small tooltip */
 IriSP.TooltipWidget = function(Popcorn, config, Serializer) {
   IriSP.Widget.call(this, Popcorn, config, Serializer);