Moo.EIP, a plugin of Mootools by Le Nhat Anh. 

Edit Info :

• moo.EIP ver 1.00
• no change

// BEGIN CODE

// By lenhatanh | nhatanh.voxfamilyvn.com | a plugin of mootools

var EIP = new Class({

    opt: function(id, opt) {

        this.opt = {

            c_over: '',

            m_event: 'click',

            t_note: 'Click here to edit',

            field: '',

            n_field: 'text',

            c_field: '',

            c_save: '',

            t_save: 'Save',

            c_cancel: '',

            t_cancel: 'Cancel',

            t_saving: 'Saving...',

            opt: {},

            button: true,

            url: '',

            method: 'post',

            other: {}

        };

        this.id = $(id);

        this.id_f = id + '_form';

        this.id_s = id + '_save';

        this.id_c = id + '_cancel';

        this.id_value = $(id).innerHTML;

        this.isEmpty();

        this.post = {};

        Object.extend(this.opt, opt || {});

    },

    initialize: function(id, opt) {

        this.opt(id, opt);

        this.aEvent();   

    },

    edit: function() {       

        if (!this.id_edit) {

            this.id_edit = new Element('div');

            this.id_edit.injectBefore(this.id);

        }

        this.id_edit.innerHTML = this.create();

        this.dtog(1,0);

        if(this.opt.field!='check' && this.opt.field!='radio') $(this.id_f).focus();

        if(!this.opt.button) $(this.id_f).onblur = this.save.bind(this);

        $(this.id_s).onclick = this.save.bind(this);

        $(this.id_c).onclick = this.cancel.bind(this);

    },

    create: function() {

        _2 = this.id_value;

        _3 = this.opt.field;

        _10 = _3 == 'check' ? '[]' : '';

        _4 = 'name="' + this.opt.n_field + _10 +  '"';

        _5 = this.opt.c_field;

        _6 = this.opt.opt;

        _8 ='id="' + this.id_f + '"';

        if(_3 == 'select') {

            _1 = '<select ' + _4 + ' ' + _8 + ' class="' + _5 + '">';

            for (var _7 in _6) {

                _1 += '<option value="' + _7 + '"';

                if(_6[_7] == _2) _1 += ' selected="selected"';

                _1 += '>' + _6[_7] + '</option>';

            }

            _1 += '</select><br />';

        } else if(_3 == 'area') {

            _1 = '<textarea ' + _4 + ' ' + _8 + ' class="' + _5 + '" onfocus="this.select();">' + _2 + '</textarea><br />';

        } else if(_3 == 'check' || _3 == 'radio') {

            _9 = _3 == 'radio' ? 'radio' : 'checkbox';

            _1 = '<span class="' + _5 + '">';

            for (var _7 in _6) {

                _1 += '<input ' + _4 + ' type="' + _9 + '" value="' + _7 + '"';

                if(_2.match(_6[_7]) != null) _1 += ' checked="checked"';

                _1 += ' /> ' + _6[_7] + ' ';

            }

            _1 += '</span><br />';

        } else {

            _1 = '<input ' + _4 + ' ' + _8 + ' type="text" class="' + _5 + '" onfocus="this.select();" value="' + _2 + '" /><br />';

        }

        if(this.opt.button || _3 == 'check' || _3 == 'radio') {

            _1 = _1 + '<span id="' + this.id_s + '" class="' + this.opt.c_save + '" />' + this.opt.t_save + '</span> ';

            _1 = _1 + '<span id="' + this.id_c + '" class="' + this.opt.c_cancel + '" /> ' + this.opt.t_cancel + '</span>';

        }

        return _1;

    },

    save: function() {

        Object.extend(this.post, this.opt.other || {});

        this.post = Object.toQueryString(this.post) + '&' + this.id_edit.toQueryString();

        this.id.setHTML(this.opt.t_saving);

        this.dtog(0,1);

        this.rEvent();

        new Ajax(this.opt.url, {

            postBody: this.post,

            method: this.opt.method,

            onComplete: function(r) {

                this.id_value = this.id.innerHTML = r;

                this.isEmpty();

                this.post = {};

                this.aEvent();

            }.bind(this),

            onFailure : function() {

                this.id.setHTML(this.id_value);

                this.aEvent();

            }.bind(this)

        }).request();

    },

    cancel: function() {

        this.dtog(0,1);

    },

    isEmpty: function() {

        if(this.id_value.trim() == '') this.id.innerHTML = this.opt.t_note;

    },

    aEvent: function() {

        this.id.onmouseover = this.cOver.bind(this);

        this.id.onmouseout = this.cOut.bind(this);

        eval('this.id.on' + this.opt.m_event + '=this.edit.bind(this);');

    },

    rEvent: function() {

        this.id.onmouseover = this.id.onmouseout = null;

        eval('this.id.on' + this.opt.m_event + '=null;');

    },

    dtog: function(_1,_2) {

        this.id_edit.style.display = _1 ? 'block' : 'none';

        this.id.style.display = _2 ? 'block' : 'none';

    },

    cOver: function() {

        this.id.addClass(this.opt.c_over);

    },

    cOut: function() {

        this.id.removeClass(this.opt.c_over);

    }

});

// END CODE