/* global YT */

(function( window, settings ) {

	var NativeHandler, YouTubeHandler;

	/** @namespace wp */

	window.wp = window.wp || {};

	// Fail gracefully in unsupported browsers.

	if ( ! ( 'addEventListener' in window ) ) {

		return;

	}

	/**

	 * Trigger an event.

	 *

	 * @param {Element} target HTML element to dispatch the event on.

	 * @param {string} name Event name.

	 */

	function trigger( target, name ) {

		var evt;

		if ( 'function' === typeof window.Event ) {

			evt = new Event( name );

		} else {

			evt = document.createEvent( 'Event' );

			evt.initEvent( name, true, true );

		}

		target.dispatchEvent( evt );

	}

	/**

	 * Create a custom header instance.

	 *

	 * @memberOf wp

	 *

	 * @class

	 */

	function CustomHeader() {

		this.handlers = {

			nativeVideo: new NativeHandler(),

			youtube: new YouTubeHandler()

		};

	}

	CustomHeader.prototype = {

		/**

		 * Initalize the custom header.

		 *

		 * If the environment supports video, loops through registered handlers

		 * until one is found that can handle the video.

		 */

		initialize: function() {

			if ( this.supportsVideo() ) {

				for ( var id in this.handlers ) {

					var handler = this.handlers[ id ];

					if ( 'test' in handler && handler.test( settings ) ) {

						this.activeHandler = handler.initialize.call( handler, settings );

						// Dispatch custom event when the video is loaded.

						trigger( document, 'wp-custom-header-video-loaded' );

						break;

					}

				}

			}

		},

		/**

		 * Determines if the current environment supports video.

		 *

		 * Themes and plugins can override this method to change the criteria.

		 *

		 * @return {boolean}

		 */

		supportsVideo: function() {

			// Don't load video on small screens. @todo: consider bandwidth and other factors.

			if ( window.innerWidth < settings.minWidth || window.innerHeight < settings.minHeight ) {

				return false;

			}

			return true;

		},

		/**

		 * Base handler for custom handlers to extend.

		 *

		 * @type {BaseHandler}

		 */

		BaseVideoHandler: BaseHandler

	};

	/**

	 * Create a video handler instance.

	 *

	 * @memberOf wp

	 *

	 * @class

	 */

	function BaseHandler() {}

	BaseHandler.prototype = {

		/**

		 * Initialize the video handler.

		 *

		 * @param {object} settings Video settings.

		 */

		initialize: function( settings ) {

			var handler = this,

				button = document.createElement( 'button' );

			this.settings = settings;

			this.container = document.getElementById( 'wp-custom-header' );

			this.button = button;

			button.setAttribute( 'type', 'button' );

			button.setAttribute( 'id', 'wp-custom-header-video-button' );

			button.setAttribute( 'class', 'wp-custom-header-video-button wp-custom-header-video-play' );

			button.innerHTML = settings.l10n.play;

			// Toggle video playback when the button is clicked.

			button.addEventListener( 'click', function() {

				if ( handler.isPaused() ) {

					handler.play();

				} else {

					handler.pause();

				}

			});

			// Update the button class and text when the video state changes.

			this.container.addEventListener( 'play', function() {

				button.className = 'wp-custom-header-video-button wp-custom-header-video-play';

				button.innerHTML = settings.l10n.pause;

				if ( 'a11y' in window.wp ) {

					window.wp.a11y.speak( settings.l10n.playSpeak);

				}

			});

			this.container.addEventListener( 'pause', function() {

				button.className = 'wp-custom-header-video-button wp-custom-header-video-pause';

				button.innerHTML = settings.l10n.play;

				if ( 'a11y' in window.wp ) {

					window.wp.a11y.speak( settings.l10n.pauseSpeak);

				}

			});

			this.ready();

		},

		/**

		 * Ready method called after a handler is initialized.

		 *

		 * @abstract

		 */

		ready: function() {},

		/**

		 * Whether the video is paused.

		 *

		 * @abstract

		 * @return {boolean}

		 */

		isPaused: function() {},

		/**

		 * Pause the video.

		 *

		 * @abstract

		 */

		pause: function() {},

		/**

		 * Play the video.

		 *

		 * @abstract

		 */

		play: function() {},

		/**

		 * Append a video node to the header container.

		 *

		 * @param {Element} node HTML element.

		 */

		setVideo: function( node ) {

			var editShortcutNode,

				editShortcut = this.container.getElementsByClassName( 'customize-partial-edit-shortcut' );

			if ( editShortcut.length ) {

				editShortcutNode = this.container.removeChild( editShortcut[0] );

			}

			this.container.innerHTML = '';

			this.container.appendChild( node );

			if ( editShortcutNode ) {

				this.container.appendChild( editShortcutNode );

			}

		},

		/**

		 * Show the video controls.

		 *

		 * Appends a play/pause button to header container.

		 */

		showControls: function() {

			if ( ! this.container.contains( this.button ) ) {

				this.container.appendChild( this.button );

			}

		},

		/**

		 * Whether the handler can process a video.

		 *

		 * @abstract

		 * @param {object} settings Video settings.

		 * @return {boolean}

		 */

		test: function() {

			return false;

		},

		/**

		 * Trigger an event on the header container.

		 *

		 * @param {string} name Event name.

		 */

		trigger: function( name ) {

			trigger( this.container, name );

		}

	};

	/**

	 * Create a custom handler.

	 *

	 * @memberOf wp

	 *

	 * @param {object} protoProps Properties to apply to the prototype.

	 * @return CustomHandler The subclass.

	 */

	BaseHandler.extend = function( protoProps ) {

		var prop;

		function CustomHandler() {

			var result = BaseHandler.apply( this, arguments );

			return result;

		}

		CustomHandler.prototype = Object.create( BaseHandler.prototype );

		CustomHandler.prototype.constructor = CustomHandler;

		for ( prop in protoProps ) {

			CustomHandler.prototype[ prop ] = protoProps[ prop ];

		}

		return CustomHandler;

	};

	/**

	 * Native video handler.

	 *

	 * @memberOf wp

	 *

	 * @class

	 */

	NativeHandler = BaseHandler.extend(/** @lends wp.NativeHandler.prototype */{

		/**

		 * Whether the native handler supports a video.

		 *

		 * @param {object} settings Video settings.

		 * @return {boolean}

		 */

		test: function( settings ) {

			var video = document.createElement( 'video' );

			return video.canPlayType( settings.mimeType );

		},

		/**

		 * Set up a native video element.

		 */

		ready: function() {

			var handler = this,

				video = document.createElement( 'video' );

			video.id = 'wp-custom-header-video';

			video.autoplay = 'autoplay';

			video.loop = 'loop';

			video.muted = 'muted';

			video.width = this.settings.width;

			video.height = this.settings.height;

			video.addEventListener( 'play', function() {

				handler.trigger( 'play' );

			});

			video.addEventListener( 'pause', function() {

				handler.trigger( 'pause' );

			});

			video.addEventListener( 'canplay', function() {

				handler.showControls();

			});

			this.video = video;

			handler.setVideo( video );

			video.src = this.settings.videoUrl;

		},

		/**

		 * Whether the video is paused.

		 *

		 * @return {boolean}

		 */

		isPaused: function() {

			return this.video.paused;

		},

		/**

		 * Pause the video.

		 */

		pause: function() {

			this.video.pause();

		},

		/**

		 * Play the video.

		 */

		play: function() {

			this.video.play();

		}

	});

	/**

	 * YouTube video handler.

	 *

	 * @memberOf wp

	 *

	 * @class wp.YouTubeHandler

	 */

	YouTubeHandler = BaseHandler.extend(/** @lends wp.YouTubeHandler.prototype */{

		/**

		 * Whether the handler supports a video.

		 *

		 * @param {object} settings Video settings.

		 * @return {boolean}

		 */

		test: function( settings ) {

			return 'video/x-youtube' === settings.mimeType;

		},

		/**

		 * Set up a YouTube iframe.

		 *

		 * Loads the YouTube IFrame API if the 'YT' global doesn't exist.

		 */

		ready: function() {

			var handler = this;

			if ( 'YT' in window ) {

				YT.ready( handler.loadVideo.bind( handler ) );

			} else {

				var tag = document.createElement( 'script' );

				tag.src = 'https://www.youtube.com/iframe_api';

				tag.onload = function () {

					YT.ready( handler.loadVideo.bind( handler ) );

				};

				document.getElementsByTagName( 'head' )[0].appendChild( tag );

			}

		},

		/**

		 * Load a YouTube video.

		 */

		loadVideo: function() {

			var handler = this,

				video = document.createElement( 'div' ),

				// @link http://stackoverflow.com/a/27728417

				VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;

			video.id = 'wp-custom-header-video';

			handler.setVideo( video );

			handler.player = new YT.Player( video, {

				height: this.settings.height,

				width: this.settings.width,

				videoId: this.settings.videoUrl.match( VIDEO_ID_REGEX )[1],

				events: {

					onReady: function( e ) {

						e.target.mute();

						handler.showControls();

					},

					onStateChange: function( e ) {

						if ( YT.PlayerState.PLAYING === e.data ) {

							handler.trigger( 'play' );

						} else if ( YT.PlayerState.PAUSED === e.data ) {

							handler.trigger( 'pause' );

						} else if ( YT.PlayerState.ENDED === e.data ) {