var get_cfg = function (event) {
    var config = JSON.parse(event)
    if(config.heat) {
        if(config.heat.state) {
            document.getElementById("heat_state").value = "an"
            document.getElementById('heat_config').style.visibility = 'visible';
        } else {
            document.getElementById("heat_state").value = "aus"
            document.getElementById('heat_config').style.visibility = 'hidden';
        }
        if(config.heat.on_temperature) {
            document.getElementById("switch_on_temperature").value = config.heat.on_temperature;
        }
        if(config.heat.off_temperature) {
            document.getElementById("switch_off_temperature").value = config.heat.off_temperature;
        }
    }
    if(config.water) {
        if(config.water.state) {
            document.getElementById("water_state").value = "an"
            document.getElementById('water_times').style.visibility = 'visible';
        } else {
            document.getElementById("water_state").value = "aus"
            document.getElementById('water_times').style.visibility = 'hidden';
        }
        if(config.water.times) {
            document.getElementById("water_on_one").value = config.water.times[0].on_time;
            document.getElementById("water_off_one").value = config.water.times[0].off_time;
            document.getElementById("water_on_two").value = config.water.times[1].on_time;
            document.getElementById("water_off_two").value = config.water.times[1].off_time;
        }
    }
}

var on_change_heat_state = function() {
    if(document.getElementById("heat_state").value == "an") {
        document.getElementById("heat_state").value = "aus"
        document.getElementById('heat_config').style.visibility = 'hidden';
    } else {
        document.getElementById("heat_state").value = "an"
        document.getElementById('heat_config').style.visibility = 'visible';
    }
}

var on_change_water_state = function() {
    if(document.getElementById("water_state").value == "an") {
        document.getElementById("water_state").value = "aus";
        document.getElementById('water_times').style.visibility = 'hidden';
    } else {
        document.getElementById("water_state").value = "an";
        document.getElementById('water_times').style.visibility = 'visible';
    }
}

var on_push_config = function() {
    var water_state = false;
    if(document.getElementById("water_state").value == 'an') {
        water_state = true;
    }
    var on_time_one = document.getElementById("water_on_one").value;
    var off_time_one = document.getElementById("water_off_one").value;
    var on_time_two = document.getElementById("water_on_two").value;
    var off_time_two = document.getElementById("water_off_two").value;

    var heat_state = false;
    if(document.getElementById("heat_state").value == 'an') {
        heat_state = true;
    }
    var on_tmp = document.getElementById("switch_on_temperature").value;
    var off_tmp = document.getElementById("switch_off_temperature").value;

    var json_str = JSON.stringify(
        {
            "water":
            {
                "state":water_state,
                "times":
                [
                    {
                        "on_time":on_time_one,
                        "off_time":off_time_one
                    },
                    {
                        "on_time":on_time_two,
                        "off_time":off_time_two
                    }
                ]
            },
            "heat":
            {
                "state":heat_state,
                "on_temperature":on_tmp,
                "off_temperature":off_tmp
            }
        }
        );
    patch_cfg(json_str);
}

var patch_http = new XMLHttpRequest();
var patch_cfg = function(config) {
    patch_http.abort();
    patch_http.open("PATCH", "/cfg");
    patch_http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    patch_http.send(config);
}

var http = new XMLHttpRequest();
http.onreadystatechange = function () {
    if (http.readyState === 4) {
    var status = http.status;
    if (status === 0 || (status >= 200 && status < 400)) {
        // The request has been completed successfully
        get_cfg(http.responseText);
        }
    } else {
        // request error
    }
}
http.open("GET", "/cfg");
http.send();