document.addEventListener("DOMContentLoaded", function () {

  WebMidi.enable(function(err) {

    if (err) console.warn("xxxWebMidi couldn't be enabled!", err);

    console.log(WebMidi.inputs);
    console.log(WebMidi.outputs);


    WebMidi.inputs.forEach(function (input) {
      input.addListener("noteon", "all", function (e) {
        console.log(e);
      })


      console.log(input.getCcNameByNumber(34));

    });

    // WebMidi.inputs.forEach(function (input) {
    //   input.addListener("connected", undefined, function (e) {
    //     console.log("CONNECTED!!", e);
    //   })
    //   input.addListener("disconnected", undefined, function (e) {
    //     console.log("DISCONNECTED!!", e);
    //   })
    // });

    // var test = function (e) {
    //   console.log(e.test);
    // };
    // WebMidi.inputs[0].addListener("midimessage", undefined, test);


    WebMidi.outputs.forEach(function (output) {
      output.playNote("C4", 10, {duration: 1000});
    });

    // WebMidi.outputs.forEach(function (output) {
    //   output.stopNote("C4", 10, {velocity: "0.25"});
    // });

    // var kbd = WebMidi.inputs[0];
    // var toSynth = WebMidi.getOutputByName("MIDI Monitor");
    //
    // kbd.addListener('noteon', "all", function (e) {
    //   console.log(e);
    //   toSynth.playNote(e.note.number, 8);
    // });
    //
    // kbd.addListener('noteoff', "all", function (e) {
    //   console.log(e);
    //   toSynth.stopNote(e.note.number, 8);
    // });

    // WebMidi.outputs[0].sendSysex(0x42, [1, 2, 3, 4, 5]);

  // }, true)
  }, {sysex: true, software: true})



  // WebMidi.enable(function(err) {
  //
  //   if(err) {
  //     console.log("WebMidi cannot be enabled!");
  //   } else {
  //     console.log("WebMidi enabled!");
  //
  //     // create dropdown for MIDI output select
  //     // let controls = document.getElementById("controls");
  //     // let select = document.createElement("select");
  //     // select.id = "midiOut";
  //     // select.setAttribute("onchange", "midiPortSelect(this.value)");
  //     // controls.appendChild(select);
  //     for(i = 0; i < WebMidi.outputs.length; i ++) {
  //       console.log("output: " + WebMidi.outputs[i].name);
  // //       let option = document.createElement("option");
  // //       option.appendChild(document.createTextNode(WebMidi.outputs[i].name));
  // //       select.appendChild(option);
  //     }
  //
  //   }
  //
  // }, true);

  // WebMidi.enable( function(error) {
  //
  //   if(error) console.log("WebMidi Error:", error);
  //
  //   WebMidi.outputs[0].playNote("Gb2", 10, {duration: 2000, velocity: 0.25});
  //   // WebMidi.outputs[0].stopNote("Gb2", 10);
  //
  // });

});