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 theme is already installed, set an attribute.

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

			this.set({ installed: 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

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

	},

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

		// 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: {

			// Request data

				request: _.extend({

				}, request)

			},

			beforeSend: function() {

				if ( ! paginated ) {

					// Spin it

					$( 'body' ).addClass( 'loading-content' ).removeClass( 'no-results' );

				}

			}

		});

	},

	// Static status controller for when we are loading themes.

	loadingThemes: false

});