diff -r dfdefb4dae2c -r 86ddd934464a integration/js/streamgraph.js
--- a/integration/js/streamgraph.js	Mon Oct 15 14:19:51 2012 +0200
+++ b/integration/js/streamgraph.js	Mon Oct 15 15:22:48 2012 +0200
@@ -1,4 +1,4 @@
-function streamgraph($selector, $slider) {
+function Streamgraph($selector) {
     
     /* Constants */
    
@@ -6,7 +6,8 @@
         YEARSHEIGHT = 20,
         STARTTIME = new Date(2007,6,1),
         ENDTIME = new Date(),
-        CURVE = .3,
+        CURVE = .25,
+        DATEPADDING = 10,
         COLORS = [ "#943a23", "#fbee97", "#cfbb95", "#da9761", "#ba5036" ],
         SELECTEDCOLOR = "#c51810"; 
     
@@ -94,18 +95,10 @@
     
     _(paths).each(function(path, index) {
         var color = COLORS[index % COLORS.length],
-            path = paper.path(path);
-        path.attr({
+            p = paper.path(path);
+        p.attr({
             stroke: "none",
             fill: color
-        }).mouseover(function() {
-            path.attr({
-                fill: SELECTEDCOLOR
-            });
-        }).mouseout(function() {
-            path.attr({
-                fill: color
-            })
         });
     });
     
@@ -124,9 +117,86 @@
                 "font-size": "14px"
             });
     }
+    
+    /* Drawing range window */
+    
+    var carregauche = paper.rect(width,-1,width,(2+height)),
+        carredroite = paper.rect(-width,-1,width,(2+height)),
+        attrcarres = {
+            fill: "#333333",
+            "fill-opacity": .5,
+            stroke: SELECTEDCOLOR
+        };
+    carregauche.attr(attrcarres);
+    carredroite.attr(attrcarres);
+    
+    var rangerect = paper.rect(0, (height - YEARSHEIGHT), width, YEARSHEIGHT);
+    rangerect.attr({
+        fill: SELECTEDCOLOR,
+        stroke: "none"
+    });
+    
+    function datetext(date) {
+        var d = new Date(date),
+            m = 1+d.getMonth(),
+            y = d.getFullYear();
+        return ((m < 10 ? "0" : "") + m + "/" + y);
+    }
+    
+    var startdate = paper.text(DATEPADDING, height - .5 * YEARSHEIGHT, datetext(STARTTIME));
+    startdate.attr({
+        fill: "#ffffff",
+        "text-anchor": "start"
+    });
+    var enddate = paper.text(width - DATEPADDING, height - .5 * YEARSHEIGHT, datetext(ENDTIME));
+    enddate.attr({
+        fill: "#ffffff",
+        "text-anchor": "end"
+    });
+    
+    /* Redrawing time slices for rollover effect */
+   
+    _(paths).each(function(path, index) {
+        var p = paper.path(path);
+        p.attr({
+            stroke: "none",
+            fill: SELECTEDCOLOR,
+            opacity: .01
+        }).mouseover(function() {
+            p.attr({
+                opacity: 1
+            });
+        }).mouseout(function() {
+            p.attr({
+                opacity: .01
+            })
+        });
+    });
+    
+    /* Returning a handler for slide value change */
+    
+    this.slidevalues = function(left, right) {
+        left = left || 0;
+        right = right || width;
+        carregauche.attr({x: left - width});
+        carredroite.attr({x: right});
+        startdate.attr({
+            x: DATEPADDING + left,
+            text: datetext(STARTTIME.valueOf() + left / txscale)
+        });
+        enddate.attr({
+            x: right - DATEPADDING,
+            text: datetext(STARTTIME.valueOf() + right / txscale)
+        });
+        rangerect.attr({
+            x: left,
+            width: right - left
+        });
+    }
 
 }
 
 $(function() {
-    streamgraph($(".streamgraph"), $("#slider-range"));
+    window.streamgraph = new Streamgraph($(".streamgraph"));
+    streamgraph.slidevalues.apply(streamgraph,$("#slider-range").dragslider("values"));
 })