//= require jquery.ui.widget
//= require jquery.ui.sortable
//= require th-page-editor/column

(function($) {
	var BASIC_SPANS_SELECTOR = ".span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12";

	$.widget("th.pageeditorrow", {
		options: {
			editor: null
		},

		_create: function() {
			var self = this;
			this.columns().each(function() {
				$(this).pageeditorcolumn({ row: self });
			});
			this.enableColumnPlaceholders();
			this.updateToolbar();
		},

		spanwidth: function() {
			return this.options.editor.spanwidth();
		},

		updateToolbar: function() {
			if(this.hasContentColumns() && this.element.children(".hovertool").length == 0) {
				$("<span class=\"hovertool btn btn-mini\"><i class=icon-resize-vertical></i></span>").prependTo(this.element);
			}
		},

		columns: function() {
			var columns = this.element.children(BASIC_SPANS_SELECTOR);
			var self = this;
			columns.each(function() {
				$(this).pageeditorcolumn({ row: self });
			});
			return columns;
		},

		refreshColumnPlaceholders: function() {
			this.disableColumnPlaceholders();
			this.enableColumnPlaceholders();
		},

		createColumnPlaceholder: function(span, offset) {
			return $('<div class=column-add-placeholder></div>').pageeditorcolumn({ row: this, span: span, offset: offset });
		},

		unprepareColumnsSortable: function() {
			this.element.removeClass("ui-sortable");
			this.columns().each(function() {
				var $column = $(this);
				var $next = $column.next();
				if($next.length && $column.is(".column-add-placeholder") && $next.is(".column-add-placeholder")) {
					$next.pageeditorcolumn("span", $next.pageeditorcolumn("span") + $column.pageeditorcolumn("span"));
					$column.remove();
				}
			});
		},

		prepareColumnsSortable: function() {
			this.disableColumnPlaceholders();
			var $columns = this.columns();
			var spanwidth = this.spanwidth();
			if($columns.length == 0) {
				for(var x=0; x<spanwidth; x++) {
					this.createColumnPlaceholder(1).appendTo(this.element);
				}
			} else {
				var self = this;
				var columnsRemaining = spanwidth;
				$.each(this.columns(), function() {
					var offset = $(this).pageeditorcolumn("offset");
					columnsRemaining -= offset + $(this).pageeditorcolumn("span");
					if(offset > 0) {
						for(var x=0; x<offset; x++) {
							self.createColumnPlaceholder(1).insertBefore($(this));
						}
						$(this).pageeditorcolumn("offset", 0);
					}
				});
				if(columnsRemaining > 0) {
					for(var x=0; x<columnsRemaining; x++) {
						this.createColumnPlaceholder(1).appendTo(this.element);
					}
				}
			}

			var self = this;
			this.element.sortable({
				axis: "x",
				items: ">:not(.hovertool)",
				stop: function() {
					self.element.removeClass("ui-sortable-active");
					self.unprepareColumnsSortable();
				},
				start: function() {
					self.element.addClass("ui-sortable-active");
				}
			});
			this.element.addClass("ui-sortable");
			this._updatePlaceholderHeights();
		},

		disableColumnPlaceholders: function() {
			this.columns().filter(".column-add-placeholder").each(function() {
				$(this).next().pageeditorcolumn("offset", $(this).pageeditorcolumn("span"));
			}).remove();
		},

		enableColumnPlaceholders: function(enabled) {
			if(enabled === false) {
				this.disableColumnPlaceholders();
				return;
			}

			var $columns = this.columns();
			if($columns.length == 0) {
				this.createColumnPlaceholder(this.spanwidth()).appendTo(this.element);
			} else {
				var self = this;
				var columnsRemaining = this.spanwidth();
				$.each(this.columns(), function() {
					columnsRemaining -= $(this).pageeditorcolumn("offset") + $(this).pageeditorcolumn("span");
					if($(this).pageeditorcolumn("offset") > 0) {
						self.createColumnPlaceholder($(this).pageeditorcolumn("offset")).insertBefore($(this));
						$(this).pageeditorcolumn("offset", 0);
					}
				});
				if(columnsRemaining > 0) {
					this.createColumnPlaceholder(columnsRemaining).appendTo(this.element);
				}
			}
			this._updatePlaceholderHeights();
		},

		hasContentColumns: function() {
			return this.columns().filter(":not(.column-add-placeholder)").length;
		},

		destroy: function() {
			if(this.hasContentColumns()) {
				this.disableColumnPlaceholders();
				this.columns().each(function() {
					$(this).pageeditorcolumn("destroy");
				});
				this.element.find(".hovertool").remove();
			} else {
				this.element.remove();
			}
		},

		_updatePlaceholderHeights: function() {
			var $placeholders = this.columns().filter(".column-add-placeholder");
			$placeholders.height(60);
			$placeholders.height(this.element.height());
		}
	});
})(jQuery);