# HG changeset patch
# User ymh <ymh.work@gmail.com>
# Date 1421974819 -3600
# Node ID 0bb70072a56f23570872be1b794342005e6d8d9d
# Parent  0a2b4991d48ca5d74b66ceea7a3c044295b981b9
some quick cleaning

diff -r 0a2b4991d48c -r 0bb70072a56f annot-server/webapp/templates/annotviz.html
--- a/annot-server/webapp/templates/annotviz.html	Fri Jan 23 01:08:34 2015 +0100
+++ b/annot-server/webapp/templates/annotviz.html	Fri Jan 23 02:00:19 2015 +0100
@@ -18,63 +18,9 @@
     <script src="{{ config['STATIC_URL'] }}/js/annotviz.min.js"></script>
     <script>
 
-    var PIXI = require('pixi');
-    var annotCategories = [
-        {
-            "ts": 1421928213000,
-            "colors": {
-                "transgressions": "#b90000",
-                "rythmique": "#af931e",
-                "narration": "#4bdd71",
-                "relation": "#1c28ba"
-            },
-            "order": [
-                "transgressions",
-                "rythmique",
-                "narration",
-                "relation"
-            ],
-            "defaultColor": "#536991"
-        }
-    ];
-
-    function getAnnotCategories(ecode, serverUrl) {
-
-        var url = serverUrl+"/p/api/v1/event/" + ecode;
-
-        var jsonLoader = new PIXI.JsonLoader(url, true);
-        jsonLoader.on('loaded', function(res) {
-            var data = res.target.json;
-
-            while(annotCategories.length > 0) {
-                annotCategories.pop();
-            }
-
-            data.sessions.forEach(function(session) {
-                var annotCat = {
-                    ts: session.start_ts === null ? new Date(0) : Date.parse(session.start_ts),
-                    colors: {}
-                }
-                var categoriesJson = session.categories_json;
-                annotCat.order = categoriesJson.order;
-                categoriesJson.categories.forEach(function(cat) {
-                    annotCat.colors[cat.code] = annotviz.colorToHex(cat.color);
-                });
-                annotCat.defaultColor = categoriesJson.defaultColor || "#536991";
-                annotCategories.push(annotCat);
-            });
-            console.log(JSON.stringify(annotCategories, null, '  '));
-        });
-
-        jsonLoader.load();
-    }
-
-
-
     var pianorollChannel  = 'PIANOROLL';
     var annotationChannel = 'ANNOT';
     var eventCode = '{{event.code}}';
-    getAnnotCategories(eventCode, 'http://' + window.location.hostname + ':8080');
     var wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
 
     wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode;
@@ -88,13 +34,15 @@
 
 
     var annotsvizview = new annotviz.AnnotsVizView({
+        urlCategories: serverUrl + "/p/api/v1/event/" + eventCode,
         logger: logger,
         stageView: stageView,
         wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger),
         wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger),
-        annotCategories: annotCategories,
-        timeBegin: 1421919000000,
-    	timeEnd: 1421951400000
+        timeBegin: Date.parse("2015-01-23T09:30:00+01:00"),
+        timeEnd: Date.parse("2015-01-23T18:30:00+01:00"),
+        eventCode: eventCode,
+        channel: annotationChannel        
     });
 
 
diff -r 0a2b4991d48c -r 0bb70072a56f client/annotviz/app/annotsvizview.html
--- a/client/annotviz/app/annotsvizview.html	Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/annotsvizview.html	Fri Jan 23 02:00:19 2015 +0100
@@ -21,50 +21,50 @@
     <script src="/js/libs-annotviz.js"></script>
     <script src="/js/annotviz.js"></script>
     <script>
-    
-	    var pianorollChannel  = 'PIANOROLL';
-	    var annotationChannel = 'ANNOT';
-	    var eventCode = 'test_1';
-	    var serverUrl = "http://localhost:8080";
-	    var wsUri;
-	    
-	    if (window.location.protocol === 'file:') {
-	        wsUri = 'ws://172.16.0.20:8090/broadcast';
-	    }
-	    else {
-	        wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
-	    }
-	    wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode;
-	    wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode;
+
+        var pianorollChannel  = 'PIANOROLL';
+        var annotationChannel = 'ANNOT';
+        var eventCode = 'test_1';
+        var serverUrl = "http://localhost:8080";
+        var wsUri;
 
