/t/upfront/scripts/upfront/upfront-media.js

Large files files are truncated, but you can click here to view the full file

(function ($, undefined) {



define([

    'scripts/upfront/upfront-media/insert-options-item-control',

	'scripts/perfect-scrollbar/perfect-scrollbar'

], function(InsertOptions, perfectScrollbar) {



	var MEDIA_SIZES = {

		FULL: "full",

		to_size: function (size) {

			return size.width + 'x' + size.height;

		}

	};



	var l10n = Upfront.Settings.l10n.media;



    var INSERT_OPTIONS = InsertOptions.INSERT_OPTIONS;



// ----- Models -----



	var MediaItem_Model = Backbone.Model.extend({

		defaults: {

			thumbnail: "<span class='upfront-image-upload-placeholder'></span>",

            insert_option: "image_insert"

		}

	});



	var MediaCollection_Model = Backbone.Collection.extend({

		defaults:{

			thumbnail: '',

			title: ''

		}

	});

	var MediaCollection_Selection = Backbone.Collection.extend({

		model: MediaItem_Model,

		initialize: function () {

			this.listenTo(Upfront.Events, "media_manager:media:labels_loaded", this.global_labels_loaded);

		},

		get_shared_labels: function () {

			var known_labels = ActiveFilters.get("label"),

				selected_labels = [],

				shared_labels = [],

				tmp_shared = {}

			;

			this.each(function (item) {

				var labels = item.get("labels") || [];

				labels = _.map(labels, function(each){ return parseInt(each, 10); });

				tmp_shared[item.get("ID")] = labels;

			});

			selected_labels = _.intersection.apply(this, _(tmp_shared).values());

			known_labels.each(function (label) {

				if (

					selected_labels.indexOf(label.get("value")) >= 0

					||

					selected_labels.indexOf(parseInt(label.get("value"), 10)) >= 0

				) shared_labels.push(label);

			});

			return shared_labels;

		},

		get_additional_sizes: function () {

			if (!ActiveFilters.multiple_sizes) return false; // Do not use multiple sizes if we're told not to

			var all_item_sizes = this.invoke("get", "additional_sizes"),

				item_sizes = []

			;

			_(all_item_sizes).each(function (item, idx) {

				var tmp_sizes = [];

				if (!idx) item_sizes = _(item).map(function (size) { return MEDIA_SIZES.to_size(size);});

				_(item).each(function (size) {

					tmp_sizes.push(MEDIA_SIZES.to_size(size));

				});

				item_sizes = _.intersection(item_sizes, tmp_sizes);

			});

			item_sizes.push(MEDIA_SIZES.FULL);

			return item_sizes;

		},

		is_used_label: function (label) {

			return (_(this.get_shared_labels()).invoke("get", "value").indexOf(label.get("value")) >= 0);

		},

		update_label_state: function (label) {

			return this.is_used_label(label)

				? this.disassociate_label(label)

				: this.associate_label(label)

			;

		},

		associate_label: function (label) {

			this._update_label('', label);

		},

		disassociate_label: function (label) {

			this._update_label('dis', label);

		},

		_update_label: function (pfx, label) {

			pfx = pfx || '';

			var me = this,

				idx = label.get("value"),

				data = {

					action: "upfront-media-" + pfx + "associate_label",

					term: idx,

					post_ids: this.invoke("get", "ID")

				}

			;

			Upfront.Util.post(data)

				.success(function (response) {

					me.each(function (model) {

						var labels = response.data[model.get("ID")];

						if (labels) model.set({labels: labels}, {silent: true});

					});

					me.trigger("change");

				})

			;

		},

		add_new_label: function (label) {

			var me = this,

				data = {

					"action": "upfront-media-add_label",

					"term": label,

					"post_ids": this.invoke("get", "ID")

				}

			;

			return Upfront.Util.post(data)

				.success(function (response) {

					me.each(function (model) {

						var labels = response.data[model.get("ID")];

						if (labels) model.set({labels: labels}, {silent: true});

					});

					Upfront.Events.trigger("media_manager:media:labels_updated");

					me.trigger("change");

				})

			;

		},

		delete_media_items: function () {

			var me = this,

				data = {

					"action": "upfront-media-remove_item",

					"post_ids": this.invoke("get", "ID")

				}

			;

			Upfront.Util.post(data)

				.success(function (response) {

					me.reset([]);

					Upfront.Events.trigger("media_manager:media:list", ActiveFilters);

				})

			;

		},

		// Same as delete_media_items except for theme/UI images.

		delete_theme_items: function () {

			var me = this,

				data = {

					"action": "upfront-media-remove_theme_item",

					// Theme images use file names rather than post IDs.

					"post_ids": this.invoke("get", "post_title")

				}

			;

			Upfront.Util.post(data)

				.success(function (response) {

					me.reset([]);

					Upfront.Events.trigger("media_manager:media:list", ActiveFilters);

				})

			;

		},

		global_labels_loaded: function () {

			this.trigger("change");

		}

	});



	var MediaFilter_Item = Backbone.Model.extend({

	});



	var MediaFilter_Collection = Backbone.Collection.extend({

		model: MediaFilter_Item

	});



	var ActiveMediaFilter_Collection = Backbone.Model.extend({

		CONST: {

			CUTOFF_SIZE: 8,

			CUTOFF_BIT: 3

		},

		labels_cache: false,

		default_media_types: ['images', 'videos', 'audios', 'other'],

		allowed_media_types: [],

		image_sizes: true,

		showing_titles: true,

		current_keys: [],

		current_models: [],

		current_page: 1,

		max_pages: 1,

		max_items: 1,

		media_limit: 60,

		current_filter_control: 0,

		initialize: function () {

			this.to_defaults();

			this.listenTo(Upfront.Events, "media_manager:media:filters_updated", this.update_active_filters);

			this.listenTo(Upfront.Events, "media_manager:media:labels_updated", this.reload_labels);

			this.listenTo(Upfront.Events, "media_manager:media:toggle_titles", this.toggle_titles);

		},

		to_defaults: function () {

			var types = new MediaFilter_Collection([]),

				has_all = (this.allowed_media_types.indexOf('other') >= 0)

			;

			if (!this.allowed_media_types.length) this.allowed_media_types = this.default_media_types;



			if (this.allowed_media_types.indexOf('images') >= 0) types.add(new MediaFilter_Item({filter: l10n.filter.images, value: 'images', state: !has_all}), {silent: true});

			if (this.allowed_media_types.indexOf('videos') >= 0) types.add(new MediaFilter_Item({filter: l10n.filter.videos, value: 'videos', state: !has_all}), {silent: true});

			if (this.allowed_media_types.indexOf('audios') >= 0) types.add(new MediaFilter_Item({filter: l10n.filter.audios, value: 'audios', state: !has_all}), {silent: true});

			if (this.allowed_media_types.indexOf('other') >= 0) types.add(new MediaFilter_Item({filter: l10n.filter.all, value: 'other', state: has_all}), {silent: true});



			this.set("type", types, {silent: true});



			this.set("recent", new MediaFilter_Collection([

				new MediaFilter_Item({filter: "5", value: 5, state: false}),

				new MediaFilter_Item({filter: "10", value: 10, state: false}),

				new MediaFilter_Item({filter: "20", value: 20, state: false}),

				new MediaFilter_Item({filter: "40", value: 40, state: false}),

				new MediaFilter_Item({filter: "100", value: 100, state: false})

			]), {silent: true});



			this.set("order", new MediaFilter_Collection([

				new MediaFilter_Item({filter: l10n.filter.newest, value: 'date_desc', state: true}),

				new MediaFilter_Item({filter: l10n.filter.oldest, value: 'date_asc', state: false}),

				new MediaFilter_Item({filter: l10n.filter.a_z, value: 'title_asc', state: false}),

				new MediaFilter_Item({filter: l10n.filter.z_a, value: 'title_desc', state: false})

			]), {silent: true});



			this.set({"search": new MediaFilter_Collection([])}, {silent: true});



			this.themeImages =false;

			this.current_page = 1;

			this.current_filter_control = 0;



			this.set_labels_to_defaults();

		},

		set_max_pages: function (max) {

			this.max_pages = !_.isUndefined(max) ? max : 1;

		},

		set_max_items: function (max) {

			this.max_items = !_.isUndefined(max) ? max : 1;

		},

		prev_page: function () {

			if (this.current_page > 1) return this.set_page(this.current_page-1);

		},

		next_page: function () {

			if (this.current_page < this.max_pages) return this.set_page(this.current_page+1);

		},

		set_page: function (page) {

			if (!page) return false;

			if (page >= 1 && page < this.max_pages) {

				if (page == this.current_page) return false; // Already here.

				this.current_page = page;

				return true;

			} else return false;

		},

		toggle_titles: function () {

			this.showing_titles = !this.showing_titles;

		},

		set_labels_to_defaults: function () {

			if (this.labels_cache) {

				var arr = [];

				_(this.labels_cache).each(function (item) {

					arr.push(new MediaFilter_Item({filter: item.name, value: item.term_id, state: false}));

				});

				this.set("label", new MediaFilter_Collection(arr), {silent: true});

				Upfront.Events.trigger("media_manager:media:labels_loaded");

			} else this.reload_labels();

		},

		reload_labels: function () {

			var me = this;

			Upfront.Util.post({action: "upfront-media-get_labels"})

				.success(function (response) {

					var arr = [];

					if (response.data) {

						me.labels_cache = response.data;

						me.set_labels_to_defaults();

					}

				})

			;

		},

		update_active_filters: function (filter, data) {

			if (!filter || !this.get(filter)) {

				this.to_defaults();

				Upfront.Events.trigger("media_manager:media:filters_reset");

			} else {

				var collection = data && data.get ? data.get(filter).toArray() : data,

					me = this.get(filter)

				;

				_(collection).each(function (item) {

					if (item.get("state")) {

						var has = me.where({filter: item.get("filter")});

						if (has.length) {

							has[0].set({state: item.get("state")}, {silent: true});

						}

					}

				});

				// Reset page to 1

				this.set_page(1);

			}

			Upfront.Events.trigger("media_manager:media:list", this);

		},

		to_request_json: function () {

			var data = {},

				me = this

			;

			_(this.attributes).each(function (collection, idx) {

				var active = me.get(idx).where({state:true});

				data[idx] = _(active).invoke("get", "value");

			});

			data.page = this.current_page;

			return data;

		},

		to_list: function () {

			var data = {},

				me = this

			;

			_(this.attributes).each(function (collection, idx) {

				var active = me.get(idx).where({state:true}),

					active_non_defaults = []

				;

				active_non_defaults = _(active).filter(function (filter) {

					var value = filter.get("value");

					return "other" !== value && "date_desc" !== value;

				});

				data[idx] = _(active_non_defaults).invoke("get", "filter");

			});

			return data;

		},

		has_upload: function () {

			if ( Upfront.Settings.Application.PERMS.UPLOAD ) {

				if (!this.themeImages) return true; // Allow when not looking into theme images

				return true === Upfront.plugins.isRequiredByPlugin('media filter upload');

			} else {

				return false; // disabling upload when user role has no permission

			}

		}

	});



	var ActiveFilters = new ActiveMediaFilter_Collection();



// ----- Views -----





	var MediaManager_Controls_View = Backbone.View.extend({

		className: "upfront-media-controls",

		is_search_active: false,

		initialize: function (args) {

			this.listenTo(Upfront.Events, "media:item:selection_changed", this.switch_controls);

			this.listenTo(Upfront.Events, "media:search:requested", this.switch_to_search);

			this.listenTo(Upfront.Events, "media_manager:load:done", this.render_filters);

            this.options = args.options;

		},

		render: function () {

			if (!this.options.show_insert) {

				this.$el.addClass('upfront-media-controls-no-insert');

			}

			this.render_filters();

		},

		render_filters: function () {

			if (this.search) this.search.remove();

			this.search = new MediaManager_SearchControl();

			if (this.control) this.control.remove();

			this.control = this.is_search_active ? new MediaManager_SearchFiltersControl() : new MediaManager_FiltersControl();

			this.search.render();

			this.control.render();

			this.$el.empty().append(this.search.$el).append(this.control.$el);

			if ( this.is_search_active ) this.$el.removeClass('upfront-media-controls-search-selected').addClass('upfront-media-controls-search');

			else this.$el.removeClass('upfront-media-controls-search');

		},

		render_media: function (selected) {

			var item_control = new MediaManager_ItemControl({model: new MediaCollection_Selection(selected), options: this.options});

			item_control.render();

			this.$el.empty();

			if (this.is_search_active) {

				this.control = new MediaManager_SearchFiltersControl();

				this.control.render();

				this.$el.append(this.control.$el);

				this.$el.removeClass('upfront-media-controls-search').addClass('upfront-media-controls-search-selected');

			}

			else

				this.$el.removeClass('upfront-media-controls-search-selected');

			this.$el.append(item_control.$el);

		},

		switch_controls: function (media_collection) {

			var positive = media_collection.where({selected: true});

			if (positive.length) this.render_media(positive);

			else this.render_filters();

		},

		switch_to_search: function (search) {

			this.is_search_active = search && search.get("state");

			//this.render_filters(); // This will be rendered later in another event to prevent double rendering in a row

		},

		remove: function() {

			if (this.control) this.control.remove();

			Backbone.View.prototype.remove.call(this);

		}

	});



	var MediaManager_AuxControls_View = Backbone.View.extend({

		className: "upfront-media-aux_controls",

		initialize: function () {

			this.listenTo(Upfront.Events, "media:item:selection_changed", this.switch_controls);

		},

		render: function () {

			//this.render_selection();

		},

		/*render_selection: function () {

			var selection_control = new MediaManager_SelectionControl({model: this.model});

			selection_control.render();

			this.$el.empty().append(selection_control.$el);

			this.$el.removeClass('upfront-media-aux_controls-has-select');

		},*/

		render_delete: function (selected) {

			var delete_control = new MediaManager_DeleteControl({model: new MediaCollection_Selection(selected)});

			delete_control.render();

			//this.render_selection();

			this.$el.empty().append(delete_control.$el);

			this.$el.addClass('upfront-media-aux_controls-has-select');

		},

		switch_controls: function (media_collection) {

			var positive = media_collection && media_collection.where ? media_collection.where({selected: true}) : [];

			if (positive.length) this.render_delete(positive);

			//else this.render_selection();

		}

	});



		var MediaManager_SelectionControl = Backbone.View.extend({

			className: "select_control_container",

			events: {

				"click a.none": "select_none",

				"click a.all": "select_all"

			},

			initialize: function () {

				this.display_values = [

					{label: '20', value: 20},

					{label: '40', value: 40},

					{label: '60', value: 60},

					{label: '80', value: 80},

					{label: '100', value: 100}

				];

			},

			render: function () {

				var me = this;

				me.$el.empty().append(l10n.select + ' <a href="#all" class="all">' + l10n.all + '</a>&nbsp;|&nbsp;<a href="#none" class="none">' + l10n.none + '</a>');



				me.select_display_field = new Upfront.Views.Editor.Field.Select({

					label: l10n.display+":",

					className: "upfront-field-wrap upfront-field-wrap-select upfront-filter_display_control",

					name: "display-selection",

					width: '70px',

					values: me.display_values,

					multiple: false,

					default_value: ActiveFilters.media_limit,

					change: function(){

						me.select_display(this.get_value());

					}

				});

				me.select_display_field.render();

				me.$el.append(me.select_display_field.$el);

			},

			select_display: function (limit) {

				ActiveFilters.media_limit = limit;

				Upfront.Events.trigger("media_manager:media:list", ActiveFilters);

			},

			select_none: function (e) {

				e.preventDefault();

				e.stopPropagation();



				var positive = this.model.where({selected: true});

				if ( positive.length ) {

					this.model.each(function (item) {

						item.set({selected: false}, {silent: true});

					});

					this.model.trigger("change");

					Upfront.Events.trigger("media:item:selection_changed", this.model);



					// run again to apply the new list

					var selected_model = new MediaCollection_Selection(ActiveFilters.current_models);

					Upfront.Events.trigger("media:item:selection_changed", selected_model);

				}

			},

			select_all: function (e) {

				e.preventDefault();

				e.stopPropagation();

				var all = [];

				this.model.each(function (item) {

					item.set({selected: true}, {silent: true});

					all.push(item);

				});

				this.model.trigger("change");

				Upfront.Events.trigger("media:item:selection_changed", this.model);



				// run again to apply the new list

				var selected_model = new MediaCollection_Selection(ActiveFilters.current_models);

				Upfront.Events.trigger("media:item:selection_changed", selected_model);

			}

		});

		var MediaManager_DeleteControl = Backbone.View.extend({

			className: "delete_control_container upfront-icon upfront-icon-trash",

			events: {

				click: "delete_selection"

			},

			render: function () {

				this.$el.empty().append('<a href="#delete">' + l10n.del_command + '</a>');

			},

			delete_selection: function (e) {

				e.preventDefault();

				e.stopPropagation();



				if ( confirm(l10n.confirm_delete_items) ) {

					var show_nag = false;

					this.model.each(function (item) {

						if (item.get("parent")) show_nag = true;

					});

					if (!show_nag || (show_nag && confirm(l10n.item_in_use_nag))) {

						ActiveFilters.current_keys = [];

						ActiveFilters.current_models = [];

						// If theme image, delete via proper deletion method.

						if (ActiveFilters.themeImages) {

							return this.model.delete_theme_items();

						}

						// Otherwise delete media item.

						return this.model.delete_media_items();

					}

				}

			}

		});



		var MediaManager_ItemControl = Backbone.View.extend({

			className: "upfront-item-control",

            options: {

                insert_options: false,

                hide_sizes: false

            },

			templates: {

				caption: _.template('<label class="upfront-field-label upfront-field-label-block">{{title}}</label>'),

				shared_label: _.template('<a href="#remove" class="upfront-icon upfront-icon-media-label-delete" data-idx="{{value}}">{{filter}}</a>'),

				additional_size: _.template('<option value="{{size}}">{{size}}</option>')

			},

			events: {

				//"change .change_title :text": "change_title",

				"click .existing_labels a": "drop_label"//,

				//"change .additional_sizes select": "select_size"

			},

			initialize: function ( opts ) {

				this.listenTo(this.model, "change", this.render);

                this.options = _.extend( this.options, opts.options );

			},

			render: function () {

				var self = this,

					sections = _([

						'size_hints',

						'change_title',

						'change_alt',

						'copy_url',

						//'existing_labels',

						'add_labels',

						'insert_options',

						'additional_sizes'

					]),

					renderers = _([

						'render_size_hint',

						'render_title',

						'render_alt',

						'render_copy_url',

						//'render_shared_labels',

						'render_labels_adding',

						'render_insert_options',

						'render_additional_sizes'

					]);



				// remove prev sections

				this.$el.empty();



				// if insert_options is false remove insert options section

				if( !this.options.insert_options ){

					sections = _( sections.reject(function(section){

						return section === "insert_options";

					}) );



					renderers =  _( renderers.reject(function(renderer){

						return renderer === "render_insert_options";

					}) );

				}



				if (_.indexOf(this.options.media_type, 'videos') !== -1) {

					sections = _( sections.reject(function(section){

						return section === "additional_sizes";

					}) );



					renderers =  _( renderers.reject(function(renderer){

						return renderer === "render_additional_sizes";

					}) );

				}



				// add sections

				sections.each(function(section){

					self.$el.append( '<div class="' + section +  '" />' );

				});



				// render sections

				renderers.each(function(renderer){

					self[renderer]();

				});



			},

			_find_gcd: function (a, b) {

				return (b == 0) ? a : this._find_gcd(b, a%b);

			},

			render_size_hint: function() {

				var me = this,

					$hub = this.$el.find('.size_hints'),

					sizeWidth,

					sizeHeight;



				$hub.empty();



				if(this.model.length === 1) {

					var image = this.model.at(0).get('image'),

						$container = $('<div class="upfront-size-hints upfront-field-wrap upfront-field-wrap-text"><label class="upfront-field-label upfront-field-label-block">'+ l10n.information +'</label></div>')

					;

					if ( image !== undefined ) {

						var iwidth = parseInt((image || {}).width, 10),

							iheight = parseInt((image || {}).height, 10),

							gcd = me._find_gcd(iwidth, iheight)

						;

						// Only render size hint if we're actually able to

						if (iwidth && iheight) {

							$container.append(

								'<span class="upfront-size-hint-ratio">' +

									(iwidth/gcd) +

								':' +

									(iheight/gcd) +

								'</span>'

							);

							$container.append(

								'<span class="upfront-size-hint-width">' +

									l10n.width_label +

								': <span>' +

									image.width + l10n.px_label +

								'</span></span>'

							);

							$container.append(

								'<span class="upfront-size-hint-height">' +

									l10n.height_label +

								': <span>' +

									image.height + l10n.px_label +

								'</span></span>'

							);

							$hub.append($container);

						}

					}

				}

			},

			render_alt: function () {

				var	me = this,

					$hub = this.$el.find(".change_alt"),

					image = this.model.at(0).get('image');





				$hub.empty();

				if (this.model.length === 1) {

					this.alt_field = new Upfront.Views.Editor.Field.Text({

						model: this.model.at(0),

						label: l10n.media_alt,

						name: 'alt',

						change: function(){

							me.change_alt();

						}

					});

					this.alt_field.render();

					$hub.append(this.alt_field.$el);

				}

			},

			render_title: function () {

				var	me = this,

					$hub = this.$el.find(".change_title")

				;

				$hub.empty();

				if (this.model.length > 1) {

					var files = '<span class="selected_files">' + l10n.files.replace(/%d/, this.model.length) + '</span>',

						shared_labels = this.model.get_shared_labels()

					;

					$hub.append('<label class="upfront-field-label upfront-field-label-block">'+ l10n.information +'</label>');

					$hub.append('<span class="selected_length">' + ( shared_labels.length > 0 ? l10n.selected.replace(/%s/, files) : l10n.selected_no_label.replace(/%s/, files) ) + '</span>');

				} else {

					this.title_field = new Upfront.Views.Editor.Field.Text({

						model: this.model.at(0),

						label: l10n.media_title,

						compact: true,

						name: 'post_title',

						change: function(){

							me.change_title();

						}

					});

					this.title_field.render();

					$hub.append(this.title_field.$el);

				}

			},

			render_copy_url: function () {

				var	$hub = this.$el.find(".copy_url");

				if (this.model.length > 1) return false;

				

				this.copy_url = new Upfront.Views.Editor.Field.Button({

					model: this.model.at(0),

					label: l10n.copy_url,

					compact: true,

					name: "document_url",

					on_click: function () {

						Upfront.Util.add_to_clipboard(this.model.get('document_url'));

					}

				});

				this.copy_url.render();

				$hub.append(this.copy_url.$el);

			},

			render_labels_adding: function () {

				var me = this,

					$hub = this.$el.find(".add_labels"),

					container = new MediaManager_ItemControl_LabelsContainer({model: this.model})

				;

				$hub.empty().append(this.templates.caption({title: l10n.media_labels}));

				container.render();

				$hub.append(container.$el);

				this.$el.on("click", function (e) {

					e.stopPropagation();

					container.trigger("filters:selection:click");

				});

			},

			render_shared_labels: function () {

				var me = this,

					$hub = this.$el.find(".existing_labels"),

					shared_labels = this.model.get_shared_labels(),

					title = (shared_labels.length > 1 ? l10n.current_labels : '')

				;

				$hub.empty()

					.append(this.templates.caption({title: title}))

				;

				_(shared_labels).each(function (label) {

					$hub.append(me.templates.shared_label(label.toJSON()));

				});

			},

			render_additional_sizes: function () {

				var me = this,

					$hub = this.$el.find(".additional_sizes"),

					additional_sizes = this.model.get_additional_sizes(),

					title = l10n.additional_sizes,

					sizes = []

					;

				$hub.empty();



				if( ( this.options.insert_options &&  this.model.at(0).get("insert_option") === INSERT_OPTIONS.wp_insert) || ( !this.options.hide_sizes  && !this.options.insert_options )    ) {

					if (!additional_sizes.length) return false;

					_(additional_sizes).each(function (size) {

						if (size === MEDIA_SIZES.FULL) return;

						sizes.push({ label: size, value: size });

					});

					this.size_field = new Upfront.Views.Editor.Field.Radios({

						model: this.model.at(0),

						name: 'selected_size',

						width: '100%',

						values: sizes,

						default_value: additional_sizes[0],

						change: function(){

							me.select_size();

						}

					});

					this.size_field.render();

					$hub.append(this.size_field.$el);

					this.size_field.$el.on("click", function (e) {

						e.stopPropagation();

					});

				}



			},

			select_size: function (e) {

				//e.stopPropagation();

				var size = this.size_field.get_value() || MEDIA_SIZES.FULL;

				this.model.each(function (model) {

					model.set({selected_size: size}, {silent: true});

				});

			},

			change_title: function (e) {

				//e.stopPropagation();

				var model = this.model.at(0);

				model.set({post_title: this.title_field.get_value()});

				var me = this,

					data = {

						action: "upfront-media-update_media_item",

						data: model.toJSON()

					}

				;

				Upfront.Util.post(data)

					.done(function () {

						model.trigger("change");

					})

				;

				model.trigger("appearance:update");

			},

			change_alt: function (e) {

				//e.stopPropagation();

				var model = this.model.at(0);

				model.set({alt: this.alt_field.get_value()});

				var me = this,

					data = {

						action: "upfront-media-update_media_item",

						data: model.toJSON()

					}

				;

				Upfront.Util.post(data)

					.done(function () {

						model.trigger("change");

					})

				;

				model.trigger("appearance:update");

			},

			drop_label: function (e) {

				e.preventDefault();

				e.stopPropagation();

				var $label = $(e.target),

					idx = $label.attr("data-idx"),

					shared = this.model.get_shared_labels(),

					label_idx = _(shared).invoke("get", "value").indexOf(idx),

					label = label_idx >= 0 && shared[label_idx] ? shared[label_idx] : false

				;

				if (label) this.model.update_label_state(label);

			},

            render_insert_options: function(){

                var $this_section = this.$(".insert_options"),

                    view = new InsertOptions.Options_Control( {model: this.model} );

                view.render();



                $this_section.html(view.el);

            }

		});



			var MediaManager_ItemControl_LabelsContainer = Backbone.View.extend({

				className: "upfront-additive_multiselection",

				selection: '',

				events: {

					"click .labels_filter": "stop_prop",

					"keyup .labels_filter :text.filter": "update_selection",

					"click .new_labels .toggle-add-label": "show_add_label",

					"click .new_labels .submit-label": "add_new_labels",

					"focus :text.filter": "add_focus_state",

					"blur :text.filter": "remove_focus_state",

					"keyup .new_labels :text.add-label": "enter_new_labels"

				},

				initialize: function () {

					this.listenTo(Upfront.Events, "media_manager:media:labels_updated", this.render);

					this._adding_label = false;

				},

				stop_prop: function (e) {

					e.stopPropagation();

					// Also let's focus the text field

					this.$el.find(":text.filter").focus();

				},

				add_focus_state: function (e) {

					this.$el.addClass('focus');

				},

				remove_focus_state: function (e) {

					this.$el.removeClass('focus');

				},

				render: function () {

					var sel = this.selection || '';

					this.$el.empty()

						.append('<div class="title">' + l10n.assigned_labels + '</div>')

						.append('<div class="labels_filter"><ul></ul><input type="text" class="filter upfront-field upfront-field-text" value="' + sel + '" placeholder="' + l10n.type_labels_pick + '" /></div>')

						.append('<div class="labels_list"><ul></ul></div>')

						.append('<div class="title">' + l10n.create_new_label + '</div>')

						.append('<div class="new_labels"><a class="toggle-add-label upfront-icon-control upfront-icon-label-add"></a><input type="text" class="add-label upfront-field upfront-field-text" placeholder="' + l10n.type_labels_add + '" /><a class="submit-label upfront-icon-control upfront-icon-label-add-alt"></a></div>')

					;

					this.render_existing_labels();

					this.render_labels();

				},

				render_existing_labels: function () {

					var me = this,

						$hub = this.$el.find("div.labels_filter ul"),

						count = 0

					;

					$hub.empty();

					

					_.each(this.model.get_shared_labels(), function (label) {

						var item = new MediaManager_ItemControl_LabelItem({model: label});

						item.media_items = me.model;

						item.render();

						$hub.append(item.$el);

						count++;

					});

					

					if (count > 0) {

						// Remove placeholder

						this.$el.find(".labels_filter :text.filter").attr('placeholder', '');

					}

				},

				render_labels: function () {

					var me = this,

						$hub = this.$el.find(".labels_list ul"),

						known_labels = ActiveFilters.get("label"),

						shared_labels = this.model.get_shared_labels(),

						has_selection = false,

						match = 0

					;

					$hub.empty();

					if (!this.selection) return false;

					

					known_labels.each(function (label) {

						if (me.model.is_used_label(label)) return;

						

						var item = new MediaManager_ItemControl_LabelItem({model: label});

						item.shared = shared_labels;

						item.media_items = me.model;

						item.selection = me.selection;

						item.render();

						if (item.matched) {

							$hub.append(item.$el);

							match++;

						}

					});

					if (match > 0) this.$el.addClass('has_match');

					else this.$el.removeClass('has_match');

				},

				update_selection: function (e) {

					e.preventDefault();

					e.stopPropagation();

					var $text = this.$el.find(".labels_filter :text.filter"),

						selection = $text.val()

					;

					this.selection = selection;



					this.render_labels();

				},

				show_add_label: function (e) {

					e.preventDefault();

					e.stopPropagation();

					var $hub = this.$el.find(".new_labels"),

						$text = this.$el.find(".new_labels :text.add-label")

					;

					$hub.addClass('active');

					$text.focus();

				},

				enter_new_labels: function (e) {

					if (e.which == 13) {

						this.add_new_labels();

					}

				},

				add_new_labels: function (e) {

					if (e) {

						e.preventDefault();

						e.stopPropagation();

					}

					if (this._adding_label) return;

					var me = this,

						$hub = this.$el.find(".new_labels"),

						$text = this.$el.find(".new_labels :text.add-label"),

						selection = $text.val()

					;

					this._adding_label = true;

					$text.attr('disabled', true);

					this.model.add_new_label(selection)

						.always(function(){

							me._adding_label = false;

							$text.val('').attr('disabled', false);

						})

						.fail(function(jqxhr){

							var response = jqxhr.responseJSON;

							if (response && response.error) {

								Upfront.Views.Editor.notify(response.error, 'error');

							}

						});

				}

			});



			var MediaManager_ItemControl_LabelItem = Backbone.View.extend({

				tagName: 'li',

				events: {

					click: "toggle_label_assignment"

				},

				render: function () {

					var me = this,

						is_used = this.media_items.is_used_label(this.model),

						used = _.template('<input type="checkbox" id="{{id}}" class="upfront-field-checkbox" value="{{value}}" checked />'),

						free = _.template('<input type="checkbox" id="{{id}}" class="upfront-field-checkbox" value="{{value}}" />'),

						label = _.template('<label for="{{id}}">{{name}}</label>'),

						name = this.model.get("filter") || '',

						match_rx = this.selection ? new RegExp('(' + this.selection + ')', 'i') : false,

						obj = this.model.toJSON()

					;

					this.matched = false;

					this.$el.empty();

					if (match_rx && !name.match(match_rx)) return false;

					this.matched = true;

					obj.id = this.cid;

					obj.name = name.replace(match_rx, '<span class="selection">$1</span>');

					this.$el

						.append(label(obj))

						.append((is_used ? used : free)(obj))

					;

				},

				toggle_label_assignment: function (e) {

					e.preventDefault();

					e.stopPropagation();

					this.media_items.update_label_state(this.model);

				}

			});



		var MediaManager_SearchFiltersControl = Backbone.View.extend({

			className: "upfront-search_filter-control",

			events: {

				"click a": "clear_search"

			},

			render: function () {

				var search = ActiveFilters.get("search").first(),

					obj = search.toJSON();

				obj.total = ActiveFilters.max_items;

				this.$el.empty().append(

					_.template(l10n.showing_total_results + ' <b class="search-text">{{value}}</b> <a href="#clear" class="clear_search">' + l10n.clear_search + '</a>', obj)

				);

			},

			clear_search: function (e) {

				e.preventDefault();

				e.stopPropagation();

				var search = new MediaFilter_Item({filter: false, value: false, state: false});

				ActiveFilters.set({search: new MediaFilter_Collection([search])});

				Upfront.Events.trigger("media_manager:media:list", ActiveFilters);

				Upfront.Events.trigger("media:search:requested", search);

			}

		});



		var MediaManager_FiltersControl = Backbone.View.extend({

			className: "upfront-filter-control",

			events: {

				"click": "stop_prop"

			},

			stop_prop: function (e) {

				e.stopPropagation();

				if (this.filter_selection) this.filter_selection.trigger("filters:outside_click");

			},

			initialize: function () {

				this.filter_selection = new MediaManager_FiltersSelectionControl();

				//this.filters_selected = new MediaManager_FiltersSelectedControl({model: ActiveFilters});

			},

			render: function () {

				this.filter_selection.render();

				//this.filters_selected.render();

				this.$el.empty()

					.append(this.filter_selection.$el)

					//.append(this.filters_selected.$el)

				;

			},

			toggle_titles: function (e) {

				e.stopPropagation();

				Upfront.Events.trigger("media_manager:media:toggle_titles");

			},

			remove: function() {

				this.filter_selection.remove();

				//this.filters_selected.remove();

				Backbone.View.prototype.remove.call(this);

			}

		});



		var MediaManager_FiltersSelectedControl = Backbone.View.extend({

			className: "upfront-filter_selected-control",

			events: {

				"click a.filter": "drop_filter",

				"click a.all_filters": "drop_all"

			},

			initialize: function () {

				this.listenTo(Upfront.Events, "media_manager:media:list", this.set_filters);

			},

			render: function () {

				this.$el.empty();

				var me = this,

					_list = _(this.model.to_list()),

					_to_render = _([]),

					tpl = _.template(' <a href="#" class="filter upfront-icon upfront-icon-media-label-delete" data-type="{{type}}" data-filter="{{filter}}">{{filter}}</a>')

				;



				_list.each(function (filters, type) {

					_(filters).each(function (filter) {

						_to_render.push({filter: filter, type: type});

					});

				});

				if (!_to_render.size()) return false; // Do not render the empty filter array (ie. only defaults)



				this.$el.append('<label class="upfront-field-label upfront-field-label-block">' + l10n.active_filters + '</label>');



				_to_render.each(function (item) {

					me.$el.append(tpl(item));

				});

				this.$el.append(" <a href='#' class='all_filters'>" + l10n.clear_all_filters + "</a>");

			},

			set_filters: function (filters) {

				this.model = filters;

				this.render();

			},

			drop_filter: function (e) {

				e.preventDefault();

				e.stopPropagation();

				var $el = $(e.target),

					all = this.model,

					type = $el.attr("data-type"),

					filter = $el.attr("data-filter")

				;

				if (type && all.get(type)) {

					var has = all.get(type).where({filter: filter});

					if (has && has.length) _(has).invoke("set", {state: false}, {silent: true});

				} else {

					_(this.model.attributes).each(function (collection, idx) {

						var has = all.get(idx).where({filter: filter});

						if (has.length) {

							type = idx;

							_(has).invoke("set", {state: false}, {silent: true});

						}

					});

				}

				Upfront.Events.trigger("media_manager:media:filters_updated", type, this.model);

			},

			drop_all: function (e) {

				e.preventDefault();

				e.stopPropagation();

				Upfront.Events.trigger("media_manager:media:filters_updated", false, false);

			}

		});



		var MediaManager_FiltersSelectionControl = Backbone.View.extend({

			className: "upfront-filter_selection-control clearfix",

			initialize: function () {

				this.controls = _([

					new Control_MediaType(),

					//new Control_MediaDate(),

					//new Control_MediaFileName(),

					//new Control_MediaRecent(),

					new Control_MediaLabels()

				]);

				this.on("filters:outside_click", function () {

					this.controls.each(function (ctrl) {

						ctrl.trigger("filters:selection:click");

					});

				}, this);

			},

			render: function () {

				var me = this,

					tpl = _.template("<li style='display:none'><a href='#' data-idx='{{idx}}'>{{name}}</a></li>"),

					values = []

				;

				this.controls.each(function (ctl, idx) {

					values.push({label: ctl.get_name(), value: idx});

				});



				this.$el.empty();



				this.$el.append('<div class="upfront-filter_control" />');

				this.$control = this.$el.find("div.upfront-filter_control");



				this.control_field = new Upfront.Views.Editor.Field.Radios({

					label: l10n.filter_label,

					name: "filter-selection",

					className: "upfront-field-wrap upfront-field-wrap-multiple upfront-field-wrap-radios upfront-filter_selection-tab",

					values: values,

					multiple: false,

					default_value: ActiveFilters.current_filter_control,

					change: function(){

						me.select_control(this.get_value());

					}

				});

				this.control_field.render();

				this.$el.prepend(this.control_field.$el);

				this.control_field.trigger('changed');

			},

			select_control: function (idx) {

				this.$control.empty();

				if ('false' === idx) return false;



				ActiveFilters.current_filter_control = idx;



				var control = this.controls.toArray()[idx];

				control.render();

				this.$control.append(control.$el);

				return false;

			},

			remove: function () {

				this.controls.each(function (ctrl) {

					ctrl.remove();

				});

				Backbone.View.prototype.remove.call(this);

			}

		});



		var Media_FilterSelection_Multiselection = Backbone.View.extend({

			tagName: "ul",

			get_name: function () {

				return this.filter_name;

			},

			initialize_model: function () {

				this.model = ActiveFilters.get(this.filter_type);

				this.listenTo(this.model, "change", this.apply_changes);

			},

			render: function () {

				var me = this;

				this.$el.empty();

				this.model.each(function (model) {

					if (me.allowed_values && me.allowed_values.indexOf(model.get("value")) < 0) return false;

					var item = new Media_FilterSelection_Multiselection_Item({model: model});

					item.render();

					me.$el.append(item.$el);

				});

			},

			apply_changes: function () {

				var data = {},

					values = []

				;

				data = this.model.where({state:true});

				Upfront.Events.trigger("media_manager:media:filters_updated", this.filter_type, data);

			},

			update_selection: function () {

				var active = ActiveFilters.get(this.filter_type);

				if (!active) {

					this.model.invoke("set", {state: false});

				} else {

					this.model.each(function (model) {

						var has = active.where({filter: model.get("filter"), state: true});

						model.set({state: !!has.length});

					});

				}

				this.render();

				return false;

			}

		});



		var Media_FilterSelection_AdditiveMultiselection = Media_FilterSelection_Multiselection.extend({

			tagName: "div",

			className: "upfront-additive_multiselection",

			events: {

				click: "stop_prop",

				"keyup :text.filter": "show_matching_labels",

				"focus :text.filter": "add_focus_state",

				"blur :text.filter": "remove_focus_state"

			},

			stop_prop: function (e) {

				e.stopPropagation();

				// Also let's focus the text field

				this.$el.find(":text.filter").focus();

			},

			add_focus_state: function (e) {

				this.$el.addClass('focus');

			},

			remove_focus_state: function (e) {

				this.$el.removeClass('focus');

			},

			render: function () {

				var me = this,

					sel = this.selection || ''

				;

				this.$el

					.empty()

					.append('<div class="title">' + l10n.filter_by_labels + '</div>')

					.append('<div class="labels_filter"><ul></ul><input type="text" class="filter upfront-field upfront-field-text" value="' + sel + '" placeholder="' + l10n.type_labels + '" /></div>')

					.append('<div class="labels_list"><ul></ul></div>')

				;

				this.render_filtered_items();

				this.render_items();

			},

			render_filtered_items: function () {

				var me = this,

					$hub = this.$el.find("div.labels_filter ul"),

					count = 0

				;

				$hub.empty();

				

				this.model.each(function (model) {

					if (me.allowed_values && me.allowed_values.indexOf(model.get("value")) < 0) return false;

					if (!model.get("state")) return false;

					var item = new Media_FilterSelection_AdditiveMultiselection_Item({model: model});

					item.render();

					$hub.append(item.$el);

					count++;

				});

				

				if (count > 0) {

					// Remove placeholder

					this.$el.find(":text.filter").attr('placeholder', '');

				}

			},

			render_items: function () {

				var me = this,

					$hub = this.$el.find("div.labels_list ul"),

					match = 0

				;

				$hub.empty();

				if (!this.selection) {

					this.$el.removeClass('has_match');

					return false;

				}

				//if (!this.$el.is(".active")) return false; // Only actually render this if we can see it - it takes *a while* to do so



				this.model.each(function (model) {

					if (me.allowed_values && me.allowed_values.indexOf(model.get("value")) < 0) return false;

					if (model.get("state")) return false;

					var item = new Media_FilterSelection_AdditiveMultiselection_Item({model: model});

					item.selection = me.selection;

					item.render();

					if (item.matched) {

						$hub.append(item.$el);

						match++;

					}

				});

				if (match > 0) this.$el.addClass('has_match');

				else this.$el.removeClass('has_match');

			},

			show_matching_labels: function (e) {

				var $text = this.$el.find(":text.filter"),

					selection = $text.val()

				;

				this.selection = selection;

				this.render_items();

			}

		});



		var Media_FilterSelection_Uniqueselection = Media_FilterSelection_Multiselection.extend({

			render: function () {

				var me = this;

				this.$el.empty();

				this.model.each(function (model) {

					if (me.allowed_values && me.allowed_values.indexOf(model.get("value")) < 0) return false;

					var item = new Media_FilterSelection_Uniqueselection_Item({model: model});

					item.render();

					me.$el.append(item.$el);

					me.listenTo(item, "model:unique_state:change", me.change_state);

				});

			},

			change_state: function (model) {

				this.model.each(function (item) {

					if (item.get("value") != model.get("value")) item.set({state: false}, {silent: true});

				});

				model.set({state: true}, {silent: true});

				this.apply_changes(model);

				this.render();

			}

		});



			var Media_FilterSelection_Multiselection_Item = Backbone.View.extend({

				tagName: "li",

				events: {

					"click": "on_click"

				},

				initialize: function () {

					this.listenTo(this.model, "change", this.render);

				},

				render: function () {

					var name = this.model.get("filter");

					if ("other" === this.model.get("value")) return false; // DO NOT RENDER "ALL", special case

					if (this.model.get("state")) name = '<b>' + name + '</b>';

					this.$el.empty().append(name);

				},

				on_click: function (e) {

					e.preventDefault();

					e.stopPropagation();

					this.model.set({state: !this.model.get("state")});

				}

			});



			var Media_FilterSelection_Uniqueselection_Item = Media_FilterSelection_Multiselection_Item.extend({

				on_click: function (e) {

					e.preventDefault();

					e.stopPropagation();

					this.model.set({state: !this.model.get("state")}, {silent: true});

					this.trigger("model:unique_state:change", this.model);

				}

			});



			var Media_FilterSelection_AdditiveMultiselection_Item = Media_FilterSelection_Multiselection_Item.extend({

				render: function () {

					var checked = _.template('<input type="checkbox" for="{{id}}" class="upfront-field-checkbox" name="{{filter}}" value="{{value}}" checked />'),

						unchecked = _.template('<input type="checkbox" for="{{id}}" class="upfront-field-checkbox" name="{{filter}}" value="{{value}}" />'),

						label = _.template('<label for="{{id}}">{{name}}</label>'),

						name = this.model.get("filter") || '',

						match_rx = this.selection ? new RegExp('(' + this.selection + ')', 'i') : false,

						obj = this.model.toJSON()

					;

					this.matched = false;

					this.$el.empty();

					if (match_rx && !name.match(match_rx)) return false;

					this.matched = true;

					obj.id = this.cid;

					obj.name = name.replace(match_rx, '<span class="selection">$1</span>');

					this.$el

						.append(label(obj))

						.append((this.model.get("state") ? checked : unchecked)(obj))

					;

				}

			});



		var Media_FilterCollection = Backbone.View.extend({

			render: function () {

				var me = this;

				this.$el.empty();

				this.model.each(function (model) {

					var item = new Media_FilterItem({model: model});

					item.render();

					me.$el.append(item.$el);

				});

			}

		});



			var Media_FilterItem = Backbone.View.extend({

				render: function () {

					this.$el.empty().append(this.model.get("filter"));

				}

			});



		var Control_MediaType = Media_FilterSelection_Uniqueselection.extend({

			initialize: function () {

				this.filter_name = l10n.by_type;

				this.filter_type = "type";

				this.initialize_model();

				this.listenTo(Upfront.Events, "media_manager:media:filters_updated", this.update_selection);

				this.listenTo(Upfront.Events, "media_manager:media:filters_reset", this.initialize_model);

			},

			render: function () {

				var me = this,

					values = [],

					has_all = (this.model.indexOf("other") >= 0)

				;

				this.$el.empty();

				this.model.each(function (model) {

					if (me.allowed_values && me.allowed_values.indexOf(model.get("value")) < 0) return false;

					values.push({label: model.get("filter"), value: model.get("value")});

				});

				this.select_field = new Upfront.Views.Editor.Field.Select({

					name: "filter-type",

					values: values,

					multiple: false,

					default_value: has_all ? "other" : this.model.findWhere({state: true}).get("value"),

					change: function(){

						var model = me.model.findWhere({value: this.get_value()});

						model.set({state: !model.get("state")}, {silent: true});

						me.change_state(model);

					}

				});

				this.select_field.render();

				this.$el.append(this.select_field.$el);

			},

			/*apply_changes: function (model) {

				return;

				var all = this.model.where({state: true}),

					other = this.model.where({value: 'other'}),

					edited = model.previousAttributes()

				;

				if (other.length) other = other[0]; // Do the model

				else return;



				if (edited && edited.value && "other" === edited.value) {

					var no_other = !!edited.state;

					this.model.each(function (mod) {

						mod.set({state: no_other}, {silent: true});

					});

					other.set({state: !no_other}, {silent: true});

				} else if (other.get("state")) other.set({state: false}, {silent: true});



				Media_FilterSelection_Uniqueselection.prototype.apply_changes.call(this);



			}*/

		});



		var Control_MediaFileName = Media_FilterSelection_Uniqueselection.extend({

			allowed_values: ['title_desc', 'title_asc'],

			initialize: function () {

				this.filter_name = l10n.file_name;

				this.filter_type = "order";

				this.initialize_model();

				this.listenTo(Upfront.Events, "media_manager:media:filters_updated", this.update_selection);

				this.listenTo(Upfront.Events, "media_manager:media:filters_reset", this.initialize_model);

			}

		});



		var Control_MediaLabels = Media_FilterSelection_AdditiveMultiselection.extend({

			initialize: func…