/************************** Toggling Text Fields **************************/

function createTextToggleField(name,str,size,kmapID) {
	return createToggleField(name,str, "input", "size="+size,kmapID);
}

function createTextAreaToggleField(name,str,rows,cols,kmapID) {
	return createToggleField(name,str, "textarea", "rows="+rows + " cols="+cols,kmapID);
}

var toggleFieldCnt=0;
/*
 * name: of the field, may have to change
 * str: str that's actually in there
 * type: "input" "textarea"
 * params: params to go inside the input element (put no quotes here)
 */
function createToggleField(name,str,type,params,kmapID) {
	var id ="__t" + (toggleFieldCnt++); // we need to close over this value

	var TABLE = false; // true to format this as a table

	//
	// this where the actual text goes
	//
	var html = "";
	if (TABLE) html += "<table border=0 cellpadding=0 cellspacing=0><tr><td>";	
	html += "<span id=" + id;
	html += ">" + str + "</span>";
	//
	// create an 'empty' span in which we can save
	// the text so that if someone hits 'cancel' we can restore
	// it
	var saveSpan = "<span id=save" + id + " ";
	var saveStyle = "position: absolute; width: 0px; height: 0px; right: -100px; top: -100px";
	saveSpan += "style=\"" + saveStyle + "\" ";
	saveSpan += "></span>";
	html += saveSpan;
	
	if (TABLE) html += "</td><td valign=top>";

	//
	// add the edit link
	//
	var useSup = true;
	var link = " ";
	if (useSup) link += "<sup>";
	link += "<span id=\"toggle" + id + "\" class=\"editlink\">";
	link += toggleLinks(name,id,type,params,kmapID);	
	link += "</span>";
	if (useSup) link += "</sup>";
	html += link;
	

	if (TABLE) html += "</td></tr></table>";

	return html;
}

function targetNode(id,type) {
	if (type == "input") {
		return e(id);
	} else {
		return e(id); //.parentNode; //todo, restrict the size of this
	}
}

function toggleHighlight(id,type) {
	targetNode(id,type).setAttribute("class", "formfieldToggleExample");
}

function untoggleHighlight(id,type) {
	targetNode(id,type).setAttribute("class", "");
}

function toggleLinks(name,id,type,params,kmapID) {
	var onClick = "toggleField('" + name + "','" + id + "','" + type + "','" + params + "','" + kmapID + "')";
	var js = "untoggleHighlight('" + id + "','" + type + "')";
	var js2 =  "toggleHighlight('" + id + "','" + type + "')";
	var html ="[<a onmouseout=\"" + js + "\" onmouseover=\"" + js2 + "\" class=editlink "
		+ voidHref() + " "
		+ "onClick=\"" + onClick + "\">edit</a>]";
	return html;
}

function retoggleField(name,id,type,params,kmapID,doSave) {
	//
	// Grab the new text from text field 'text' + 'id'
	//
	var newText = e("text"+id).value;
	var oldText = e("save"+id).innerHTML;
	var textToDisplay;
	if (doSave) {
		if (oldText != newText) {
			//
			// do a save
			//
			saveChanges(name,newText,kmapID);
		}
		textToDisplay = newText;
	} else {
		textToDisplay = oldText;
	}
	//
	// stuff it back in 'id'
	//
	setInnerHTML(id, textToDisplay);
	//
	// update thte toggle buttons
	//
	setInnerHTML("toggle"+id, toggleLinks(name,id,type,params,kmapID));
	untoggleHighlight(id,type);
}
function toggleField(name,id,type,params,kmapID){ 
	//
	// first clear any formatting we put on
	//
	untoggleHighlight(id,type);
	//
	// Grab the content of the text field with id 'id'
	// stuff a textfield into that area and create the new links
	// at 'toggle' + 'id'
	//
	var txt = e(id).innerHTML;
	var nextTextField;
	if (type == "input") {
		nextTextField = "<input class=formfieldToggle type=text " + params + " id='text" + id + "' value='" + txt + "' >";
	} else {
		nextTextField = "<textarea class=formfieldToggle type=txt " + params + " id='text" + id + "'>" + txt + "</textarea>";
	}

	setInnerHTML(id, nextTextField);
	
	var textE = e("text"+id);
	if (type == "input") {
		textE.value = txt;
	} else {
		textE.innerHTML = txt;
	}
	//
	// grab this guy's parent's style, because we'll use that
	//
	transferStyle(id, textE);

	//
	// save the original text so that we can restore it in
	// the call to retoggleField
	//
	setInnerHTML("save"+id, txt);
	//
	// Create the links
	//
	var onClick  = "retoggleField('" + name + "','" + id + "','" + type + "','" + params + "','" + kmapID + "',true)";
	var onClick2 = "retoggleField('" + name + "','" + id + "','" + type + "','" + params + "','" + kmapID + "',false)";
	var links = "";
	links += "[";
	links += "<a class=savelink "    + voidHref() + " " + "onClick=\"" + onClick  + "\">save</a> ";
	links += "<a class=cancellink " + voidHref() + " " + "onClick=\"" + onClick2 + "\">cancel</a>";
	links += "]";
	
	setInnerHTML("toggle" + id, links);
}

function getParent(id) {
	var parent = e(id).parentNode;
	while (parent && parent != '' && parent.nodeName != "DIV") parent = parent.parentNode;
	return parent;
}

function transferStyle(id, toE) {
	var parent = getParent(id);
	if (parent && parent.nodeName == "DIV") {
		var parentStyle = parent.style;
		//
		// transfer over the style info
		//
		toE.style.fontSize = parentStyle.fontSize;
		toE.style.fontWeight = parentStyle.fontWeight;
	}
}


/**
 * For updating from these forms.
 * if id is null we do nothing.
 */
function saveChanges(name,value,id) {
	if (!id || id == '' || id < 0) return;

	var where = "`id` = " + q(id);
	var set = "`" + name + "` = " + q(value);
	var reqURL = fullPath("db.php") +
		"?where=" + where + 
		"&set=" + set + 
		"&action=update" +
		"&spud=trooper" +
		"&title=comment" +
		"&db=kmaps" +
		"";
	function processSaveChanges(res) {
		var info = res.documentElement.getElementsByTagName("info")[0];
		var username = info.getAttribute("username");
		var updated = info.getAttribute("updated");
		var query = info.getAttribute("query");
		if (!updated || updated != "true") {
			//todo
		}
		markDirty(id,info);
	}
	ajaxXML(reqURL, processSaveChanges);	
}