var Rokmoomenu = new Class({
    version: '2.1',
    options: {
        bgiframe: true,
        hoverClass: 'sfHover',
        delay: 500,
        animate: {
            props: ['opacity', 'height'],
            opts: Class.empty
        },
        bg: {
            enabled: false,
            margins: false,
            paddings: false,
            overEffect: {
                duration: 700,
                transition: Fx.Transitions.Quad.easeOut
            },
            outEffect: {
                duration: 500,
                transition: Fx.Transitions.Sine.easeIn
            }
        },
        submenus: {
            enabled: false,
            overEffect: {
                duration: 700,
                transition: Fx.Transitions.Quad.easeOut
            },
            outEffect: {
                duration: 500,
                transition: Fx.Transitions.Sine.easeIn
            },
            offsets: {
                'left': 0,
                'right': 0,
                'top': 0,
                'bottom': 0
            }
        }
    },
    initialize: function(el, options) {
        this.setOptions(options);
        if (window.ie6) this.options.delay = 50;
        this.element = $(el);
        if (this.options.bg.enabled) this.bgAnimation();
        if (this.options.submenus.enabled) this.subsAnimation();
        this.element.getElements('li').each(function(el) {
            el.addEvents({
                'mouseover': this.over.bind(this, el),
                'mouseout': this.out.bind(this, el)
            })
        },
        this)
    },
    over: function(el) {
        $clear(el.sfTimer);
        if (!el.hasClass(this.options.hoverClass)) {
            if (window.ie6) {
                var classes = el.getProperty('class').split(" ");
                var option = this.options.hoverClass;
                classes = classes.filter(function(y) {
                    return ! y.test("-" + option)
                });
                classes.each(function(cls) {
                    if (el.hasClass(cls)) el.addClass(cls + "-" + option)
                },
                this);
                var hackish = classes.join("-") + "-" + option;
                if (!el.hasClass(hackish)) el.addClass(hackish)
            }
            el.addClass(this.options.hoverClass);
            var ul = el.getElement('ul');
            if (ul) {
                if (this.options.bgiframe) ul.bgiframe({
                    opacity: false
                });
                ul.animate(this.options.animate)
            }
            el.getSiblings().each(function(ele) {
                ele.removeClass(this.options.hoverClass)
            },
            this)
        }
    },
    out: function(el) {
        var option = this.options.hoverClass;
        el.sfTimer = (function() {
            if (window.ie6) {
                var classes = el.getProperty('class').split(" ");
                classes = classes.filter(function(y) {
                    return y.test("-" + option)
                });
                classes.each(function(cls) {
                    if (el.hasClass(cls)) el.removeClass(cls)
                },
                this);
                var hackish = classes.join("-") + "-" + option;
                if (!el.hasClass(hackish)) el.removeClass(hackish)
            }
            el.removeClass(option);
            var iframe = el.getElement('iframe');
            if (iframe) iframe.remove()
        }).delay(this.options.delay, this)
    },
    bgAnimation: function() {
        this.element.getChildren().each(function(li, i) {
            li.addClass('top-menu-' + (i + 1));
            if (!li.hasClass('active')) {
                li.getFirst().setStyle('position', 'relative');
                var size = li.getCoordinates();
                var margins = {
                    'left': li.getStyle('margin-left').toInt(),
                    'right': li.getStyle('margin-right').toInt(),
                    'top': li.getStyle('margin-top').toInt(),
                    'bottom': li.getStyle('margin-bottom').toInt()
                };
                var paddings = {
                    'left': li.getStyle('padding-left').toInt(),
                    'right': li.getStyle('padding-right').toInt(),
                    'top': li.getStyle('padding-top').toInt(),
                    'bottom': li.getStyle('padding-bottom').toInt()
                };
                var div = new Element('div', {
                    'class': 'animated-bg',
                    'styles': {
                        'position': 'absolute',
                        'left': 0,
                        'top': 0,
                        'opacity': 0,
                        'width': size.width + (this.options.bg.margins ? -margins.left - margins.right: 0) + (this.options.bg.paddings ? -paddings.left - paddings.right: 0),
                        'height': size.height + (this.options.bg.margins ? -margins.top - margins.bottom: 0) + (this.options.bg.paddings ? -paddings.top - paddings.bottom: 0)
                    }
                }).inject(li);
                var self = this;
                var fx = new Fx.Style(div, 'opacity', {
                    duration: this.options.bg.duration,
                    transition: this.options.bg.transition,
                    wait: false
                }).set(0);
                li.addEvents({
                    'mouseenter': function() {
                        fx.options.duration = self.options.bg.overEffect.duration;
                        fx.options.transition = self.options.bg.overEffect.transition;
                        fx.start(1)
                    },
                    'mouseleave': function() {
                        fx.options.duration = self.options.bg.outEffect.duration;
                        fx.options.transition = self.options.bg.outEffect.transition;
                        fx.start(0)
                    }
                })
            }
        },
        this)
    },
    subsAnimation: function() {
        var els = this.element.getChildren().getElements('li');
        var lis = [],
        self = this;
        els.each(function(el) {
            if (el.length) {
                el.each(function(li) {
                    lis.push(li);
                    var a = li.getElement('a') || li.getElement('span');
                    a.setStyle('position', 'relative');
                    var coords = a.getCoordinates();
                    var offsets = this.options.submenus.offsets;
                    if (window.ie) {
                        var div = new Element('div', {
                            'class': 'submenu-animation-container'
                        }).inject(li).adopt(new Element('div', {
                            'class': 'submenu-animation-left'
                        })).adopt(new Element('div', {
                            'class': 'submenu-animation-right'
                        }))
                    } else {
                        var div = new Element('div', {
                            'class': 'submenu-animation-left'
                        }).inject(li).adopt(new Element('div', {
                            'class': 'submenu-animation-right'
                        }))
                    };
                    div.setStyles({
                        'width': coords.width - offsets.right || 0,
                        'height': coords.height - offsets.bottom || 0,
                        'position': 'absolute',
                        'top': offsets.top || 0,
                        'left': offsets.left || 0,
                        'visibility': 'hidden',
                        'opacity': 0
                    });
                    var fx = new Fx.Style(div, 'opacity', {
                        duration: this.options.submenus.duration,
                        transition: this.options.submenus.transition,
                        wait: false
                    }).set(0);
                    li.addEvents({
                        'mouseenter': function(evt) {
							evt.stopPropagation();
                            fx.options.duration = self.options.submenus.overEffect.duration;
                            fx.options.transition = self.options.submenus.overEffect.transition;
                            fx.start(1)
                        },
                        'mouseleave': function() {
                            fx.options.duration = self.options.submenus.outEffect.duration;
                            fx.options.transition = self.options.submenus.outEffect.transition;
                            fx.start(0)
                        }
                    })
                },
                this)
            }
        },
        this)
    }
});
Rokmoomenu.implement(new Options);
Element.extend({
    animate: function(obj) {
        if (!this.Fx) {
            this.Fx = this.effects(obj.opts);
            this.now = this.getStyles.apply(this, obj.props);
            this.FxEmpty = {};
            for (var i in this.now) this.FxEmpty[i] = 0
        }
        if (obj.props.contains('height') || obj.props.contains('width')) {
            this.setStyle('overflow', 'hidden');
            this.getParents('ul').each(function(el) {
                el.setStyle('overflow', 'visible')
            })
        }
        this.Fx.set(this.FxEmpty).start(this.now)
    },
    getParents: function(expr) {
        var matched = [];
        var cur = this.getParent();
        while (cur && cur !== document) {
            if (cur.getTag().test(expr)) matched.push(cur);
            cur = cur.getParent()
        }
        return matched
    },
    getSiblings: function() {
        var children = this.getParent().getChildren();
        children.splice(children.indexOf(this), 1);
        return children
    }
});