const MeshViewer = function (w) {
  this.window = w
}

MeshViewer.prototype.init = function () {
  const openers = this.window.document.querySelectorAll('*[data-modal]')
  const backdrop = this.window.document.querySelector('.modal-backdrop')
  const body = this.window.document.querySelector('body')

  for (let i = 0, len = openers.length; i < len; i++) {
    openers[i].addEventListener('click', (e) => {
      e.preventDefault()

      let target = e.target

      if (target.tagName != 'A') {
        target = target.parentNode
      }

      const modal = this.window.document.querySelector('#mesh-viewer')
      const modalBody = modal.querySelector('.modal-body')

      modal.style.display = 'block'
      modal.classList.add('show')

      modalBody.innerHTML = '<iframe src="' + target.getAttribute('href') + '"></iframe>'

      body.classList.add('modal-open')
      backdrop.style.display = 'block'

      modal.querySelector('.close').addEventListener('click', () => {
        modal.style.display = 'none'
        modal.classList.remove('show')
        body.classList.remove('modal-open')
        backdrop.style.display = 'none'
        modalBody.innerHTML = ''
      })
    })
  }
}

module.exports = MeshViewer