-	    var logger = new annotviz.ConsoleLogger(true);
+        if (window.location.protocol === 'file:') {
+            wsUri = 'ws://172.16.0.20:8090/broadcast';
+        }
+        else {
+            wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
+        }
+        wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode;
+        wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode;
 
-	    var stageView = new annotviz.StageView({
-	    	logger: logger
-	    });
+        var logger = new annotviz.ConsoleLogger(true);
+
+        var stageView = new annotviz.StageView({
+            logger: logger
+        });
 
         var annotsvizview = new annotviz.AnnotsVizView({
-        	urlCategories: serverUrl + "/p/api/v1/event/" + eventCode,
-        	logger: logger,
-        	stageView: stageView,
-        	wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger),
-        	wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger),
-        	timeBegin: Date.parse("2015-01-23T09:30:00+01:00"),
-        	timeEnd: Date.parse("2015-01-23T18:30:00+01:00"),
-        	eventCode: eventCode,
+            urlCategories: serverUrl + "/p/api/v1/event/" + eventCode,
+            logger: logger,
+            stageView: stageView,
+            wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger),
+            wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger),
+            timeBegin: Date.parse("2015-01-23T09:30:00+01:00"),
+            timeEnd: Date.parse("2015-01-23T18:30:00+01:00"),
+            eventCode: eventCode,
             channel: annotationChannel
         });
 
 
         function stop() {
-        	stageView.stop();
+            stageView.stop();
         }
         function start() {
-        	stageView.start();
+            stageView.start();
         }
 
         window.onload = function() {
-        	stageView.init();
+            stageView.init();
             start();
         }
     </script>
diff -r 0a2b4991d48c -r 0bb70072a56f client/annotviz/app/js/annotsroll.js
--- a/client/annotviz/app/js/annotsroll.js	Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/js/annotsroll.js	Fri Jan 23 02:00:19 2015 +0100
@@ -50,7 +50,7 @@
     var marginX = 15;
     for(var style in annotStyles) {
     	if (annotStyles[style].wordWrap === true){
-    		annotStyles[style].wordWrapWidth = this.widthRoll - marginX; 
+    		annotStyles[style].wordWrapWidth = this.widthRoll - marginX;
     	}
     }
     var started = false;
@@ -59,7 +59,7 @@
     var stageView = opts.stageView;
     var waitInterval;
     var wait = 0;
-    
+
     stageView.registerComponent(this);
 
     var isHidden = function(child) {
@@ -99,7 +99,7 @@
             resColor = colorsDef.defaultColor || DEFAULT_ANNOT_COLOR;
         }
         return resColor;
