var YOOFancyMenu = new Class({
    initialize: function(menu, options) {
        this.setOptions({
            transition: Fx.Transitions.sineInOut,
            duration: 500,
            wait: false,
            onClick: Class.empty,
            opacity: 1,
            mode: 'move',
            slideOffset: 30,
            itemSelector: 'li.level1',
            activeSelector: 'li.active',
            dropdownSelector: 'div.dropdown'
        },
        options);
        this.menu = $(menu);
        this.items = [];
        this.div = [];
        this.current = this.menu.getElement(this.options.activeSelector);
        this.menu.getElements(this.options.itemSelector).each(function(item, i) {
            var leaveevent = item.getElement(this.options.dropdownSelector) ? 'dropdownleave': 'mouseleave';
            this.createBackground(item, i);
            item.addEvent('click',
            function(event) {
                this.clickItem(event, item)
            }.bind(this));
            item.addEvent('mouseenter',
            function() {
                this.mouseenterItem(item, i)
            }.bind(this));
            item.addEvent(leaveevent,
            function() {
                this.mouseleaveItem(item, i)
            }.bind(this))
        }.bind(this));
        if (this.options.mode == 'move') {
            if (this.current) {
                this.setCurrent(this.current)
            } else {
                var first = this.menu.getElement('li');
                first.addClass('active');
                first.addClass('current');
                this.setCurrent(first)
            }
        }
    },
    createBackground: function(item, i) {
        if (this.options.mode == 'move' && i != 0) return;
        var css = 'fancy ' + 'bg' + (i + 1);
        this.div[i] = new Element('div', {
            'class': 'fancy-1'
        }).adopt(new Element('div', {
            'class': 'fancy-2'
        }).adopt(new Element('div', {
            'class': 'fancy-3'
        })));
        this.div[i].fx = this.div[i].effects(this.options);
        this.items[i] = new Element('div', {
            'class': css
        }).adopt(this.div[i]).injectInside(this.menu);
        this.items[i].fx = this.items[i].effects(this.options)
    },
    setCurrent: function(item) {
        this.items[0].setStyles({
            'left': item.offsetLeft,
            'width': item.offsetWidth,
            'visibility': 'visible',
            'opacity': this.options.opacity
        });
        this.current = item
    },
    clickItem: function(event, item) {
        if (!this.current) this.setCurrent(item);
        this.current = item;
        this.options.onClick(new Event(event), item)
    },
    mouseenterItem: function(item, i) {
        if (item._fancyactive) return;
        item._fancyactive = true;
        switch (this.options.mode) {
        case 'fade':
            this.fadeFx(item, i, true);
            break;
        case 'slide':
            this.slideFx(item, i, true);
            break;
        default:
            this.moveFx(item, 0)
        }
    },
    mouseleaveItem: function(item, i) {
        if (this.options.mode == 'move') item = this.current;
        item._fancyactive = false;
        switch (this.options.mode) {
        case 'fade':
            this.fadeFx(item, i, false);
            break;
        case 'slide':
            this.slideFx(item, i, false);
            break;
        default:
            this.moveFx(item, 0)
        }
    },
    moveFx: function(item, i) {
        if (!this.current) return;
        this.items[i].fx.custom({
            'left': [this.items[i].offsetLeft, item.offsetLeft],
            'width': [this.items[i].offsetWidth, item.offsetWidth]
        })
    },
    fadeFx: function(item, i, show) {
        if (show) {
            this.items[i].fx.setOptions(this.options);
            this.items[i].fx.set({
                'left': item.offsetLeft,
                'width': item.offsetWidth
            });
            this.items[i].fx.custom({
                'opacity': [0, 1]
            })
        } else {
            var dur = this.options.duration * 2;
            this.items[i].fx.setOptions({
                duration: dur
            });
            this.items[i].fx.custom({
                'opacity': [1, 0]
            })
        }
    },
    slideFx: function(item, i, show) {
        var offset = this.options.slideOffset;
        if (show) {
            this.items[i].fx.set({
                'opacity': 1,
                'left': item.offsetLeft,
                'width': item.offsetWidth
            });
            this.div[i].fx.set({
                'margin-top': offset
            });
            this.div[i].fx.custom({
                'margin-top': [offset, 0]
            })
        } else {
            this.div[i].fx.set({
                'margin-top': 0
            });
            this.div[i].fx.custom({
                'margin-top': [0, offset]
            })
        }
    }
});
YOOFancyMenu.implement(new Options);