/* MultiValueInputElement *************************************************************************/
function MultiValueInputElement(id, values, jsonInputID, addButtonID) {
	var _that = this;
	this.id = id;
	if (values && values instanceof Array) {
		this.values = values;
	} else {
		this.values = new Array();
	}
	if (jsonInputID) {
		this.jsonInputID = jsonInputID;
		$("#" + jsonInputID).val(JSON.stringify(_that.values));
	}
	if (addButtonID) {
		$("#" + addButtonID).click(function() {
			_that.addRow();
		});
	}
	
	this.redraw = function() {
		$("#" + this.id + " .datarow").remove();
		for (var i=0; i<this.values.length; i++) {
//			var j = 0 + i;
			var newDataRow = $("#" + this.id + " .template").clone().appendTo("#" + this.id).removeClass("template").addClass("datarow");
			newDataRow.index = "" + i;
			$(newDataRow).attr("rel", "" + i + ".row"	);

			// handle text field inputs
			$("input[type='text']", newDataRow).each(function(index) {
				var name = $(this).attr("name");
				$(this).val(_that.getValue(i, name));
				$(this).attr("name", "" + i + "." + name);
				$(this).change(function() {
					var name = $(this).attr("name");
					var myIndex = name.substring(0, name.indexOf(".", 0));
					name = name.substring(name.indexOf(".", 0) + 1);
//					alert("changing value in of " + myIndex);
					var value = $(this).val();
					if ($(this).hasClass("number")) {
						value = Number(value);
//						alert("number: "+value);
					}
					_that.setValue(value, myIndex, name);
					if (_that.jsonInputID) {
						$("#" + _that.jsonInputID).val(JSON.stringify(_that.values));
					}
				});
			});

			// handle select inputs
			$("select", newDataRow).each(function(index) {
				var name = $(this).attr("name");
				if ($("option[value='" + _that.getValue(i, name) + "']", this).size() == 1) {
					$("option:selected", this).removeAttr("selected");
					$("option[value='" + _that.getValue(i, name) + "']", this).attr("selected", "selected");
				}
				$(this).attr("name", "" + i + "." + $(this).attr("name"));
				$(this).change(function() {
					var name = $(this).attr("name");
					var myIndex = name.substring(0, name.indexOf(".", 0));
					name = name.substring(name.indexOf(".", 0) + 1);
					_that.setValue($("option:selected", this).val(), myIndex, name);
					if (_that.jsonInputID) {
						$("#" + _that.jsonInputID).val(JSON.stringify(_that.values));
					}
				});
			});
			// TODO: handle radio, checkbox and textarea inputs
			
			$(".button_delete", newDataRow).click(function() {
				var row = $(this).parents(".datarow", newDataRow).attr("rel");
				row = row.substring(0, row.indexOf(".", 0));
				_that.values.splice(row, 1); 
				_that.redraw();
				if (_that.jsonInputID) {
					$("#" + _that.jsonInputID).val(JSON.stringify(_that.values));
				}
			});
		}
	}
	
	this.getValue = function(rowNumber, name) {
		return this.values[rowNumber];
	}
	
	this.setValue = function(value, rowNumber, name) {
		this.values[rowNumber] = value;
	}
	
	this.addRow = function() {
		this.values.push(""); //[this.values.length] = "";
//		alert("values: " + this.values + " (" + this.values.length + ")");
		this.redraw();
	}	
	
}

/* MultiValueGridInputElement *********************************************************************/
function MultiValueGridInputElement(id, values, jsonInputID, addButtonID) {
	var _that = this;
	this.inheritFrom = MultiValueInputElement;
	this.inheritFrom(id, values, jsonInputID, addButtonID);

	this.getValue = function(rowNumber, name) {
		if (this.values && rowNumber < this.values.length && this.values[rowNumber]) {
			return this.values[rowNumber][name];
		} else {
			return null;
		}
	}

	this.setValue = function(value, rowNumber, name) {
		this.values[rowNumber][name] = value;
	}

	this.addRow = function() {
		this.values.push(new Object());
		this.redraw();
	}	

}