How can I get this fullscreen HTML5 feature working in Firefox?

Question

I want to have a button that will launch fullscreen using the HTML5 fullscreen API. I gave some examples on the Internet to get the code below, but it only works on Safari / Chrome due to webkit specific prefixes. I want to use moz prefixes (and standard HTML5) to make this work in Firefox as well, but I'm not sure how to do this. Any tips?

HTML:

<div id="viewer">
     <a href="#" class="fullscreen">Exit/enter fullscreen mode</a>
</div>

JS:

$('.fullscreen').on('click', function(){
     var elem = document.getElementById('viewer');
     if (document.webkitFullscreenElement) {
          document.webkitCancelFullScreen();
     } else {
          elem.webkitRequestFullScreen();
     };
});

Answer 1

You can try something like this:

var cancelFullScreen = document.cancelFullScreen 
  || document.webkitCancelFullScreen
  || document.mozCancelFullScreen 
  || document.msCancelFullScreen;

var requestFullScreen = document.requestFullScreen 
  || document.webkitRequestFullScreen
  || document.mozRequestFullScreen 
  || document.msRequestFullScreen;

$('.fullscreen').on('click', function(){
  var elem = document.getElementById('viewer');
  var fullscreenElement = document.fullscreenElement 
    || document.webkitFullscreenElement
    || document.mozFullscreenElement 
    || document.msFullscreenElement;

  if (fullscreenElement) {
    cancelFullScreen.call(document);
  } else {
    requestFullScreen.call(document);
  };
});