1 IriSP.PolemicWidget = function(player, config) {

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

     3     this.bindPopcorn("IriSP.search", "searchHandler");

     4     this.bindPopcorn("IriSP.search.closed", "searchHandler");

     5     this.bindPopcorn("IriSP.search.cleared", "searchHandler");

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

     7     this.sliceCount = Math.floor( this.width / this.element_width );

     8     this.$zone = IriSP.jQuery('<div>');

     9     this.$.append(this.$zone);

    10 };

    11 

    12 IriSP.PolemicWidget.prototype = new IriSP.Widget();

    13 

    14 IriSP.PolemicWidget.prototype.searchHandler = function(searchString) {

    15     this.searchString = typeof searchString !== "undefined" ? searchString : '';

    16     var _found = 0,

    17         _re = IriSP.Model.regexpFromTextOrArray(searchString)

    18         _this = this;

    19     this.$tweets.each(function() {

    20         var _el = IriSP.jQuery(this);

    21         if (_this.searchString) {

    22             if (_re.test(_el.attr("tweet-title"))) {

    23                 _el.css({

    24                     "background" : _this.foundcolor,

    25                     "opacity" : 1

    26                 });

    27                 _found++;

    28             } else {

    29                 _el.css({

    30                     "background" : _el.attr("polemic-color"),

    31                     "opacity" : .5

    32                 });

    33             }

    34         } else {

    35             _el.css({

    36                 "background" : _el.attr("polemic-color"),

    37                 "opacity" : 1

    38             });

    39         }

    40     });

    41     if (this.searchString) {

    42         if (_found) {

    43             this.player.popcorn.trigger("IriSP.search.matchFound");

    44         } else {

    45             this.player.popcorn.trigger("IriSP.search.noMatchFound");

    46         }

    47     }

    48 }

    49 

    50 IriSP.PolemicWidget.prototype.draw = function() {

    51     var _slices = [],

    52         _duration = this.source.getDuration(),

    53         _max = 0,

    54         _list = this.annotation_type ? this.source.getAnnotationsByTypeTitle(this.annotation_type) : this.source.getAnnotations();

    55     

    56     for (var _i = 0; _i < this.sliceCount; _i++) {

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

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

    59             _count = 0,

    60             _res = {

    61                 annotations : _list.filter(function(_annotation) {

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

    63                 }),

    64                 polemicStacks : []

    65             }

    66             

    67         for (var _j = 0; _j < this.tags.length; _j++) {

    68             var _polemic = _res.annotations.searchByDescription(this.tags[_j].keywords);

    69             _count += _polemic.length;

    70             _res.polemicStacks.push(_polemic);

    71         }

    72         for (var _j = 0; _j < this.tags.length; _j++) {

    73             _res.annotations.removeElements(_res.polemicStacks[_j]);

    74         }

    75         _count += _res.annotations.length;

    76         _max = Math.max(_max, _count);

    77         _slices.push(_res);

    78     }

    79     this.height = (_max ? (_max + 2) * this.element_height : 0);

    80     this.$zone.css({

    81         width: this.width + "px",

    82         height: this.height + "px",

    83         position: "relative"

    84     });

    85     

    86     this.$elapsed = IriSP.jQuery('<div>')

    87         .css({

    88             background: '#cccccc',

    89             position: "absolute",

    90             top: 0,

    91             left: 0,

    92             width: 0,

    93             height: "100%"

    94         });

    95         

    96     this.$zone.append(this.$elapsed);

    97     

    98     var _x = 0,

    99         _this = this;

   100     

   101     function displayElement(_x, _y, _color, _id, _title) {

   102         var _el = IriSP.jQuery('<div>')

   103             .attr({

   104                 "tweet-title" : _title,

   105                 "pos-x" : Math.floor(_x + (_this.element_width - 1) / 2),

   106                 "pos-y" : _y,

   107                 "polemic-color" : _color,

   108                 "annotation-id" : _id

   109             })

   110             .css({

   111                 position: "absolute",

   112                 width: (_this.element_width-1) + "px",

   113                 height: _this.element_height + "px",

   114                 left: _x + "px",

   115                 top: _y + "px",

   116                 background: _color

   117             })

   118             .addClass("Ldt-Polemic-TweetDiv");

   119         _this.$zone.append(_el);

   120         return _el;

   121     }

   122     

   123     IriSP._(_slices).forEach(function(_slice) {

   124         var _y = _this.height;

   125         _slice.annotations.forEach(function(_annotation) {

   126             _y -= _this.element_height;

   127             displayElement(_x, _y, _this.defaultcolor, _annotation.namespacedId.name, _annotation.title);

   128         });

   129         IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) {

   130             var _color = _this.tags[_j].color;

   131             _annotations.forEach(function(_annotation) {

   132                 _y -= _this.element_height;

   133                 displayElement(_x, _y, _color, _annotation.namespacedId.name, _annotation.title);

   134             });

   135         });

   136         _x += _this.element_width;

   137     });

   138     

   139     this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv");

   140     

   141     this.$position = IriSP.jQuery('<div>')

   142         .css({

   143             background: '#fc00ff',

   144             position: "absolute",

   145             top: 0,

   146             left: "-1px",

   147             width: "2px",

   148             height: "100%"

   149         });

   150         

   151     this.$zone.append(this.$position);

   152     

   153     this.$tweets

   154         .mouseover(function() {

   155             var _el = IriSP.jQuery(this);

   156             _this.TooltipWidget.show(_el.attr("pos-x"), _el.attr("pos-y"), _el.attr("tweet-title"), _el.attr("polemic-color"));

   157         })

   158         .mouseout(function() {

   159             _this.TooltipWidget.hide();

   160         });

   161     

   162     //TODO: Display Tweet in Tweet Widget on click

   163     

   164     this.$zone.click(function(_e) {

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

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

   167     });

   168 }

   169 

   170 IriSP.PolemicWidget.prototype.onTimeupdate = function() {

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

   172     this.$elapsed.css({

   173         width:  _x + "px"

   174     });

   175     this.$position.css({

   176         left: (_x - 1) + "px"

   177     })

   178 }