////
// We need JS to help manage the two video modes: cinema and tall

const content = document.getElementById("content")!

export function initResize() {
  window.addEventListener("resize", resize)
  resize()
}

export function resize() {
  if (document.body.dataset.mode === "tall") {
    resizeTall()
  } else {
    resizeCinema()
  }
}

function resizeTall() {
  const scale = Math.min(1, window.innerWidth / 960)
  content.style.transformOrigin = 'top center'
  content.style.transform = `scaleX(${scale})`
}

function resizeCinema() {
  const scale = Math.min(
    window.innerWidth / 960,
    window.innerHeight / 540
  )

  content.style.transformOrigin = 'center center'
  content.style.transform = `scale(${scale})`
}