/* globals _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer */

	var Container, focus, api = wp.customize;

	/**

	 * @class

	 * @augments wp.customize.Value

	 * @augments wp.customize.Class

	 *

			this._dirty = options.dirty || false;

	/**

	 * Utility function namespace

	 */

	api.utils = {};

	/**

	 * Watch all changes to Value properties, and bubble changes to parent Values instance

	 *

	 * @since 4.1.0

	 *

	 * @param {wp.customize.Class} instance

	 * @param {Array}              properties  The names of the Value instances to watch.

	 */

	api.utils.bubbleChildValueChanges = function ( instance, properties ) {

		$.each( properties, function ( i, key ) {

			instance[ key ].bind( function ( to, from ) {

				if ( instance.parent && to !== from ) {

					instance.parent.trigger( 'change', instance );

				}

			} );

		} );

	};

	/**

	 * Expand a panel, section, or control and focus on the first focusable element.

	 *

	 * @since 4.1.0

	 *

	 * @param {Object}   [params]

	 * @param {Callback} [params.completeCallback]

	 */

	focus = function ( params ) {

		var construct, completeCallback, focus;

		construct = this;

		params = params || {};

		focus = function () {

			var focusContainer;

			if ( construct.extended( api.Panel ) && construct.expanded() ) {

				focusContainer = construct.container.find( '.control-panel-content:first' );

			} else {

				focusContainer = construct.container;

			}

			focusContainer.find( ':focusable:first' ).focus();

			focusContainer[0].scrollIntoView( true );

		};

		if ( params.completeCallback ) {

			completeCallback = params.completeCallback;

			params.completeCallback = function () {

				focus();

				completeCallback();

			};

		} else {

			params.completeCallback = focus;

		}

		if ( construct.expand ) {

			construct.expand( params );

		} else {

			params.completeCallback();

		}

	};

	/**

	 * Stable sort for Panels, Sections, and Controls.

	 *

	 * If a.priority() === b.priority(), then sort by their respective params.instanceNumber.

	 *

	 * @since 4.1.0

	 *

	 * @param {(wp.customize.Panel|wp.customize.Section|wp.customize.Control)} a

	 * @param {(wp.customize.Panel|wp.customize.Section|wp.customize.Control)} b

	 * @returns {Number}

	 */

	api.utils.prioritySort = function ( a, b ) {

		if ( a.priority() === b.priority() && typeof a.params.instanceNumber === 'number' && typeof b.params.instanceNumber === 'number' ) {

			return a.params.instanceNumber - b.params.instanceNumber;

		} else {

			return a.priority() - b.priority();

		}

	};

	/**

	 * Return whether the supplied Event object is for a keydown event but not the Enter key.

	 *

	 * @since 4.1.0

	 *

	 * @param {jQuery.Event} event

	 * @returns {boolean}

	 */

	api.utils.isKeydownButNotEnterEvent = function ( event ) {

		return ( 'keydown' === event.type && 13 !== event.which );

	};

	/**

	 * Return whether the two lists of elements are the same and are in the same order.

	 *

	 * @since 4.1.0

	 *

	 * @param {Array|jQuery} listA

	 * @param {Array|jQuery} listB

	 * @returns {boolean}

	 */

	api.utils.areElementListsEqual = function ( listA, listB ) {

		var equal = (

			listA.length === listB.length && // if lists are different lengths, then naturally they are not equal

			-1 === _.indexOf( _.map( // are there any false values in the list returned by map?

				_.zip( listA, listB ), // pair up each element between the two lists

				function ( pair ) {

					return $( pair[0] ).is( pair[1] ); // compare to see if each pair are equal

				}

			), false ) // check for presence of false in map's return value

		);

		return equal;

	};

	/**

	 * Base class for Panel and Section.

	 *

	 * @since 4.1.0

	 *

	 * @class

	 * @augments wp.customize.Class

	 */

	Container = api.Class.extend({

		defaultActiveArguments: { duration: 'fast', completeCallback: $.noop },

		defaultExpandedArguments: { duration: 'fast', completeCallback: $.noop },

		/**

		 * @since 4.1.0

		 *

		 * @param {String} id

		 * @param {Object} options

		 */

		initialize: function ( id, options ) {

			var container = this;

			container.id = id;

			container.params = {};

			$.extend( container, options || {} );

			container.container = $( container.params.content );

			container.deferred = {

				embedded: new $.Deferred()

			};

			container.priority = new api.Value();

			container.active = new api.Value();

			container.activeArgumentsQueue = [];

			container.expanded = new api.Value();

			container.expandedArgumentsQueue = [];

			container.active.bind( function ( active ) {

				var args = container.activeArgumentsQueue.shift();

				args = $.extend( {}, container.defaultActiveArguments, args );

				active = ( active && container.isContextuallyActive() );

				container.onChangeActive( active, args );

			});

			container.expanded.bind( function ( expanded ) {

				var args = container.expandedArgumentsQueue.shift();

				args = $.extend( {}, container.defaultExpandedArguments, args );

				container.onChangeExpanded( expanded, args );

			});

			container.attachEvents();

			api.utils.bubbleChildValueChanges( container, [ 'priority', 'active' ] );

			container.priority.set( isNaN( container.params.priority ) ? 100 : container.params.priority );

			container.active.set( container.params.active );

			container.expanded.set( false );

		},

		/**

		 * @since 4.1.0

		 *

		 * @abstract

		 */

		ready: function() {},

		/**

		 * Get the child models associated with this parent, sorting them by their priority Value.

		 *

		 * @since 4.1.0

		 *

		 * @param {String} parentType

		 * @param {String} childType

		 * @returns {Array}

		 */

		_children: function ( parentType, childType ) {

			var parent = this,

				children = [];

			api[ childType ].each( function ( child ) {

				if ( child[ parentType ].get() === parent.id ) {

					children.push( child );

				}

			} );

			children.sort( api.utils.prioritySort );

			return children;

		},

		/**

		 * To override by subclass, to return whether the container has active children.

		 *

		 * @since 4.1.0

		 *

		 * @abstract

		 */

		isContextuallyActive: function () {

			throw new Error( 'Container.isContextuallyActive() must be overridden in a subclass.' );

		},

		/**

		 * Handle changes to the active state.

		 *

		 * This does not change the active state, it merely handles the behavior

		 * for when it does change.

		 *

		 * To override by subclass, update the container's UI to reflect the provided active state.

		 *

		 * @since 4.1.0

		 *

		 * @param {Boolean} active

		 * @param {Object}  args

		 * @param {Object}  args.duration

		 * @param {Object}  args.completeCallback

		 */

		onChangeActive: function ( active, args ) {

			var duration = ( 'resolved' === api.previewer.deferred.active.state() ? args.duration : 0 );

			if ( ! $.contains( document, this.container ) ) {

				// jQuery.fn.slideUp is not hiding an element if it is not in the DOM

				this.container.toggle( active );

				if ( args.completeCallback ) {

					args.completeCallback();

				}

			} else if ( active ) {

				this.container.stop( true, true ).slideDown( duration, args.completeCallback );

			} else {

				this.container.stop( true, true ).slideUp( duration, args.completeCallback );

			}

		},

		/**

		 * @since 4.1.0

		 *

		 * @params {Boolean} active

		 * @param {Object}   [params]

		 * @returns {Boolean} false if state already applied

		 */

		_toggleActive: function ( active, params ) {

			var self = this;

			params = params || {};

			if ( ( active && this.active.get() ) || ( ! active && ! this.active.get() ) ) {

				params.unchanged = true;

				self.onChangeActive( self.active.get(), params );

				return false;

			} else {

				params.unchanged = false;

				this.activeArgumentsQueue.push( params );

				this.active.set( active );

				return true;

			}

		},

		/**

		 * @param {Object} [params]

		 * @returns {Boolean} false if already active

		 */

		activate: function ( params ) {

			return this._toggleActive( true, params );

		},

		/**

		 * @param {Object} [params]

		 * @returns {Boolean} false if already inactive

		 */

		deactivate: function ( params ) {

			return this._toggleActive( false, params );

		},

		/**

		 * To override by subclass, update the container's UI to reflect the provided active state.

		 * @abstract

		 */

		onChangeExpanded: function () {

			throw new Error( 'Must override with subclass.' );

		},

		/**

		 * @param {Boolean} expanded

		 * @param {Object} [params]

		 * @returns {Boolean} false if state already applied

		 */

		_toggleExpanded: function ( expanded, params ) {

			var self = this;

			params = params || {};

			var section = this, previousCompleteCallback = params.completeCallback;

			params.completeCallback = function () {

				if ( previousCompleteCallback ) {

					previousCompleteCallback.apply( section, arguments );

				}

				if ( expanded ) {

					section.container.trigger( 'expanded' );

				} else {

					section.container.trigger( 'collapsed' );

				}

			};

			if ( ( expanded && this.expanded.get() ) || ( ! expanded && ! this.expanded.get() ) ) {

				params.unchanged = true;

				self.onChangeExpanded( self.expanded.get(), params );

				return false;

			} else {

				params.unchanged = false;

				this.expandedArgumentsQueue.push( params );

				this.expanded.set( expanded );

				return true;

			}

		},

		/**

		 * @param {Object} [params]

		 * @returns {Boolean} false if already expanded

		 */

		expand: function ( params ) {

			return this._toggleExpanded( true, params );

		},