function modeSelectCallback(event) {
    // todo: disable form on this != auto
    if (event.target.nodeName == 'INPUT') {
        console.log("m:" + event.target.value);
        if (socket.readyState == WebSocket.OPEN) {
            socket.send("m:" + event.target.value);
        }
    }
}

function patternSelectCallback(event) {
    // todo: disable form on this != auto
    if (event.target.nodeName == 'INPUT') {
        console.log("p:" + event.target.value);
        if (socket.readyState == WebSocket.OPEN) {
            socket.send("p:" + event.target.value);
        }
    }
}

function channelSelectCallback(event) {
    if (event.target.nodeName == 'INPUT') {
        channel = event.target.id.split("-")[0];
        if (channel == "all") {
            // inputArray = document.getElementById("channel-input").elements[name + "channel-selection"]
            // for (let inputIndex = 0; inputIndex < inputArray.length; inputIndex++) {
            //     inputArray[inputIndex].checked = false;
            // }
            selectedChannel = 8;
        } else if (channel == "none") {
            inputArray = document.getElementById("channel-input").elements[name + "channel-selection"]
            for (let inputIndex = 0; inputIndex < inputArray.length; inputIndex++) {
                inputArray[inputIndex].checked = false;
            }
            selectedChannel = -1;
        } else {
            inputArray = document.getElementById("channelGlobal-input").elements[name + "channelGlobal-selection"]
            for (let inputIndex = 0; inputIndex < inputArray.length; inputIndex++) {
                inputArray[inputIndex].checked = false;
            }
            selectedChannel = channel;
        }
        console.log("channel:" + selectedChannel);
    }
}

var eventd;

function colorModulateCallback(element) {
    eventd = element;
    if (element.checked) {
        document.getElementById("modulationPicker").classList.remove("d-none");
    } else {
        document.getElementById("modulationPicker").classList.add("d-none");
    }
    console.log("s: " + element.checked);
}

function colorChangeCallback(color) {
    console.log("c: " + color.index + ", h: " + color.hsl.h + ", s: " + color.hsl.s + ", l: " + color.hsl.l + "}");
    if (socket.readyState == WebSocket.OPEN) {
        socket.send("c:" + color.index + "," + color.hsl.h + "," + color.hsl.s + "," + color.hsl.l);
    }
}

function rangeCallback(element) {
    eventd = this
    element.parentNode.parentElement.getElementsByTagName('span')[0].innerText = element.value;
}