src/widgets/Polemic.js
branchnew-model
changeset 937 eb3c442cec50
parent 930 165f236e42f2
child 957 4da0a5740b6c
child 1019 3ab36f402b0c
--- a/src/widgets/Polemic.js	Wed Aug 29 18:32:34 2012 +0200
+++ b/src/widgets/Polemic.js	Wed Aug 29 18:34:11 2012 +0200
@@ -64,7 +64,7 @@
             } else {
                 _el.css({
                     "background" : _el.attr("polemic-color"),
-                    "opacity" : .5
+                    "opacity" : .3
                 });
             }
         } else {
@@ -145,39 +145,66 @@
                 position: "relative"
             });
             
-            var _x = 0,
-                _html = '';
+            var _x = 0;
             
-            function displayElement(_x, _y, _color, _id, _title, _polemic) {
-                _html += Mustache.to_html(
-                    '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id={{media_id}}, polemic={{polemic}}" annotation-id="{{id}}" tweet-title="{{title}}" pos-x="{{posx}}" pos-y="{{top}}" polemic-color="{{color}}"'
-                    + ' style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>',
+            function displayAnnotation(_elx, _ely, _pol, _col, _annotation) {
+                var _html = Mustache.to_html(
+                    '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id={{media_id}}, polemic={{polemic}}" polemic-color="{{color}}"'
+                    + ' tweet-title="{{title}}" annotation-id="{{id}}" style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>',
                 {
-                    id: _id,
+                    id: _annotation.id,
                     media_id: _this.source.currentMedia.id,
-                    polemic: _polemic,
-                    title: _title,
-                    posx: Math.floor(_x + (_this.element_width - 1) / 2),
-                    left: _x,
-                    top: _y,
-                    color: _color,
+                    polemic: _pol,
+                    left: _elx,
+                    top: _ely,
+                    color: _col,
                     width: (_this.element_width-1),
-                    height: _this.element_height
+                    height: _this.element_height,
+                    title: _annotation.title
+                });
+                var _el = IriSP.jQuery(_html);
+                _el.mouseover(function() {
+                    _annotation.trigger("select");
+                }).mouseout(function() {
+                    _annotation.trigger("unselect");
+                }).click(function() {
+                    _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _annotation.id);
+                    _this.player.popcorn.trigger("IriSP.Tweet.show", _annotation.id);
                 });
+                _annotation.on("select", function() {
+                    _this.tooltip.show(
+                        Math.floor(_elx + (_this.element_width - 1) / 2),
+                        _ely,
+                        _annotation.title,
+                        _col
+                    );
+                    _this.$tweets.each(function() {
+                        var _e = IriSP.jQuery(this);
+                        _e.css(
+                            "opacity",
+                            ( _e.attr("annotation-id") == _annotation.id ? 1 : .3 )
+                        );
+                    });
+                });
+                _annotation.on("unselect", function() {
+                    _this.tooltip.hide();
+                    _this.$tweets.css("opacity",1);
+                });
+                _this.$zone.append(_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.id, _annotation.title, "none");
+                    displayAnnotation(_x, _y, "none", _this.defaultcolor, _annotation);
                 });
                 IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) {
                     var _color = _this.polemics[_j].color,
                         _polemic = _this.polemics[_j].name;
                     _annotations.forEach(function(_annotation) {
                         _y -= _this.element_height;
-                        displayElement(_x, _y, _color, _annotation.id, _annotation.title, _polemic);
+                        displayAnnotation(_x, _y, _polemic, _color, _annotation);
                     });
                 });
                 _x += _this.element_width;
@@ -187,20 +214,6 @@
             
             this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv");
             
-            this.$tweets
-                .mouseover(function() {
-                    var _el = IriSP.jQuery(this);
-                    _this.tooltip.show(_el.attr("pos-x"), _el.attr("pos-y"), _el.attr("tweet-title"), _el.attr("polemic-color"));
-                })
-                .mouseout(function() {
-                    _this.tooltip.hide();
-                })
-                .click(function() {
-                    var _id = IriSP.jQuery(this).attr("annotation-id");
-                    _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _id);
-                    _this.player.popcorn.trigger("IriSP.Tweet.show", _id);
-                });
-            
             this.bindPopcorn("IriSP.search", "onSearch");
             this.bindPopcorn("IriSP.search.closed", "onSearch");
             this.bindPopcorn("IriSP.search.cleared", "onSearch");