//= require jquery.ui.widget
//= require jquery.ui.resizable

$.widget("th.pageeditorcolumn", {
	options: {
		row: null,
		autoresize: false
	},

	_create: function() {
		if(this.options.span) this.span(this.options.span);
		if(this.options.offset) this.offset(this.options.offset);
		if(!this.isPlaceholder()) {
			if(this.element.find(".row").length) {
				this.convertToEditor();
			} else if(this.element.children("[data-link-banner-id]").length || this.element.find(">.offer-form").length || this.element.find(">#new_appointment_request").length) {
				var spanOffset = 0;
				if(this.element.find(">[data-link-banner-id]>.bloc-sub").length) {
					spanOffset = this.span() - 3;
				} else if(this.element.find(">[data-link-banner-id]>.bloc-main").length) {
					spanOffset = this.span() - 9;
				} else if(this.element.find(">.offer-form").length) {
  				spanOffset = this.span() - 7;
  			} else if(this.element.find(">#new_appointment_request").length) {
					spanOffset = this.span() - 9;
				}
				this.span(this.span() - spanOffset);

				// we're not sure if the next element is a valid editorcolumn yet, so we update its offset manually.
				if(spanOffset > 0 && this.element.next().length) {
					var $next = this.element.next();
					var match = null;
					if(match = $next.prop("className").match(/offset(\d+)/)) {
						$this.removeClass(match[0]).addClass("offset" + (parseInt(match[1])+spanOffset));
					}
				}

				this.enableSortable();
			} else {
				this.enableSortable();
				this.enableResize();
			}
		}
		var self = this;
		this.element.on("mousedown", function(e) {
			if(e.button == 0 && self.isPlaceholder()) {
				return false;
			}
		});
	},

	span: function(newSpan) {
		if(newSpan) {
			newSpan = Math.min(this.spanwidth(), Math.max(1, parseInt(newSpan)));
			this.element.prop("className", this.element.prop("className").replace(/span\d+/, ""));
			this.element.addClass("span"+newSpan);
		} else {
			var match = this.element.prop("className").match(/span(\d+)/);
			return match ? parseInt(match[1]) : 0;
		}
	},

	offset: function(newOffset) {
		if(newOffset != null) {
			newOffset = Math.min(this.spanwidth()-1, Math.max(0, parseInt(newOffset)));
			this.element.prop("className", this.element.prop("className").replace(/offset\d+/, ""));
			if(newOffset > 0) this.element.addClass("offset"+newOffset);
		} else {
			var match = this.element.prop("className").match(/offset(\d+)/);
			return match ? parseInt(match[1]) : 0;
		}
	},

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

	row: function() {
		return this.options.row.element;
	},

	isPlaceholder: function() {
		return this.element.is(".column-add-placeholder");
	},

	cleanval: function() {
		var $fonts = this.element.find("font");
		for(var i = $fonts.length-1; i>=0; i--) {
			$($fonts[i]).replaceWith($($fonts[i]).html());
		}
	},

	val: function(newValue) {
		if(newValue !== undefined) {
			var $content = $("<div></div>");
			$content.html(newValue);
			var $column = $("<div></div>").html(newValue).pageeditorcolumn({
				span: this.span(),
				offset: this.offset(),
				row: this.options.row
			});
			this.destroy();
			this.element.replaceWith($column);
			$column.closest(".row").pageeditorrow("updateToolbar");
		} else {
			var $content = this.element.clone();
			$content.find(".ui-resizable-handle, .hovertool").remove();
			return ""+$content.html();
		}
	},

	disableResize: function() {
		if(this.element.data("uiResizable")) {
			this.element.resizable("destroy");
		}
	},

	enableResize: function() {
		var self = this;
		this.element.resizable({
			grid: [100],
			handles: "e, w",
			start: function(_, ui) {
				self.row().pageeditorrow("disableColumnPlaceholders");
				ui.originalPosition.left = ui.position.left = self.offset()*100;
				ui.element.css("left", self.offset()*100);
				ui.element.css("margin-right", ui.position.left + (ui.originalPosition.left - ui.position.left) + (ui.originalSize.width - ui.size.width));
				self.offset(0);
			},
			resize: function(_, ui) {
				ui.element.css("margin-right", ui.position.left + (ui.originalPosition.left - ui.position.left) + (ui.originalSize.width - ui.size.width));
			},
			stop: function(_, ui) {
				var offset = Math.round(ui.position.left/100);
				if(offset < 0) {
					ui.size.width += offset*100;
					offset = 0;
				}
				self.offset(offset);
				self.span(Math.round(ui.size.width/100));

				var $next = self.element.next();
				if(!$next.pageeditorcolumn("isPlaceholder")) {
					$next.pageeditorcolumn("offset", $next.pageeditorcolumn("offset") + Math.round(((ui.originalPosition.left - ui.position.left) + (ui.originalSize.width - ui.size.width))/100));
				}

				$(this).removeAttr("style");
				self.row().pageeditorrow("enableColumnPlaceholders");
			}
		});
	},

	enableSortable: function() {
		var self = this;
		this.element.on("mousedown", function(e) {
			if(!$(e.target).closest(".hovertool").length && e.button == 0) {
				self.row().pageeditorrow("prepareColumnsSortable");
				var mouseupCallback = function() {
					setTimeout(function() {
						self.row().pageeditorrow("unprepareColumnsSortable");
					}, 0);
					$(window).off("mouseup", mouseupCallback);
				};
				$(window).on("mouseup", mouseupCallback);
			}
		});
	},

	convertToEditor: function() {
		if(!this.element.find(".row").length && !this.isPlaceholder()) {
			this.element.html("<div class=row><div class=span"+this.span()+">"+this.element.html()+"</div></div>");
		}
		this.element.removeClass("column-add-placeholder");
		this.element.removeAttr("style");
		if(this.element.data("uiResizable")) {
			this.element.resizable("destroy");
		}
		this.element.addClass("nested-editor").find(".hovertool").remove();
		this.asEditor = this.element.pageeditor($.extend({}, this.options.row.options.editor.options, { spanwidth: this.span() }));
	},

	destroy: function() {
		this.element.find(".hovertool").remove();
		this.element.find(".dummy").remove();
		this.disableResize();
		if(this.asEditor) {
			this.element.removeClass("nested-editor");
			this.asEditor.pageeditor("destroy");
			var $children = this.element.children(".row").children();
			if($children.length == 1) {
				this.element.replaceWith($children);
			}
		}
	}
});