'use strict'

let state = {
  deg: 0,
  active: false
}

function requestMIDI () {
  return navigator.requestMIDIAccess()
    .then(function (midi) {
      let traktor

      for (let input of midi.inputs.values()) {
        traktor = input
      }

      return traktor
    }).catch(function (err) {
      throw err
    })
}

setTimeout(function () {
  requestMIDI().then(function (midi) {
    let image = document.querySelector('.image')

    midi.onmidimessage = function (e) {
      console.log(e)
      if (e.data[0] === 176 && e.data[1] === 2) {
        let delta = e.data[2] === 1 ? 1 : -1

        state.deg += delta * 6
      }

      if (e.data[0] === 176 && e.data[1] === 3) {
        state.active = !state.active
      }

      window.requestAnimationFrame(function () {
        let style = 'rotate(' + state.deg + 'deg)'

        if (state.active) {
          style += ' scale(0.9)'
        }

        image.style.transform = style
      })
      console.log(state)
    }
}).catch(function (e) {
  throw e
})

}, 100)