jQuery: fullScreen [plugin]

more at: http://jsdo.it/okomeworld/81jo

by Marc Chehab

HTML

<div id="caution">
    <p>Your browser doesn't support fullscreen-API!</p>
</div>
<div id="one" class="contents">
    One
</div>
<div id="two" class="contents">
    Two
</div>
<button id="fullscreen">body-fullscreen</button>
<button href="#" id="two_fullscreen">element-fullscreen</button>

CSS

body {
    background-color:white;
}
div#caution {
    display:none;
}
div.contents {
    font-size:26px;
    width:260px;
    height:150px;
    line-height:150px;
    text-align:center;
    color:white;
    background-color:lightgray;
    margin:20px;
}

JavaScript

(function($) {
    $.fn.fullscreen = function() {
    		var exitFullscreen, isFullscreen;
        var goFullscreen = (function() {
            var prefixes = ['webkit', 'moz', 'ms'];
            for (var i = 0; i < prefixes.length; i++) {
                if ((new Image)[prefixes[i] + 'RequestFullScreen'] {
                		exitFullscreen = prefixes[i] + 'ExitFullscreen';
                    isFullscreen = prefixes[i] + 'FullscreenElement';
                    return prefixes[i] + 'RequestFullScreen';
                } else if ((new Image)'requestFullScreen') {
                		exitFullscreen = 'exitFullscreen';
                    isFullscreen = 'fullscreenElement';
                		return 'requestFullScreen';
                }
            }
            return false;
        })();
				if (goFullscreen && [isFullscreen]) {
        	document[exitFullscreen]();
        } else {
        	this[0][goFullscreen]();
        }
    };
})(jQuery);

$(function() {
    $('#fullscreen').click(function(e) {
        $('body').fullscreen();
        e.preventDefault();
    });
    $('#two_fullscreen').click(function(e) {
        $('#two').fullscreen();
        e.preventDefault();
    });
});