Array.prototype.compare = function(a){
  return this.length === a.length && this.every((v, i) => v === a[i])
}

WebMidi
  .enable({sysex: true})
  .then(onEnabled)
  .catch(err => console.log(err));
var index = 0;
var keybDetected = false;
disabled(true);
function getInput(){
  return WebMidi.inputs[index];
}
function getOutput(){
  var name = getInput().name;
  return WebMidi.getOutputByName(name.replace("IN","OUT"));
}
function onEnabled() {
  index = 0;
  keybDetected = false;
  document.querySelector("#connected").style.background = "red";
  document.querySelector("#connect").innerHTML = "Disconnect";
  WebMidi.inputs.forEach((device, idx) => {
    document.querySelector("#di").innerHTML += `<option value="${idx}">${device.name}</option>`;
    if(device.name == "Code 61 Editor" || device.name == "MIDIIN4 (Code 61)")
      document.querySelector("#di").value = idx;
      index = idx;
  });
  if(WebMidi.inputs.length > 0)
  {
    getInput().addListener("sysex", onSysex)
    sendDeviceQuery();
  }
  document.querySelector("#di").addEventListener("change", e=>{
    getInput().removeListener("sysex");
    keybDetected = false;
    disabled(true);
    document.querySelector("#connected").style.background = "red";
    index = document.querySelector("#di").value;
    getInput().addListener("sysex", onSysex)
    sendDeviceQuery();
  });
}
function onSysex(e) {
  if(e.message.manufacturerId.compare([126]) && e.dataBytes.slice(0,8).compare([127,6,2,0,1,5,49,6])){
    keybDetected = true;
    document.querySelector("#connected").style.background = "green";
    sendUnlock();
    disabled(false);
    getSettings();
  }
  if(e.message.manufacturerId.compare([0,1,5]) && e.dataBytes.slice(0,4).compare([127,49,6,108])){
    var address = e.dataBytes[6]*128+e.dataBytes[7];
    var value = e.dataBytes[8]*128+e.dataBytes[9];
    if(address == 5 || address == 8) value -= 5;
    if(address == 6 || address == 9) value -= 12;
    document.querySelector("#option"+address).value = value;
  }
}
function sendDeviceQuery() {
  getOutput().sendSysex(0x7e, [127,6,1]);
}
function sendUnlock() {
  getOutput().sendSysex([0,1,5], [0x7f, 0x31, 0x06, 0x6d, 0, 1, 1]);
}
function getSetting(id) {
  var msb = Math.floor(id / 128) % 128;
  var lsb = id % 128;
  getOutput().sendSysex([0,1,5], [0x7f, 0x31, 0x06, 0x6b, 0, 2, msb, lsb]);
}
function sendSetting(id, value) {
  if(value > 255) value = 255;
  if(value < 0) value = 0;
  var amsb = Math.floor(id / 128) % 128;
  var alsb = id % 128;
  var vmsb = Math.floor(value / 128) % 128;
  var vlsb = value % 128;
  getOutput().sendSysex([0,1,5], [0x7f, 0x31, 0x06, 0x6a, 0, 4, amsb, alsb, vmsb, vlsb]);
}
function getSettings() {
  [0,4,5,6,7,8,9,10,11,12,13,14,15,16].forEach(x=>getSetting(x));
}
function setSettings() {
  [0,4,5,6,7,8,9,10,11,12,13,14,15,16].forEach(address=>{
    var value = parseInt(document.querySelector("#option"+address).value);
    if(address == 5 || address == 8) value += 5;
    if(address == 6 || address == 9) value += 12;
    sendSetting(address, value)
  });
}
function disabled(d) {
  [0,4,5,6,7,8,9,10,11,12,13,14,15,16].forEach(address=>{
    document.querySelector("#option"+address).disabled = d;
    if(d)document.querySelector("#option"+address).value="";
  });
  document.querySelector("#gs").disabled = d;
  document.querySelector("#ss").disabled = d;
}
function toggleMIDI() {
  if(WebMidi.enabled) {
    WebMidi.disable();
    disabled(true);
    document.querySelector("#di").innerHTML = "";
    document.querySelector("#connect").innerHTML = "Connect";
    document.querySelector("#connected").style.background = "red";
  }
  else
  {
    WebMidi
      .enable({sysex: true})
      .then(onEnabled)
      .catch(err => console.log(err));
  }
}