var elem = document.getElementById("show-on-fullscreen-id");

document.getElementById("openFullscreenBtn")?.addEventListener("click", openFullscreen)
document.getElementById("closeFullscreenBtn")?.addEventListener("click", closeFullscreen)

document.querySelector(".qr-code-click-to-toggle")?.addEventListener("click", handleClickQRCode)

const fixedElement = document.querySelector('.stick-me');

function handleClickQRCode() {
  if (document.fullscreenElement) {
    closeFullscreen()
  }
  else {
    openFullscreen()
  }
}

function openFullscreen() {
  fixedElement.classList.remove("fixed-element")
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  document.querySelector(".toggle-fullscreen").classList.remove("show-on-fullscreen")
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}