--- a/client/annotviz/app/js/annotstimeline.js	Wed Jan 21 12:14:16 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js	Wed Jan 21 20:16:31 2015 +0100
@@ -16,9 +16,7 @@
     intervalWidth: 10,
     intervalHeight: 5,
     maxCellHeight: 200,
-    radius: 300,
-    circleX:500,
-    circleY:500
+    radius: 300
 };
 
 
@@ -42,8 +40,8 @@
     this.maxCellHeight = opts.maxCellHeight;
     this.annotCategories = opts.annotCategories;
     
-    this.circleX = opts.circleX;
-    this.circleY = opts.circleY;
+    this.circleX = opts.circleX || (this.width/2);
+    this.circleY = opts.circleY || (this.height/2);
     this.radius = opts.radius;
     this.perimeter = 2*Math.PI* this.radius;
     this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter);
@@ -53,17 +51,13 @@
     this.cells = []
     for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){
     	this.cells[i] = [];
+    	this.cells[i].i = i;
     	this.cells[i].totalAnnots = 0;
-    	this.cells[i].graphics = new PIXI.Graphics();
-    	this.cells[i].graphics.position.x = this.circleX + this.radius * Math.sin(i*(360/totalIndex)*(Math.PI/180));
-    	this.cells[i].graphics.position.y = this.circleY - this.radius * Math.cos(i*(360/totalIndex)*(Math.PI/180));
-    	this.cells[i].graphics.rotation = (i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180);
-    	this.container.addChild(this.cells[i].graphics);
     	this.cells[i].categories = {};
     	
     	for (var category in this.annotCategories[0].colors){
     		this.cells[i].categories[category] = {
-				"count": 1,
+				"count": 0,
 				"color": this.annotCategories[0].colors[category]
     		};
     	}
@@ -72,9 +66,12 @@
     var ws = opts.ws;
     var stageView = opts.stageView;
 
+    //draw the base - circle and line to locate the scene
     var graphics = new PIXI.Graphics();
     graphics.lineStyle(1, 0x000000)
-    	.drawCircle(this.circleX, this.circleY, this.radius)
+    	.drawCircle(this.circleX, this.circleY, this.radius - 3)
+    	.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)
     	.endFill()
@@ -93,17 +90,31 @@
     	
     	if (this.timeEnd > Date.parse(data.ts)){
 	    	var i = Math.floor((Date.parse(data.ts)-this.timeBegin)/(1000*this.intervalDuration));
+	    	
 			this.cells[i].categories[annotCode].count += 1;
 			this.cells[i].totalAnnots +=1;
 			this.redrawCell(this.cells[i], i);
     	}
     };
     
+    this.initGraphics = function(cell){
+    	cell.graphics = new PIXI.Graphics();
+    	cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180));
+    	cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180));
+    	cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180);
+    	this.container.addChild(cell.graphics);
+    }
+    
     //Draw the cellule
     this.redrawCell = function(cell){
-    	var x = 0; 
+    	
+    	if (typeof(cell.graphics) === 'undefined'){
+    		this.initGraphics(cell);
+    	} else {
+    		cell.graphics.clear();
+    	}
+    	
     	var y = 0;
-    	cell.graphics.clear();
     	
     	//Check if total height is higher than Max Cell Height
     	if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){
@@ -111,11 +122,12 @@
     	} else {
     		var heightStep = this.intervalHeight;
     	}
+    	
     	//Draw the rect depending on the height step calculated
     	for (var i=0; i< this.annotCategories[0].order.length; i++){
     		var currentCode = this.annotCategories[0].order[i];
 			cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x"))
-    			.drawRect(0, y, this.intervalWidth, -cell.categories[currentCode].count * heightStep)
+    			.drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep)
     			.endFill();
     		y -= cell.categories[currentCode].count*heightStep;
     	}
@@ -130,20 +142,18 @@
     };
     
     this.start = function() {
-    	for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){
-    		this.redrawCell(this.cells[i]);
-    	}
     };
     
     this.refresh = function() {
     };
     
     this.stop = function(){
+    	console.log(this.cells);
     };
     
     return this;
 }
 
 module.exports = {
-		AnnotsTimeLine: AnnotsTimeLine
+	AnnotsTimeLine: AnnotsTimeLine
 };