// from zenphoto.org
// modified for better effect.

// Get the element's style (computed) for the attribute given.
function getStyle(element, attribute) { 
  if (element.currentStyle) {
    // Internet Explorer:
    if (attribute == "font-family") attribute = "fontFamily";
    else if (attribute == "font-size") attribute = "fontSize";
    else if (attribute == "font-weight") attribute = "fontWeight";
    else if (attribute == "line-height") attribute = "lineHeight";
    return element.currentStyle[attribute];
  } else if (document.defaultView.getComputedStyle) {
    // Mozilla or other dignified browser:
    return document.defaultView.getComputedStyle(element, '').getPropertyValue(attribute);
  } else {
    return false;
  }
}


function convertLineBreaks(text) {
  return text.replace(/\n/g, '<br />');
}

function unconvertLineBreaks(text) {
  return text.replace(/(<br \/>)|(<br\/>)|(<br>)/gi,'\n'); 
}

function addBlankLine(text) {
  return text+"<br />&nbsp;";
}

function stripSlashes(text) {
  text = text.replace(/\\\\/g, '%%%%%');
  text = text.replace(/\\/g, '');
  return text.replace(/%%%%%/g, '\\');
}

 ///////////////////////////////////////////////////////////////////////////////
// Makes a DIV into an editable Title field. 

function initEditableTitle(divID) {
	var div = document.getElementById(divID);
	div.blankMessage = "Click to add a title...";
	div.editMessage = "Click to edit title...";

	div.saveChanges = function(form) {
		var formDiv = form.parentNode;
		document.callbackdiv = this;
		this.innerHTML = "Saving...";
		sajax_do_call("saveTitle",form.content.value, this.saveChangesCB);
		return this.stopEditing();
	}
  
	div.getInputField = function () {
		return '<input id="inputbox" type="text" name="content" value="'+this.innerHTML
		+'" style="font-size: '+this.style_fontSize
		+'; font-family: '+this.style_fontFamily
		+'; font-weight: '+this.style_fontWeight
		+'; line-height: '+this.style_lineheight
		+';" size="'+(this.innerHTML.length+1)+'"/>';
	}

	div.contentOnKeyUp = function () {
		div.innerHTML = this.value;
		this.style.width = div.clientWidth +10+'px';
	}
  
	initEditableDiv(divID);
}

 ///////////////////////////////////////////////////////////////////////////////
// Makes a DIV into an editable Description field.
function initEditableDesc(divID) {
	var div = document.getElementById(divID);
	div.blankMessage = "Click to add a description...";
	div.editMessage = "Click to edit description...";

	div.saveChanges = function(form) {
		document.callbackdiv = this;
//		this.style.height = this.clientHeight+'px';
		this.innerHTML = "Saving...";
		sajax_do_call("saveDesc",form.content.value, this.saveChangesCB);
		return this.stopEditing();
	}
  
	div.getInputField = function () {
		div.innerHTML = addBlankLine(div.innerHTML);
		return '<textarea name="content" style="font-size: '+this.style_fontSize
		+'; font-family: '+this.style_fontFamily
		+'; font-weight: '+this.style_fontWeight
		+'; width: 100%'// + this.style_width
//		+'; height: '+this.style_height  
		+'; height: '+ (div.clientHeight+10)+"px"
		+'; line-height:'+this.style_lineheight
		+'; margin: 0px 0px 5px 0px;" rows="3" cols="50"></textarea><br />';
	}
  
  // NOTE: in this function, *this* refers to an input field.
	div.contentOnKeyUp = function () {
		div.innerHTML = addBlankLine(convertLineBreaks(this.value));
		this.style.height= div.clientHeight+10+"px";
	}
	initEditableDiv(divID);
}

  ///////////////////////////////////////////////////////////////////////////////
 // Makes any DIV editable, but not by itself: it needs several variables
