function format_stat(stat, internal_page_id) {
    internal_page_id = internal_page_id || ""

    return '<li data-key="' + stat.key + '">' +
            '<a href="#' + internal_page_id + '" data-ajax="false">' +
            '<span class="ui-li-heading">' + stat.key +
            '</span><span class="ui-li-desc">' + stat.desc +
            '</span><span class="ui-li-count bigger">' + stat.value +
            '</span></a></li>';
}

function format_inpage(stat, inpage_id) {
    var s = $('#_InpageDataTemplate').clone();

    $(s).attr('id', inpage_id);
    $(s).data('url', inpage_id);
    $('.header', s).text(stat.key);
    $(stat.additional).each(function(index, value) {
        $('.content', s).append('<li>' + value + '</li>');
    });

    return s;
}

function addOrUpdateStat(stat) {

    // check if the stat contains additional data that should be
    // displayed in a sub listview
    var inpage_id = "";
    var has_inpage = false;

    if (stat.additional !== undefined) {
        inpage_id = stat.key.replace(/ /g, '');
        has_inpage = true;
    }

    var statHtml = format_stat(stat, inpage_id);

    // add or update the stat in the DOM
    $('#main_page #data li[data-key="' + stat.key + '"]').remove();
    $(statHtml).insertAfter('#stats');
    $('#main_page #data').listview('refresh');

    // add or update the inpage for additional data if available
    if (has_inpage) {
        var additionalPageHtml = format_inpage(stat, inpage_id);
        $('body #' + inpage_id).remove();
        $('body').append(additionalPageHtml);
    }
}

function updateUpdatedAt() {
    var time = new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
    $("#last_update").text(time);
}

$(function () {
    var protocol = (window.location.protocol === "https:") ? "wss:" : "ws:";
    var ws = new WebSocket(protocol + '//' + window.location.host + window.location.pathname);
    ws.onopen = function()  {
        console.log('websocket opened');
        $('#connection_status').text('connected');
    };
    ws.onclose = function()  {
        console.log('websocket closed');
        $('#connection_status').text('disconnected');
    };
    ws.onmessage = function(m) {
        console.log(m);
        updateUpdatedAt();
        var obj = $.parseJSON(m.data);
        addOrUpdateStat(obj);
    };
});