(function($){

	var media       = wp.media,

		Attachment  = media.model.Attachment,

		Attachments = media.model.Attachments,

		Query       = media.model.Query,

		l10n;

	// Link any localized strings.

	l10n = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n;

	// Link any settings.

	media.view.settings = l10n.settings || {};

	delete l10n.settings;

	// Copy the `post` setting over to the model settings.

	media.model.settings.post = media.view.settings.post;

	// Check if the browser supports CSS 3.0 transitions

	$.support.transition = (function(){

		var style = document.documentElement.style,

			transitions = {

				WebkitTransition: 'webkitTransitionEnd',

				MozTransition:    'transitionend',

				OTransition:      'oTransitionEnd otransitionend',

				transition:       'transitionend'

			}, transition;

		transition = _.find( _.keys( transitions ), function( transition ) {

			return ! _.isUndefined( style[ transition ] );

		});

		return transition && {

			end: transitions[ transition ]

		};

	}());

	// Makes it easier to bind events using transitions.

	media.transition = function( selector, sensitivity ) {

		var deferred = $.Deferred();

		sensitivity = sensitivity || 2000;

		if ( $.support.transition ) {

			if ( ! (selector instanceof $) )

				selector = $( selector );

			// Resolve the deferred when the first element finishes animating.

			selector.first().one( $.support.transition.end, deferred.resolve );

			// Just in case the event doesn't trigger, fire a callback.

			_.delay( deferred.resolve, sensitivity );

		// Otherwise, execute on the spot.

		} else {

			deferred.resolve();

		}

		return deferred.promise();

	};

	/**

	 * ========================================================================

	 * CONTROLLERS

	 * ========================================================================

	 */

	/**

	 * wp.media.controller.Region

	 */

	media.controller.Region = function( options ) {

		_.extend( this, _.pick( options || {}, 'id', 'view', 'selector' ) );

	};

	// Use Backbone's self-propagating `extend` inheritance method.

	media.controller.Region.extend = Backbone.Model.extend;

	_.extend( media.controller.Region.prototype, {

		mode: function( mode ) {

			if ( ! mode )

				return this._mode;

			// Bail if we're trying to change to the current mode.

			if ( mode === this._mode )

				return this;

			this.trigger('deactivate');

			this._mode = mode;

			this.render( mode );

			this.trigger('activate');

			return this;

		},

		render: function( mode ) {

			// If no mode is provided, just re-render the current mode.

			// If the provided mode isn't active, perform a full switch.

			if ( mode && mode !== this._mode )

				return this.mode( mode );

			var set = { view: null },

				view;

			this.trigger( 'create', set );

			view = set.view;

			this.trigger( 'render', view );

			if ( view )

				this.set( view );

			return this;

		},

		get: function() {

			return this.view.views.first( this.selector );

		},

		set: function( views, options ) {

			if ( options )

				options.add = false;

			return this.view.views.set( this.selector, views, options );

		},

		trigger: function( event ) {

			var base;

			if ( ! this._mode )

				return;

			var args = _.toArray( arguments );

			base = this.id + ':' + event;

			// Trigger `region:action:mode` event.

			args[0] = base + ':' + this._mode;

			this.view.trigger.apply( this.view, args );

			// Trigger `region:action` event.

			args[0] = base;

			this.view.trigger.apply( this.view, args );

			return this;

		}

	});

	/**

	 * wp.media.controller.StateMachine

	 */

	media.controller.StateMachine = function( states ) {

		this.states = new Backbone.Collection( states );

	};

	// Use Backbone's self-propagating `extend` inheritance method.

	media.controller.StateMachine.extend = Backbone.Model.extend;

	// Add events to the `StateMachine`.

	_.extend( media.controller.StateMachine.prototype, Backbone.Events, {

		// Fetch a state.

		//

		// If no `id` is provided, returns the active state.

		//

		// Implicitly creates states.

		state: function( id ) {

			// Ensure that the `states` collection exists so the `StateMachine`

			// can be used as a mixin.

			this.states = this.states || new Backbone.Collection();

			// Default to the active state.

			id = id || this._state;

			if ( id && ! this.states.get( id ) )

				this.states.add({ id: id });

			return this.states.get( id );

		},

		// Sets the active state.

		setState: function( id ) {

			var previous = this.state();

			// Bail if we're trying to select the current state, if we haven't

			// created the `states` collection, or are trying to select a state

			// that does not exist.

			if ( ( previous && id === previous.id ) || ! this.states || ! this.states.get( id ) )

				return this;

			if ( previous ) {

				previous.trigger('deactivate');

				this._lastState = previous.id;

			}

			this._state = id;

			this.state().trigger('activate');

			return this;

		},

		// Returns the previous active state.

		//

		// Call the `state()` method with no parameters to retrieve the current

		// active state.

		lastState: function() {

			if ( this._lastState )

				return this.state( this._lastState );

		}

	});

	// Map methods from the `states` collection to the `StateMachine` itself.

	_.each([ 'on', 'off', 'trigger' ], function( method ) {

		media.controller.StateMachine.prototype[ method ] = function() {

			// Ensure that the `states` collection exists so the `StateMachine`

			// can be used as a mixin.

			this.states = this.states || new Backbone.Collection();

			// Forward the method to the `states` collection.

			this.states[ method ].apply( this.states, arguments );

			return this;

		};

	});

	// wp.media.controller.State

	// ---------------------------

	media.controller.State = Backbone.Model.extend({

		constructor: function() {

			this.on( 'activate', this._preActivate, this );

			this.on( 'activate', this.activate, this );

			this.on( 'activate', this._postActivate, this );

			this.on( 'deactivate', this._deactivate, this );

			this.on( 'deactivate', this.deactivate, this );

			this.on( 'reset', this.reset, this );

			this.on( 'ready', this._ready, this );

			this.on( 'ready', this.ready, this );

			this.on( 'change:menu', this._updateMenu, this );

			Backbone.Model.apply( this, arguments );

		},

		ready: function() {},

		activate: function() {},

		deactivate: function() {},

		reset: function() {},

		_ready: function() {

			this._updateMenu();

		},

		_preActivate: function() {

			this.active = true;

		},

		_postActivate: function() {

			this.on( 'change:menu', this._menu, this );

			this.on( 'change:titleMode', this._title, this );

			this.on( 'change:content', this._content, this );

			this.on( 'change:toolbar', this._toolbar, this );

			this.frame.on( 'title:render:default', this._renderTitle, this );

			this._title();

			this._menu();

			this._toolbar();

			this._content();

			this._router();

		},

		_deactivate: function() {

			this.active = false;

			this.frame.off( 'title:render:default', this._renderTitle, this );

			this.off( 'change:menu', this._menu, this );

			this.off( 'change:titleMode', this._title, this );

			this.off( 'change:content', this._content, this );

			this.off( 'change:toolbar', this._toolbar, this );

		},

		_title: function() {

			this.frame.title.render( this.get('titleMode') || 'default' );

		},

		_renderTitle: function( view ) {

			view.$el.text( this.get('title') || '' );

		},

		_router: function() {

			var router = this.frame.router,

				mode = this.get('router'),

				view;

			this.frame.$el.toggleClass( 'hide-router', ! mode );

			if ( ! mode )

				return;

			this.frame.router.render( mode );

			view = router.get();

			if ( view && view.select )

				view.select( this.frame.content.mode() );

		},

		_menu: function() {

			var menu = this.frame.menu,

				mode = this.get('menu'),

				view;

			if ( ! mode )

				return;

			menu.mode( mode );

			view = menu.get();

			if ( view && view.select )

				view.select( this.id );

		},

		_updateMenu: function() {

			var previous = this.previous('menu'),

				menu = this.get('menu');

			if ( previous )

				this.frame.off( 'menu:render:' + previous, this._renderMenu, this );

			if ( menu )

				this.frame.on( 'menu:render:' + menu, this._renderMenu, this );

		},

		_renderMenu: function( view ) {

			var menuItem = this.get('menuItem'),

				title = this.get('title'),

				priority = this.get('priority');

			if ( ! menuItem && title ) {

				menuItem = { text: title };

				if ( priority )

					menuItem.priority = priority;

			}

			if ( ! menuItem )

				return;

			view.set( this.id, menuItem );

		}

	});

	_.each(['toolbar','content'], function( region ) {

		media.controller.State.prototype[ '_' + region ] = function() {

			var mode = this.get( region );

			if ( mode )

				this.frame[ region ].render( mode );

		};

	});

	// wp.media.controller.Library

	// ---------------------------

	media.controller.Library = media.controller.State.extend({

		defaults: {

			id:         'library',

			multiple:   false, // false, 'add', 'reset'

			describe:   false,

			toolbar:    'select',

			sidebar:    'settings',

			content:    'upload',

			router:     'browse',

			menu:       'default',

			searchable: true,

			filterable: false,

			sortable:   true,

			title:      l10n.mediaLibraryTitle,

			// Uses a user setting to override the content mode.

			contentUserSetting: true,

			// Sync the selection from the last state when 'multiple' matches.

			syncSelection: true

		},

		initialize: function() {

			var selection = this.get('selection'),

				props;

			// If a library isn't provided, query all media items.

			if ( ! this.get('library') )

				this.set( 'library', media.query() );

			// If a selection instance isn't provided, create one.

			if ( ! (selection instanceof media.model.Selection) ) {

				props = selection;

				if ( ! props ) {

					props = this.get('library').props.toJSON();

					props = _.omit( props, 'orderby', 'query' );

				}

				// If the `selection` attribute is set to an object,

				// it will use those values as the selection instance's

				// `props` model. Otherwise, it will copy the library's

				// `props` model.

				this.set( 'selection', new media.model.Selection( null, {

					multiple: this.get('multiple'),

					props: props

				}) );

			}

			if ( ! this.get('edge') )

				this.set( 'edge', 120 );

			if ( ! this.get('gutter') )

				this.set( 'gutter', 8 );

			this.resetDisplays();

		},

		activate: function() {

			this.syncSelection();

			wp.Uploader.queue.on( 'add', this.uploading, this );

			this.get('selection').on( 'add remove reset', this.refreshContent, this );

			this.on( 'insert', this._insertDisplaySettings, this );

			if ( this.get('contentUserSetting') ) {

				this.frame.on( 'content:activate', this.saveContentMode, this );

				this.set( 'content', getUserSetting( 'libraryContent', this.get('content') ) );

			}

		},

		deactivate: function() {

			this.recordSelection();

			this.frame.off( 'content:activate', this.saveContentMode, this );

			// Unbind all event handlers that use this state as the context

			// from the selection.

			this.get('selection').off( null, null, this );

			wp.Uploader.queue.off( null, null, this );

		},

		reset: function() {

			this.get('selection').reset();

			this.resetDisplays();

			this.refreshContent();

		},

		resetDisplays: function() {

			this._displays = [];

			this._defaultDisplaySettings = {

				align: getUserSetting( 'align', 'none' ),

				size:  getUserSetting( 'imgsize', 'medium' ),

				link:  getUserSetting( 'urlbutton', 'post' )

			};

		},

		display: function( attachment ) {

			var displays = this._displays;

			if ( ! displays[ attachment.cid ] )

				displays[ attachment.cid ] = new Backbone.Model( this._defaultDisplaySettings );

			return displays[ attachment.cid ];

		},

		_insertDisplaySettings: function() {

			var selection = this.get('selection'),

				display;

			// If inserting one image, set those display properties as the

			// default user setting.

			if ( selection.length !== 1 )

				return;

			display = this.display( selection.first() ).toJSON();

			setUserSetting( 'align', display.align );

			setUserSetting( 'imgsize', display.size );

			setUserSetting( 'urlbutton', display.link );

		},

		syncSelection: function() {

			var selection = this.get('selection'),

				manager = this.frame._selection;

			if ( ! this.get('syncSelection') || ! manager || ! selection )

				return;

			// If the selection supports multiple items, validate the stored

			// attachments based on the new selection's conditions. Record

			// the attachments that are not included; we'll maintain a

			// reference to those. Other attachments are considered in flux.

			if ( selection.multiple ) {

				selection.reset( [], { silent: true });

				selection.validateAll( manager.attachments );

				manager.difference = _.difference( manager.attachments.models, selection.models );

			}

			// Sync the selection's single item with the master.

			selection.single( manager.single );

		},

		recordSelection: function() {

			var selection = this.get('selection'),

				manager = this.frame._selection,

				filtered;

			if ( ! this.get('syncSelection') || ! manager || ! selection )

				return;

			// Record the currently active attachments, which is a combination

			// of the selection's attachments and the set of selected

			// attachments that this specific selection considered invalid.

			// Reset the difference and record the single attachment.

			if ( selection.multiple ) {

				manager.attachments.reset( selection.toArray().concat( manager.difference ) );

				manager.difference = [];

			} else {

				manager.attachments.add( selection.toArray() );

			}

			manager.single = selection._single;

		},

		refreshContent: function() {

			var selection = this.get('selection'),

				frame = this.frame,

				router = frame.router.get(),

				mode = frame.content.mode();

			if ( this.active && ! selection.length && ! router.get( mode ) )

				this.frame.content.render( this.get('content') );

		},

		uploading: function( attachment ) {