diff -r 9d968fbcaa2a -r 0d7dac03c1a0 client/annotviz/app/js/annotstimeline.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/annotviz/app/js/annotstimeline.js	Tue Jan 20 18:37:51 2015 +0100
@@ -0,0 +1,134 @@
+/**
+* js/annotstimeline
+*
+* annotstimeline basic component
+*
+*/
+
+'use strict';
+
+var PIXI = require('pixi');
+var _ = require('lodash');
+var rgb2hex = require('./utils');
+
+var defaultOptions = {		
+    logger: undefined,
+    intervalWidth: 10,
+    intervalHeight: 5,
+    maxCellHeight: 20,
+};
+
+
+function AnnotsTimeLine(options){
+    var _this = this;
+    var opts = _(options).defaults(defaultOptions).value();
+    
+    this.container = new PIXI.DisplayObjectContainer();
+    this.container.x = opts.xInit;
+    this.container.y = opts.yInit;
+    this.container.width = opts.width;
+    this.container.height = opts.height;    
+    
+    this.timeBegin = opts.timeBegin;
+    this.timeEnd = opts.timeEnd;
+    this.duration = (this.timeEnd - this.timeBegin)/1000;
+    this.width = opts.width;
+    this.height = opts.height;
+    this.intervalHeight = opts.intervalHeight;
+    this.intervalWidth = opts.intervalWidth;
+    this.maxCellHeight = opts.maxCellHeight;
+    this.intervalDuration = (this.intervalWidth * this.duration / this.width);
+    this.annotCategories = opts.annotCategories;
+    
+    this.cells = []
+    for (var i=0; i<(this.width/this.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 this.annotCategories[0].colors){
+    		this.cells[i].categories[category] = {
+				"count": 0,
+				"color": this.annotCategories[0].colors[category]
+    		};
+    	}
+    }
+    
+    var ws = opts.ws;
+    var stageView = opts.stageView;
+    // draw temp line to locate the middle of the container
+    var graphics = new PIXI.Graphics();
+    graphics.beginFill(0x000000)
+    	.lineStyle(1, 0x000000)
+    	.moveTo(this.container.x, (this.height/2))
+    	.lineTo(this.width, (this.height/2))
+    	.endFill();
+    this.container.addChild(graphics);
+    
+    stageView.registerComponent(this);
+
+    //Add Annotation to the TimeLine
+    this.addAnnot = function(data){
+    	if (typeof(this.annotCategories[0].colors[data.content.category.code]) !== 'undefined'){
+    		var annotCode = data.content.category.code;
+    	} else {
+    		var annotCode = this.annotCategories[0].order[this.annotCategories[0].order.length -1];
+    	}
+    	var annotTime = Date.parse(data.ts);
+    	
+    	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]);
+    	}
+    };
+    
+    //Draw the cellule
+    this.redrawCell = function(cell){
+    	var x = cell.x; 
+    	var y = this.height/2;
+    	cell.graphics.clear();
+    	
+    	//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 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(x, y, this.intervalWidth, -cell.categories[currentCode].count * heightStep)
+    			.endFill();
+    		y -= cell.categories[currentCode].count*heightStep;
+    	}
+    }
+    
+    this.init = function() {
+
+    	ws.message(function(data) {
+            _this.addAnnot(data);
+        });
+
+    };
+    
+    this.start = function() {
+    };
+    
+    this.refresh = function() {
+    };
+    
+    this.stop = function(){
+    };
+    
+    return this;
+}
+
+module.exports = {
+		AnnotsTimeLine: AnnotsTimeLine
+};