var EditorFactory = function() {
};

EditorFactory.prototype.createBaseEditor = function(label, id, required) {
	if (label == null) {
		label = "";
	}
	var containerBox = document.createElement("div");
	$(containerBox).addClass("containerBox");
	var boxHeader = document.createElement("div");
	var p = document.createElement("p");
	if (required == "true")
		label = label + "&nbsp &nbsp(required)";
	$(p).html(label);
	$(boxHeader).append(p);
	$(boxHeader).addClass("containerHeader")
	$(containerBox).append(boxHeader);
	var boxBody = document.createElement("div");
	$(boxBody).addClass("editor");
	$(boxBody).attr("id", id);
	$(containerBox).append(boxBody);
	return containerBox;
}
EditorFactory.prototype.createCheckBox = function(label, name, choices, id,
		value) {
	var div = this.createBaseEditor(label, id);
	$(div).children(".editor").attr("editorType", "checkBox");
	for (var i = 0; i < choices.length; i++) {
		var choice = this.createChoice(choices[i].value,
				choices[i].defaultValue, name);
		$(div).children(".editor").append(choice);
	}
	return div;

}
EditorFactory.prototype.createChoice = function(value, defaultValue, name,
		value) {

	var div = document.createElement("div");

	var input = document.createElement("input");
	$(input).attr("type", "checkbox");
	$(input).attr("name", name);
	if (defaultValue) {
		$(input).attr("checked", "checked");
	}

	$(div).append(input);
	var label = document.createElement("label");
	$(label).html(value);
	$(div).append(label);
	return div;
}

EditorFactory.prototype.createField = function(label, name, required, size, id, value) {
	var div = this.createBaseEditor(label, id, required);
	$(div).children(".editor").attr("editorType", "field");
	$(div).children(".editor").append(this.createFieldLine(size, name, required, value));
	return div;
}

EditorFactory.prototype.createMultiField = function(label, name, required, size, id,
		value) {
	var div = this.createBaseEditor(label, id, required);
	$(div).children(".editor").attr("editorType", "multiField");
	if (value != null) {
		var values = value.split(";");
		for (var i = 0; i < values.length; i++) {
			$(div).children(".editor").append(
					this.createFieldLine(size, name, required, values[i]));
		}
	}

	var editorFactory = this;
	var addFieldButton = document.createElement("button");
	$(addFieldButton).html("add")
	$(addFieldButton).attr("type", "submit");
	$(addFieldButton).click(
			{
				editorFactory : editorFactory
			},
			function(event) {
				event.preventDefault()
				$(event.data.editorFactory.createFieldLine(size, name))
						.insertBefore($(this));
			});
	var removeFieldButton = document.createElement("button");
	$(removeFieldButton).html("remove")
	$(removeFieldButton).attr("type", "submit");
	$(removeFieldButton).click(function(event) {
		event.preventDefault();
		$(this).parent().children(".field").last().remove();

	});
	$(div).children(".editor").append(addFieldButton).append(removeFieldButton);
	return div;
}

EditorFactory.prototype.createFieldLine = function(size, name, required, value) {
	var fieldDiv = document.createElement("div");
	$(fieldDiv).addClass("field");
	var fieldName = document.createElement("label");
	$(fieldName).html(name);
	var field = document.createElement("input");
	$(field).attr("type", "text");
	if(required == "true"){
		$(field).attr("required", "required");
	}
//	$(field).attr("maxlength", size);
	$(field).attr("value", value);
	$(fieldDiv).append(fieldName.outerHTML + field.outerHTML);
	return fieldDiv;
}
EditorFactory.prototype.createFile = function(label, name, required, size, id, value) {
	if (size == null || size <= 0) {
		size = 150;
	}

	var div = this.createBaseEditor(label, id,  required);
	$(div).children(".editor").attr("editorType", "file");
	var fileEditor = document.createElement("div");

	var fieldName = document.createElement("label");
	$(fieldName).html(name);
	var file = document.createElement("input");
	$(file).attr("type", "file");
	if(required == "true"){
		$(file).attr("required", "required");
	}
//	$(field).attr("maxlength", size);
	$(fileEditor).append(fieldName.outerHTML + file.outerHTML);
	$(div).children(".editor").append(fileEditor);
	return div;

}

EditorFactory.prototype.createTable = /**
 * @param label
 * @param name
 * @param cols
 * @param id
 * @param value
 * @returns
 */
