diff -r e0e514c5470f -r 806739a26858 client/annotviz/app/js/pianoroll.js
--- a/client/annotviz/app/js/pianoroll.js	Fri Jan 16 20:20:28 2015 +0100
+++ b/client/annotviz/app/js/pianoroll.js	Mon Jan 19 13:31:28 2015 +0100
@@ -21,6 +21,9 @@
     this.container.y = options.yInit;
     options.parentContainer.addChild(this.container);
 
+    var orientation = options.orientation;
+    var isHorizontal = (orientation !== 'vertical');
+
     this.linesDown = options.linesDown;
     this.height = options.height;
     this.pixelsPerSecond = options.pixelsPerSecond;
@@ -36,6 +39,11 @@
 
     var started = false;
 
+    var isHidden = function(child) {
+        // TODO: the origin point is an approximation. Should refine this
+        var globalPos = child.toGlobal(new PIXI.Point(0,0));
+        return ((globalPos.x + child.width) < 0) || ((globalPos.y + child.height) < 0) ;
+    };
 
     //TODO: I do not like the "regColor" object. This should not be global, but local
     this.getColor = function(canal) {
@@ -54,7 +62,6 @@
 
     this.getNoteRect = function(x, y, color, alpha, width, height) {
         var graphics = new PIXI.Graphics();
-        //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity);
         graphics.beginFill(color, alpha);
         graphics.drawRect(0, 0, width, height);
         graphics.endFill();
@@ -111,7 +118,6 @@
 
                 graphics = this.getNoteRect(x, y, color, alpha, width, this.noteHeight);
                 this.container.addChild(graphics);
-                //console.log(color, alpha, graphics.lineColor, graphics.fillAlpha);
             }
             else {
                 graphics.width = width;
@@ -128,14 +134,17 @@
         if(typeof(ts) === 'undefined') {
             ts = new Date();
         }
-        var graphics = new PIXI.Graphics();
         var x = -this.container.x;
-        graphics.beginFill(0xFFFF00);
-        graphics.lineStyle(1, this.lineColor);
         var y = this.linesDown ? this.height - 20 : 0;
-        graphics.moveTo(x, y);
-        graphics.lineTo(x, y + 20);
-        graphics.endFill();
+
+        var graphics = new PIXI.Graphics()
+            .beginFill(0xFFFF00)
+            .lineStyle(1, this.lineColor)
+            .moveTo(0, 0)
+            .lineTo(0, 20)
+            .endFill();
+        graphics.x = x;
+        graphics.y = y;
         this.container.addChild(graphics);
         // Add text
         //var totalSec = lineNb * this.lineInterval / 1000;
@@ -146,8 +155,15 @@
 
         var fontObj = { font: '10pt Arial', fill: '#444444' };
         var t = new PIXI.Text(timeStr, fontObj);
-        t.x = x + 2;
-        t.y = this.linesDown ? this.height - 15 : 2;
+        if(isHorizontal) {
+            t.x = x + 2;
+            t.y = this.linesDown ? this.height - 15 : 2;
+        }
+        else {
+            t.rotation = -Math.PI/2;
+            t.x = x ;
+            t.y = this.linesDown ? this.height - 2 : t.width + 2;
+        }
         this.container.addChild(t);
     };
 
@@ -171,26 +187,14 @@
 
     this.removePassedObjets = function(){
         var nbChilds = _this.container.children.length;
-        var i = 0, childIsNowDisplayed = false, childrenToRemove = [];
-        while(i<nbChilds && !childIsNowDisplayed){
-            var child = _this.container.children[i++];
-            //console.log("remove ? ", child.x, child.width, ((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)));
-            if(typeof(child) === 'undefined') {
-                continue;
-            }
-            if((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)){
-                childrenToRemove.push(child);
-                //console.log("    remove !!!");
-            }
-            else {
-                childIsNowDisplayed = true;
-                //console.log("    childIsNowDisplayed");
-            }
-        }
+        var childrenToRemove = [];
+        _(_this.container.children).forEach(function(child) {
+            return typeof(child) === 'undefined'
+                || (isHidden(child) && childrenToRemove.push(child));
+        });
         childrenToRemove.forEach(function(child) {
             _this.container.removeChild(child);
         });
-        //console.log("before : ", nbChilds, ", after : ", _this.container.children.length);
     };
 
     this.start = function() {