var request_status = function (host, wol) {
    console.log("Update " + host.ip);

    var request = new XMLHttpRequest();
    request.addEventListener("load", function () {
        var response;
        if (this.status !== 200) {
            return;
        }
        response = JSON.parse(this.responseText);
        if (response.status === "up") {
            host.status_node.innerHTML = "✓";
        } else if (response.status === "unknown" && wol) {
            setTimeout(function () {
                request_status(host, wol);
            }, 1000 + Math.random() * 1000);
        } else {
            host.status_node.innerHTML = "X";
        }
    });

    request.open("GET", "status/" + host.ip);
    request.send();
}
var request_refresh = function (host, wol) {
    console.log("Refresh " + host.ip);

    var request = new XMLHttpRequest();
    request.addEventListener("load", function () {
        var response;
        console.log(this.status, this.responseText);
        if (this.status !== 200) {
            return;
        }
        response = JSON.parse(this.responseText);
        console.log(response);
        if (response.status === "ok") {
            host.status_node.innerHTML = "✓";
        } else {
            host.status_node.innerHTML = "X";
        }
    });

    var params = "ip=" + host.ip;
    request.open("POST", "refresh", true);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send(params);

    setTimeout(function () {
        request_status(host, wol);
    }, 4000 + Math.random() * 2000);
}

var request_wol = function (host) {
    console.log("Wakeup " + host.mac);

    host.status_node.innerText = "?";

    var request = new XMLHttpRequest();
    request.addEventListener("load", function () {
        var response;
        console.log(this.status, this.responseText);
        if (this.status !== 200) {
            return;
        }
        response = JSON.parse(this.responseText);
        if (response.response === "ok") {
            host.status_node.innerHTML = "?";
        } else {
            host.status_node.innerHTML = "X";
        }
    });

    var params = "mac=" + host.mac;
    request.open("POST", "wol", true);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send(params);

    setTimeout(function () {
        request_refresh(host, true);
    }, 5000);
}

window.onload = function () {
    var host_nodes = document.getElementsByClassName('host');
    var hosts = [];
    var i;

    if (host_nodes == undefined) {
        return;
    }

    for (i = 0; i < host_nodes.length; i++) {
        var host = {
            ip  : host_nodes[i].dataset.ip,
            mac : host_nodes[i].dataset.mac
        };
        var status_node = host_nodes[i].getElementsByClassName('status');
        var wol_button  = host_nodes[i].getElementsByClassName('wol');
        if (status_node == undefined || wol_button == undefined ||
            status_node.length < 1   || wol_button.length < 1) {
            return;
        }
        host.status_node = status_node[0];
        host.wol_button  = wol_button[0];
        hosts.push(host);

        (function (host_bound) {
            host_bound.wol_button.onclick = function (e) {
                request_wol(host_bound);
            }
            setTimeout(function () {
                request_refresh(host_bound, false);
            }, Math.random() * 2000);
        }) (host);

    }
}