--- a/client/annotviz/app/js/annotstimeline.js	Wed Jan 21 20:43:05 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js	Thu Jan 22 02:21:15 2015 +0100
@@ -8,8 +8,8 @@
 'use strict';
 
 var PIXI = require('pixi');
+var Utils = require('./utils.js');
 var _ = require('lodash');
-var rgb2hex = require('./utils');
 
 var defaultOptions = {		
     logger: undefined,
@@ -46,6 +46,7 @@
     this.perimeter = 2*Math.PI* this.radius;
     this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter);
     
+    var currentTime = this.timeBegin;
     var totalIndex = Math.floor(this.perimeter/this.intervalWidth);
     	
     this.cells = []
@@ -68,15 +69,23 @@
 
     //draw the base - circle and line to locate the scene
     var graphics = new PIXI.Graphics();
-    graphics.lineStyle(1, 0x000000)
+    graphics.lineStyle(2, 0x646464)
     	.drawCircle(this.circleX, this.circleY, this.radius - 3)
+    	.lineStyle(1, 0xD7D7D7)
     	.drawCircle(this.circleX, this.circleY, this.radius*2/3)
     	.drawCircle(this.circleX, this.circleY, this.radius/3)
-    	.moveTo(this.circleX, this.circleY)
-    	.lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 30)
+    	.lineStyle(1, 0x646464)
+    	.moveTo(this.circleX, this.circleY - (this.radius/3)/2)
+    	.lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 10)
     	.endFill()
     this.container.addChild(graphics);
     
+    //set time text
+    var currentTimeText = new PIXI.Text("-- : -- : --", { font: '18pt Gothic Standard', fill: '#646464' });
+    currentTimeText.x = this.circleX - currentTimeText.width/2;
+    currentTimeText.y = this.circleY - currentTimeText.height/2;
+    this.container.addChild(currentTimeText);
+    
     stageView.registerComponent(this);
 
     //Add Annotation to the TimeLine
@@ -105,6 +114,35 @@
     	this.container.addChild(cell.graphics);
     }
     
+    this.initTimeTexts = function() {
+	    var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+	    tBeg.x = this.circleX + 15;
+	    tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10;
+	    this.container.addChild(tBeg);
+	    
+	    var tEnd = new PIXI.Text(Utils.formatTime(this.timeEnd), { font: '12pt Gothic Standard', fill: '#646464' });
+	    tEnd.x = this.circleX - 15 - tEnd.width;
+	    tEnd.y = this.circleY - this.radius - this.maxCellHeight - 10;
+	    this.container.addChild(tEnd);
+	    
+	    var t15 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+	    t15.x = this.circleX + this.radius + this.maxCellHeight + 10 ;
+	    t15.y = this.circleY - t15.height;
+	    t15.rotation = Math.PI /2;
+	    this.container.addChild(t15);
+	    
+	    var t30 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/2) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+	    t30.x = this.circleX - t30.width/2;
+	    t30.y = this.circleY + this.radius + this.maxCellHeight - 2;
+	    this.container.addChild(t30);
+	    
+	    var t45 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)*3/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+	    t45.x = this.circleX - this.radius - this.maxCellHeight - 10 ;
+	    t45.y = this.circleY + t15.height;
+	    t45.rotation = -Math.PI/2;
+	    this.container.addChild(t45);
+    }
+    
     //Draw the cellule
     this.redrawCell = function(cell){
     	
@@ -134,17 +172,33 @@
     }
     
     this.init = function() {
-
     	ws.message(function(data) {
             _this.addAnnot(data);
         });
-
+    	
+    	this.initTimeTexts();
     };
     
+    this.updateTime = function(){
+    	currentTime += 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() {
+    	
     };
     
     this.stop = function(){