1 IriSP.Widgets.Sparkline = function(player, config) {

     2     IriSP.Widgets.Widget.call(this, player, config);

     3     //this.bindPopcorn("timeupdate", "onTimeupdate");

     4 };

     5 

     6 IriSP.Widgets.Sparkline.prototype = new IriSP.Widgets.Widget();

     7 

     8 IriSP.Widgets.Sparkline.prototype.defaults = {

     9    lineColor : "#7492b4",

    10    fillColor : "#aeaeb8",

    11    lineWidth : 2,

    12    slice_count : 20,

    13    height : 50,

    14    margin : 5

    15 };

    16 

    17 IriSP.Widgets.Sparkline.prototype.draw = function() {

    18     var _slices = [],

    19         _duration = this.source.getDuration(),

    20         _max = 0,

    21         _list = this.getWidgetAnnotations();

    22     

    23     for (var _i = 0; _i < this.slice_count; _i++) {

    24         var _begin = new IriSP.Model.Time(_i*_duration/this.slice_count),

    25             _end = new IriSP.Model.Time((_i+1)*_duration/this.slice_count),

    26             _annotations = _list.filter(function(_annotation) {

    27                 return _annotation.begin >= _begin && _annotation.end < _end;

    28             }).length;

    29         _max = Math.max(_max, _annotations);

    30         _slices.push(_annotations);

    31     }

    32     if (!_max) {

    33         return;

    34     }

    35     this.paper = new Raphael(this.$[0], this.width, this.height);

    36     var _scale = (this.height - this.margin) / _max,

    37         _width = this.width / this.slice_count,

    38         _this = this,

    39         _y = IriSP._(_slices).map(function(_v) {

    40             return _this.margin + _this.height - (_scale * _v);

    41         }),

    42         _d = IriSP._(_y).reduce(function(_memo, _v, _k) {

    43                return _memo + ( _k

    44                    ? 'C' + (_k * _width) + ' ' + _y[_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v

    45                    : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v )

    46             },'') + 'L' + this.width + ' ' + _y[_y.length - 1],

    47         _d2 = _d + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height;

    48     

    49     this.paper.path(_d2).attr({

    50         "stroke" : "none",

    51         "fill" : this.fillColor

    52     });

    53          

    54     this.paper.path(_d).attr({

    55         "fill" : "none",

    56         "stroke" : this.lineColor,

    57         "stroke-width" : this.lineWidth

    58     });

    59     

    60     this.rectangleProgress = this.paper.rect(0,0,0,this.height)

    61         .attr({

    62             "stroke" : "none",

    63             "fill" : "#808080",

    64             "opacity" : .3

    65         });

    66         

    67     this.ligneProgress = this.paper.path("M0 0L0 "+this.height).attr({"stroke":"#ff00ff", "line-width" : 2});

    68    

    69     this.$.click(function(_e) {

    70         var _x = _e.pageX - _this.$.offset().left;

    71         _this.player.popcorn.currentTime(_this.source.getDuration().getSeconds() * _x / _this.width);

    72     });

    73     

    74     this.bindPopcorn("timeupdate","onTimeupdate");

    75 }

    76 

    77 IriSP.Widgets.Sparkline.prototype.onTimeupdate = function() {

    78     var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds());

    79     this.rectangleProgress.attr({

    80         "width" : _x

    81     });

    82     this.ligneProgress.attr({

    83         "path" : "M" + _x + " 0L" + _x + " " + this.height

    84     });

    85 }