/**

 * @output wp-admin/js/theme.js

 */

/* global _wpThemeSettings, confirm, tb_position */

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

( function($) {

// Set up our namespace...

var themes, l10n;

themes = wp.themes = wp.themes || {};

// Store the theme data and settings for organized and quick access.

// themes.data.settings, themes.data.themes, themes.data.l10n.

themes.data = _wpThemeSettings;

l10n = themes.data.l10n;

// Shortcut for isInstall check.

themes.isInstall = !! themes.data.settings.isInstall;

// Setup app structure.

_.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });

themes.Model = Backbone.Model.extend({

	// Adds attributes to the default data coming through the .org themes api.

	// Map `id` to `slug` for shared code.

	initialize: function() {

		var description;

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

			// If the theme is already installed, set an attribute.

			if ( _.indexOf( themes.data.installedThemes, this.get( 'slug' ) ) !== -1 ) {

				this.set({ installed: true });

			}

			// If the theme is active, set an attribute.

			if ( themes.data.activeTheme === this.get( 'slug' ) ) {

				this.set({ active: true });

			}

		}

		// Set the attributes.

		this.set({

			// `slug` is for installation, `id` is for existing.

			id: this.get( 'slug' ) || this.get( 'id' )

		});

		// Map `section.description` to `description`

		// as the API sometimes returns it differently.

		if ( this.has( 'sections' ) ) {

			description = this.get( 'sections' ).description;

			this.set({ description: description });

		}

	}

});

// Main view controller for themes.php.

// Unifies and renders all available views.

themes.view.Appearance = wp.Backbone.View.extend({

	el: '#wpbody-content .wrap .theme-browser',

	window: $( window ),

	// Pagination instance.

	page: 0,

	// Sets up a throttler for binding to 'scroll'.

	initialize: function( options ) {

		// Scroller checks how far the scroll position is.

		_.bindAll( this, 'scroller' );

		this.SearchView = options.SearchView ? options.SearchView : themes.view.Search;

		// Bind to the scroll event and throttle

		// the results from this.scroller.

	},

	// Main render control.

	render: function() {

		// Setup the main theme view

		// with the current theme collection.

		this.view = new themes.view.Themes({

			collection: this.collection,

			parent: this

		});

		// Render search form.

		this.search();

		this.$el.removeClass( 'search-loading' );

		// Render and append.

		this.view.render();

		this.$el.empty().append( this.view.el ).addClass( 'rendered' );

	},

	// Defines search element container.

	searchContainer: $( '.search-form' ),

	// Search input and view

	// for current theme collection.

	search: function() {

		var view,

			self = this;

		// Don't render the search if there is only one theme.

		if ( themes.data.themes.length === 1 ) {

			return;

		}

		view = new this.SearchView({

			collection: self.collection,

			parent: this

		});

		self.SearchView = view;

		// Render and append after screen title.

		view.render();

		this.searchContainer

			.append( $.parseHTML( '<label class="screen-reader-text" for="wp-filter-search-input">' + l10n.search + '</label>' ) )

			.append( view.el )

			.on( 'submit', function( event ) {

				event.preventDefault();

			});

	},

	// Checks when the user gets close to the bottom

	// of the mage and triggers a theme:scroll event.

	scroller: function() {

		var self = this,

			bottom, threshold;

		bottom = this.window.scrollTop() + self.window.height();

		threshold = self.$el.offset().top + self.$el.outerHeight( false ) - self.window.height();

		threshold = Math.round( threshold * 0.9 );

		if ( bottom > threshold ) {

			this.trigger( 'theme:scroll' );

		}

	}

});

// Set up the Collection for our theme data.

// @has 'id' 'name' 'screenshot' 'author' 'authorURI' 'version' 'active' ...

