window.addEvent('domready', function(){
    var sLtabsOpts = {
        menuID: 'sLtabsmenu',
        menuClass : '.sLtabsmenu', // menu class name
        divClass: '.sLtabs', // div area class
        action: 'click', // event to switch on
        duration: 150
    };
    if( $('PageForm') ) var tabs = new sLtabs(sLtabsOpts);
});

var sLtabs = new Class({
    initialize: function(options){
        this.setOptions(options);
        this.construct();
    },
    setOptions:function(options){
        this.options = Object.extend({}, options || {});
        return true;
    },
    construct:function(){
        this.li = [];
        var ul = new Element('ul').injectBefore('PageForm').setProperty('id',this.options.menuID);

        $$(this.options.divClass).each(function(obj,k){
            this.li[k] = new Element('li').setStyles({
            'position':'relative',
            'height' : '25px',
            'width':'100px',
            'padding': '5px',
            'text-align':'center',
            'border':'2px solid #ECECEC',
            'border-bottom':'0',
            'left':'10px',
            'margin-bottom': '5px',
            'list-style':'none',
            'background':'#FFFFFF'
            });
            this.li[k].style.styleFloat='left';
            this.li[k].addClass(this.options.menuClass);
            this.li[k].innerHTML = obj.getProperty('rel');
            this.li[k].injectInside(this.options.menuID);

            this.li[k].addEvent(this.options.action,function(e){
                $$(this.options.divClass).each(function(obj){
                    obj.style.display = (obj!=$$(this.options.divClass)[k]) ? 'none' : 'block';
                }.bind(this));
            }.bind(this));

            if(k!=0) obj.style.display ='none';
        }.bind(this));
        this.btnFx();
    },
    btnFx:function(){
        var timer = this.options.duration;
        var menufx=[];
        this.li.each(function(el,i){
            $(el).style.cursor = 'pointer';
            $(el).setOpacity(0);
            timer += this.options.duration;
            menufx[i] = new Fx.Styles(el,  {
                duration: timer,
                transition: Fx.Transitions.backOut,
                wait: false
            });
            menufx[i].start.delay(timer, menufx[i], {'top':[50,24],'opacity':[0,1]});

            $(el).addEvent('mouseover',function(){
                var fx = new Fx.Styles(el, {
                    duration: this.options.duration, wait: false,
                    transition: Fx.Transitions.linear
                });
                fx.start({'top':[24,30], 'opacity':[1,.6]});
            }.bind(this));

            $(el).addEvent('mouseout',function(){
                var fx = new Fx.Styles(el, {
                    duration: this.options.duration, wait: false,
                    transition: Fx.Transitions.linear
                });
                fx.start({'top':[30,24], 'opacity':[.6,1]});
            }.bind(this));

            $(el).addEvent('click',function(){
                $(el).setStyle('backgroundColor', '#ECECEC');
                this.li.each(function(tab,j){
                    tab.style.backgroundColor = (el!=tab) ? '#fff' : '#ccc';
                });

            }.bind(this));
        }.bind(this));
    }
});