/****************************************************************************************************
 * inWriter v1.1
 * by Davide 'Folletto' Casali
 * www.digitalhymn.com
 * Copyright (C) 2005
 * Creative Commons (CC) 2005 by-nc-sa
 *
 * This library of functions allows a developer to create "dynamic" editing HTML tags.
 * To enable the feature you've to add this line where the edit input tag should appear, usually near
 * the tag to be edited:
 *
 * <script type="text/javascript">inwriter_init('tag-id', doneEditing);</script>
 *
 * The init function binds itself to the tag id-identified and calls the function named doneEditing
 * when the edit process ends. All of the innner HTML of the id-identified tag will be edited and
 * replaced.
 *
 * The function called on the end if the edit process (in this case doneEditing) uses two parameters:
 * the first is the string id passed also to the inwriter_init and the second is the new value of
 * the edited tag.
 */

/****************************************************************************************************
 * inWriter initialize: inline html writer is a collection of functions to allow direct html
 * editing of id-identified fields on an html page.
 *
 * WYSIWYCE: what you see is what you can edit.
 *
 * This class gives the functions to make inline editing on standard HTML code.
 *
 * @param	sting id referencing to the tag to edit
 * @param	function string name of the called fx when an edit process is done
 * @param	optional: set to true if you want editing only on double click
 */
function inwriter_init(id, fx, doubleClick)
{
	// *** Attach events
	if (document.getElementById)
	{
		// *** Source node
		sourcenode = document.getElementById(id);
		
		// Trigger on...
		if (doubleClick == true)
			sourcenode.ondblclick = function() { inwriter_onClick(id) };
		else
			sourcenode.onclick = function() { inwriter_onClick(id) };
		
		// *** Create editing field item
		var innerHTML = '<input type="text" id="' + id + '_input" name="" style="width: 80%" value="' + document.getElementById(id).innerHTML + '">';
		if (document.createElement && sourcenode.parentNode.insertBefore)
		{
			// *** W3C Recommended
			var div = document.createElement('div');
			div.id = id + '_inputdiv';
			div.style.display = 'none';
			div.innerHTML = innerHTML;
			sourcenode.parentNode.insertBefore(div, sourcenode.nextSibling); // insert after edit enabled tag
		}
		else
		{
			// *** Old style
			document.write('<div id="' + id + '_inputdiv" style="display: none">' + innerHTML + '</div>');
		}
		
		// *** Edit node binds
		inputnode = document.getElementById(id + '_input');
		inputnode.groupid = id;
		
		inputnode.onblur = function() { inwriter_onBlur(id) };
		inputnode.onkeypress = inwriter_onKeyPress;
		
		inputnode.done = fx;
	}
}

/****************************************************************************************************
 * inWriter Begin Editing actions.
 * Hides the id-entified tag and shows the input tag to edit its content.
 *
 * @param	sting id referencing to the tag to edit
 */
function inwriter_beginEdit(id)
{
	if (document.getElementById)
	{
		sourcenode = document.getElementById(id);
		
		if (sourcenode.isEditing != true)
		{
			// *** Swaps visibility statuses
			sourcenode.isEditing = true;
			
			sourcenode.style.display = 'none';
			document.getElementById(id + '_inputdiv').style.display = 'block';
			
			// *** Focus!
			document.getElementById(id + '_input').focus();
			document.getElementById(id + '_input').select();
		}
	}
}

/****************************************************************************************************
 * inWriter End Editing actions.
 * Hides the input tag and changes the normal innerHTML of the edited tag with the new one.
 *
 * @param	sting id referencing to the tag to edit
 */
function inwriter_endEdit(id)
{
	if (document.getElementById)
	{
		sourcenode = document.getElementById(id);
		
		if (sourcenode.isEditing == true)
		{
			// *** Swaps visibility statuses
			sourcenode.isEditing = false;
			
			sourcenode.style.display = 'block';
			document.getElementById(id + '_inputdiv').style.display = 'none';
			
			// *** Changes the value to the new one
			sourcenode.innerHTML = document.getElementById(id + '_input').value;
			
			// *** Calls the user defined fx, if any
			if (document.getElementById(id + '_input').done)
				document.getElementById(id + '_input').done(id, sourcenode.innerHTML);
		}
	}
}

/****************************************************************************************************
 * inWriter onClick event.
 *
 * @param	sting id referencing to the tag to edit
 */
function inwriter_onClick(id)
{
	inwriter_beginEdit(id);
}

/****************************************************************************************************
 * inWriter onBlur event.
 *
 * @param	sting id referencing to the tag to edit
 */
function inwriter_onBlur(id)
{
	inwriter_endEdit(id);
}

/****************************************************************************************************
 * inWriter onKeyPress event.
 * End the editing when enter is pressed. Glitches in Safari.
 *
 * @param	event object
 */
function inwriter_onKeyPress(e)
{
	if (window.event)
		key = window.event.keyCode;
	else if (e)
		key = e.which;
	else
		key = null;
	
	if (key == 13) // Enter key
	{
		// *** Closing edit field
		inwriter_endEdit(this.groupid);
		return false; // avoids enter propagation
	}
}