/**
*/
LBP.MenuDropdown = new Class({
    Implements: [Events, Options],

    options: {
        relativeTo: 'global', 
        subItemWidth: 140,
        subItemHeight: 15,
        subItemMargin: 1,
        subItemPadding: 5,
        subCssName: 'submenu',
        subMargin: 1,

        tipMargin: 5,
        padding: 5,
        paddingx: 7,
        paddingy: 4,
        maxSize: { x: 300, y: 30 },
        tipCssName: 'tip',
        opacity: 0.85,
        tipPos: 'top',
        
        dumper: 'dummydt',

        dropOnHover: false,
        duration: 200,
        idx: 1000
    },

    initialize: function(options)
    {
        this.setOptions(options);
        if (!$(this.options.relativeTo)) return;
    },

    assign: function(el,options)
    {
        this.initialize(options);
        var MenuDropDown = this;
        var subCount = 0;
        if(!this.dump) {
            this.dump = new Element('div', { 'class': 'tip-dump'});
            if(!$(this.options.dumper)){
                $(document.body).adopt(new Element("div",{ id: this.options.dumper}));
            }
            $(this.options.dumper).adopt(this.dump);
            this.dump.set('styles',{ zIndex: -10, position: 'absolute', opacity: 0, display: 'block'});
        }
        el.each( function(item)
        {
            if(!item.retrieve('setMenuTip')) {
            var temp= item.getNext();
            var temp2;
            MenuDropDown.subMenu = null;
            MenuDropDown.subMenu = (temp && (temp.nodeName == 'DIV'))? temp : null;
            if(MenuDropDown.subMenu) {
                subCount++;
                item.removeEvents();
                var arrow = new Element("div", { 'class': 'menu-item-arrow' } ); 
                var itemTxt = new Element("div", { 'html': item.get('text'), 'class':'menu-item-text' });
                item.empty();
                item.adopt( itemTxt, arrow);
                MenuDropDown.set_up_sub(MenuDropDown.subMenu, item);
                temp2 = MenuDropDown.subMenu;
                item.addEvents({ 
                    'mouseenter': function(event) {
                        event.stopPropagation();
                        MenuDropDown.set_current(item);
                        MenuDropDown.show_sub(temp2, item);                    
                    }
                });
                temp2.addEvents({
                    'mouseleave': function(event) {
                        event.stopPropagation();                        
                        MenuDropDown.hide_sub(temp2);                    
                    }
                });
                temp2.store('subFx', new Fx.Morph( temp2, { duration: this.options.duration, transition: Fx.Transitions.linear, link: 'cancel', onStart: Events.prototype.clearChain}));                
            } else {
                item.addEvent('mouseenter', function(event){
                    if(this.subMenu) {
                        this.hide_sub(this.subMenu);
                    }
                }.bind(this));
                        
            }
            item.store('setMenuTip', true);
            }
        }.bind(this));
        //if(!$(this.options.relativeTo).retrieve('setevents')) {
        $(this.options.relativeTo).addEvent('mouseleave', function(event){
            if(this.subMenu) {
                this.hide_sub(this.subMenu);
            }
        }.bind(this));
        //$(this.options.relativeTo).store('setevents', true);
        //
       //this.dump.destroy();
    },
    set_current: function(item)
    {
        if(this.current) { this.current.removeClass('menu-item-current'); }
        this.current = item;
        this.current.addClass('menu-item-current');
    },
    set_up_sub: function(sub, item)
    {
        var subItems = sub.getChildren();
        item.store('subitemcount', subItems);
        var scroll = document.getScroll();
        var winSize = window.getSize();
        var size = item.getSize();
        subSize = { x: this.options.subItemWidth, y: (this.options.subItemHeight+ this.options.subItemMargin + this.options.subItemPadding *2) * subItems.length };
        sub.set({
            'styles' : {
                'zIndex': this.options.idx,
                'position': 'absolute',
                'width': subSize.x,
                'height': subSize.y,
                'opacity': 0,
                'display': 'none',
                'overflow': 'hidden' },
            'class' : this.options.subCssName
        });
    },
    
    reposition_sub: function(sub, item){
        var subItems = item.retrieve('subitemcount');
        
        var scroll = document.getScroll();
        var winSize = window.getSize();
        var size = item.getSize();
        var position = item.getPosition($(this.options.relativeTo));
        var cntrPos = $(this.options.relativeTo).getPosition();
        var subSize = { x: this.options.subItemWidth, y: (this.options.subItemHeight+ this.options.subItemMargin + this.options.subItemPadding *2) * subItems.length };
        if($(this.options.relativeTo).getStyle('position') != 'relative') {
            position.x += cntrPos.x;
            position.y += cntrPos.y;
        }
        
        if((subSize.y+this.options.subMargin) <= (winSize.y-position.y+scroll.y-size.y)) {
            position.y += (size.y + this.options.subMargin);
        }
        else {
            position.y -=(this.options.subMargin + subSize.y);
        }
        position.x = ((position.x + size.x/2) - (subSize.x/2)).toInt();
        sub.set('styles',{ 'top': position.y,  'left': position.x, 'width': subSize.x, 'height': subSize.y } );        
    },
    toggle_sub: function(sub, item)
    {
        if(sub.style.opacity == 0)
        {
            this.show_sub(sub, item);
        }
        else
        {
            this.hide_sub(sub);
        }
    },

    show_sub: function(sub, item)
    {
        if(this.subFx) {
            this.subFx.cancel();
        }
        if(this.isOpen || this.subMenu)
        {
            this.hide_sub(this.subMenu);
        }
        if(this.tipObj && this.tipObj.style.opacity == 1){
            this.tipObj.set('styles', { opacity: 0});
        }
        this.reposition_sub(sub, item);
        this.subFx = sub.retrieve('subFx');
        sub.set('styles', { display: 'block' });
        var to = ({
            opacity: [0, 1],
            width: [this.options.subItemHeight, sub.style.width],
            left: [sub.offsetLeft*4/3, sub.style.left]
        });
        this.subFx.start(to);
        this.isOpen = true;
        this.subMenu = sub;
    },
    hide_sub: function(sub) {
        sub.set('styles', { opacity: 0, display: 'none' });
        if(this.subFx) {
            this.subFx.cancel();
        }
        this.subMenu = null;
        this.isOpen = false;
        if(this.current && this.current.hasClass('menu-item-current')) {
            this.current.removeClass('menu-item-current');
            this.current = null;
        }
    }
});