var MooInfoTip = new Class({
    Implements: [Options, Events],
    options:
    {
        id: '',
        _isLoad: false,
        _show: null
    },
    initialize: function(options)
    {
        this.setOptions(options);
        //check and make sure id is not empty
        if(this.options.id == '')
            return;
            
        this._buildTip();
        this._attachTip();
        
        this.options._show = new Fx.Tween(this.options.id + 'Tip', {
            duration: 700
        });
    },
    _buildTip: function()
    {
        this._tip = new Element('div', {
            id: this.options.id + 'Tip',
            styles:
            {
                position: 'absolute',
                zIndex: 10,
                width: 350,
                opacity: 0
            }
        }).inject($(document.body));
    },
    _attachTip: function()
    {
        var item = $(this.options.id);
        if(item)
        {
            item.addEvents({
                'mouseleave': function(e)
                {
                    this._hideTip();
                }.bind(this),
                'mouseenter': function(e)
                {   
                    if(!this.options._isLoad)
                        new Request.HTML({
                            onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript)
                            {
                                this.options._isLoad = true;
                                this._tip.set('html', responseHTML);
                            }.bind(this)
                        }).get('prearrival/' + this.options.id + '.htm');
                
                    this._showTip(e);
                }.bind(this)
            });
        }
    },
    _hideTip: function()
    {
        this.options._show.cancel();
        this.options._show.start('opacity', $(this.options.id + 'Tip').getStyle('opacity'), 0);
    },
    _showTip: function(e)
    {
        var ele = $(this.options.id);
        this._tip.setStyles({
            top: ele.getPosition().y + ele.getHeight(),
            left: ele.getPosition().x + ele.getWidth()
        });
        
        this.options._show.cancel();
        this.options._show.start('opacity', $(this.options.id + 'Tip').getStyle('opacity'), 1);
    }
    
});

var MooDropDown = new Class({
    Implements: [Options, Events],
    options:
    {
        id: '',
        _selected: null
    },
    initialize: function(options)
    {
        this.setOptions(options);
        this._buildDropDown();
    },
    _buildDropDown: function()
    {
        //save the data
        var data = $$('#' + this.options.id + ' option');
        
        //create a new drop down
        var div = new Element('div', {
            id: this.options.id + 'Display',
            text: data[0].text,
            'class': 'dropdown',
            events:
            {
                click: function(e)
                {
                    $(this.options.id + 'Data').setStyles({
                        width: e.target.getWidth(),
                        left: e.target.getPosition().x,
                        top: e.target.getPosition().y
                    });
                    
                    $(this.options.id + 'Data').setStyle('display', 'inline');
                    
                    
                }.bind(this)
            }
        }).inject($(this.options.id + 'Container'));
        
        var dropdownData = new Element('div', {
            id: this.options.id + 'Data',
            'class': 'dropdown',
            styles:
            {
                position: 'absolute',
                left: 0,
                top: div.getHeight() + 1,
                height: 100,
                overflow: 'scroll',
                overflowX: 'hidden',
                zIndex: 100,
                display: 'none',
                backgroundColor: '#fff',
                border: '1px solid #333'
            },
            events:
            {
                mouseleave: function()
                {
                    this.setStyle('display', 'none');
                }
            }
            
        }).inject($(document.body));
        
        var firstItem = '';
        
        data.each(function(item, i){
            //save first item
            if(i == 0)
                firstItem = item.value;
        
            var temp = new Element('div', {
                text: item.text,
                styles:
                {
                    padding: 2
                },
                events:
                {
                    mouseenter: function(e)
                    {
                        e.target.setStyle('backgroundColor', '#f0f0f0');
                    },
                    mouseleave: function(e)
                    {
                        if(e.target != this.options._selected)
                            e.target.setStyle('backgroundColor', '#fff');
                    }.bind(this),
                    click: function(e)
                    {
                        $(this.options.id + 'Display').set('text', e.target.get('html'));
                        $(this.options.id).set('value', e.target.get('html'));
                        
                        if(this.options._selected)
                            this.options._selected.setStyle('backgroundColor', '#fff');
                        
                        e.target.setStyle('backgroundColor', '#f0f0f0');
                        this.options._selected = e.target;
                        
                        $(this.options.id + 'Data').setStyle('display', 'none');
                    }.bind(this)
                }
            }).inject(dropdownData);
        }.bind(this));
        
        //destroy 
        $(this.options.id).destroy();
        
        //recreate the hidden input field with this id
        new Element('input', {
            type: 'hidden',
            value: firstItem,
            name: this.options.id,
            id: this.options.id
        }).inject($(this.options.id + 'Container'));
    }
});