/**

 * @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 || {};

themes.data = _wpThemeSettings;

l10n = themes.data.l10n;

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

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

themes.Model = Backbone.Model.extend({

	initialize: function() {

		var description;

		}

		this.set({

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

		});

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

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

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

			this.set({ description: description });

		}

	}

});

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

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

	window: $( window ),

	page: 0,

	initialize: function( options ) {

		_.bindAll( this, 'scroller' );

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

		// Bind to the scroll event and throttle

		this.window.bind( 'scroll', _.throttle( this.scroller, 300 ) );

	},

	render: function() {

		// Setup the main theme view

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

			collection: this.collection,

			parent: this

		});

		// Render search form.

		this.search();

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

		this.view.render();

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

	},

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

	// Search input and view

	search: function() {

		var view,

			self = this;

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

			return;

		}

		view = new this.SearchView({

			collection: self.collection,

			parent: this

		});

		self.SearchView = view;

		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

	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' );

		}

	}

});

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

themes.Collection = Backbone.Collection.extend({

	model: themes.Model,

	terms: '',

	// Controls searching on the current theme collection

	doSearch: function( value ) {

		if ( this.terms === value ) {

			return;

		}

		this.terms = value;

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

		if ( this.terms.length > 0 ) {

			this.search( this.terms );

		}

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

			this.reset( themes.data.themes );

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

		}

		this.trigger( 'themes:update' );

	},

	search: function( term ) {

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

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

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

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

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

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

		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

	paginate: function( instance ) {

		var collection = this;

		instance = instance || 0;

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

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

		return collection;

	},

	count: false,

	query: function( request ) {

		/**

		 * @static

		 * @type Array

		 */

		var queries = this.queries,

			self = this,

			query, isPaginated, count;

		// Store current query request args

		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' );

		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;

					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 ) {

					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

			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 );

		}

	},

	queries: [],

	currentQuery: {

		page: 1,

		request: {}

	},

	apiCall: function( request, paginated ) {

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

			data: {