var sMenu = new Class({

    //implements
    Implements: [Options, Events],

    //options
    Implements: [Options, Events],

    //options
    options: {
        vertical: 0,
        sMenuBorderClass: 'sMenuBorder pngFix',
        selectedClass: 'TopMenuSelected',
        duration: 'short',
        transition: Fx.Transitions.Linear
    },


    //initialization
    initialize: function (element, options) {
        //set options
        this.setOptions(options);
        //set element
        this.element = document.id(element);
        //set sMenuBorder element
        this.sMenuBorder = this.element.getElement('.sMenuBorder');

        if (!this.sMenuBorder) {
            //build sMenuBorder element
            this.sMenuBorder = new Element('div', {
                'class': this.options.sMenuBorderClass,
                'style': 'position:absolute; z-index:1;'
            });
            //inject sMenuBorder into element
            this.sMenuBorder.inject(this.element, 'top');
        }
        //make effect
        this.sMenuBorderFx = new Fx.Morph(this.sMenuBorder, { 'duration': this.options.duration, 'link': 'cancel', 'transition': this.options.transition });

        this.start();
    },

    start: function () {
        //this.selected = this.element.getElements('li').getFirst();
        //fire event start
        this.fireEvent('start');

        //Select default fiorst element 
        //this.selected = this.element.getElements('li').getFirst();


        this.element.getElements('li').each(function (el, i) {
            //detect selected menu
            if (el.hasClass(this.options.selectedClass)) {
                //save selected menu
                this.selected = el;
                //set sMenuBorder dimensions
                this.sMenuBorder.setStyles({
                    width: el.getStyle('width'),
                    height: el.getStyle('height'),
                    left: el.getPosition().x - this.element.getPosition().x,
                    top: el.getPosition().y - this.element.getPosition().y
                });

            }

            //add event to element
            el.addEvent('mouseenter', function () {
                //fire event start
                this.fireEvent('change');
                //set effect for horizontal and vertical style
                if (!this.options.vertical) {
                    this.sMenuBorderFx.start({
                        'left': [this.sMenuBorder.getStyle('left'), el.getPosition().x - this.element.getPosition().x],
                        'width': [this.sMenuBorder.getStyle('width'), el.getStyle('width')]
                    });
                } else {
                    this.sMenuBorderFx.start({
                        'top': [this.sMenuBorder.getStyle('top'), el.getPosition().y - this.element.getPosition().y],
                        'height': [this.sMenuBorder.getStyle('height'), el.getStyle('height')]
                    });
                }

            } .bind(this));

        } .bind(this));

        //add event to reset all
        this.element.addEvent('mouseleave', function () {
            //set effect for horizontal and vertical style
            if (this.selected) {
                if (!this.options.vertical) {
                    this.sMenuBorderFx.start({
                        'left': [this.sMenuBorder.getStyle('left'), this.selected.getPosition().x - this.element.getPosition().x],
                        'width': [this.sMenuBorder.getStyle('width'), this.selected.getStyle('width')]
                    });
                } else {
                    this.sMenuBorderFx.start({
                        'top': [this.sMenuBorder.getStyle('top'), this.selected.getPosition().y - this.element.getPosition().y],
                        'height': [this.sMenuBorder.getStyle('height'), this.selected.getStyle('height')]
                    });
                }
            }

        } .bind(this));

    }

});
window.addEvent('domready', function () {

    StartMenu.delay(1000);

});

function StartMenu() {

    var topMainNav = new sMenu('topNav', {
        duration: '800',
        transition: Fx.Transitions.Back.easeOut,
        onStart: function () {
            // alert('Start');           
            // this.fireEvent('change');
            $$('.sMenuBorder').set('html', '<div class="menuLeft pngFix"></div>');
        },
        onChange: function () {
            // alert('Change');

        }
    })

}