   (function($) {

       // Adding a new test to the jQuery support object
       $.support.fullscreen = supportFullScreen();

       // Creating the plugin
       $.fn.fullScreen = function(props) {

           if (!$.support.fullscreen || this.length != 1) {

               // The plugin can be called only
               // on one element at a time

               return this;
           }

           if (fullScreenStatus()) {
               // if we are already in fullscreen, exit
               cancelFullScreen();
               return this;
           }

           // You can potentially pas two arguments a color
           // for the background and a callback function

           var options = $.extend({
               'background': '#111',
               'callback': function() {}
           }, props);

           // This temporary div is the element that is
           // actually going to be enlarged in full screen

           var fs = $('<div>', {
               'css': {
                   'overflow-y': 'auto',
                   'background': options.background,
                   'width': '100%',
                   'height': '100%',
                   'align': 'center'
               }
           });

           var elem = this;

           // You can use the .fullScreen class to
           // apply styling to your element
           elem.addClass('fullScreen');

           // Inserting our element in the temporary
           // div, after which we zoom it in fullscreen
           fs.insertBefore(elem);
           fs.append(elem);
           requestFullScreen(fs.get(0));

           fs.click(function(e) {
               if (e.target == this) {
                   // If the black bar was clicked
                   cancelFullScreen();
               }
           });

           elem.cancel = function() {
               cancelFullScreen();
               return elem;
           };

           onFullScreenEvent(function(fullScreen) {

               if (!fullScreen) {

                   // We have exited full screen.
                   // Remove the class and destroy
                   // the temporary div

                   elem.removeClass('fullScreen').insertBefore(fs);
                   fs.remove();
               }

               // Calling the user supplied callback
               options.callback(fullScreen);
           });

           return elem;
       };


       // These helper functions available only to our plugin scope.


       function supportFullScreen() {
           var doc = document.documentElement;

           return ('requestFullscreen' in doc) ||
               ('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
               ('webkitRequestFullScreen' in doc);
       }

       function requestFullScreen(elem) {
           if (elem.requestFullscreen) {
               elem.requestFullscreen();
           } else if (elem.mozRequestFullScreen) {
               elem.mozRequestFullScreen();
           } else if (elem.webkitRequestFullScreen) {
               elem.webkitRequestFullScreen();
           }
       }

       function fullScreenStatus() {
           return document.fullscreen ||
               document.mozFullScreen ||
               document.webkitIsFullScreen;
       }

       function cancelFullScreen() {
           if (document.exitFullscreen) {
               document.exitFullscreen();
           } else if (document.mozCancelFullScreen) {
               document.mozCancelFullScreen();
           } else if (document.webkitCancelFullScreen) {
               document.webkitCancelFullScreen();
           }
       }

       function onFullScreenEvent(callback) {
           $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function() {
               // The full screen status is automatically
               // passed to our callback as an argument.
               callback(fullScreenStatus());
           });
       }

   })(jQuery);