var websock;

$(document).ready(function(event) {
  startWebsocket();
});

function startWebsocket() {
    websock = new WebSocket('ws://' + window.location.hostname + ':81/');
    websock.onopen = function(evt) {
        console.log('websock open');
        $('#wsSpinner').invisible();
    };
    websock.onclose = function(evt) {
        console.log('websock close');
        websock = null;
        $('#wsSpinner').visible();
        setTimeout(startWebsocket, 1000);
    };
    websock.onerror = function(evt) {
        console.log(evt);
    };
    websock.onmessage = function(evt) {
        data = JSON.parse(evt.data);
        handleWebsocketMessage(data);
    };
}

function handleWebsocketMessage(data) {
    console.log(data);
    $('#data').text(JSON.stringify(data, null, 2));
}

jQuery.fn.visible = function() {
    return this.css('visibility', 'visible');
};

jQuery.fn.invisible = function() {
    return this.css('visibility', 'hidden');
};