/* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer, console, confirm */

	var Container, focus, normalizedTransitionendEventName, api = wp.customize;

	 * A notification that is displayed in a full-screen overlay.

	 * @since 4.9.0

	 * @class

	 * @augments wp.customize.Notification

	api.OverlayNotification = api.Notification.extend({

		/**

		 * Whether the notification should show a loading spinner.

		 *

		 * @since 4.9.0

		 * @var {boolean}

		 */

		loading: false,

		/**

		 * Initialize.

		 *

		 * @since 4.9.0

		 *

		 * @param {string} code - Code.

		 * @param {object} params - Params.

		 */

		initialize: function( code, params ) {

			var notification = this;

			api.Notification.prototype.initialize.call( notification, code, params );

			notification.containerClasses += ' notification-overlay';

			if ( notification.loading ) {

				notification.containerClasses += ' notification-loading';

			}

		},

		/**

		 * Render notification.

		 *

		 * @since 4.9.0

		 *

		 * @return {jQuery} Notification container.

		 */

		render: function() {

			var li = api.Notification.prototype.render.call( this );

			li.on( 'keydown', _.bind( this.handleEscape, this ) );

			return li;

		},

		/**

		 * Stop propagation on escape key presses, but also dismiss notification if it is dismissible.

		 *

		 * @since 4.9.0

		 *

		 * @param {jQuery.Event} event - Event.

		 * @returns {void}

		 */

		handleEscape: function( event ) {

			var notification = this;

			if ( 27 === event.which ) {

				event.stopPropagation();

				if ( notification.dismissible && notification.parent ) {

					notification.parent.remove( notification.code );

				}

	 * A collection of observable notifications.

	 *

	 * @since 4.9.0

	 * @class

	 * @augments wp.customize.Values

	 */

	api.Notifications = api.Values.extend({

		/**

		 * Whether the alternative style should be used.

		 *

		 * @since 4.9.0

		 * @type {boolean}

		 */

		alt: false,

		/**

		 * The default constructor for items of the collection.

		 *

		 * @since 4.9.0

		 * @type {object}

		 */

		defaultConstructor: api.Notification,

		/**

		 * Initialize notifications area.

		 *

		 * @since 4.9.0

		 * @constructor

		 * @param {object}  options - Options.

		 * @param {jQuery}  [options.container] - Container element for notifications. This can be injected later.

		 * @param {boolean} [options.alt] - Whether alternative style should be used when rendering notifications.

		 * @returns {void}

		 * @this {wp.customize.Notifications}

		 */

		initialize: function( options ) {

			var collection = this;

			api.Values.prototype.initialize.call( collection, options );

			_.bindAll( collection, 'constrainFocus' );

			// Keep track of the order in which the notifications were added for sorting purposes.

			collection._addedIncrement = 0;

			collection._addedOrder = {};

			// Trigger change event when notification is added or removed.

			collection.bind( 'add', function( notification ) {

				collection.trigger( 'change', notification );

			});

			collection.bind( 'removed', function( notification ) {

				collection.trigger( 'change', notification );

			});

		},

		/**

		 * Get the number of notifications added.

		 *

		 * @since 4.9.0

		 * @return {number} Count of notifications.

		 */

		count: function() {

			return _.size( this._value );

		},

		/**

		 * Add notification to the collection.

		 *

		 * @since 4.9.0

		 *

		 * @param {string|wp.customize.Notification} notification - Notification object to add. Alternatively code may be supplied, and in that case the second notificationObject argument must be supplied.

		 * @param {wp.customize.Notification} [notificationObject] - Notification to add when first argument is the code string.

		 * @returns {wp.customize.Notification} Added notification (or existing instance if it was already added).

		 */

		add: function( notification, notificationObject ) {

			var collection = this, code, instance;

			if ( 'string' === typeof notification ) {

				code = notification;

				instance = notificationObject;

			} else {

				code = notification.code;

				instance = notification;

			}

			if ( ! collection.has( code ) ) {

				collection._addedIncrement += 1;

				collection._addedOrder[ code ] = collection._addedIncrement;

			}

			return api.Values.prototype.add.call( collection, code, instance );

		},

		/**

		 * Add notification to the collection.

		 *

		 * @since 4.9.0

		 * @param {string} code - Notification code to remove.

		 * @return {api.Notification} Added instance (or existing instance if it was already added).

		 */

		remove: function( code ) {

			var collection = this;

			delete collection._addedOrder[ code ];

			return api.Values.prototype.remove.call( this, code );

		},

		/**

		 * Get list of notifications.

		 *

		 * Notifications may be sorted by type followed by added time.

		 *

		 * @since 4.9.0

		 * @param {object}  args - Args.

		 * @param {boolean} [args.sort=false] - Whether to return the notifications sorted.

		 * @return {Array.<wp.customize.Notification>} Notifications.

		 * @this {wp.customize.Notifications}

		 */

		get: function( args ) {

			var collection = this, notifications, errorTypePriorities, params;

			notifications = _.values( collection._value );

			params = _.extend(

				{ sort: false },

				args

			);

			if ( params.sort ) {

				errorTypePriorities = { error: 4, warning: 3, success: 2, info: 1 };

				notifications.sort( function( a, b ) {

					var aPriority = 0, bPriority = 0;

					if ( ! _.isUndefined( errorTypePriorities[ a.type ] ) ) {

						aPriority = errorTypePriorities[ a.type ];

					}

					if ( ! _.isUndefined( errorTypePriorities[ b.type ] ) ) {

						bPriority = errorTypePriorities[ b.type ];

					}

					if ( aPriority !== bPriority ) {

						return bPriority - aPriority; // Show errors first.

					}

					return collection._addedOrder[ b.code ] - collection._addedOrder[ a.code ]; // Show newer notifications higher.

				});

			}

			return notifications;

		},

		/**

		 * Render notifications area.

		 *

		 * @since 4.9.0

		 * @returns {void}

		 * @this {wp.customize.Notifications}

		 */

		render: function() {

			var collection = this,

				notifications, hadOverlayNotification = false, hasOverlayNotification, overlayNotifications = [],

				previousNotificationsByCode = {},

				listElement, focusableElements;

			// Short-circuit if there are no container to render into.

			if ( ! collection.container || ! collection.container.length ) {

				return;

			}

			notifications = collection.get( { sort: true } );

			collection.container.toggle( 0 !== notifications.length );

			// Short-circuit if there are no changes to the notifications.

			if ( collection.container.is( collection.previousContainer ) && _.isEqual( notifications, collection.previousNotifications ) ) {

				return;

			}

			// Make sure list is part of the container.

			listElement = collection.container.children( 'ul' ).first();

			if ( ! listElement.length ) {

				listElement = $( '<ul></ul>' );

				collection.container.append( listElement );

			}

			// Remove all notifications prior to re-rendering.

			listElement.find( '> [data-code]' ).remove();

			_.each( collection.previousNotifications, function( notification ) {

				previousNotificationsByCode[ notification.code ] = notification;

			});

			// Add all notifications in the sorted order.

			_.each( notifications, function( notification ) {

				var notificationContainer;

				if ( wp.a11y && ( ! previousNotificationsByCode[ notification.code ] || ! _.isEqual( notification.message, previousNotificationsByCode[ notification.code ].message ) ) ) {

					wp.a11y.speak( notification.message, 'assertive' );

				}

				notificationContainer = $( notification.render() );

				notification.container = notificationContainer;

				listElement.append( notificationContainer ); // @todo Consider slideDown() as enhancement.

				if ( notification.extended( api.OverlayNotification ) ) {

					overlayNotifications.push( notification );

				}

			});

			hasOverlayNotification = Boolean( overlayNotifications.length );

			if ( collection.previousNotifications ) {

				hadOverlayNotification = Boolean( _.find( collection.previousNotifications, function( notification ) {

					return notification.extended( api.OverlayNotification );

				} ) );

			}

			if ( hasOverlayNotification !== hadOverlayNotification ) {

				$( document.body ).toggleClass( 'customize-loading', hasOverlayNotification );

				collection.container.toggleClass( 'has-overlay-notifications', hasOverlayNotification );

				if ( hasOverlayNotification ) {

					collection.previousActiveElement = document.activeElement;

					$( document ).on( 'keydown', collection.constrainFocus );

				} else {

					$( document ).off( 'keydown', collection.constrainFocus );

				}

			}

			if ( hasOverlayNotification ) {

				collection.focusContainer = overlayNotifications[ overlayNotifications.length - 1 ].container;

				collection.focusContainer.prop( 'tabIndex', -1 );

				focusableElements = collection.focusContainer.find( ':focusable' );

				if ( focusableElements.length ) {

					focusableElements.first().focus();

				} else {

					collection.focusContainer.focus();

				}

			} else if ( collection.previousActiveElement ) {

				$( collection.previousActiveElement ).focus();

				collection.previousActiveElement = null;

			}

			collection.previousNotifications = notifications;

			collection.previousContainer = collection.container;

			collection.trigger( 'rendered' );

		},

		/**

		 * Constrain focus on focus container.

		 *

		 * @since 4.9.0

		 *

		 * @param {jQuery.Event} event - Event.

		 * @returns {void}

		 */

		constrainFocus: function constrainFocus( event ) {

			var collection = this, focusableElements;

			// Prevent keys from escaping.

			event.stopPropagation();

			if ( 9 !== event.which ) { // Tab key.

				return;

			}

			focusableElements = collection.focusContainer.find( ':focusable' );

			if ( 0 === focusableElements.length ) {

				focusableElements = collection.focusContainer;

			}

			if ( ! $.contains( collection.focusContainer[0], event.target ) || ! $.contains( collection.focusContainer[0], document.activeElement ) ) {

				event.preventDefault();

				focusableElements.first().focus();

			} else if ( focusableElements.last().is( event.target ) && ! event.shiftKey ) {

				event.preventDefault();

				focusableElements.first().focus();

			} else if ( focusableElements.first().is( event.target ) && event.shiftKey ) {

				event.preventDefault();

				focusableElements.last().focus();

			}

		}

	});

	/**

	 * A Customizer Setting.

	 *

	 * A setting is WordPress data (theme mod, option, menu, etc.) that the user can

	 * draft changes to in the Customizer.

	 *

	 * @see PHP class WP_Customize_Setting.

	 *

	 * @since 3.4.0

	 * @class

	 * @augments wp.customize.Value

	 * @augments wp.customize.Class

	api.Setting = api.Value.extend({

		/**

		 * Default params.

		 *

		 * @since 4.9.0

		 * @var {object}

		 */

		defaults: {

			transport: 'refresh',

			dirty: false

		},

		/**

		 * Initialize.

		 *

		 * @since 3.4.0

		 *

		 * @param {string}  id                          - The setting ID.

		 * @param {*}       value                       - The initial value of the setting.

		 * @param {object}  [options={}]                - Options.

		 * @param {string}  [options.transport=refresh] - The transport to use for previewing. Supports 'refresh' and 'postMessage'.

		 * @param {boolean} [options.dirty=false]       - Whether the setting should be considered initially dirty.

		 * @param {object}  [options.previewer]         - The Previewer instance to sync with. Defaults to wp.customize.previewer.

		 */

		initialize: function( id, value, options ) {

			var setting = this, params;

			params = _.extend(

				{ previewer: api.previewer },

				setting.defaults,

				options || {}

			);

			api.Value.prototype.initialize.call( setting, value, params );

			setting.id = id;

			setting._dirty = params.dirty; // The _dirty property is what the Customizer reads from.

			setting.notifications = new api.Notifications();

			// Whenever the setting's value changes, refresh the preview.

			setting.bind( setting.preview );

		},

		/**

		 * Refresh the preview, respective of the setting's refresh policy.

		 *

		 * If the preview hasn't sent a keep-alive message and is likely

		 * disconnected by having navigated to a non-allowed URL, then the

		 * refresh transport will be forced when postMessage is the transport.

		 * Note that postMessage does not throw an error when the recipient window

		 * fails to match the origin window, so using try/catch around the

		 * previewer.send() call to then fallback to refresh will not work.

		 *

		 * @since 3.4.0

		 * @access public

		 *

		 * @returns {void}

		 */

		preview: function() {

			var setting = this, transport;

			transport = setting.transport;

			if ( 'postMessage' === transport && ! api.state( 'previewerAlive' ).get() ) {

				transport = 'refresh';

			}

			if ( 'postMessage' === transport ) {

				setting.previewer.send( 'setting', [ setting.id, setting() ] );

			} else if ( 'refresh' === transport ) {

				setting.previewer.refresh();

			}

		},

		/**

		 * Find controls associated with this setting.

		 *

		 * @since 4.6.0

		 * @returns {wp.customize.Control[]} Controls associated with setting.

		 */

		findControls: function() {

			var setting = this, controls = [];

			api.control.each( function( control ) {

				_.each( control.settings, function( controlSetting ) {

					if ( controlSetting.id === setting.id ) {

						controls.push( control );

					}

				} );

			} );

			return controls;

		}

	});

	/**

	 * Current change count.

	 *

	 * @since 4.7.0

	 * @type {number}

	 * @protected

	 */

	api._latestRevision = 0;

	/**

	 * Last revision that was saved.

	 *

	 * @since 4.7.0

	 * @type {number}

	 * @protected

	 */

	api._lastSavedRevision = 0;

	/**

	 * Latest revisions associated with the updated setting.

	 *

	 * @since 4.7.0

	 * @type {object}

	 * @protected

	 */

	api._latestSettingRevisions = {};

	/*

	 * Keep track of the revision associated with each updated setting so that

	 * requestChangesetUpdate knows which dirty settings to include. Also, once

	 * ready is triggered and all initial settings have been added, increment

	 * revision for each newly-created initially-dirty setting so that it will

	 * also be included in changeset update requests.

	 */

	api.bind( 'change', function incrementChangedSettingRevision( setting ) {

		api._latestRevision += 1;

		api._latestSettingRevisions[ setting.id ] = api._latestRevision;

	} );

	api.bind( 'ready', function() {

		api.bind( 'add', function incrementCreatedSettingRevision( setting ) {

			if ( setting._dirty ) {

				api._latestRevision += 1;

				api._latestSettingRevisions[ setting.id ] = api._latestRevision;

			}

		} );

	} );

	/**