diff -r 2c025db10a10 -r d777d05a16e4 src/js/widgets/polemicNewWidget.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/widgets/polemicNewWidget.js	Thu Apr 19 19:20:41 2012 +0200
@@ -0,0 +1,174 @@
+IriSP.PolemicNewWidget = function(player, config) {
+    IriSP.Widget.call(this, player, config);
+    this.bindPopcorn("IriSP.search", "searchHandler");
+    this.bindPopcorn("IriSP.search.closed", "searchHandler");
+    this.bindPopcorn("IriSP.search.cleared", "searchHandler");
+    this.bindPopcorn("timeupdate", "onTimeupdate");
+    this.sliceCount = Math.floor( this.width / this.element_width );
+    this.$zone = IriSP.jQuery('<div>');
+    this.$.append(this.$zone);
+};
+
+IriSP.PolemicNewWidget.prototype = new IriSP.Widget();
+
+IriSP.PolemicNewWidget.prototype.searchHandler = function(searchString) {
+    this.searchString = typeof searchString !== "undefined" ? searchString : '';
+    var _found = 0,
+        _re = IriSP.Model.regexpFromTextOrArray(searchString)
+        _this = this;
+    this.$tweets.each(function() {
+        var _el = IriSP.jQuery(this);
+        if (_this.searchString) {
+            if (_re.test(_el.attr("title"))) {
+                _el.css({
+                    "background" : _this.foundcolor,
+                    "opacity" : 1
+                });
+                _found++;
+            } else {
+                _el.css({
+                    "background" : _el.attr("polemic-color"),
+                    "opacity" : .6
+                });
+            }
+        } else {
+            _el.css({
+                "background" : _el.attr("polemic-color"),
+                "opacity" : 1
+            });
+        }
+    });
+    if (this.searchString) {
+        if (_found) {
+            this.player.popcorn.trigger("IriSP.search.matchFound");
+        } else {
+            this.player.popcorn.trigger("IriSP.search.noMatchFound");
+        }
+    }
+}
+
+IriSP.PolemicNewWidget.prototype.draw = function() {
+    var _slices = [],
+        _duration = this.source.getDuration(),
+        _max = 0,
+        _list = this.annotation_type ? this.source.getAnnotationsByTypeTitle(this.annotation_type) : this.source.getAnnotations();
+    
+    for (var _i = 0; _i < this.sliceCount; _i++) {
+        var _begin = new IriSP.Model.Time(_i*_duration/this.sliceCount),
+            _end = new IriSP.Model.Time((_i+1)*_duration/this.sliceCount),
+            _count = 0,
+            _res = {
+                annotations : _list.filter(function(_annotation) {
+                    return _annotation.begin >= _begin && _annotation.end < _end;
+                }),
+                polemicStacks : []
+            }
+            
+        for (var _j = 0; _j < this.tags.length; _j++) {
+            var _polemic = _res.annotations.searchByDescription(this.tags[_j].keywords);
+            _count += _polemic.length;
+            _res.polemicStacks.push(_polemic);
+        }
+        for (var _j = 0; _j < this.tags.length; _j++) {
+            _res.annotations.removeElements(_res.polemicStacks[_j]);
+        }
+        _count += _res.annotations.length;
+        _max = Math.max(_max, _count);
+        _slices.push(_res);
+    }
+    this.height = (_max ? (_max + 2) * this.element_height : 0);
+    console.log(this.height);
+    this.$zone.css({
+        width: this.width + "px",
+        height: this.height + "px",
+        position: "relative"
+    });
+    
+    this.$elapsed = IriSP.jQuery('<div>')
+        .css({
+            background: '#cccccc',
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: 0,
+            height: "100%"
+        });
+        
+    this.$zone.append(this.$elapsed);
+    
+    var _x = 0,
+        _this = this;
+    
+    function displayElement(_x, _y, _color, _id, _title) {
+        var _el = IriSP.jQuery('<div>')
+            .attr({
+                title : _title,
+                "pos-x" : _x,
+                "pos-y" : _y,
+                "polemic-color" : _color,
+                "annotation-id" : _id
+            })
+            .css({
+                position: "absolute",
+                width: (_this.element_width-1) + "px",
+                height: _this.element_height + "px",
+                left: _x + "px",
+                top: _y + "px",
+                background: _color
+            })
+            .addClass("Ldt-Polemic-TweetDiv");
+        _this.$zone.append(_el);
+        return _el;
+    }
+    
+    IriSP._(_slices).forEach(function(_slice) {
+        var _y = _this.height;
+        _slice.annotations.forEach(function(_annotation) {
+            _y -= _this.element_height;
+            displayElement(_x, _y, _this.defaultcolor, _annotation.namespacedId.name, _annotation.title);
+        });
+        IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) {
+            var _color = _this.tags[_j].color;
+            _annotations.forEach(function(_annotation) {
+                _y -= _this.element_height;
+                displayElement(_x, _y, _color, _annotation.namespacedId.name, _annotation.title);
+            });
+        });
+        _x += _this.element_width;
+    });
+    
+    this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv");
+    
+    this.$position = IriSP.jQuery('<div>')
+        .css({
+            background: '#fc00ff',
+            position: "absolute",
+            top: 0,
+            left: "-1px",
+            width: "2px",
+            height: "100%"
+        });
+        
+    this.$zone.append(this.$position);
+    
+    this.$tweets.click(function(_e) {
+        //TODO: Display Tweet in Tweet Widget
+    });
+    
+    //TODO: Mouseover a tweet to display tooltip
+    
+    this.$zone.click(function(_e) {
+        var _x = _e.pageX - _this.$zone.offset().left;
+        _this.player.popcorn.currentTime(_this.source.getDuration().getSeconds() * _x / _this.width);
+    });
+}
+
+IriSP.PolemicNewWidget.prototype.onTimeupdate = function() {
+    var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds());
+    this.$elapsed.css({
+        width:  _x + "px"
+    });
+    this.$position.css({
+        left: (_x - 1) + "px"
+    })
+}