window.addEvent('domready', function(){
    var sLtabsOpts = {
        menuID: 'sLtabsmenu',
        menuClass : 'sLtabsmenu', // menu class name
        divClass: '.Tabs', // div area class
        action: 'click', // event to switch on
        tops: 10,    // go down
        tope: 5      // start position
    };
    if( $('TabList') )var tabs = new sLtabs(sLtabsOpts);

    if( $('MatTabList')){
        // Add Tabs to Mats
        var sLMatTabsOpts = {
            menuID: 'sLMatTabsmenu',
            menuClass : 'sLMatTabsmenu', // menu class name
            divClass: '.sLMatTabs', // div area class
            action: 'click', // event to switch on
            injectBefore: 'MatTabList',
            tops: 10,
            tope: 5
        };
        var matTabs = new sLtabs(sLMatTabsOpts);
    }
});

var sLtabs = new Class({
    initialize: function(options,show,par){
        this.setOptions(options);
        this.construct();
        if (this.divs.length>0){
            this.showtab(show);
        }
        if (par&&par.matCall){
            par.matCall=false;
        }
    },
    setOptions:function(options){
        this.options = Object.extend({}, options || {});
        return true;
    },
    construct:function(){
        this.divs = $$(this.options.divClass);
        if (this.divs.length==0) return null;
        this.li = [];
        var Before = this.options.injectBefore || 'PageForm';

        var ul = new Element('ul').injectBefore(Before).setProperty('id',this.options.menuID);
        var timer = this.options.duration;
        var fx = [];

        var tops  = this.options.tops || 10;
        var tope  = this.options.tope || 0;

        this.divs.each(function(obj,k){
            this.li[k] = new Element('li').setStyles({'top':tope+'px'});
            /*({
            'position':'relative',
            'height' : '25px',
            'width':'100px',
            'padding': '5px',
            'text-align':'center',
            'border':'2px solid #ECECEC',
            //'border-bottom':'0',
            //'top':'24px',
            //'left':'10px',
            //'margin-bottom': '5px',
            'list-style':'none',
            'background':'#FFFFFF',
            'cursor':'pointer',
            'float':'left'
            });*/
            this.li[k].addClass(this.options.menuClass).injectInside(this.options.menuID);
            var lbl = obj.getProperty('rel');
            if (lbl){
                var img = new Element('img').setProperty('src','/make_image.jpg?s=1&t='+encodeURIComponent(lbl)+'');
                img.setProperty('alt',lbl).setProperty('title',lbl).injectInside( this.li[k] );
            }else{
                this.li[k].setHTML(obj.getProperty('rel'));
            }

            this.li[k].addEvent(this.options.action, function(e){
                this.divs.each(function(obj,i){
                    var liImg = this.li[i].getFirst();
                    if (i==k){
                        obj.setStyle('display','block');
                        liImg.setProperty('src','/make_image.jpg?s=2&t='+liImg.getProperty('alt'));
                    }else{
                        obj.setStyle('display','none');
                        liImg.setProperty('src','/make_image.jpg?s=1&t='+liImg.getProperty('alt'));
                    }
                }.bind(this));
            }.bind(this));

            //timer += this.options.duration;
            //fx[k] = new Fx.Styles(this.li[k],{duration: timer, transition: Fx.Transitions.backOut, wait: false});
            //fx[k].start.delay(timer, fx[k], {'top':[20,tope],'opacity':[0,1]});

            this.li[k].addEvent('mouseenter',function(){
                new Fx.Styles(this.li[k],{duration: this.options.duration}).start({'top':[tope,tops],'opacity':[1,.6]});
            }.bind(this));

            this.li[k].addEvent('mouseleave',function(){
                new Fx.Styles(this.li[k],{duration: this.options.duration}).start({'top':[tops,tope],'opacity':[.6,1]});
            }.bind(this));

            obj.setStyle('display','none');
        }.bind(this));
    },
    showtab:function(show){
        if (!show || !this.li[show]) show = 0;
        this.divs[show].setStyle('display','block');
        var img = this.li[show].getFirst()
        if (img){
            img.setProperty('src','/make_image.jpg?s=2&t='+img.getProperty('alt'));
        }
    }
});