(function($){
	$.fn.resultColumnsEditor = function(options) {
		var opts = $.extend({}, $.fn.resultColumnsEditor.defaults, options);
		return this.each(function(){
			var $this = $(this).addClass("resultcolumnseditor");
			var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
			$("<div class='header ui-widget-header'></div>")
				.append($("<div class='fieldname'><div>").css({width:o.widths[0]+"px"}).text(o.label.fieldName))
				.appendTo($this);
			var $resultColumns = $("<ul></ul>").addClass("resultcolumns").appendTo($this).sortable({
				placeholder: "ui-state-highlight"
			});
			var $trash = $("<ul></ul>").addClass("trash").css({display:"none"}).appendTo($this);
			$this.append($("<span class='addresultcolumn'><span class='ui-icon ui-icon-newwin'></span>"+o.label.addResultColumn+"</span>").click(function(){
				addResultColumn(null);
			}));
			$this.append($("<span class='undoremove'>"+o.label.undoRemove+"</span>").click(function(){
				undoRemove();
			}));
			for (var i=0; i<o.resultcolumns.length; i++) {
				addResultColumn(o.resultcolumns[i]);
			};
			
			function addResultColumn(resultColumn) {
				$("<li></li>").addClass("ui-state-default")
					.data("id",resultColumn && resultColumn.id ? resultColumn.id : "")
					.data("name",resultColumn && resultColumn.name? resultColumn.name : o.fields[0].name)
					.append($("<div class='deleteicon ui-icon ui-icon-trash'></div>").attr("title", o.label.removeResultColumn).click(function(){
						moveToTrash($(this).parent("li"));
					}))
					.append($("<div class='dragicon ui-icon ui-icon-arrowthick-2-n-s'></div>").attr("title",o.label.dragToOrder))
					.append($("<div class='fieldname'></div>").css({width:o.widths[0]+"px"}).append(getFieldList(resultColumn && resultColumn.name? resultColumn.name : o.fields[0].name)))
					.appendTo($resultColumns).show("highlight");
			};
			
			function moveToTrash(resultColumnElement) {
				resultColumnElement.fadeOut("slow",function(){
					$(this).appendTo($trash);
				});
			};
			
			function undoRemove() {
				$trash.children(":last").appendTo($resultColumns).show("highlight");
			};
			
			function getFieldList(fieldName) {
				var fieldList = $("<select></select>");
				for (var i=0; i<o.fields.length; i++) {
					if (fieldName == o.fields[i].name) {
						fieldList.append($("<option></option>").text(o.fields[i].label).attr("value",o.fields[i].name).attr("selected","selected"));
					} else {
						fieldList.append($("<option></option>").text(o.fields[i].label).attr("value",o.fields[i].name));
					}
				}
				fieldList.change(function(){
					$(this).parents("li").data("name", $(this).val());
				});
				return fieldList;
			};

		});
	};
	$.fn.resultColumnsEditor.toJSON = function() {
		var returnValue = [];
		if (this.length > 0) {
			var $this = $(this[0]);
			$this.find(".resultcolumns li").each(function(i, conditionEle){
				returnValue.push({
					id:$(conditionEle).data("id"),
					name:$(conditionEle).data("name")
				});
			});
		}
		return JSON.stringify(returnValue);
	};
	$.fn.resultColumnsEditor.defaults = {
		widths:[180, 120, 100],
		label:{
			fieldName:"Field Name", 
			addResultColumn:"Add Result Column",
			removeResultColumn:"Remove Result Column",
			undoRemove:"Undo Remove",
			dragToOrder:"Drag to arrange the order of result columns"
		},
		resultcolumns :[],
		fields : []
	};
})(jQuery);