var MooInlineEdit = new Class({
    Implements: [Options, Events],
    options:
    {
        id: null,       //id of the inline edit box
        type: null,     //type of edit box
        _list: {input: '', textarea: ''},
        highlight: '#fff'
        
        //onStart: $empty,
        //onComplete: $empty
        
    },
    initialize: function(options)
    {
        this.setOptions(options);
        var ele = $(this.options.id);
        if(!ele || this.options._list[this.options.type] == undefined)
            return;
          
        this._attachEvent(ele);
        
    },
    
    //attach input text
    _attach: function()
    {
        var ele = $(this.options.id);
        if(!ele)
            return;
         
        var box;
        if(this.options.type == "input")
            box = new Element(this.options.type);
        else if(this.options.type == "textarea")
            box = new Element(this.options.type);
       
        box.setProperties({
            value: ele.get('text'),
            id: this.options.id + 'MIE'      //MIE stands for Moo Inline Edit
        });
        
        box.setStyle('width', ele.getWidth() + 15);
        
        box.addEvents({
            focus: function(e)
            {
                e.target.select();
            },
            blur: function(e)
            {
                this._detach();
                this.fireEvent('onComplete', [this.options.id, this.options.type]);
                
            }.bind(this)
        });
        
        ele.empty();        //clear out everything within the element
        box.inject(ele);
        if(ele.retrieve('init'))
            box.focus();
    },
    
    //detach input text
    _detach: function()
    {
        var box = $(this.options.id + 'MIE');
        if(box)
        {
            var ele = $(this.options.id);
            if(box.value.trim() == "")
                ele.set('text', ele.retrieve('oldvalue'));
            else
                ele.set('text', box.value);
            this._attachEvent(ele);
            box.destroy();
        }
        
    },
    
    _attachEvent: function(ele)
    {
        if(!ele.retrieve('oldvalue'))
            ele.store('oldvalue', ele.get('text'));
        ele.setStyle('backgroundColor', 'transparent');
        
        var isShow = ele.getProperty("isShow");
        //first show it as input then as inline edit
        if(!ele.retrieve('init') && isShow == "true")
        {
            this._attach();
            
        }
        else
        {
            ele.addEvents({
                click: function(e)
                {
                    this._attach();
                    e.target.removeEvents();
                    
                }.bind(this),
                mouseover: function(e)
                {
                    e.target.setStyle('backgroundColor', this.options.highlight);
                }.bind(this),
                mouseout: function(e)
                {
                    e.target.setStyle('backgroundColor', 'transparent');
                }
                
           });
        }           
        ele.store('init', true);
        
    }
});



