var eventd;

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 buttonSelectCallback(event) {
    // todo: disable form on this != auto
    eventd = event
    if (event.target.nodeName == 'INPUT') {
        newMode = event.target.parentElement.id.split('-')[0] + ":" + event.target.value
        console.log(newMode);
        if (socket.readyState == WebSocket.OPEN) {
            socket.send(newMode);
        }
    }
}

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);
}

function hueIntervalCallback(element) {
    console.log("i:" + (Number(element.value) + 63 + 1));
    if (socket.readyState == WebSocket.OPEN) {
        socket.send("i:" + (Number(element.value) + 63 + 1));
    }
    rangeCallback(element);
}

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 modulationIntervalCallback(element) {
    console.log("t:" + (Number(element.value) + 63 + 1));
    if (socket.readyState == WebSocket.OPEN) {
        socket.send("t:" + (Number(element.value) + 63 + 1));
    }
    rangeCallback(element);
}

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

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