/*
    Class: MEMOZ.inPlaceEditor
    An in-place-editor. Based on (a bit messy) code from Elliott Back:
    http://elliottback.com/wp/archives/2007/02/09/ajax-edit-in-place-with-yahoo-ui-api/
*/

/*
    Constructor: inPlaceEditor
    Initializes the object.
*/
MEMOZ.inPlaceEditor = function(id, jsonAction, jsonIdentifier, ajaxParams) {
	this.id = id;
	this.ajaxParams = ajaxParams;
	this.jsonAction = jsonAction;
	this.jsonIdentifier = jsonIdentifier;
	this.renameEvent = new YAHOO.util.CustomEvent('renameEvent',this,false,YAHOO.util.CustomEvent.FLAT);
	this.init();
}

YAHOO.extend(MEMOZ.inPlaceEditor, MEMOZ.base, {

	_className: "MEMOZ.inPlaceEditor",

	id: '',
	ajaxParams: {},
	jsonIdentifier: 'name',
	jsonAction: '',
	instanceId: '',
	useTextArea: false,
	ajaxParams: [],
	renameEvent:null,
	
	/*
		Function: getEl
		Returns:
			The DOM element
	*/
	getEl: function() {
		return $(this.id);
	},
	
	/*
		Function: showAsEditable
		Parameters:
			e - The element id
	*/
	showAsEditable: function(e){
		YAHOO.util.Event.preventDefault(e);
		YAHOO.util.Event.stopPropagation(e);
	
		if (this.oldBG == undefined) {
			var pos = this;	
			while (pos && YAHOO.util.Dom.getStyle(pos, 'background-color') == 'transparent') {
				pos = pos.parentNode;
			}	
			this.oldBG = YAHOO.util.Dom.getStyle(pos, 'background-color');
			if (this.oldBG == 'transparent') this.oldBG = '#ffffff';
			//console.log(this.oldBG);
			//console.log(this);
		}
	
		var anim = new YAHOO.util.ColorAnim (
			this,
				{backgroundColor:{to:'#ffffbb'}},
			.5,
			YAHOO.util.Easing.easeOut
		);
		anim.animate();
	},

	/*
		Function: showAsNotEditable

		This function finds the closest defined background color, if not already defined, 
		and saves it. Then it animates to a nice yellow overlay color. Now we need its reverse.

		Parameters:
			e - The element id
	*/
	showAsNotEditable: function(e){
		YAHOO.util.Event.preventDefault(e);
		YAHOO.util.Event.stopPropagation(e);
	
		var anim = new YAHOO.util.ColorAnim (
			this,
			{backgroundColor:{to:this.oldBG}},
			.5,
			YAHOO.util.Easing.easeOut
		);
		anim.animate();
	},
	
	/*
		Function: editHandler
		
		This function is even simpler–it just restores the saved background color.  
		Now that we can turn their “editable effect” on and off, we need something
		to actually do the work:
		
		Parameters:
			e 	- element id
			me	- back reference
	*/
	editHandler: function(e, me){
		var self = this;
		YAHOO.util.Event.preventDefault(e);
		YAHOO.util.Event.stopPropagation(e);
		var target = this.getEl();

		var ourForm = document.createElement('div');
		ourForm.id = target.id + '_editor';
		var form = '';
		if (this.useTextArea) 
			form += '<textarea id="' + target.id + '_edit" cols="20" rows="8" name="' + target.id + '">'+target.innerHTML.replace(/\"/g,"&quot;")+'</textarea>';
		else	
			form += '<input id="' + target.id + '_edit" name="' + target.id + '" value="'+target.innerHTML.replace(/\"/g,"&quot;")+'">';

		form +=	'<br/><input id="' + target.id + '_save" type="button" ' + 'value="Lagre" /> ' +
			' eller <input id="' + target.id + '_cancel" type="button" value="Avbryt" />';
		ourForm.innerHTML = form;

		YAHOO.util.Dom.insertAfter(ourForm, target);
	
		YAHOO.util.Event.addListener(target.id + '_save', 'click', function() {
			var newVal = $(target.id + '_edit').value;
			var ap = self.ajaxParams;
			ap[self.jsonIdentifier] = newVal;
			self.ajaxReq(self.jsonAction,function(json) { 
				target.innerHTML = newVal;
				$(target.id + '_editor').parentNode.removeChild($(target.id + '_editor'));
				target.style.display = 'block';
				self.renameEvent.fire(newVal);
			}, ap);
		});
	
		YAHOO.util.Event.addListener(target.id + '_cancel', 'click', function() {
			$(target.id + '_editor').parentNode.
				removeChild($(target.id + '_editor'));
			target.style.display = 'block';
		});
	
		target.style.display = 'none';
	},
	
	/* 
		Function: init
		
		Now that that’s out of the way, you just need to add these handlers 
		to mouseover, mouseout, and click events of "editable" items:
	*/	
	init: function() {
		var self = this;
		//var elements = YAHOO.util.Dom.getElementsByClassName('editable');
		var el = this.getEl();
		YAHOO.util.Event.addListener(el, 'click', function(e) { self.editHandler(e,this); } );
		YAHOO.util.Event.addListener(el, 'mouseover', this.showAsEditable );
		YAHOO.util.Event.addListener(el, 'mouseout', this.showAsNotEditable );
		//YAHOO.ext.EventManager.onDocumentReady(Init.init, Init, true);
	},
	
	/* 
		Function: destroy
		
		Purges all listeners.
	*/	
	destroy: function() {
		// Removes all listeners attached to the given element via addListener
		YAHOO.util.Event.purgeElement(this.getEl());
	}

});