-    }
+    };
 
     this.addAnnot = function(category, text, user, color, ts){
 
@@ -113,9 +113,9 @@
 	            .beginFill(colorHex)
 	            .drawRect(x, y, 10, 3)
 	            .endFill();
-	
+
 	        this.container.addChild(graphics);
-	
+
 	        var textHeight = 0;
 	        var catLabel = new PIXI.Text(
 	            category,
@@ -125,7 +125,7 @@
 	        catLabel.y = y - 23;
 	        this.container.addChild(catLabel);
 	        textHeight += (catLabel.height - 23 + 2);
-	
+
 	        if(text) {
 	            var catText = new PIXI.Text(text, annotStyles.text);
 	            catText.x = x + marginX;
@@ -133,13 +133,13 @@
 	            this.container.addChild(catText);
 	            textHeight += (catText.height + 2);
 	        }
-	
+
 	        var catUser = new PIXI.Text(user, annotStyles.user);
 	        catUser.x = x + marginX;
 	        catUser.y = y + textHeight;
 	        this.container.addChild(catUser);
 	        textHeight += (catUser.height + 8);
-	        
+
 	        if (this.ignoreAnnots === true){
 		        wait = textHeight / this.pixelsPerSecond;
 		        waitInterval = setInterval(function() {_this.refreshWait();}, 1000);
@@ -169,7 +169,7 @@
         var diff = (this.startTs - Date.now())/1000;
         this.moveTo(diff);
     };
-    
+
     this.refreshWait = function(){
     	wait -= 1;
     	if (wait < 0){
@@ -196,7 +196,7 @@
         });
 
     };
-    
+
 
     this.start = function() {
         if(!started) {
diff -r 0a2b4991d48c -r 0bb70072a56f client/annotviz/app/js/annotstimeline.js
--- a/client/annotviz/app/js/annotstimeline.js	Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js	Fri Jan 23 02:00:19 2015 +0100
@@ -44,29 +44,29 @@
     this.intervalWidth = opts.intervalWidth;
     this.maxCellHeight = opts.maxCellHeight;
     this.annotCategories = opts.annotCategories;
-	this.startTs = options.startTs || Date.now();
+    this.startTs = options.startTs || Date.now();
     this.showClockGraphics = opts.showClockGraphics;
     this.archive = opts.archive;
-    
+
     this.circleX = opts.circleX || (this.width/2);
     this.circleY = opts.circleY || (this.height/2);
     this.radius = opts.radius;
     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 = []
+    this.cells = [];
     for (var i=0; i<(perimeter/this.intervalWidth) ; i++){
-    	this.cells[i] = [];
-    	this.cells[i].i = i;
-    	this.cells[i].totalAnnots = 0;
-    	this.cells[i].categories = {};
+        this.cells[i] = [];
+        this.cells[i].i = i;
+        this.cells[i].totalAnnots = 0;
+        this.cells[i].categories = {};
     }
 
     var ws = opts.ws;
@@ -75,13 +75,13 @@
     //draw the base - circle and line to locate the scene
     var graphics = new PIXI.Graphics();
     graphics.lineStyle(2, 0x646464)
-    	.drawCircle(this.circleX, this.circleY, this.radius - 3)
-    	.endFill()
+        .drawCircle(this.circleX, this.circleY, this.radius - 3)
+        .endFill();
     this.container.addChild(graphics);
 
     stageView.registerComponent(this);
 
-	var loadArchives = function() {
+    var loadArchives = function() {
         //start timeBegin end startTime
         //query -> need channel + eventCode
         //iterate over data fill cells
@@ -125,73 +125,74 @@
     //Add Annotation to the TimeLine
     this.addAnnot = function(data){
 
-    	var ts = Date.parse(data.ts);
-    	var colorsDef;
-    	_(this.annotCategories).eachRight(function(cdef) {
+        var ts = Date.parse(data.ts);
+        var colorsDef;
+        _(this.annotCategories).eachRight(function(cdef) {
             if(cdef.ts < ts) {
                 colorsDef = cdef;
                 return false;
             }
         });
 
-    	if (this.timeEnd > ts){
-	    	var i = Math.floor((ts - this.timeBegin)/(1000*this.intervalDuration));
+        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(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';
-	    	}
+            var annotCode;
+            if (typeof(colorsDef.colors[data.content.category.code]) !== 'undefined'){
+                annotCode = data.content.category.code;
+            } else {
+                annotCode = 'default';
+            }
 
-			this.cells[i].categories[annotCode].count += 1;
-			this.cells[i].totalAnnots +=1;
-			this.redrawCell(this.cells[i], colorsDef);
-    	}
+            this.cells[i].categories[annotCode].count += 1;
+            this.cells[i].totalAnnots +=1;
+            this.redrawCell(this.cells[i], colorsDef);
+        }
     };
 
     this.initClockGraphics = 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 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 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 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 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);
-	    
-	    var lineV = new PIXI.Graphics();
-	    lineV.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(lineV);
-    }
+        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);
+
+        var lineV = new PIXI.Graphics();
+        lineV.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(lineV);
+    };
 
     //Draw the cellule
     this.redrawCell = function(cell, colorsDef){
-    	var y = 0;
+        var y = 0;
 
         //Check if total height is higher than Max Cell Height
         var heightStep;
@@ -201,50 +202,50 @@
             heightStep = this.intervalHeight;
         }
 
-    	//Draw the rect depending on the height step calculated
-    	for (var i=0; i< colorsDef.order.length; i++){
-    		var currentCode = colorsDef.order[i];
-			cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x"))
-    			.drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep)
-    			.endFill();
-    		y -= cell.categories[currentCode].count*heightStep;
-    	}
-    }
+        //Draw the rect depending on the height step calculated
+        for (var i=0; i< colorsDef.order.length; i++){
+            var currentCode = colorsDef.order[i];
+            cell.graphics.beginFill(cell.categories[currentCode].color.replace('#', '0x'))
+                .drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep)
+                .endFill();
+            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);
+        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,
-				"color": colorsDef.colors[category]
-    		};
-    	}
-    	if (typeof(cell.categories['default']) === 'undefined'){
-			cell.categories['default'] = {
-				"count": 0,
-				"color": colorsDef.defaultColor
-			}
-    	}
-    }
+        for (var category in colorsDef.colors){
+            cell.categories[category] = {
+                'count': 0,
+                'color': colorsDef.colors[category]
+            };
+        }
+        if (typeof(cell.categories['default']) === 'undefined'){
+            cell.categories['default'] = {
+                'count': 0,
+                'color': colorsDef.defaultColor
+            };
+        }
+    };
 
     this.init = function() {
-    	if (!this.archive){
-	        ws.message(function(data) {
-	            _this.addAnnot(data);
-	        });
-    	}
+        if (!this.archive){
+            ws.message(function(data) {
+                _this.addAnnot(data);
+            });
+        }
 
-    	if (this.showClockGraphics){this.initClockGraphics();}
+        if (this.showClockGraphics){this.initClockGraphics();}
     };
 
 
     this.start = function() {
-    	this.startTs = Date.now();
+        this.startTs = Date.now();
         loadArchives();
     };
 
