--- a/client/annotviz/app/js/generalView.js	Mon Jan 19 09:52:52 2015 +0100
+++ b/client/annotviz/app/js/generalView.js	Tue Jan 20 12:00:40 2015 +0100
@@ -9,9 +9,9 @@
 
 var PIXI = require('pixi');
 var randomColor = require('randomColor');
+var rgb2hex = require('./utils');
 
-function GeneralView(parentContainer, xInit, yInit, width, height, timeBegin, timeEnd, intervalSize){
-	console.log(width);
+function GeneralView(parentContainer, xInit, yInit, width, height, timeBegin, timeEnd, intervalWidth, intervalHeight, maxCellHeight, categories){
     var _this = this;
     this.container = new PIXI.DisplayObjectContainer();
     this.container.position.x = xInit;
@@ -25,54 +25,72 @@
     this.duration = (timeEnd - timeBegin)/1000 
     this.width = width;
     this.height = height;
-    //define interval corresponding to the time of one step
-    //e.g: 60 for a step of 60 seconds
-    this.intervalSize = intervalSize;
-    // define the step depending the interval we passed and the duration
-    this.intervalDuration = (intervalSize*this.duration/width);
+    this.intervalHeight = intervalHeight;
+    this.intervalWidth = intervalWidth;
+    this.maxCellHeight = maxCellHeight;
+    this.intervalDuration = (intervalWidth*this.duration/width);
     
-  //Initialise the list of step
+    
+    //Initialise the list of step
     //each cell will contain the list categories and the number of annotations per categories
     this.cells = []
-    
-    
+    for (var i=0; i<(width/intervalWidth) ; i++){
+    	this.cells[i] = [];
+    	this.cells[i].x = i * this.intervalWidth;
+    	this.cells[i].totalAnnots = 0;
+    	this.cells[i].graphics = new PIXI.Graphics();
+    	this.container.addChild(this.cells[i].graphics);
+    	this.cells[i].categories = {};
+    	
+    	for (var category in categories){
+    		this.cells[i].categories[category] = {
+				"count": 0,
+				"color": categories[category]
+    		};
+    	}
+    }
     // draw temp line to locate the middle of the container
     var graphics = new PIXI.Graphics();
-    graphics.beginFill(0x000000);
-    graphics.lineStyle(1, 0x000000);
-    graphics.moveTo(xInit, (-this.height/2) );
-    graphics.lineTo(this.width, (-this.height/2));
-    graphics.endFill();
+    graphics.beginFill(0x000000)
+    	.lineStyle(1, 0x000000)
+    	.moveTo(xInit, (-this.height/2) )
+    	.lineTo(this.width, (-this.height/2))
+    	.endFill();
     this.container.addChild(graphics);
 
+    //Add Annotation to the TimeLine
     this.addAnnot = function(category, time){
-    	var x = Math.floor( (time-this.timeBegin)/(1000*this.intervalDuration)) * this.intervalSize;
-    	var y = (-this.height/2);
+    	console.log(this.timeEnd);
+    	console.log(time);
+    	if (this.timeEnd < time){
+    		return;
+    	}
+    	var i = Math.floor((time-this.timeBegin)/(1000*this.intervalDuration));
+		this.cells[i].categories[category].count += 1;
+		this.cells[i].totalAnnots +=1;
+		this.redrawCell(this.cells[i]);
+    };
+    
+    //Draw the cellule
+    this.redrawCell = function(cell){
+    	var x = cell.x; 
+    	var y = -this.height/2;
+    	cell.graphics.clear();
     	
-    	//Check if cell is already set.
-    	//If yes get increment the numbere of annots in the category corresponding
-    	//If not initialise the cell
-//    	if (this.cells[x] === "undefined"){
-//    		cells[x].push({
-//    			"code" : category.code,
-//    			"color" : category.color,
-//    			"count" : 1
-//    		});
-//    	} else {
-//    		if (c)
-//    	} 
-    	
-    	console.log("x : " + x + " | y : " + y);
-        
-    	// We draw the rectangle
-        var graphics = new PIXI.Graphics();
-        graphics.beginFill(0x536991);
-        graphics.drawRect(x, y, this.intervalSize, -10);
-        graphics.endFill();
-        
-        this.container.addChild(graphics);
-    };
-
+    	//Check if total height is higher than Max Cell Height
+    	if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){
+    		var heightStep = this.maxCellHeight/cell.totalAnnots;
+    	} else {
+    		var heightStep = this.intervalHeight;
+    	}
+    	//Draw the rect depending on the height step calculated
+    	for (var category in cell.categories){
+			cell.graphics.beginFill(cell.categories[category].color)
+    			.drawRect(x, y, this.intervalWidth, -cell.categories[category].count * heightStep)
+    			.endFill();
+    		y -= cell.categories[category].count*heightStep;
+    	}
+    }
 }
 
 module.exports = GeneralView;