//Author: birijan maharjan
//birijan.m@gmail.com
var InputEditor = new Class({

	Implements: [Options, Events],

	options: {
		editorHeight: '20px',
		confirmOnCancel: true,
		container: false,
		editableElement: false,
		saveFunc: false,
		imgId:false,
		tempId: "",
		cancelOnClick : false
	},

	initialize: function(options){
		this.setOptions(options);
		this.container = $(this.options.container);
		this.editableElement = $(this.options.editableElement);
		
		this.saveFunc = this.options.saveFunc;
		this.imgId = this.options.imgId;
		this.tempId = this.options.tempId;
		this.cancelOnClick = this.options.cancelOnClick;
		
		if(!this.container) return;
		this.prepareContainer();
		if(!this.cancelOnClick) this.editableElement.addEvent('click', this.editMode.bind(this));
		
		
	},
	prepareContainer: function(){

		/*this.editableElement.setStyles({
			width: this.container.getStyle('width'),
			height: this.container.getStyle('height')
		});*/

		var tempContainer = new Element('div', {id: this.tempId+'tempContainer'} );
		tempContainer.inject(this.container, 'bottom');

		var textArea = new Element('input', {id: this.tempId, name: this.tempId });
		
		var width = this.container.getStyle('width');
		
		//textArea.setStyle('width', width);
		//textArea.setStyle('height', this.options.editorHeight);
		textArea.inject(tempContainer, 'bottom')

		var saveButton = new Element('input', {id: this.tempId+'save', type: 'button', value:' ', name: this.tempId+'save', styles: {'background':'url(theme/standard/images/_gallery/save.gif) no-repeat center center'}  });
	
		saveButton.inject(tempContainer, 'bottom');
		
		/*
		var cancelButton = new Element('input', {id: this.tempId+'cancel', type: 'submit',  value:'Cancel', name: this.tempId+'cancel' });
		cancelButton.inject(tempContainer, 'bottom');
		*/
		
		
		
		
		saveButton.addEvent('click', this.save.bind(this));
		//cancelButton.addEvent('click', this.cancel.bind(this));
		
		tempContainer.setStyle('display', 'none');

	},

	cancel: function(){
		var result = true;
		if(this.options.confirmOnCancel){
			result = confirm("Do you want to cancel changes ?");
		}
		if(result){
			this.editableElement.setStyle('display', 'inline');
			$(this.tempId+'tempContainer').setStyle('display', 'none');
		}
	},
	save: function(){
		this.editableElement.setStyle('display', 'inline');
		var value = $(this.tempId).get('value');
		//if(value == '') { value = 'Click here to edit' };
		this.editableElement.set('text', value);
		$(this.tempId+'tempContainer').setStyle('display', 'none');

	
		if(this.saveFunc) this.saveFunc(this.imgId, value);
	},

	editMode: function(){
		var editableText = this.editableElement.get('text');
		$(this.tempId+'tempContainer').setStyle('display', 'inline');
		$(this.tempId).set('value', editableText);
		$(this.tempId).setStyle('background-color', '#ffd2d2');
		this.editableElement.setStyle('display', 'none');
	} 

});