function wsSelectCallback(event) {
    // todo: disable form on this != auto
    if (event.target.nodeName == 'INPUT') {
        console.log("ws:" + event.target.value);
        ws_index = event.target.value;
    }
}

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') {
        console.log("h:" + event.target.value);
        if (socket.readyState == WebSocket.OPEN) {
            socket.send("h:" + event.target.value);
        }
    }
}

function sensitivityCallback(element) {
    console.log("e:" + element.value);
    if (socket.readyState == WebSocket.OPEN) {
        socket.send("e:" + element.value);
    }
    rangeCallback(element);
}

function gravityCallback(element) {
    console.log("g:" + element.value);
    if (socket.readyState == WebSocket.OPEN) {
        socket.send("g:" + element.value);
    }
    rangeCallback(element);
}

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);
    if (socket.readyState == WebSocket.OPEN) {
        socket.send("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 modulationColorChangeCallback(color) {
    console.log("c: " + (color.index + 2) + ", h: " + color.hsl.h + ", s: " + color.hsl.s + ", l: " + color.hsl.l + "}");
    if (socket.readyState == WebSocket.OPEN) {
        socket.send("c:" + (color.index + 2) + "," + color.hsl.h + "," + color.hsl.s + "," + color.hsl.l);
    }
}

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