function(label, name, required, cols, id, value) {
	
	var div = this.createBaseEditor(label, id, required);
	$(div).children(".editor").attr("editorType", "table");
	var headers = getHeaders(cols);

	$(div).children(".editor").append(createTable(cols, name, headers, value));

	var addButton = document.createElement("button");
	$(addButton).html("add");
	$(addButton).click(
			{
				headers : headers,
				fieldName : name
			},
			function(event) {
				event.preventDefault();
				$(this).parent().children("table").children("tbody").append(
						createTr(event.data.headers, event.data.fieldName, required));
			});
	var deleteButton = document.createElement("button");
	$(deleteButton).html("remove");
	$(deleteButton).click(
			function(event) {
				event.preventDefault();
				$(this).parent().children("table").children("tbody").children(
						"tr").last().remove();
			});
	$(div).children(".editor").append(addButton);
	$(div).children(".editor").append(deleteButton);
	return div;

	function getHeaders(col) {
		var headers = new Array();
//		headers.push("name:");
		if(col != null){
//			var cols = col.split(";");
			var cols = col.split("|");
			for (var i = 0; i < cols.length; i++) {
				headers.push(cols[i]);
			}
		}

		return headers;
	}

	function createTable(cols, name, headers, value) {
		value==null?value="":value;
		var values = value.split("|;");
		var table = document.createElement("table");
		var thead = document.createElement("thead");
		var tbody = document.createElement("tbody");
		$(thead).append(createHeader(headers));
		for (var i = 0; i < values.length; i++) {//this minus one because there is a "|;" in the end of value string
			$(tbody).append(createTr(headers, name, required, values[i]));
		}

		$(table).append(thead);
		$(table).append(tbody);
		return table;
	}

	function createHeader(headers) {

		var tr = document.createElement("tr");
		for (var i = 0; i < headers.length; i++) {
			var th = document.createElement("th");
			$(th).append(document.createTextNode(headers[i]));
			$(th).attr("style", "width:" + 100 / headers.length + "%")
			$(tr).append(th);

		}
		return tr;
	}
	function createTr(headers, name, required, value) {
		value == null? value="":value;
		var values = value.split("|");
		var tr = document.createElement("tr");
//		var td = document.createElement("td");
//		$(td).attr("style", "width:" + 100 / headers.length + "%")
//		$(td).html(name);
//		$(tr).append(td);
		for (var i = 0; i < headers.length; i++) {
			var input = document.createElement("input");
			$(input).attr("type", "text");
			$(input).attr("style","width:"+"90%");
			if(required == "true"){
				$(input).attr("required", "required");
			}
			if(values[i] != undefined){
				$(input).val(values[i].split("=")[1]);
			}
			var td = document.createElement("td");
			$(td).attr("style", "width:" + 100 / headers.length + "%")
			$(td).append(input);
			$(tr).append(td);
		}
		return tr;

	}

}
EditorFactory.prototype.createSelect = function(label, name, size, options, id,
		value) {

	if (size == null || size <= 0) {
		size = 150;
	}
	if (options == null || options.length <= 0) {
		information("no options in:" + name);
	}

	var div = this.createBaseEditor(label, id);
	$(div).children(".editor").attr("editorType", "select");
	var nameLabel = document.createElement("label");
	$(nameLabel).html(name);
	$(div).children(".editor").append(nameLabel);
	var select = document.createElement("select");
	$(select).attr("style", "width:" + size + "px");
	for (var i = 0; i < options.length; i++) {
		var option = document.createElement("option");
		$(option).attr("value", options[i]);
		$(option).html(options[i]);
		$(select).append(option);
	}
	$(div).children(".editor").append(select);
	return div;
}
EditorFactory.prototype.createDate = function(label, name, required, size, id, value) {

	if (size == null || size < 0) {
		size = 150
	}
	var div = this.createBaseEditor(label, id, required);
	$(div).children(".editor").attr("editorType", "date");
	var dateLabel = document.createElement("label");
	$(dateLabel).html(name);
	var date = document.createElement("input");
	$(date).attr("type", "date");
	if(required == "true"){
		$(date).attr("required", "required");
	}
	$(div).children(".editor").append(dateLabel);
	$(div).children(".editor").append(date);
	return div;
}
function createContainer(id, name) {

	var edtiorFactory = new EditorFactory();
	var div = document.createElement("div");
	$(div).attr("id", id);
	$(div).append(edtiorFactory.createMultiField("test", "name", 150, "test"));
	$(div).append(edtiorFactory.createFile("file", "file name", 150, "file"));
	$(div).append(
			edtiorFactory.createField("field", "field name", 150, "field"));
	$(div).append(
			edtiorFactory.createTable("table", "input", "td1|td1|td3", "id"));
	$(div).append(
			edtiorFactory.createSelect("select", "select", 150, [ 1, 2, 3 ],
					"oo"));
	$(div).append(edtiorFactory.createDate("date", "date", 150, "dateid"));
	return div;
}
