function fretChanged(e) {
    console.log('fret changed', e);
}

let mousedownVal = undefined;

function mousedown(e) {
    // at mousedown time, the form hasn't yet been changed. to support
    // deselecting elements, we need to know what the previous
    // selection was, so store it here.
    //
    // it'd be nice to be able to do this just in the click handler.
    mousedownVal = e.target.checked;
}

function click(e) {
    const elt = e.target;
    // if this element was selected at mousedown time, deselect it
    // now.
    if (mousedownVal) {
        elt.checked = false;
    }
}

export default function Fretboard(form) {
    console.debug('Fretboard()', form);
    form.onchange = fretChanged;
    form.querySelectorAll('input[type="radio"]').forEach(elt => {
        elt.onmousedown = mousedown;
        elt.onclick = click;
    });
}