--- a/client/annotviz/app/js/annotsvizview.js	Thu Jan 22 16:16:54 2015 +0100
+++ b/client/annotviz/app/js/annotsvizview.js	Thu Jan 22 23:58:11 2015 +0100
@@ -18,24 +18,7 @@
     xInit: 0,
     yInit: 0,
     width: 1024,
-    height: 768,
-//    annotCategories: [
-//    {
-//        "ts": 1421928213000,
-//        "colors": {
-//            "transgressions": "#b90000",
-//            "rythmique": "#af931e",
-//            "narration": "#4bdd71",
-//            "relation": "#1c28ba"
-//        },
-//        "order": [
-//            "transgressions",
-//            "rythmique",
-//            "narration",
-//            "relation"
-//        ],
-//        "defaultColor": "#536991"
-//    }]
+    height: 768
 };
 
 function AnnotsVizView(options){
@@ -50,16 +33,16 @@
     this.timeBegin = opts.timeBegin;
     this.timeEnd = opts.timeEnd;
     
-    this.annotCategories = [];
     Utils.getAnnotCategories(opts.urlCategories, this.annotCategories);
     
 	var wsPianoroll = opts.wsPianoroll;
 	var wsAnnot = opts.wsAnnot;
 	var stageView = opts.stageView;
+	var currentTime = Date.now() + 3600*1000;
 
 	stageView.registerComponent(this);
 
-	var timeLine = new AnnotsTimeLine.AnnotsTimeLine({
+	var timeLineDay2 = new AnnotsTimeLine.AnnotsTimeLine({
     	stageView : stageView,
         logger: logger,
         ws: new annotviz.WsWrapper(wsUriAnnotation, logger),
@@ -75,7 +58,39 @@
         radius: 200,
         annotCategories: this.annotCategories
     });
+	
+    
+    var timeLineDay1 = new AnnotsTimeLine.AnnotsTimeLine({
+    	stageView : stageView,
+        logger: logger,
+        ws: new annotviz.WsWrapper(wsUriAnnotation, logger),
+        xInit: 0,
+        yInit: 0,
+        width: 1024 - 200 - 200,
+        height: 768-200,
+        timeBegin: this.timeBegin,
+        timeEnd: this.timeEnd,
+        circleX: timeLineDay2.circleX,
+        circleY: timeLineDay2.circleY,
+        intervalWidth: (timeLineDay2.radius*2/3)* timeLineDay2.intervalWidth / timeLineDay2.radius,
+        intervalHeight: (timeLineDay2.intervalHeight * (timeLineDay2.radius - timeLineDay2.radius*2/3))/ timeLineDay2.maxCellHeight,
+        maxCellHeight: (timeLineDay2.radius - timeLineDay2.radius*2/3)/4,
+        radius: timeLineDay2.radius*2/3,
+        annotCategories: this.annotCategories,
+        showClockGraphics:false
+    });
+    
+    var currentTimeText = new PIXI.Text("-- : -- : --", { font: '18pt Gothic Standard', fill: '#646464' });
+    currentTimeText.x = timeLineDay2.circleX - currentTimeText.width/2;
+    currentTimeText.y = timeLineDay2.circleY - currentTimeText.height/2;
+    this.container.addChild(currentTimeText);
 
+    var timeLineDay3 = new PIXI.Graphics();
+    timeLineDay3.lineStyle(1, 0x646464)
+    	.drawCircle(timeLineDay2.circleX, timeLineDay2.circleY, timeLineDay2.radius/3)
+    	.endFill()
+    this.container.addChild(timeLineDay3);
+    
 	var doubleRollH = new DoubleRoll.DoubleRoll({
         stageView : stageView,
     	logger: logger,
@@ -140,10 +155,24 @@
 //	var doubleRollV = new DoubleRoll.DoubleRoll({});
 
 	this.init = function(){
+	};
 
-	}
+	this.updateTime = function(){
+    	currentTime = Date.now() + 3600*1000;
 
+        var nbSec = currentTime / 1000;
+        var hours = Math.floor( nbSec / 3600 ) % 24;
+        var minutes = Math.floor( nbSec / 60 ) % 60;
+        var seconds = Math.floor(nbSec % 60);
+        var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds  < 10 ? '0' + seconds : seconds);
+
+        currentTimeText.setText(timeStr);
+    };
+
+    var refreshTimeInterval;
+    
 	this.start = function() {
+		refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
     };
 
     this.refresh = function() {