#fullscreen-button.btn.btn-info
  %i.fa.fa-expand

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #333;
}
.btn {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px;
  line-height: 72px;
  padding: 10px 20px;
  color: #ccc;
  background: #666;
  text-shadow: -1px -1px #333;
  
  &:hover {
    background: #999;
  }
}

var enterFullscreen = function(el) {
  if(el.requestFullscreen) {
    el.requestFullscreen();
  } else if(el.msRequestFullscreen) {
    el.msRequestFullscreen();
  } else if(el.mozRequestFullScreen) {
    el.mozRequestFullScreen();
  } else if(el.webkitRequestFullscreen) {
    el.webkitRequestFullscreen();
  } else {
    noFullscreenSupport();
  }
};

var exitFullscreen = function() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else {
    noFullscreenSupport();
  }
};

var noFullscreenSupport = function() {
  alert('Your browser does not support the Fullscreen API.');
};

var fullscreenButton = document.getElementById('fullscreen-button');
fullscreenButton.addEventListener('click', function(e) {
  e.preventDefault();
  if((window.innerWidth === screen.width && window.innerHeight === screen.height) || (window.fullScreen)) {
    exitFullscreen();
  } else {
    enterFullscreen(document.documentElement);
  } 
});

var eventList = ["fullscreenchange", "MSFullscreenChange", "mozfullscreenchange", "webkitfullscreenchange"];
for(event of eventList) {
  window.addEventListener(event, function() {
    if(fullscreenButton.querySelector('.fa').classList.contains('fa-compress')) {
      fullscreenButton.querySelector('.fa').classList.add('fa-expand');
      fullscreenButton.querySelector('.fa').classList.remove('fa-compress');
    } else if(fullscreenButton.querySelector('.fa').classList.contains('fa-expand')) {
      fullscreenButton.querySelector('.fa').classList.remove('fa-expand');
      fullscreenButton.querySelector('.fa').classList.add('fa-compress');
    }
  });
}