/** @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 + "%");                                    

}