window.addEvent('domready', function(){
		var sLtabsOpts = {
			menuID: 'sLtabsmenu',
			menuClass : '.sLtabsmenu', // menu class name
			divClass: '.Tabs', // div area class
			action: 'click' // event to switch on
			};
		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){
				this.setOptions(options);
				this.construct();
		},
		setOptions:function(options){
			this.options = Object.extend({}, options || {});
			return true;
		},
		construct:function(){
			this.li = [];
			if (!this.options.injectBefore) this.options.injectBefore='PageForm';
			var ul = new Element('ul').injectBefore(this.options.injectBefore).setProperty('id',this.options.menuID);

			$$(this.options.divClass).each(function(obj,k){
					this.li[k] = new Element('li');
					this.li[k].addClass(this.options.menuClass);
					this.li[k].innerHTML = obj.getProperty('rel');
					if(!this.options.reloaded)
						this.li[k].injectInside(this.options.menuID);

					if(this.options.reloaded && k <= $$('.sLMatTabsmenu').length+1)
						this.li[k].injectInside(this.options.menuID);

					var timer = 0;
					var menufx=[];
					var tops = (this.options.tops) ? this.options.tops : 20;
					var tope = (this.options.tope) ? this.options.tope : 15;

					if( $(this.li[k]) ){
								timer += 50;
									menufx[k] = new Fx.Styles(this.li[k],  {
										duration: timer,
										transition: Fx.Transitions.backOut,
										wait: false
									});

									this.li[k].addEvent('mouseover',function(){
										var fx = new Fx.Styles(this.li[k], {
												duration: 150, wait: false,
												transition: Fx.Transitions.linear
											});
										fx.start({'top':[tope,tops], 'opacity':[1,.6]});
									}.bind(this));

									this.li[k].addEvent('mouseout',function(){
										var fx = new Fx.Styles(this.li[k], {
												duration: 150, wait: false,
												transition: Fx.Transitions.linear
											});
										fx.start({'top':[tops,tope], 'opacity':[.6,1]});
									}.bind(this));
							}

							this.li[k].addEvent(this.options.action,function(e){

										this.li.each(function(tab,j){
													tab.style.backgroundColor = (this.li[k]!=tab) ? '#fff' : '#ccc';
													  }.bind(this));

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

									}.bind(this));

							if($(this.li[k]) && k <= $$(this.options.divClass).length){
								try{ menufx[k].start.delay(timer, menufx[k], {'top':[tops,tope],'opacity':[0,1]});
										if(k!=0) obj.style.display ='none';
										if(k==0) this.li[k].style.backgroundColor = "#ccc";
										this.li[k].style.cursor = 'pointer';
								}catch(e){};
							   }

					}.bind(this));

				//select the active tab
				if (this.options.selected) $(this.li[this.options.selected]).fireEvent(this.options.action);
		}
});