# HG changeset patch
# User veltr
# Date 1367590555 -7200
# Node ID 9d95cc8b861bf3bb46d6ca577b32cfbaa86f95ac
# Parent  1f6b7dce650c3fd52d8f93260b22ab31534fa8cf
Added Overlay information

diff -r 1f6b7dce650c -r 9d95cc8b861b integ/iri-buzz.html
--- a/integ/iri-buzz.html	Thu May 02 18:28:52 2013 +0200
+++ b/integ/iri-buzz.html	Fri May 03 16:15:55 2013 +0200
@@ -108,7 +108,7 @@
             </div>
         </div>
         <div class="comment-arrow"></div>
-    </div>;
+    </div>
 
 <script src="js/libs/jquery-1.7.1.min.js"></script>
 <script src="js/libs/jquery-ui-1.8.21.custom.min.js"></script>
diff -r 1f6b7dce650c -r 9d95cc8b861b integ/iri/css/iri-buzz.css
--- a/integ/iri/css/iri-buzz.css	Thu May 02 18:28:52 2013 +0200
+++ b/integ/iri/css/iri-buzz.css	Fri May 03 16:15:55 2013 +0200
@@ -132,11 +132,44 @@
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#126ae3', endColorstr='#1899e1',GradientType=0 );
 }
 