themes.Collection = Backbone.Collection.extend({

	model: themes.Model,

	// Search terms.

	terms: '',

	// Controls searching on the current theme collection

	// and triggers an update event.

	doSearch: function( value ) {

		// Don't do anything if we've already done this search.

		// Useful because the Search handler fires multiple times per keystroke.

		if ( this.terms === value ) {

			return;

		}

		// Updates terms with the value passed.

		this.terms = value;

		// If we have terms, run a search...

		if ( this.terms.length > 0 ) {

			this.search( this.terms );

		}

		// If search is blank, show all themes.

		// Useful for resetting the views when you clean the input.

		if ( this.terms === '' ) {

			this.reset( themes.data.themes );

			$( 'body' ).removeClass( 'no-results' );

		}

		// Trigger a 'themes:update' event.

		this.trigger( 'themes:update' );

	},

	/**

	 * Performs a search within the collection.

	 *

	 * @uses RegExp

	 */

	search: function( term ) {

		var match, results, haystack, name, description, author;

		// Start with a full collection.

		this.reset( themes.data.themes, { silent: true } );

		// Trim the term.

		term = term.trim();

		// Escape the term string for RegExp meta characters.

		term = term.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' );

		// Consider spaces as word delimiters and match the whole string

		// so matching terms can be combined.

		term = term.replace( / /g, ')(?=.*' );

		match = new RegExp( '^(?=.*' + term + ').+', 'i' );

		// Find results.

		// _.filter() and .test().

		results = this.filter( function( data ) {

			name        = data.get( 'name' ).replace( /(<([^>]+)>)/ig, '' );

			description = data.get( 'description' ).replace( /(<([^>]+)>)/ig, '' );

			author      = data.get( 'author' ).replace( /(<([^>]+)>)/ig, '' );

			haystack = _.union( [ name, data.get( 'id' ), description, author, data.get( 'tags' ) ] );

			if ( match.test( data.get( 'author' ) ) && term.length > 2 ) {

				data.set( 'displayAuthor', true );

			}

			return match.test( haystack );

		});

		if ( results.length === 0 ) {

			this.trigger( 'query:empty' );

		} else {

			$( 'body' ).removeClass( 'no-results' );

		}

		this.reset( results );

	},

	// Paginates the collection with a helper method

	// that slices the collection.

	paginate: function( instance ) {

		var collection = this;

		instance = instance || 0;

		// Themes per instance are set at 20.

		collection = _( collection.rest( 20 * instance ) );

		collection = _( collection.first( 20 ) );

		return collection;

	},

	count: false,

	/*

	 * Handles requests for more themes and caches results.

	 *

	 *

	 * When we are missing a cache object we fire an apiCall()

	 * which triggers events of `query:success` or `query:fail`.

	 */

	query: function( request ) {

		/**

		 * @static

		 * @type Array

		 */

		var queries = this.queries,

			self = this,

			query, isPaginated, count;

		// Store current query request args

		// for later use with the event `theme:end`.

		this.currentQuery.request = request;

		// Search the query cache for matches.

		query = _.find( queries, function( query ) {

			return _.isEqual( query.request, request );

		});

		// If the request matches the stored currentQuery.request

		// it means we have a paginated request.

		isPaginated = _.has( request, 'page' );

		// Reset the internal api page counter for non-paginated queries.

		if ( ! isPaginated ) {

			this.currentQuery.page = 1;

		}

		// Otherwise, send a new API call and add it to the cache.

		if ( ! query && ! isPaginated ) {

			query = this.apiCall( request ).done( function( data ) {

				// Update the collection with the queried data.

				if ( data.themes ) {

					self.reset( data.themes );

					count = data.info.results;

					// Store the results and the query request.

					queries.push( { themes: data.themes, request: request, total: count } );

				}

				// Trigger a collection refresh event

				// and a `query:success` event with a `count` argument.

				self.trigger( 'themes:update' );

				self.trigger( 'query:success', count );

				if ( data.themes && data.themes.length === 0 ) {

					self.trigger( 'query:empty' );

				}

			}).fail( function() {

				self.trigger( 'query:fail' );

			});

		} else {

			// If it's a paginated request we need to fetch more themes...

			if ( isPaginated ) {

				return this.apiCall( request, isPaginated ).done( function( data ) {

					// Add the new themes to the current collection.

					// @todo Update counter.

					self.add( data.themes );

					self.trigger( 'query:success' );

					// We are done loading themes for now.

					self.loadingThemes = false;

				}).fail( function() {

					self.trigger( 'query:fail' );

				});

			}

			if ( query.themes.length === 0 ) {

				self.trigger( 'query:empty' );

			} else {

				$( 'body' ).removeClass( 'no-results' );

			}

			// Only trigger an update event since we already have the themes

			// on our cached object.

			if ( _.isNumber( query.total ) ) {

				this.count = query.total;

			}

			this.reset( query.themes );

			if ( ! query.total ) {

				this.count = this.length;

			}

			this.trigger( 'themes:update' );

			this.trigger( 'query:success', this.count );

		}

	},

	// Local cache array for API queries.

	queries: [],

	// Keep track of current query so we can handle pagination.

	currentQuery: {

		page: 1,

		request: {}

	},

	// Send request to api.wordpress.org/themes.

	apiCall: function( request, paginated ) {

		return wp.ajax.send( 'query-themes', {

			data: {