--- a/annot-server/static/js/pianoroll.js	Mon Oct 27 17:22:48 2014 +0100
+++ b/annot-server/static/js/pianoroll.js	Tue Oct 28 11:32:45 2014 +0100
@@ -40,8 +40,8 @@
 stage.addChild(uberContainer);
 
 
-function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond){
-    
+function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width){
+    var _this = this;
     this.container = new PIXI.DisplayObjectContainer();
     this.container.position.x = xInit;
     this.container.position.y = yInit;
@@ -50,6 +50,7 @@
     this.linesDown = linesDown;
     this.height = height;
     this.pixelsPerSecond = pixelsPerSecond;
+    this.width = width;
     
     this.addNote = function(note, startTime, duration, velocity, canal){
         //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight);
@@ -60,8 +61,9 @@
         //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity);
         graphics.beginFill(noteColor[canal], (velocity / 128));
         var y = (128-note) * this.height / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
-        graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((this.height / 128)/2)), width, noteHeight);
+        graphics.drawRect(0, Math.floor(y - (noteHeight/2) + ((this.height / 128)/2)), width, noteHeight);
         graphics.endFill();
+        graphics.x = beginX;
         this.container.addChild(graphics);
     };
     
@@ -86,17 +88,35 @@
         t.x = x + 2;
         t.y = this.linesDown ? this.height - 15 : 2;
         this.container.addChild(t);
-    }
+    };
     
     this.moveTo = function(diffTime){
         this.container.x = Math.floor(diffTime*this.pixelsPerSecond);
     };
     
+    this.removePassedObjets = function(){
+        var nbChilds = _this.container.children.length;
+        var i = 0, childIsNowDisplayed = false;
+        while(i<nbChilds && !childIsNowDisplayed){
+            var child = _this.container.children[0];
+            //console.log("remove ? ", child.x, child.width, ((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)));
+            if((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)){
+                _this.container.removeChild(child);
+                //console.log("    remove !!!");
+            }
+            else{
+                childIsNowDisplayed = true;
+                //console.log("    childIsNowDisplayed");
+            }
+            i++;
+        }
+    };
+    
 }
 
 // Init containers
-var container1 = new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1);
-var container2 = new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2);
+var container1 = new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1, sceneWidth);
+var container2 = new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2, sceneWidth);
 
 // Line between two containers
 var graphics = new PIXI.Graphics();
@@ -155,6 +175,8 @@
     container2.addLine(nbLines);
 }
 
+
+
 // Socket management
 var sock = null;
 var ellog = null;
@@ -215,7 +237,9 @@
 // Init page and intervals
 addLine();
 var moveInterval = window.setInterval(replaceContainers, 1000/manualFramerate);
-verticalLinesInterval = window.setInterval(addLine, lineInterval);
+var verticalLinesInterval = window.setInterval(addLine, lineInterval);
+var removeInterval1 = window.setInterval(container1.removePassedObjets, 1000 * sceneWidth / pixelsPerSecond1 );
+var removeInterval2 = window.setInterval(container2.removePassedObjets, 1000 * sceneWidth / pixelsPerSecond2 );
 
 // Little inteval to show time
 var nbSec = 0;