/**
 * @name        jquery fullscreen plugin
 * @author      martin angelov, morten sjøgren
 * @version     1.2
 * @url         http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
 * @license     mit license
 */

/*jshint browser: true, jquery: true */
(function($){
	"use strict";

	// 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(element.allow_keyboard_input);
		}
	}

	function fullscreenstatus(){
		return document.fullscreen ||
				document.mozfullscreen ||
				document.webkitisfullscreen ||
				false;
	}

	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());
		});
	}

	// 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'        : $.noop( ),
			'fullscreenclass' : 'fullscreen'
		}, props),

		elem = this,

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

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

		// you can use the .fullscreen class to
		// apply styling to your element
		elem.addclass( options.fullscreenclass );

		// inserting our element in the temporary
		// div, after which we zoom it in fullscreen

		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.
			        // detach event listener
			        $(document).off( 'fullscreenchange mozfullscreenchange webkitfullscreenchange' );
				// remove the class and destroy
				// the temporary div

				elem.removeclass( options.fullscreenclass ).insertbefore(fs);
				fs.remove();
			}

			// calling the facultative user supplied callback
			if(options.callback) {
                            options.callback(fullscreen);
                        }
		});

		return elem;
	};

	$.fn.cancelfullscreen = function( ) {
			cancelfullscreen();

			return this;
	};
}(jquery));