jQuery.fn.extend({
  editable: function(args) {
    if(!args) { args = {}; }
        var parent = this;
        var div = document.createElement('DIV');
        $(div).attr("id", 'jqEditor');
        $(div).css({ display: 'none', position: 'absolute', padding: '5px', background: '#999', border: '1px solid #333', fontFamily: 'Tahoma', fontSize: '10px', width: '310px'})
        
        var inp = document.createElement('TEXTAREA');
        $(inp).css({ fontFamily: 'Tahoma', fontSize: '10px', width: "300px", height: "200px"} )
        $(inp).keydown(function(e) {
            if(args['keydown']) args['keydown'].call(e)
            if (e.ctrlKey && e.keyCode=='13') {
                e.preventDefault();
                parent.send(this);
            }
        })
        
        $(inp).keyup(function(e) {
            if(args['keyup']) args['keyup'].call(e)
        })
        
        var vista = document.createElement('DIV');
        $(vista).html('Vista');
        $(vista).click(function(e) {
            parent.send(inp)
        })
        var loka = document.createElement('DIV');
        $(loka).html('Loka');
        $(loka).click(function(e) {
            $('#jqEditor').fadeOut()
        })
        var btns = document.createElement('DIV');
        $(btns).html(loka).append(vista);
        $(btns).css({ 'float': 'right','clear': 'both'})
        $(btns).find('div').css({ 'float': 'left', margin: '2px', padding: '5px', border: '1px solid #222','cursor': 'pointer' })
        $(btns).find('div').hover(function(e) {
            $(this).css({ background: '#eee'})
        }, function(e) {
            $(this).css({ background: 'none'})
        })
        $(div).append(inp).append(btns);
        $('body').append(div);
        this.send = function(item) {
                        var fname = window.fieldname
                        var data = {  }
                        var args = window.selected_edit.args
                        data.id = window.rowid
                        data[fname]=escape($(item).val())
                        $.ajax({
                            data: data,
                            cache:  'false',
                            type:   "GET",
                            url:    args['url'] ? args['url']: document.location.href,
                            success: function(html) {
                                if(args['debug']) alert(html)
                                if(args['success']) args['success'].call(html)
                            }
                        })

        }

    
    return this.each(function() {        
        var item = this;
        this.args = args
        this.edit = function(e) {
                this.item = item
                var $elem = args.elem ? $(this.item).find(args.elem) : $(this)
                window.fieldname = fieldname=this.className.split(' ')[0];
                window.rowid = $(this).parents('[rowid]').attr('rowid')
                $(this).addClass('editing');
                var pos = $(this).offset()
                var $editor = $('#jqEditor');
                $editor.css({ top: pos.top+$(this).outerHeight(), left: pos.left })
                $editor.fadeIn();
                $editor.find('textarea').val($elem.html())
                inp.focus()
                window.selected_edit = item
        }
        $.each(args['fields'], function(i, arg) {
            $(item).find('.'+arg).click( item.edit ).hover(
                function(e) {
                    $(this).addClass('hover')
                },
                function(e) {
                    $(this).removeClass('hover')
                }                        
            )
        })
    });
  }
});