// page
const fullscreen = document.getElementById('fullscreen');
const fullscreenIcon = document.getElementById('fullscreen-icon');
const smallscreenIcon = document.getElementById('smallscreen-icon');
const elem = document.documentElement;

// Functions

function toggleFullscreen(event) {
  // check if the event is a keydown event or a click event
  if (event.type === 'keydown') {
    // check if the key pressed is '/' key
    if (event.key !== '/') return;
  }
  if (document.fullscreenElement) {
    closeFullscreen();  
  } else {
    openFullscreen();
  }
}

function openFullscreen() {
  smallscreenIcon.classList.toggle('hide');
  fullscreenIcon.classList.toggle('hide');
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  smallscreenIcon.classList.toggle('hide');
  fullscreenIcon.classList.toggle('hide');
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

// Listeners

fullscreen.addEventListener('click', toggleFullscreen);
document.addEventListener('keydown', toggleFullscreen);