function render_status_page() {
    console.info('updating status page');

    req = new XMLHttpRequest();
    req.open('GET', '/status.json');
    req.setRequestHeader('Accept', 'application/json');

    req.addEventListener('load', function(event) {
        result = JSON.parse(req.responseText)['results'];

        result.sort(function(a, b) {
            aname = a['attrs']['host_name'] + a['attrs']['display_name'];
            bname = b['attrs']['host_name'] + b['attrs']['display_name'];

            if (aname < bname) return -1;
            if (aname > bname) return 1;
            return 0;
        });

        out = '';
        last_hostname = '';

        result.forEach(function(item) {
            if (last_hostname != item['attrs']['host_name']) {
                out += '<h2 id="' + item['attrs']['host_name'] + '">' + item['attrs']['host_name'] + '</h2>';
                last_hostname = item['attrs']['host_name']
            }

            out += '<h3>';
            out += downtime_or_ack_to_string(item['attrs']['downtime_depth'], item['attrs']['acknowledgement']) + ' ';
            out += state_to_string(item['attrs']['state'], item['attrs']['state_type']) + ' ';
            out += escape_html(item['attrs']['display_name']);
            out += '</h3>';

            if (item['attrs']['state'] != 0) {
                out += '<pre class="output">' + escape_html(item['attrs']['last_check_result']['output']) + '</pre>';

                out += '<p class="statusline">';
                out += 'Last checked: ' + item['attrs']['__custom']['last_check'] + '<br>';
                out += 'Last state change: ' + item['attrs']['__custom']['last_state_change'];
                out += '</p>';
            }

            out += '</div>';
        });

        if (out.length == 0) {
            out += '<div class="loader"></div>';
        }

        document.getElementById('output').innerHTML = out;

        console.info('updated status page');
    });

    req.send();
}

function state_to_string(state, type) {
    if (type != 1) {
        maybe = ' (pending)';
    } else {
        maybe = '';
    }

    if (state == 0) {
        return '<span class="status_ok">OK' + maybe + '</span>';
    } else if (state == 1) {
        return '<span class="status_warn">WARNING' + maybe + '</span>';
    } else if (state == 2) {
        return '<span class="status_crit">CRITICAL' + maybe + '</span>';
    } else {
        return '<span class="status_unknown">UNKNOWN' + maybe + '</span>';
    }
}

function downtime_or_ack_to_string(dt, ack) {
    if ((dt + ack) > 0) {
        return '<span class="status_warn">Work in Progress</span>';
    }
    return '';
}

function escape_html(text) {
    return text
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}