/**
 * MooEip - Edit in place
 *
 * Dependencies: MooTools 1.2
 *
 * @version            0.1.1
 *
 * @license          MIT-style license
 * @author           Davide Caffaratti <davcaffa [at] gmail.com>
 * @copyright        Author
 * @site             http://davidecaffaratti.com
 */ 
var MooEip = new Class({
    
    //implements
    Implements: [Options,Events],

    //options
    options: {
        elements: '.eip',
        styleHover: 'eip-hover',
        styleInput: 'eip-input',
        styleTextarea: 'eip-textarea',
        styleLoading: 'eip-loading',
        idPrefix: 'id_',
        inputSave: 'Save',
        inputCanc: 'Cancel',
        saving: 'Saving...',
        empty: 'Click to Edit',
        hoverColor: '#ceffef',
        leaveColor: '#ffffff'
    },
    
    //initialization
    initialize: function(ajaxUrl, options) {
        // set ajax url
        this.ajaxUrl = ajaxUrl;
        //set options
        this.setOptions(options);
        
        this.run();
    },
    
    //a method that does whatever you want
    run: function() {
        //find the editable areas
        $$(this.options.elements).each(function(el) {  
            var elId = el.getProperty('id');                       
            var elValue = el.get('text').trim();
            
            if (elValue.trim() == ''){
                el.set('text', this.options.empty);
            }
            
            if (el.getStyle('display') != '') {
                var displayStyle = el.getStyle('display'); 
            }
            else {
                var displayStyle = el.setStyle('display', 'block'); 
            }
            
            var editForm = new Element('form', {
                'name': elId,
                'events': {
                    'submit': function(e) {                  
                        el.setStyle('display', 'block');
                        //el.fireEvent('mouseleave');        
                        e.preventDefault();
                        
                        var request = new Request({
                            url: this.ajaxUrl,
                            data: 'value=' + editForm.fieldValue.value+'&id=' + editForm.getProperty('name'),
                            method: 'post',
                            onRequest: function(){                
                                el.addClass(this.options.styleLoading);                
                                el.set('text', this.options.saving);
                            }.bind(this), 
                            onSuccess: function(){
                                el.removeClass(this.options.styleLoading);
                                el.set('html', (editForm.fieldValue.value.trim() == '' ? this.options.empty : editForm.fieldValue.value.trim().replace(new RegExp('\n', 'gi'), '<br />')));
                            }.bind(this),
                            onFailure: function(resp){
                                el.removeClass(this.options.styleLoading);
                                alert('ERROR ON THE SERVER !!\nCODE: ' + resp.status + ' - TEXT: ' + resp.statusText + '\nPLEASE SAVE THE TEXT AGAIN !!');
                                el.set('html', (editForm.fieldValue.value.trim() == '' ? this.options.empty : editForm.fieldValue.value.trim().replace(new RegExp('\n', 'gi'), '<br />')));
                            }.bind(this) 
                        });
                        request.send();                        
                        
                        editForm.dispose();
                        
                        // set the new value from submited form value
                        elValue = editForm.fieldValue.value.trim();
                    }.bind(this)
                }
            });
            
            if(el.hasClass('input')) {
                var editField = new Element('input', {
                    'type': 'text',
                    'name': 'fieldValue',
                    'class': this.options.styleInput
                });
            }
            else {
                var editField = new Element('textarea', {
                    'name': 'fieldValue',
                    'class': this.options.styleTextarea
                });
                if (el.get('style') != '') {
                    editField.set('style', el.get('style'));
                }
            }
            
            var okButton = new Element('input', {
                'id': 'ok_' + elId,
                'type': 'submit',
				'class': 'eip-button',
                'value': this.options.inputSave,
                'events' : {
                    'click': function() {
                    editForm.dispose();
                    el.setStyle('display', displayStyle);
                    el.fireEvent('mouseleave');
                    }
                }
            });
            
            var cancelButton = new Element('input', {
                'id': 'cancel_' + elId,
                'type': 'reset',
				'class': 'eip-button',
                'value': this.options.inputCanc,
                'events': {
                    'click': function() {
                    editForm.dispose();
                    el.setStyle('display', displayStyle);
                    el.fireEvent('mouseleave');
                    }
                }
            });
            
            editField.inject(editForm);
            //lb = new Element('br').inject(editField, 'after');
            okButton.inject(editForm);            
            cancelButton.inject(editForm);
            
            var myeffect = new Fx.Tween(el, {duration: 500});
            
            el.addEvents({
                'mouseenter': function() {
                    el.setStyle('background-color', this.options.hoverColor);
                    el.addClass('eip-hover');
                }.bind(this),
                
                'mouseleave': function() {
                    el.setStyle('background-color', 'transparent');
					//myeffect.start('background-color', this.options.hoverColor, 'transparent');//this.options.leaveColor
                    el.removeClass('eip-hover');
                }.bind(this),
                
                'click': function() {            
                    el.setStyle('display', 'none');
                    editField.value = (el.hasClass('input')) ? elValue.trim() : elValue.trim().replace(new RegExp('<br />', 'gi'),'\n');
                    editForm.inject(el, 'after');
                    editField.focus();
                    el.removeClass('eip-hover');
                }
            });
        }, this);
    }
});