/*Java Script inline Edit API

InlineEditAPI.setupInlineEdit (elementID, [options], [groupID]);
InlineEditAPI.setupInlineEditBySearch (elementSearchQuery, [options], [groupID]);
InlineEditAPI.getValues ([groupID]);
InlineEditAPI.isChanged ([groupID]);
InlineEditAPI.resetChangeFlags ([groupID]);
InlineEditAPI.addChangeEvent (changeEvent, [groupID]);

// make sure to include an id att. to each tag that you want to inline edit.*/

/*Example Usesage :

	InlineEditAPI.setupInlineEditBySearch(\"td.flx span\");
	InlineEditAPI.addChangeEvent(function() {print_r(InlineEditAPI.getValues());});
*/

try
{
// Edit Control:
var InlineEditAPI = (function () {
	var groupings = {};
	var addChangeEvent = function ( change, groupID)
	{
		if (!groupID) {
			groupID = "";
			groupings = {};
		}
		if (!groupings[groupID]) {
			groupings[groupID] = {};
			var group = groupings[groupID];
			group.hashIDs = {};
			group.isChangedForAny = false;
			group.onChange = {};
			group.onChangeCNT = 0;
		}
		if (change) {
			var group = groupings[groupID];
			group.onChange[group.onChangeCNT] = change;
			return group.onChangeCNT++;
		}
		return -1;
	}
	var setupInlineEditByElement = function (el, options, groupID) {
		if (!el || !el.id) { return; }

		if (!groupID) {
			groupID = "";
			groupings = {};
		}
		if (!groupings[groupID]) {
			groupings[groupID] = {};
			var group = groupings[groupID];
			group.hashIDs = {};
			group.isChangedForAny = false;
			group.onChange = {};
			group.onChangeCNT = 0;
		}
		groupings[groupID].hashIDs[el.id] = el.id;

		var idLocal = el.id;
		var localPoperties = {viewClass : "", "viewStyle" : "", editClass : "editInputs" , editStyle : "", inputType : "text", type : null, choices : {}}
		if (options) {
			var i;
			for (i in options) {
				localPoperties[i] = options[i];
			}
		}
		var obj = $(idLocal);
		if (!obj) {
			print_r(idLocal + " is not a valid dom object.");
			return;
		}
		obj.addClass("editAble");
		var value = obj.get("text");
		var text = value.trim();
		var isChanged = false;
		var border = obj.getStyle("border");
		var updateDisplay = null;
		var editAction = null;

		obj.getValue = function () {
			return value;
		}

		var preprocessText = function (str) {
			if (!str) { return ""; }
			return str.trim().replace("<", "&lt;").replace(">", "&gt;").replace("\\n\\n", "<p>").replace("\\n", "<br>") ;
		}

		var onChangeLocal = function (groupID, changeID) {
			isChanged = true;
			groupings[groupID].isChangedForAny = true;
			var change;
			for (changeID in groupings[groupID].onChange) {
				groupings[groupID].onChange[changeID]();
			}
			updateDisplay();
		}
		//if (BrowserAPI.isIE() ) {alert(0);}
		var displayCommonDisplay = function (mode, editText, eventName, onchange, extractValues, mySetupEditAction) {
			if (mode == "view") {  //View Mode
				// Display View Mode.
				obj.setStyle("border", border);
				obj.addEvent("dblclick", editAction);
				obj.title = text;
				var displayText = preprocessText(text);
				if (displayText.length == 0) {
						displayText = "&nbsp;";
				}
				if (isChanged) {
					displayText = "<u>" + displayText + "</u>";
				}
				var edit_icon_id = obj.id + "_icon";
				var displayed_value_id = obj.id + "_tmp";
				var displayText = "<div id=\"" + displayed_value_id + "\" class=\"" + localPoperties["viewClass"] + " value\" style=\"margin-right : 3px;" + localPoperties["viewStyle"] + "\">" + displayText + "</div><div id=\"" + edit_icon_id + "\" class=\"icon\">&nbsp;</div>";
				obj.set("html", displayText);
				obj.addEvent("mouseover", function () { var offsetIcon = Math.max(obj.getCoordinates().width - 15,0); if($(edit_icon_id)) {$(edit_icon_id).setStyles({"display": "block", "left" : offsetIcon + "px"});}});
				obj.addEvent("mouseout", function () { if($(edit_icon_id)) {$(edit_icon_id).setStyle("display", "none");}});
				$(edit_icon_id).addEvent("click", editAction);
				$(edit_icon_id).setStyle("display", "none");

			} else { //Edit Mode

				// Cleanup View Mode:
				obj.removeEvents("mouseover");
				obj.removeEvents("dblclick");
				var edit_icon_id = obj.id + "_icon";
				try {
					$(edit_icon_id).removeEvents("click");
					obj.removeEvents("mouseover");
					obj.removeEvents("mouseout");
				} catch (e) {}

				// Render Edit Mode:
				var action = function() {
					if (extractValues) {extractValues()} else {
						value = $(idLocal + "_tmp").value;
						text = value.trim();
					}
					if (onchange) { onchange(); };
					onChangeLocal(groupID, obj.id);
				}
				obj.set("html", editText);
				if (mySetupEditAction) { mySetupEditAction();} else {
					var tmpInputObject = $(idLocal + "_tmp");
					if (tmpInputObject) {
						tmpInputObject.addEvent("change", action);
						tmpInputObject.addEvent("blur", updateDisplay);
						tmpInputObject.focus();
					}
				}
			}
		}

		var displaytext = function (mode, onchange) {
			displayCommonDisplay (mode, "<input id=\"" + idLocal + "_tmp\" type=\"text\" value=\"" + value + "\" class=\"" + localPoperties["editClass"] + "\" style=\"width : " + obj.getStyle("width") + ";" + localPoperties["editStyle"] + "\">", "change" );
		}

		var displaytextArea = function (mode, onchange) {
			//var width = obj.getStyle("width");
			var width = "99%";
			var div = $(idLocal + "_tmp");
			if (!div) {
				div = $(idLocal);
			}
			var height = div ? div.getSize()[ 'size']['y'] : 50;
			print_r (height);
			print_r (div);
			print_r (div.getSize());
			displayCommonDisplay (mode, "<textarea id=\"" + idLocal + "_tmp\" type=\"text\" value=\"" + value + "\" class=\"" + localPoperties["editClass"] + "\" style=\"width : " + width + "; height : " + height + "px; " + localPoperties["editStyle"] + "\">" + text + "</textarea>", "change",
			function (e) {
				if(onchange) { onchange();}
			} );
		}

		var builSelectHtml = function (id, class1, style, selectedIndex, options) {
				var html = "<select id=\"" + id + "\" class=\"" + class1 + "\" style=\"" + style + "\"; " + "\">\n";
				var i;

				for (i in options) {
					html += "\t<option value=\"" + i + "\"";
					if (i == selectedIndex) {
						html += " selected";
					}
					html += ">"+ options[i] + "</option>\n";
				}
				html += "</select>";
				return html;
		}

		var displayselect = function (mode, onchange) {
			var html = builSelectHtml (idLocal + "_tmp", localPoperties["editClass"], "width:" + obj.getStyle("width") + "; " + localPoperties["editStyle"], value, localPoperties["choices"]);
			text = localPoperties["choices"][value];
			displayCommonDisplay (mode, html, "change", function () { text = localPoperties["choices"][value];});
		}

		var displaycurrency = function (mode) {
			value = value.parseUSCurrency();
			text = value.toUSCurrency();
			displaytext (mode, function () {
										value = tmpInputObject.value.parseUSCurrency();
										text = value.toUSCurrency();
									} );
		}

		var displaylocation = function (mode) {
			localPoperties["choices"] = {"" : ""};
			var countries = TableLookup.getCountries();
			var states = TableLookup.getStates();

			var id;
			localPoperties["countries"] = {};
			for (id in countries) {
				localPoperties["countries"][id] = countries[id]['Name'];
			}

			localPoperties["states"] = {};
			for (id in states) {
				localPoperties["states"][id] = states[id]['Name'];
			}

			var useDefault = true;
			if(value && value.split) {
				var t = value.split("\n");
				if (t.length) {
					value = { "street" : t[0], "city" : t[1], "state" : t[2], "zip" : t[3], "country" : t[4] };
					useDefault = false;
				}
			}

			if (useDefault) {
				value = { "street" : "" ,"city" : "", "state" : "", "zip" : "", "country" : "" };
			}

			var print = function () {
				var ary = {0 : "street", 1 : "city", 2 : "state", 3 : "zip", 4 : "country"};
				var st = ""; var i;
				var displayValue = {"street" :  value["street"], "city" : value["city"], "state" : states[value["state"]], "zip" : value["zip"], "country" : countries[value["country"]]};
				for (i in ary) {
					if (st.length > 0 && displayValue[ary[i]] > 0) { st += ", ";	}
					st += displayValue[ary[i]];
				}
				return st;
			}

			text = '';
			/*var html = "<div id=\"" + idLocal + "_tmp" + "\" style=\"width:" + obj.getStyle("width") + ";white-space : normal;\" ><input id=\"" + idLocal + "_phone\" class=\"" + localPoperties["editClass"] + "\"" + localPoperties["editStyle"] + "\" title=\"" + value['phone'] + "\" value=\"" + value['phone'] + "\">\n";
			html += builSelectHtml(idLocal + "_type", localPoperties["editClass"], "width : auto;", value['type'], localPoperties["choices"]);

				html += "<img style=\"display : none;\" id=\"" + idLocal + "_save\" src=\"/images/btnSave.gif\"></div>";
				displayCommonDisplay (mode, html, "change", null , function() {}, function () {
				var action = function (fieldType, eventName) {
						if (eventName == "change") {
							var phoneObj = $(idLocal + "_phone");
							if (phoneObj) {
								if (phoneObj.value.length) {
									value = { "phone" : phoneObj.value
											 ,"type" : $(idLocal + "_type").value};
								} else {
									value = { "phone" : "", "type" : ""};
								}
							}
							isChanged = true;
							$(idLocal + "_save").setStyle("display", "block");
							text = print();
							if (fieldType=="save") {
								updateDisplay();
							}
						} else if (eventName == "blur") {
							if (fieldType == "type") {
								updateDisplay();
							}
						}
					}
					$(idLocal + "_phone").addEvent("change", function () {action("phone", "change")});
					$(idLocal + "_phone").addEvent("blur", function () {action("phone", "blur")});
					$(idLocal + "_type").addEvent("change", function () {action("type", "change")});
					$(idLocal + "_type").addEvent("blur", function () {action("type", "blur")});
					$(idLocal + "_save").addEvent("click", function () {action("save", "change")});
					$(idLocal + "_phone").focus();
				});*/
			displaytext (mode);
		}

		var displayphone = function (mode) {
			localPoperties["choices"] = {"" : ""};
			var phoneTypes = TableLookup.getPhoneTypes ();
			var id;
			for (id in phoneTypes) {
				localPoperties["choices"][id] = phoneTypes[id]['Name'];
			}
			if (!value || !value['phone'])
			{
				if(value) {
					if (value.split) {
						var t = value.split("\n");
						switch(t.length)
						{
							case 1: value = {"phone" : t[0], "type" : ""}; break;
							case 0: value = {"phone" : "", "type" : ""}; break;
							default: value = {"phone" : t[0], "type" : t[1]}; break;
						}
					} else {
						value = {"phone" : value, "type" : ""};
					}
				} else {
					value = {"phone" : "", "type" : ""};
				}
			}
			var print = function () {
				return value["phone"] + ((localPoperties["choices"][value["type"]].length > 0) ? " (" + localPoperties["choices"][value["type"]] + ")" : "");
			}

			text = print();
			var html = "<div id=\"" + idLocal + "_tmp" + "\" style=\"width:" + obj.getStyle("width") + ";white-space : normal;\" ><input id=\"" + idLocal + "_phone\" class=\"" + localPoperties["editClass"] + "\" style=\"" + localPoperties["editStyle"] + "\" title=\"" + value['phone'] + "\" value=\"" + value['phone'] + "\">\n";

			html += builSelectHtml(idLocal + "_type", localPoperties["editClass"], "width : auto; margin-bottom : 0px", value['type'], localPoperties["choices"]);
				html += "<img style=\"display : none;\" id=\"" + idLocal + "_save\" src=\"/images/b_save_small.gif\"></div>";
				displayCommonDisplay (mode, html, "change", null , function() {}, function () {
				var action = function (fieldType, eventName) {
						if (eventName == "change") {
							var phoneObj = $(idLocal + "_phone");
							if (phoneObj) {
								if (phoneObj.value.length) {
									value = { "phone" : phoneObj.value
											 ,"type" : $(idLocal + "_type").value};
								} else {
									value = { "phone" : "", "type" : ""};
								}
							}
							isChanged = true;
							$(idLocal + "_save").setStyle("display", "inline");
							text = print();
							if (fieldType=="save") {
								updateDisplay();
							}
						} else if (eventName == "blur") {
							if (fieldType == "type") {
								updateDisplay();
							}
						}
					}
					$(idLocal + "_phone").addEvent("change", function () {action("phone", "change")});
					$(idLocal + "_phone").addEvent("blur", function () {action("phone", "blur")});
					$(idLocal + "_type").addEvent("change", function () {action("type", "change")});
					$(idLocal + "_type").addEvent("blur", function () {action("type", "blur")});
					$(idLocal + "_save").addEvent("click", function () {action("save", "change")});
					$(idLocal + "_phone").focus();
				});
		}

		var displayselectYesNo = function (mode) {
			localPoperties["choices"] = {"" : "", 1 : "Yes", 0 : "No"};
			displayselect(mode);
		}

		var displaytaxIDNumber = function (mode) {
			displaytext(mode);
		}

		var displaypassword = function (mode) {
			text="*******";
			title="";
			displaytext(mode, function (e) {
				text="*******";
				title="";
			})
		}

		var displayemail = function (mode) {
			displaytext(mode, function () {
										if (value.isEmail()) {
											obj.systle ("color", "red");
										} else {
											obj.systle ("color", "auto");
										}
									});
		}

		try {
			eval("editAction = function (e) { display" + localPoperties["inputType"] + "('edit')}; updateDisplay = function (e) { display" + localPoperties["inputType"] + "('view')};");
		} catch (e) {
			print_r(e);
		}


		obj.addEvent("dblclick", editAction);
		updateDisplay();

	};

	var setupInlineEdit = function (id, options, groupID) {
		setupInlineEditByElement($(id), options, groupID);
	};

	var setupInlineEditBySearch = function (className, options, groupID) {
		$$(className).each (function (el) {
			if(el.setStyle) {
				if (!BrowserAPI.isIE() ) { setupInlineEditByElement(el, options, groupID); }
			}
			if (BrowserAPI.isIE() ) {alert(el.id); return ;}
		});
	};

	var getValues = function (groupID) {
		var retArray = {};
		var id;
		if (groupID && groupings[groupID]) {
			for (id in groupings[groupID].hashIDs) {
				var obj = $(groupings[groupID].hashIDs[id]);
				if (obj) {
					retArray[id] = obj.get("value");
				}
			}
		}
		return retArray;
	};

	var resetChangeFlags = function (groupID) {
		if (groupID && groupings[groupID]) {
			groupings[groupID].isChangedForAny = false;
		}
	}

	return {
		 setupInlineEdit : setupInlineEdit
		,setupInlineEditBySearch : setupInlineEditBySearch
		,getValues : getValues
		,isChanged : function () {return (isChangedForAny) ? true : false;}
		,resetChangedFlag : resetChangeFlags
		,addChangeEvent : addChangeEvent
	};
}) ();

} catch (e) {
	print_r(e);
}