-.posters li {
+.poster {
     float: left;
+    position: relative;
     width: 150px;
     height: 200px;
-    overflow: hidden;
+}
+
+.poster-overlay {
+    position: absolute; bottom: 0; left: 0; right: 0; top: 0; cursor: pointer;
+}
+
+.poster-datainfo {
+    position: absolute; bottom: 0; left: 0; right: 0; top: 0;
+    background: rgba(30,30,30,.65); display: none;
+}
+
+.poster-overlay:hover .poster-datainfo {
+    display:block;
+}
+
+.poster-distribution {
+    position: absolute; top: 50%; margin-top: -60px; left: 40px; width: 70px;
+}
+
+.poster-distribution li {
+    height: 28px; line-height: 28px; color: #FFFFFF; font-size: 16px; font-weight: bold;
+    margin: 5px; padding-left: 40px; background-image: url(../img/buzz-sprite.png); background-repeat: no-repeat;
+    text-shadow: 1px 1px 0 #000000;
+}
+
+.poster-0 {
+    background-position: bottom left;
+}
+.poster-1 {
+    background-position: center left;
+}
+.poster-2 {
+    background-position: top left;
 }
 
 #data-viz {
diff -r 1f6b7dce650c -r 9d95cc8b861b integ/iri/js/iri-buzz.js
--- a/integ/iri/js/iri-buzz.js	Thu May 02 18:28:52 2013 +0200
+++ b/integ/iri/js/iri-buzz.js	Fri May 03 16:15:55 2013 +0200
@@ -15,11 +15,14 @@
     movieCount: 10,
     opinionsPerPage: 100,
     colors: [ "#f62a43", "#f3c000", "#2d9252"],
+    borderColors: [ "#f7788e", "#fdde83", "#3bb767" ],
+    stripeColors: [ "#c92238", "#c79e03", "#237844" ],
     refreshRate: .25 * SECONDS,
     columnSpacing: 40,
     columnWidth: 150,
     tokenHeight: 16,
-    disappearAfter: 8 * SECONDS
+    fallSpeed: 4,
+    disappearAfter: 4 * SECONDS
 }
 
 $(function() {
@@ -33,21 +36,29 @@
         clockInterval,
         tzDelta = 0,
         tzSuffix = 'Z';
-            
-    function addPatterns() {
-        if (!$("pattern").length) {
-            var xml = '<svg style="position: absolute;" width="1" height="1"><defs>'
-            + config.colors.map(function(color, i) {
-                return '<pattern id="pattern_'
-                    + i
-                    + '" x="0" y="0" width="3" height="3" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="3" height="3" fill="'
-                    + color
-                    + '" /><path d="M0 0L3 3" stroke="#333333" stroke-width=".3" opacity=".8" /></pattern>';
-            }).join("")
-            + '</defs></svg>';
-            $("body").append(xml);
-        }
-    }
+    
+    
+    // Add Patterns
+    var xml = '<svg style="position: absolute;" width="1" height="1"><defs>'
+        + config.colors.map(function(color, i) {
+            return '<pattern id="pattern_'
+                + i
+                + '" x="0" y="0" width="3" height="3" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="3" height="3" fill="'
+                + color
+                + '" />'
+                + _.range(3).map(function(n) {
+                    return '<rect x="'
+                        + n
+                        + '" y="'
+                        + n
+                        + '" width="1" height="1" fill="'
+                        + config.stripeColors[i]
+                        + '" />'
+                }).join("")
+                + '</pattern>';
+        }).join("")
+        + '</defs></svg>';
+    $("body").append(xml);
         
     function resizeTimer() {
         var w = Math.max(80, $(window).width() - 272),
@@ -125,7 +136,12 @@
             return a._timestamp > b._timestamp;
         });
         $("#data-viz").html("").css("text-align","left");
-        var lastShownToken = null;
+        
+        var lastShownToken = null,
+            maxData = Math.max.apply(Math, movies.map(function(m) { return m.opinions.length; })),
+            aggrHeight = vsHeight - 80,
+            aggrScale = aggrHeight / maxData;
+        
         var barChartSettings = {
             width : vsWidth,
             height : vsHeight,
@@ -135,7 +151,7 @@
                 height: vsHeight
             },
             options : {
-                layout: true
+                layout: false
             },
             data : {
                 model : movies.map(function(movie) {
@@ -144,31 +160,29 @@
                     };
                 }),
                 strata : function() {
-                    
                     if (typeof barChart === "undefined") {
                         var flocculated = [];
-                        _(function() {
-                            addPatterns();
-                            _.range(3).map(function(colorId) {
-                                $(".layer_"+colorId).css({
-                                    fill: "url(#pattern_" +colorId + ")",
-                                    stroke: "#ffffff",
-                                    "stroke-opacity": .2
-                                });
+                        _.range(3).map(function(colorId) {
+                            $(".layer_"+colorId).css({
+                                fill: "url(#pattern_" +colorId + ")",
+                                stroke: config.borderColors[colorId]
                             });
-                        }).defer();
+                        });
                     } else {
                         var flocculated = barChart.selectAll("state",2);
                     }
                     
-                    var res = movies.map(function(movie) {
+                    var res = movies.map(function(movie, i) {
                         var movieTokens = flocculated.filter(function(t) {
                             return t.attr("movie") === movie.id;
                         });
+                        var movieHeight = aggrScale * movieTokens.length;
+                        movie.poster$.find(".poster-overlay").css("top", -movieHeight);
                         return _.range(3).map(function(colorId) {
                             var stratumTokens = movieTokens.filter(function(t) {
                                 return t.attr("colorId") === colorId;
                             }).length;
+                            movie.poster$.find(".poster-" + colorId).text(stratumTokens);
                             return {
                                 value: function() {
                                     return stratumTokens
@@ -191,8 +205,8 @@
                     }
                 },
                 aggregation:{
-                    height: vsHeight - 80,
-                    maxData: Math.max.apply(Math, movies.map(function(m) { return m.opinions.length; }))
+                    height: aggrHeight,
+                    maxData: maxData
                 },
                 suspension:{
                     decay:{
@@ -203,7 +217,8 @@
         }
         
         function onTokenMouseover(token) {
-            //if (token !== lastShownToken) {
+            if (token !== lastShownToken) {
+                $("body").css("cursor", "pointer");
                 var h = "Il y a ",
                     deltaT = Date.now() - token.attr("timestamp"),
                     deltaH = Math.round(deltaT / HOURS);
@@ -227,22 +242,25 @@
                 commentDiv.find(".username").text(token.attr("username"));
                 commentDiv.show();
                 lastShownToken = token;
-            //}
+            }
         }
         
         function onTokenMouseout(token) {
-          /*  lastShownToken = null;
+            lastShownToken = null;
             setTimeout(function() {
-                if (!lastShownToken) { */
-                    commentDiv.hide(); /*
+                if (!lastShownToken) {
+                $("body").css("cursor", "");
+                    commentDiv.hide();
                 }
-            }, 200); */
+            }, 200);
         }
         
         console.log(barChartSettings);
         
         var barChart = $("#data-viz").vs(barChartSettings).data('visualSedimentation');
         
+        barChart.world.SetGravity(new barChart.phy.b2Vec2(0,10 * config.fallSpeed));
+                
         $(".timer-bar-value").width(0);
         
         play();
@@ -252,11 +270,18 @@
         var lastTimestamp = 0;
         
         clockInterval = setInterval(function() {
+            
+            if (paused) {
+                return;
+            }
+            
             var vizT = currentVizTime();
+            
             var originalT = vizTimeToOriginalTime(vizT),
                 tokensToAdd = opinions.filter(function(o) {
                     return o._timestamp > lastTimestamp && o._timestamp <= originalT
                 });
+            
             lastTimestamp = originalT;
             
             tokensToAdd.forEach(function(opinion) {
@@ -267,17 +292,17 @@
                     viztime: originalTimeToVizTime(opinion._timestamp),
                     movie: opinion._movie,
                     colorId: opinion._colorId,
-                    fillStyle: opinion._color,
+                    fillStyle: config.colors[opinion._colorId],
                     avatar: (typeof opinion.actor.user.avatar === "undefined" ? "http://fr.web.img6.acsta.net/r_50_x/commons/emptymedia/AvatarAllocineMr.gif" : resizeAcPicture( opinion.actor.user.avatar, 50, "x" )),
                     username: opinion.actor.user.userName,
                     actiontype: opinion.action.type,
                     actionvalue: opinion.action.value,
-                    content: ( opinion.action.type === "userreview" ? opinion.content.$ : (opinion.action.type === "wanttosee" ? "veut voir ce film." : "" ) ),
+                    content: ( opinion.action.type === "userreview" ? opinion.content.$ : (opinion.action.type === "wanttosee" ? "veut voir ce film." : "" ) ).replace(/[\n\r\s]+/mg,' ').replace(/(^.{320,340})[\s].+$/,'$1…'),
                     size: 30,
                     texture: {
                         src: "iri/img/logo-iri.png"
                     },
-                    strokeStyle: "rgba(255,255,255,.2)",
+                    strokeStyle: config.borderColors[opinion._colorId],
                     shape:{
                       type:'box',
                       width: config.columnWidth / 2 - 1,
@@ -307,6 +332,7 @@
 
             var w = $('.timer-bar').width() * Math.min(1, vizT / config.vizDuration);
             $(".timer-bar-value").width(w);
+            
         }, config.refreshRate);
     }
     
@@ -331,7 +357,6 @@
                 }
                 tokens.forEach(function(a) {
                     a._colorId = config.colorIds[a.action.value];
-                    a._color = config.colors[a._colorId];
                     a._timestamp = Date.parse(a.datetime + tzSuffix) - tzDelta;
                     a._movie = movie.id;
                     a._column = movie.column;
@@ -415,14 +440,21 @@
             moviesToLoad = movies.length;
             movies.forEach(loadMovie);
             $('.posters').html(movies.map(function(movie) {
-                return '<li style=" margin: 0 '
+                return '<li class="poster" style=" margin: 0 '
                     + Math.floor(config.columnSpacing / 2)
                     + 'px"><img width="150" height="200" src="'
                     + resizeAcPicture(movie.poster,150,200)
                     + '" alt="'
                     + movie.title
-                    +'" /></li>';
+                    + '" /><div class="poster-overlay"><div class="poster-datainfo">'
+                    + '<ul class="poster-distribution"><li class="poster-2">0</li><li class="poster-1">0</li><li class="poster-0">0</li>'
+                    + '</ul></div></div></li>';
             }).join(""));
+            
+            $(".poster")
+                .each(function(i) {
+                    movies[i].poster$ = $(this);
+                });
         }
     );