var config = {
	rows: '5',
	cols: '25',
	okButtonText: 'Redigera',
	cancelButtonText: 'Avbryt'
};

window.onload = function  () {
	var pElements = document.getElementsByTagName('*');
	for (var i=0; i < pElements.length; i++) {
		if(pElements[i].className == 'editable')
			inPlaceEditor(pElements[i]);
	};
};

function inPlaceEditor (editableElement) {

	editableElement.onclick = function(e) {
	
		if(this.childNodes[1] == undefined)
		{

			var text = getTextArea(this);
			var buttons = getButtons(text.div);

			this.className = 'not_editable';

		}

		if(buttons)
		{

			var container = this;
			buttons.cancel.onclick = function() {

				container.firstChild.nodeValue = text.origText;
				alert(container.childNodes[1]);

				container.className = 'editable';

			}

			buttons.edit.onclick = function() {

				container.className = 'editable';
				alert('You clicked edit!');

			}


		}

	}

}

function getTextArea(obj)
{

	var origText = obj.firstChild.nodeValue;
	obj.firstChild.nodeValue = '';

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

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

	textarea.setAttribute("cols", config.cols);
	textarea.setAttribute("rows", config.rows);
	textarea.value = origText;

	div.appendChild(textarea);

	var text = {
		'origText': origText,
		'textarea': textarea,
		'div': div
	}

	return text;

}

function getButtons(obj)
{

	var br = document.createElement("br");
	var edit = document.createElement("input");
	
	edit.setAttribute("type", "button");
	edit.setAttribute("value", config.okButtonText);

	obj.appendChild(br);
	obj.appendChild(edit);

	var cancel = document.createElement("input");
		
	cancel.setAttribute("type", "button");
	cancel.setAttribute("value", config.cancelButtonText);
		
	obj.appendChild(cancel);

	var buttons = {
		'edit': edit,
		'cancel': cancel
	}

	return buttons;

}