#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');
		}
	});
}