@@ -259,5 +260,5 @@
 }
 
 module.exports = {
-	AnnotsTimeLine: AnnotsTimeLine
+    AnnotsTimeLine: AnnotsTimeLine
 };
diff -r 0a2b4991d48c -r 0bb70072a56f client/annotviz/app/js/annotsvizview.js
--- a/client/annotviz/app/js/annotsvizview.js	Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/js/annotsvizview.js	Fri Jan 23 02:00:19 2015 +0100
@@ -4,15 +4,16 @@
 * This is the starting point for your application.
 * Take a look at http://browserify.org/ for more info
 */
+/*jshint unused:false */
 
 'use strict';
 
 var PIXI = require('pixi');
 var _ = require('lodash');
-var DoubleRoll = require('./doubleroll.js');
-var AnnotsTimeLine = require('./annotstimeline.js');
-var AnnotsRoll = require('./annotsroll.js');
-var Utils = require('./utils.js');
+var DoubleRoll = require('./doubleroll');
+var AnnotsTimeLine = require('./annotstimeline');
+var AnnotsRoll = require('./annotsroll');
+var Utils = require('./utils');
 
 var defaultOptions = {
     xInit: 0,
@@ -22,33 +23,33 @@
 };
 
 function AnnotsVizView(options){
-	var _this = this;
+    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.width = opts.width;
-	this.height= opts.height;
+    this.width = opts.width;
+    this.height= opts.height;
     this.timeBegin = opts.timeBegin;
     this.timeEnd = opts.timeEnd;
     this.annotCategories = [];
-    
+
     Utils.getAnnotCategories(opts.urlCategories, this.annotCategories);
-    
-	var wsPianoroll = opts.wsPianoroll;
-	var wsAnnot = opts.wsAnnot;
-	var stageView = opts.stageView;
-	var currentTime = Date.now() + 3600*1000;
-	var eventCode = opts.eventCode;
+
+    var wsPianoroll = opts.wsPianoroll;
+    var wsAnnot = opts.wsAnnot;
+    var stageView = opts.stageView;
+    var eventCode = opts.eventCode;
     var channel = opts.channel;
+    var logger = opts.logger;
 
-	stageView.registerComponent(this);
+    stageView.registerComponent(this);
 
-	var timeLineDay2 = new AnnotsTimeLine.AnnotsTimeLine({
-    	stageView : stageView,
+    var timeLineDay2 = new AnnotsTimeLine.AnnotsTimeLine({
+        stageView : stageView,
         logger: logger,
-        ws: new annotviz.WsWrapper(wsUriAnnotation, logger),
+        ws: wsAnnot,
         xInit: 0,
         yInit: 0,
         width: 1024 - 200 - 200,
@@ -63,17 +64,18 @@
         channel: channel,
         annotCategories: this.annotCategories
     });
-	
+
     //Archive day 1
+    /*jshint -W098 */
     var timeLineDay1 = new AnnotsTimeLine.AnnotsTimeLine({
-    	stageView : stageView,
+        stageView : stageView,
         archive: true,
         xInit: 0,
         yInit: 0,
         width: 1024 - 200 - 200,
         height: 768-200,
-        timeBegin: Date.parse("2015-01-22T09:30:00+01:00"),
-        timeEnd: Date.parse("2015-01-22T18:30:00+01:00"),
+        timeBegin: Date.parse('2015-01-22T09:30:00+01:00'),
+        timeEnd: Date.parse('2015-01-22T18:30:00+01:00'),
         circleX: timeLineDay2.circleX,
         circleY: timeLineDay2.circleY,
         intervalWidth: (timeLineDay2.radius*2/3)* timeLineDay2.intervalWidth / timeLineDay2.radius,
@@ -85,21 +87,22 @@
         channel: channel,
         showClockGraphics:false
     });
-    
-    var currentTimeText = new PIXI.Text("-- : -- : --", { font: '18pt Gothic Standard', fill: '#646464' });
+
+    var currentTimeText = new PIXI.Text('-- : -- : --', { font: '18pt Gothic Standard', fill: '#646464' });
     currentTimeText.x = timeLineDay2.circleX - currentTimeText.width/2;
     currentTimeText.y = timeLineDay2.circleY - currentTimeText.height/2;
     this.container.addChild(currentTimeText);
 
     var timeLineDay3 = new PIXI.Graphics();
     timeLineDay3.lineStyle(1, 0x646464)
-    	.drawCircle(timeLineDay2.circleX, timeLineDay2.circleY, timeLineDay2.radius/3)
-    	.endFill()
+        .drawCircle(timeLineDay2.circleX, timeLineDay2.circleY, timeLineDay2.radius/3)
+        .endFill();
     this.container.addChild(timeLineDay3);
-    
-	var doubleRollH = new DoubleRoll.DoubleRoll({
+
+    /*jshint -W098 */
+    var doubleRollH = new DoubleRoll.DoubleRoll({
         stageView : stageView,
-    	logger: logger,
+        logger: logger,
         ws: wsPianoroll,
         yInit: (this.height - 200),
         sceneHeight: 200,
@@ -113,9 +116,9 @@
         ]
     });
 
-	var doubleRollV = new DoubleRoll.DoubleRoll({
+    var doubleRollV = new DoubleRoll.DoubleRoll({
         stageView : stageView,
-    	logger: logger,
+        logger: logger,
         ws: wsPianoroll,
         orientation: 'vertical',
         sceneHeight: 768-200,
@@ -129,8 +132,8 @@
         ]
     });
 
-	var annotsRoll = new AnnotsRoll.AnnotsRoll({
-    	stageView : stageView,
+    var annotsRoll = new AnnotsRoll.AnnotsRoll({
+        stageView : stageView,
         logger: logger,
         ws: wsAnnot,
         parentContainer: doubleRollV.stage,
@@ -144,31 +147,31 @@
         annotColors: this.annotCategories
     });
 
-	var limiters = new PIXI.Graphics()
-		.lineStyle(1, 0x646464)
-		.moveTo(annotsRoll.container.x, annotsRoll.container.y)
-		.lineTo(annotsRoll.container.x, annotsRoll.container.y - annotsRoll.height)
-		.moveTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y)
-		.lineTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y - annotsRoll.height)
-		.moveTo(0, this.height - 200)
-		.lineTo(this.width, this.height - 200)
-		.drawRect(0, 0, this.width -1, this.height -1)
-		.beginFill(0xECECEC)
-		.drawRect(1024 - 200, 0, 200, 768-200)
-		.endFill();
-	this.container.addChild(limiters);
+    var limiters = new PIXI.Graphics()
+        .lineStyle(1, 0x646464)
+        .moveTo(annotsRoll.container.x, annotsRoll.container.y)
+        .lineTo(annotsRoll.container.x, annotsRoll.container.y - annotsRoll.height)
+        .moveTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y)
+        .lineTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y - annotsRoll.height)
+        .moveTo(0, this.height - 200)
+        .lineTo(this.width, this.height - 200)
+        .drawRect(0, 0, this.width -1, this.height -1)
+        .beginFill(0xECECEC)
+        .drawRect(1024 - 200, 0, 200, 768-200)
+        .endFill();
+    this.container.addChild(limiters);
 
-	this.init = function(){
-	};
+    this.init = function(){
+    };
 
-	this.updateTime = function(){
+    this.updateTime = function(){
         currentTimeText.setText(Utils.formatTime(Date.now()));
     };
 
     var refreshTimeInterval;
-    
-	this.start = function() {
-		refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
+
+    this.start = function() {
+        refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
     };
 
     this.refresh = function() {
@@ -182,5 +185,5 @@
 }
 
 module.exports = {
-	AnnotsVizView: AnnotsVizView
+    AnnotsVizView: AnnotsVizView
 };
diff -r 0a2b4991d48c -r 0bb70072a56f client/annotviz/app/js/doubleroll.js
--- a/client/annotviz/app/js/doubleroll.js	Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/js/doubleroll.js	Fri Jan 23 02:00:19 2015 +0100
@@ -5,14 +5,12 @@
 * Take a look at http://browserify.org/ for more info
 */
 
-/* global document: false */
-
 'use strict';
 
 
 var PIXI = require('pixi');
 var _ = require('lodash');
-var PianoRoll = require('./pianoroll.js');
+var PianoRoll = require('./pianoroll');
 
 var defaultConfig = {
     orientation: 'horizontal',
@@ -63,7 +61,6 @@
     this.noteColors = opts.noteColors;
 
     var noteHeight = opts.noteHeight;
-    var sceneBgColor = opts.sceneBgColor;
     var sceneHeight = opts.sceneHeight || _(opts.pianorolls).reduce(function(s,p) { return s + p.height; }, 0);
     var timeWidth = opts.timeWidth;
     var lineInterval = opts.lineInterval;
@@ -81,7 +78,7 @@
     this.container = new PIXI.DisplayObjectContainer();
     this.container.x = Math.floor(sceneWidth*zeroShift);
     this.container.y = 0;
-    
+
     stageView.registerComponent(this);
 
     var pianorollList = [];
@@ -166,7 +163,7 @@
     };
 
     this.stop = function() {
-    	
+
         pianorollList.forEach(function(c) {
             c.stop();
         });
diff -r 0a2b4991d48c -r 0bb70072a56f client/annotviz/app/js/logger.js
--- a/client/annotviz/app/js/logger.js	Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/js/logger.js	Fri Jan 23 02:00:19 2015 +0100
@@ -35,7 +35,7 @@
         if(doLog) {
             console.log(msg);
         }
-    }
+    };
 
 }
 
diff -r 0a2b4991d48c -r 0bb70072a56f client/annotviz/app/js/stageview.js
--- a/client/annotviz/app/js/stageview.js	Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/js/stageview.js	Fri Jan 23 02:00:19 2015 +0100
@@ -37,13 +37,13 @@
     var sceneHeight = opts.sceneHeight;
     var canvasContainer = opts.canvasContainer;
     var timeContainer = [];
-    var components = []; 
-    
+    var components = [];
+
     //create an new instance of a pixi stage
     this.stage = new PIXI.Stage(sceneBgColor);
     //create a renderer instance.
     var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight);
-    	
+
     this.init = function() {
 
         if(typeof(canvasContainer) === 'string') {
@@ -54,16 +54,16 @@
         }
 
         canvasContainer.appendChild(renderer.view);
-        
+
         components.forEach(function(c){
     		c.init();
     	});
     };
-    
+
     this.registerTimeContainer = function(container) {
     	timeContainer.push(container);
     };
-    
+
     this.registerComponent = function(component) {
     	components.push(component);
     	this.stage.addChild(component.container);
@@ -84,7 +84,7 @@
         if(!externalRefresh) {
             refreshInterval = setInterval(function() {_this.refresh();}, 1000/this.framerate);
         }
-        
+
         components.forEach(function(c){
     		c.start();
     	});
@@ -94,7 +94,6 @@
         if(!externalRefresh) {
             clearInterval(refreshInterval);
         }
-        clearInterval(refreshTimeInterval);
         
         components.forEach(function(c){
     		c.stop();
diff -r 0a2b4991d48c -r 0bb70072a56f client/annotviz/app/js/utils.js
--- a/client/annotviz/app/js/utils.js	Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/js/utils.js	Fri Jan 23 02:00:19 2015 +0100
@@ -4,6 +4,8 @@
 * basic tools
 *
 */
+/*jshint bitwise: false*/
+/*jshint camelcase: false */
 
 'use strict';
 
@@ -12,12 +14,12 @@
 var moment = require('moment');
 
 function formatTime (ts) {
-	return moment(ts).format("HH:mm:ss");
+    return moment(ts).format('HH:mm:ss');
 }
 
 function colorToHex(c) {
-	var m = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(c);
-	return m ? '#' + (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : c;
+    var m = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(c);
+    return m ? '#' + (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : c;
 }
 
 function getAnnotCategories(urlCategories, annotCategories) {
@@ -28,35 +30,35 @@
         var data = res.target.json;
 
         while(annotCategories.length > 0) {
-        	annotCategories.pop();
+            annotCategories.pop();
         }
 
         data.sessions.forEach(function(session) {
             var annotCat = {
                 ts: session.start_ts === null ? new Date(0) : Date.parse(session.start_ts),
                 colors: {}
-            }
+            };
             var categoriesJson = session.categories_json;
             annotCat.order = categoriesJson.order;
             if (typeof(annotCat.order['default']) === 'undefined'){
-            	annotCat.order.push('default');
+                annotCat.order.push('default');
             }
-			var catList = _.clone(categoriesJson.categories);
-			while(catList.length > 0) {
-				var cat = catList.pop();
-				if(cat.code) {
-					annotCat.colors[cat.code] = colorToHex(cat.color);
-				}
-				if(cat.subcategories) {
-					catList = catList.concat(cat.subcategories);
-				}
-			}
+            var catList = _.clone(categoriesJson.categories);
+            while(catList.length > 0) {
+                var cat = catList.pop();
+                if(cat.code) {
+                    annotCat.colors[cat.code] = colorToHex(cat.color);
+                }
+                if(cat.subcategories) {
+                    catList = catList.concat(cat.subcategories);
+                }
+            }
             categoriesJson.categories.forEach(function(cat) {
-				if(cat.code) {
-                	annotCat.colors[cat.code] = colorToHex(cat.color);
-				}
+                if(cat.code) {
+                    annotCat.colors[cat.code] = colorToHex(cat.color);
+                }
             });
-            annotCat.defaultColor = categoriesJson.defaultColor || "#536991";
+            annotCat.defaultColor = categoriesJson.defaultColor || '#536991';
             annotCategories.push(annotCat);
         });
     });
@@ -66,7 +68,7 @@
 }
 
 module.exports = {
-	formatTime: formatTime,
-	getAnnotCategories: getAnnotCategories,
-	colorToHex: colorToHex
+    formatTime: formatTime,
+    getAnnotCategories: getAnnotCategories,
+    colorToHex: colorToHex
 };