diff -r df716b99c5bb -r 8dfeaec4724b src/js/widgets/sparklineWidget.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/widgets/sparklineWidget.js	Fri Dec 23 12:47:17 2011 +0100
@@ -0,0 +1,35 @@
+/** @class The constructor for the sparkline widget */
+IriSP.SparklineWidget = function(Popcorn, config, Serializer) {
+  IriSP.Widget.call(this, Popcorn, config, Serializer);
+
+  this._oldAnnotation = null;
+  
+};
+
+
+IriSP.SparklineWidget.prototype = new IriSP.Widget();
+
+IriSP.SparklineWidget.prototype.clear = function() {
+
+};
+
+IriSP.SparklineWidget.prototype.draw = function() {
+  var templ = Mustache.to_html(IriSP.SparklineWidget_template, {});
+  /** 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.selector.append(templ);
+  this.selector.find(".Ldt-sparkLine").sparkline([1, 34, 56, 45, 34, 67, 78, 84], {width: "640px", height: "60px"});
+  this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler));
+};
+
+/** 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(3);
+
+  IriSP.jQuery(".Ldt-sparkLinePositionMarker").css("width", proportion + "%");                                    
+}