--- a/client/annotviz/app/js/doubleroll.js	Mon Jan 19 16:44:59 2015 +0100
+++ b/client/annotviz/app/js/doubleroll.js	Tue Jan 20 11:57:44 2015 +0100
@@ -5,10 +5,7 @@
 * Take a look at http://browserify.org/ for more info
 */
 
-/* global window: false */
 /* global document: false */
-/* global WebSocket: false */
-/* global MozWebSocket: false */
 
 'use strict';
 
@@ -17,11 +14,10 @@
 var _ = require('lodash');
 var PianoRoll = require('./pianoroll.js');
 
-var NTP_EPOCH_DELTA = 2208988800; //c.f. RFC 868
-
 var defaultConfig = {
     orientation: 'horizontal',
-    logger: false,
+    externalRefresh: false,
+    logger: undefined,
     sceneWidth: 1920,
     pianorolls : [
       {
@@ -44,13 +40,11 @@
     lineFillColor: 0xFFFF00,
     noteColors: [0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991],
     canvasContainer: 'canvasContainer',
-    logContainer: 'log',
     timeContainer: 'timeStarted',
     noteHeight: undefined,
     zeroShift: 0.9,
     timeWidth: 60,
     lineInterval: 5000,
-    annotationChannel: 'PIANOROLL'
 //    wsUri: undefined,
 //    eventCode: undefined
 
@@ -63,6 +57,7 @@
 
     var orientation = opts.orientation;
     var isHorizontal = (orientation !== 'vertical');
+    var externalRefresh = opts.externalRefresh;
 
     this.logger = opts.logger;
     this.lineColor = opts.lineColor;
@@ -80,36 +75,23 @@
 
     var sceneWidth = opts.sceneWidth;
     var canvasContainer = opts.canvasContainer;
-    var logContainer = opts.logContainer;
     var timeContainer = opts.timeContainer;
 
     var zeroShift = opts.zeroShift;
 
-    var eventCode = opts.eventCode;
-    var annotationChannel = opts.annotationChannel;
-    var wsUri = opts.wsUri;
-    if(!wsUri) {
-        if (window.location.protocol === 'file:') {
-            wsUri = 'ws://127.0.0.1:8090/broadcast';
-        }
-        else {
-            wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
-        }
-        wsUri += '?channel='+annotationChannel+'&event_code='+eventCode;
-    }
-
+    var ws = opts.ws;
 
     var colorsReg = {};
 
     //create an new instance of a pixi stage
-    var stage = new PIXI.Stage(sceneBgColor);
+    this.stage = new PIXI.Stage(sceneBgColor);
     //create a renderer instance.
     var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight);
 
     var uberContainer = new PIXI.DisplayObjectContainer();
     uberContainer.x = Math.floor(sceneWidth*zeroShift);
     uberContainer.y = 0;
-    stage.addChild(uberContainer);
+    this.stage.addChild(uberContainer);
 
     var pianorollList = [];
 
@@ -164,76 +146,31 @@
         if(typeof(canvasContainer) === 'string') {
             canvasContainer = document.getElementById(canvasContainer);
         }
-        if(typeof(logContainer) === 'string') {
-            logContainer = document.getElementById(logContainer);
-        }
         if(typeof(timeContainer) === 'string') {
             timeContainer = document.getElementById(timeContainer);
         }
 
-
-        if(!this.logger){
-            document.body.removeChild(logContainer);
-            logContainer = undefined;
-        }
-        var sock;
-
         canvasContainer.appendChild(renderer.view);
 
-        if ('WebSocket' in window) {
-            sock = new WebSocket(wsUri);
-        } else if ('MozWebSocket' in window) {
-            sock = new MozWebSocket(wsUri);
-        } else {
-            this.log('Browser does not support WebSocket!');
-            window.location = 'http://autobahn.ws/unsupportedbrowser';
-        }
-
-        if (!sock) {
-            return;
-        }
-        sock.onopen = function(){
-            if(_this.logger){
-                _this.log('Connected to ' + _this.wsUri);
-            }
-        };
-
-        sock.onclose = function(e) {
-            if(_this.logger){
-                _this.log('Connection closed (wasClean = ' + e.wasClean + ', code = ' + e.code + ', reason = \'' + e.reason + '\')');
-            }
-            sock = null;
-        };
-
-        sock.onmessage = function(e) {
-            var dataJson = JSON.parse(e.data);
-            if(_this.logger){
-                var dataDate = new Date((dataJson.content[0]-NTP_EPOCH_DELTA)*1000);
-                _this.log('Got message: ' + e.data + ' - ' + dataDate.toISOString());
-            }
-            _this.addNotes(dataJson);
-        };
+        ws.message(function(data) {
+            _this.addNotes(data);
+        });
 
     };
 
 
     this.addNotes = function(data) {
-        var note = data.content[3];
-        var velocity = data.content[4];
-        var ts = (data.content[0] - NTP_EPOCH_DELTA)*1000;
-        var channel = data.content[2];
-        var sessionTs = data.content[1];
 
         pianorollList.forEach(function(c) {
-            c.addNote(note, ts, sessionTs, velocity, channel, 0);
+            c.addNoteRaw(data);
         });
     };
 
-    this.refreshStage = function() {
+    this.refreshStage = this.refresh = function() {
         pianorollList.forEach(function(c) {
             c.move();
         });
-        renderer.render(stage);
+        renderer.render(this.stage);
     };
 
     // Init page and intervals
@@ -253,16 +190,20 @@
     this.start = function() {
 
         startTs = Date.now();
-        refreshInterval = window.setInterval(function() {_this.refreshStage();}, 1000/this.framerate);
-        refreshTimeInterval = window.setInterval(function() {_this.updateTime();}, 1000);
+        if(!externalRefresh) {
+            refreshInterval = setInterval(function() {_this.refreshStage();}, 1000/this.framerate);
+        }
+        refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
         pianorollList.forEach(function(c) {
             c.start();
         });
     };
 
     this.stop = function() {
-        window.clearInterval(refreshInterval);
-        window.clearInterval(refreshTimeInterval);
+        if(!externalRefresh) {
+            clearInterval(refreshInterval);
+        }
+        clearInterval(refreshTimeInterval);
         pianorollList.forEach(function(c) {
             c.stop();
         });
@@ -270,17 +211,12 @@
 
 
     this.log = function(m) {
-        if(this.logger){
-            this.logContainer.innerHTML += m + '\n';
-            this.logContainer.scrollTop = logContainer.scrollHeight;
+        if(this.logger) {
+            this.logger.log(m);
         }
     };
 
 
-    window.onload = function() {
-        _this.init();
-        _this.start();
-    };
 
     return this;
 }