--- a/integ/iri/js/iri-buzz.js	Mon Apr 29 18:52:17 2013 +0200
+++ b/integ/iri/js/iri-buzz.js	Tue Apr 30 12:51:27 2013 +0200
@@ -12,21 +12,41 @@
         "2.5": 1, "3.0": 1, "3.5": 1,
         "4.0": 2, "4.5": 2, "5.0": 2
     },
-    movieCount: 10,
+    movieCount: 15,
     opinionsPerPage: 100,
-    colors: [ "#c00000", "#ffd000", "#008000"],
-    refreshRate: 50
+    colors: [ "#f62a43", "#f3c000", "#2d9252"],
+    refreshRate: 200,
+    columnSpacing: 40,
+    columnWidth: 150,
+    tokenHeight: 16
 }
 
 $(function() {
     
-    var originalStart = new Date().valueOf() - config.originalDuration,
+    var originalStart = Date.now() - config.originalDuration,
         timeScale = config.vizDuration / config.originalDuration,
         movies,
         moviesToLoad,
         opinions = [],
-        loadTime = new Date().valueOf(),
-        clockInterval;
+        loadTime = Date.now(),
+        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);
+        }
+    }
         
     function resizeTimer() {
         var w = Math.max(80, $(window).width() - 170),
@@ -47,7 +67,7 @@
     $(window).resize(resizeTimer);
     
     var vsHeight = $(window).height() - $('footer').height() - $('header').height() - 300,
-        vsWidth = config.movieCount * 160;
+        vsWidth = config.movieCount * (config.columnWidth + config.columnSpacing);
         
     $("#data-viz").css('height', vsHeight);
     $('.posters').css('width', vsWidth);
@@ -64,7 +84,7 @@
             width : vsWidth,
             height : vsHeight,
             chart : {
-                spacer : 5,
+                spacer : config.columnSpacing / 2,
                 y: 100,
                 height: vsHeight - 100
             },
@@ -79,8 +99,13 @@
                     if (typeof barChart === "undefined") {
                         var flocculated = [];
                         _(function() {
+                            addPatterns();
                             _.range(3).map(function(colorId) {
-                                $(".layer_"+colorId).css("fill", config.colors[colorId]);
+                                $(".layer_"+colorId).css({
+                                    fill: "url(#pattern_" +colorId + ")",
+                                    stroke: "#ffffff",
+                                    "stroke-opacity": .2
+                                });
                             });
                         }).defer();
                     } else {
@@ -117,12 +142,16 @@
                         movie: opinion._movie,
                         colorId: opinion._colorId,
                         fillStyle: opinion._color,
-                        strokeStyle: "#555555",
+                        size: 30,
+                        texture: {
+                            src: "iri/img/star-icon.png"
+                        },
+                        strokeStyle: "rgba(255,255,255,.2)",
                         t: Math.floor((opinion._timestamp - originalStart) * timeScale / config.refreshRate),
                         shape:{
                           type:'box',
-                          width:74,
-                          height:5
+                          width: config.columnWidth / 2 - 1,
+                          height: config.tokenHeight / 2
                         },
                         callback:{
                             suspension: function(token) {
@@ -153,12 +182,15 @@
                 }
             }
         }
+        
+        //console.log(barChartSettings);
+        
         barChart = $("#data-viz").vs(barChartSettings).data('visualSedimentation');
-        var startOfViz = new Date();
+        var startOfViz = Date.now();
         clearInterval(clockInterval);
         $(".timer-bar-value").width(0);
         clockInterval = setInterval(function() {
-            $(".timer-bar-value").width($('.timer-bar').width() * Math.min(1, (new Date() - startOfViz) / config.vizDuration));
+            $(".timer-bar-value").width($('.timer-bar').width() * Math.min(1, (Date.now() - startOfViz) / config.vizDuration));
         },
         100);
     }
@@ -185,7 +217,7 @@
                 tokens.forEach(function(a) {
                     a._colorId = config.colorIds[a.action.value];
                     a._color = config.colors[a._colorId];
-                    a._timestamp = new Date(a.datetime).valueOf();
+                    a._timestamp = Date.parse(a.datetime + tzSuffix) - tzDelta;
                     a._movie = movie.id;
                     a._column = movie.column;
                 });
@@ -204,7 +236,7 @@
                     console.log("Page " + movie.opinionPage + " of '" + movie.title + "' -- total : " + movie.opinions.length + " opinions loaded");
                     moviesToLoad--;
                     if (!moviesToLoad) {
-                        console.log("**** Everything is loaded, in " + (new Date().valueOf() - loadTime) / 1000 + " seconds");
+                        console.log("**** Everything is loaded, in " + (Date.now() - loadTime) / 1000 + " seconds");
                         startViz();
                     }
                 }
@@ -224,6 +256,9 @@
         function(d) {
             $("#data-viz").html("Chargement des flux d'opinions<br />");
             console.log("Movie List Loaded");
+            tzDelta = .5 * HOURS * Math.round((Date.parse(d.feed.updated) - loadTime) / (.5 * HOURS));
+            tzSuffix = d.feed.updated.replace(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/,'');
+
             movies = d.feed.movie.map(function(movie, i) {
                 return {
                     id: movie.code,
@@ -237,7 +272,9 @@
             moviesToLoad = movies.length;
             movies.forEach(loadMovie);
             $('.posters').html(movies.map(function(movie) {
-                return '<li><img width="150" height="200" src="'
+                return '<li style=" margin: 0 '
+                    + Math.floor(config.columnSpacing / 2)
+                    + 'px"><img width="150" height="200" src="'
                     + movie.poster
                     + '" alt="'
                     + movie.title
@@ -247,7 +284,7 @@
     );
        
     function refreshtoken() {
-        return Math.floor(0x100000000 * Math.random()).toString(16) + "-" + (new Date().valueOf() % 0x100000000).toString(16);
+        return Math.floor(0x100000000 * Math.random()).toString(16) + "-" + (Date.now() % 0x100000000).toString(16);
     }
     
     $(".rejouer").click(function() {