--- a/client/annotviz/app/js/annotstimeline.js	Thu Jan 22 23:58:11 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js	Fri Jan 23 00:10:09 2015 +0100
@@ -17,6 +17,9 @@
     intervalHeight: 5,
     maxCellHeight: 200,
     radius: 300,
+    serverUrl: 'http://127.0.0.1:8080',
+    channel: 'ANNOT',
+    maxPages: 1000,
     showClockGraphics: true
 };
 
@@ -40,6 +43,7 @@
     this.intervalWidth = opts.intervalWidth;
     this.maxCellHeight = opts.maxCellHeight;
     this.annotCategories = opts.annotCategories;
+	this.startTs = options.startTs || Date.now();
     this.showClockGraphics = opts.showClockGraphics;
     
     this.circleX = opts.circleX || (this.width/2);
@@ -48,6 +52,11 @@
     var perimeter = 2*Math.PI* this.radius;
     this.intervalDuration = (this.intervalWidth * this.duration / perimeter);
     
+    var channel = opts.channel;
+    var eventCode = opts.eventCode;
+    var serverUrl = opts.serverUrl;
+    var maxPages = opts.maxPages;
+    
     var totalIndex = Math.floor( perimeter/this.intervalWidth);
 
     this.cells = []
@@ -70,8 +79,53 @@
 
     stageView.registerComponent(this);
 
+	var loadArchives = function() {
+        //start timeBegin end startTime
+        //query -> need channel + eventCode
+        //iterate over data fill cells
+        var startTs = _this.timeBegin;
+        var endTs = _this.startTs;
+
+        var url = serverUrl + '/p/api/v1/annotation';
+        var filters = [
+            { name: 'ts', op: '>', val: new Date(startTs).toISOString()}, //start
+            { name: 'ts', op: '<=', val: new Date(endTs).toISOString()}, //end
+            { name: 'channel', op: '==', val: channel}, //channel
+            { name: 'event_code', op: '==', val: eventCode} //eventcode
+        ];
+
+        console.log(JSON.stringify({filters:filters}));
+
+        url = url + '?q=' + JSON.stringify({filters:filters});
+
+        var totalPage = 1;
+        var currentPage = 1;
+
+        var processResFunction = function(res) {
+
+            if(res) {
+                var data = res.target.json;
+                /*jshint -W069 */
+                totalPage = Math.min(maxPages,parseInt(data['total_pages']));
+                console.log('DATA', data);
+                data.objects.forEach(function(annotation) {
+                    _this.addAnnot(annotation);
+                });
+            }
+            if(currentPage <= totalPage) {
+                var jsonLoader = new PIXI.JsonLoader(url+'&page='+currentPage, true);
+                jsonLoader.on('loaded', processResFunction);
+                jsonLoader.load();
+                currentPage++;
+            }
+        };
+        processResFunction();
+
+    };
+
     //Add Annotation to the TimeLine
-    this.addAnnot = function(data){    	
+    this.addAnnot = function(data){
+
     	var ts = Date.parse(data.ts);
     	var colorsDef;
     	_(this.annotCategories).eachRight(function(cdef) {
@@ -80,18 +134,20 @@
                 return false;
             }
         });
+
     	if (this.timeEnd > ts){
 	    	var i = Math.floor((ts - this.timeBegin)/(1000*this.intervalDuration));
+
 	    	if (typeof(this.cells[i].graphics) === 'undefined'){
 	    		this.initCell(this.cells[i], colorsDef);
 	    	}
-	    	
+
 	    	if (typeof(colorsDef.colors[data.content.category.code]) !== 'undefined'){
 	    		var annotCode = data.content.category.code;
 	    	} else {
 	    		var annotCode = 'default';
 	    	}
-	    	
+
 			this.cells[i].categories[annotCode].count += 1;
 			this.cells[i].totalAnnots +=1;
 			this.redrawCell(this.cells[i], colorsDef);
@@ -138,12 +194,13 @@
     this.redrawCell = function(cell, colorsDef){
     	var y = 0;
 
-    	//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;
-    	}
+        //Check if total height is higher than Max Cell Height
+        var heightStep;
+        if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){
+            heightStep = this.maxCellHeight/cell.totalAnnots;
+        } else {
+            heightStep = this.intervalHeight;
+        }
 
     	//Draw the rect depending on the height step calculated
     	for (var i=0; i< colorsDef.order.length; i++){
@@ -154,14 +211,14 @@
     		y -= cell.categories[currentCode].count*heightStep;
     	}
     }
-    
+
     this.initCell = function(cell, colorsDef){
     	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);
-    	
+
     	for (var category in colorsDef.colors){
     		cell.categories[category] = {
 				"count": 0,
@@ -177,7 +234,7 @@
     }
 
     this.init = function() {
-    	ws.message(function(data) {
+        ws.message(function(data) {
             _this.addAnnot(data);
         });