//  defined before it will work (see examples above).
function initEditableDiv(divID) {
	var div = document.getElementById(divID);
	div.title = div.editMessage;
	div.style_display = getStyle(div, "display");
	div.style_fontFamily = getStyle(div, "font-family");
	div.style_fontSize = getStyle(div, "font-size");
	div.style_fontWeight = getStyle(div, "font-weight");
	div.style_lineheight = getStyle(div,"line-height");
	div.style_width = getStyle(div, "width");
	div.style_height = div.clientHeight+40 +"px";
  
	if (div.innerHTML != "") {
		div.textValue = div.innerHTML;
	} else {
		div.textValue = "";//div.textContent;
	}
	if (trim(div.textValue) == "") {
		div.innerHTML = div.blankMessage;
	}
 
	div.startEditing = function () {
		if (document.currentlyEditing && document.currentlyEditing != this) return;
		document.currentlyEditing = this;
		this.isEditing = true;
		this.unhilight();
		this.style.position ="absolute";
//		this.style.top = "130px";
//		this.style.left="100px";
//		this.style.border ="1px solid red";
		this.style.top = "-5000px";
		var formDiv = this.getFormDiv();
		formDiv.form.content.value = unconvertLineBreaks(this.textValue);
		formDiv.style.display = this.style_display;
		var form = formDiv.firstChild;
		form.content.focus();
		form.content.select();
	}
  
	div.onclick = div.startEditing;

	div.getFormDiv = function () {
		if (!this.formDiv) {
			this.formDiv = document.createElement('div');
			this.parentNode.insertBefore(this.formDiv, this);
			this.formDiv.displayDiv = this;
			this.style_width = getStyle(div, "width");
			var formHTML = '<form class="editform" onsubmit="this.content.blur(); this.parentNode.displayDiv.saveChanges(this); return false;">';
			formHTML += this.getInputField();
			formHTML += ' <input type="submit" class="button" value="Save" \/>&nbsp;<input type="submit" class="button" value="Cancel" onclick="this.form.parentNode.displayDiv.cancelEditing();return false;" \/><\/form>';
			this.formDiv.innerHTML = formHTML;
			this.formDiv.form = this.formDiv.firstChild;
			this.formDiv.form.style.display = this.style_display;
			if (this.contentOnKeyUp) {
				this.formDiv.form.content.onkeyup = this.contentOnKeyUp;
			}
		} 
		return this.formDiv;
	}

	div.saveChangesCB = function(savedText) {
		displayDiv = document.callbackdiv;
		if (savedText == "") {
			displayDiv.innerHTML = displayDiv.blankMessage;
			displayDiv.textValue = "";
		} else {
			displayDiv.innerHTML = convertLineBreaks(savedText);
			displayDiv.textValue = displayDiv.innerHTML;//savedText;
		}
	}

	div.cancelEditing = function() {
//		document.callbackdiv.innerHTML=document.callbackdiv.textValue;
		this.innerHTML = this.textValue == ""? this.editMessage:this.textValue;
		this.stopEditing();
		return false;
	}
  
	div.stopEditing = function() {
		this.style.position="relative";
		this.style.top="0px";
		this.style.left="0px";
		var formDiv = this.getFormDiv();
		formDiv.displayDiv.style.display = this.style_display;
		formDiv.style.display = "none";
		document.currentlyEditing = false;
		return false;
	}
  
	div.onmouseover = function() {
		if (!document.currentlyEditing) {
			this.hilight();
		} else {
			this.title = "Currently editing something else, save or cancel to edit this.";
		}
	}

	div.onmouseout = function() { 
		this.unhilight();
		this.title = this.editMessage;
	}
 
	div.hilight = function () { this.style.backgroundColor = "#FFFFD3"; }
	div.unhilight = function () { this.style.backgroundColor = ""; }
  
}

function trim(s) {
	return s.replace(/(^\s*)|(\s*$)/g, "");
}