var MooImagePicker = new Class({
    Implements: [Options, Events],
    options:
    {
        images: '',
        width: 100,
        height: 100,
        _coors: {_w: 0, _h: 0, _x: 0, _y: 0},   //coordinates of the element
        _isBusy: false
        //onShow: $empty
        //onBeforeShow: $empty
        //onHide: $empty
        
    },
    initialize: function(options)
    {
        this.setOptions(options);
        this.images = this.options.images.split(',');
        this._buildImagePicker();
    },
    _buildImagePicker: function()
    {
        var body = $(document.body);
        
        this.container = new Element('div', {
            styles: 
            {
                padding: 10,
                background: '#b49c6d',
                opacity: 0,
                position: 'absolute',
                left: 0,
                top: 0,
                zIndex: 11002
            }
        }).inject(body);
        
        this.content = new Element('div', {
            styles: 
            {
                width: this.options.width,
                height: this.options.height,
                overflow: 'auto',
                display: 'none',
                background: '#4f421c'
            }                
        }).inject(this.container);
        
        this.close = new Element('div', {
            styles: { 
                position: 'absolute',
                left: 0,
                top: 0,
                zIndex: 11002,
                opacity: 0,
                width: 30,
                height: 30,
                background: 'url(/eproposal/images/close.png)',
                cursor: 'pointer'
            }
        }).inject(body);
        
        this.close.addEvent('click', function(e){
            this.hide();
        }.bind(this));
        
    },
    _loadImage: function()
    {
        this.images.each(function(item, i) {
            if(item.trim() != "")
            {
                var div = new Element('div', {
                    styles: { float: 'left', padding: '0px 5px 5px 0px' }  
                });
                var img = new Element('img', { src: item, styles: { opacity: .3 } });
                img.addEvents({
                    dblclick: function(e)
                    {
                        //this.srcImg.setProperty('src', e.target.src);
                        this.hide(e.target.src);
                    }.bind(this),
                    mouseenter: function()
                    {
                        this.fade('in');
                    },
                    mouseleave: function()
                    {
                        this.fade(.3);
                    }
                });
                img.inject(div);
                div.inject(this.content);
                
                 
            }
        }.bind(this));
        this._isShow = true;
    },
    show: function(img)
    {
        if(!img)
            return;
        
        this.fireEvent('onBeforeShow', [this.container]);
            
        this._loadImage();
           
        this.container.setStyle('opacity', 1);
        this.container.getElements('img').each(function(item, i){
            var src = item.getProperty('src');
            var orgsrc = img.getProperty('src');
            
            if(src.substring(src.lastIndexOf('/')) == orgsrc.substring(orgsrc.lastIndexOf('/')))
            {
                item.setStyle('opacity', 1);
                item.removeEvents('mouseenter');
                item.removeEvents('mouseleave');
            }
        });
        
        this._setCoors(img.getWidth(), img.getHeight(), Math.ceil(img.getPosition().x + img.getWidth() / 2), Math.ceil(img.getPosition().y + img.getHeight() / 2));
        this.srcImg = img;
        var coors = this.options._coors;
        
        this.container.setStyles({
            width: coors._w,
            height: coors._h,
            left: img.getPosition().x,
            top: img.getPosition().y
        });
        this.options._isBusy = true;
        var body = $(document.body);
        new Fx.Morph(this.container, {
            duration: 800,
            onComplete: function()
            {
                this.content.setStyle('display', 'block');
                this.close.setStyles({
                    left: this.container.getPosition().x - 12,
                    top: this.container.getPosition().y - 12
                });
                this.close.setStyle('opacity', 1);
                this.options._isBusy = false;
            }.bind(this)
        }).start({
            width: this.options.width,
            height: this.options.height,
            left: Math.ceil(body.getWidth() / 2 - this.options.width/2) + body.getScroll().x, 
            top: Math.ceil(body.getHeight() / 2 - this.options.height/2) + body.getScroll().y,
            opacity: 1 
        });
        
        
        this.fireEvent('onShow', [this.container]);
    },
    hide: function(imgsrc)
    {
        if(this.options._isBusy)
            return;
        var coors = this.options._coors;
        this.content.setStyle('display', 'none');
        this.close.setStyle('opacity', 0);
        new Fx.Morph(this.container, {
            duration: 800,
            onComplete: function()
            {
                if(imgsrc && imgsrc != "")
                    this.srcImg.setProperty('src', imgsrc);
                this.content.empty();
            }.bind(this)
        }).start({
            width: 0,
            height: 0,
            left: coors._x,
            top: coors._y,
            opacity: 0
        });
        
        this.fireEvent('onHide', [this.container]);
    },
    _setCoors: function(w, h, x, y)
    {
        this.options._coors = {_w: w, _h: h, _x: x, _y: y};
    }
});

var MooOverlay = new Class({
    Implements: [Options, Events],
    options:
    {
        container: '',
        overlayColor: '#fff'
    },
    initialize: function(options)
    {
        this.setOptions(options);
        this.container = this.options.container != "" ? $(this.options.container) : $(document.body);
        if(!this.container)
            return;
            
        this.overlay = new Element('div', {
            styles:
            {
                left: 0,
                top: 0,
                width: 0,
                height: 0,
                position: 'absolute',
                zIndex: 11002,
                opacity: 0,
                background: this.options.overlayColor
            }
        }).inject(this.container);                
    },
    show: function()
    {
        this.overlay.setStyles({
            width: this.container.getWidth(),
            height: this.container.getScrollSize().y
        });
        this.overlay.fade(.9);
        this.fireEvent('onShow', [this.overlay]);
    },
    hide: function()
    {
        this.overlay.fade('out');
        this.fireEvent('onHide', [this.overlay]);
    }
    
});    


var MooTip = new Class({
    Implements: [Options, Events],
    options:
    {
        container: '',
        align: 'center',
        width: 200,
        bgColor: '#442513'
    },
    initialize: function(options)
    {
        this.setOptions(options);
        
        this.options.container = $(this.options.container);
        
        if(!this.options.container)
            return;
            
        var message = this.options.container.getProperty('message');
        if(!message)
            return;            
        
        this.tip = new Element('div', {
            html: this.options.container.getProperty('message'),
            styles:
            {
                textAlign: this.options.align,
                width: this.options.width,
                position: 'absolute',
                left: 0,
                top: 0,
                zIndex: 11002,
                opacity: 0,
                background: this.options.bgColor,
                padding: 3,
                color: '#fff'
            }
        }).inject($(document.body));
        
        
        this.options.container.addEvents({
            mouseenter: function(e)
            {
                var pos = this.options.container.getPosition();
                this.tip.setStyles({
                    left: pos.x + this.options.container.getWidth(),
                    top: pos.y + this.options.container.getHeight()
                }).fade('in');
            }.bind(this),
            mouseleave: function(e)
            {
                this.tip.fade('out');
            }.bind(this)
            
        });
        
    }
});