window.addEvent('domready', function(){
		var sLtabsOpts = { 
			menuID: 'sLtabsmenu',
			menuClass : '.sLtabsmenu', // menu class name
			divClass: '.sLtabs', // div area class
			action: 'click' // event to switch on
			};
		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($$('#main-top-menu ul li')[0]).setProperty('id',this.options.menuID);
						
			$$(this.options.divClass).each(function(obj,k){
					if(k<1) obj.setStyle('display','block');
					this.li[k] = new Element('li').setStyles({
													});
													this.li[k].style.styleFloat='left';
					this.li[k].addClass(this.options.menuClass);
					this.li[k].innerHTML = "<a href='#' onclick='return false;'>"+obj.getProperty('rel')+"</a>";
					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.li.push($$('#main-top-menu ul li')[$$('#main-top-menu ul li').length-1]);
		this.btnFx();
		},
		btnFx:function(){
			var timer =250;
			var menufx=[];
			this.li.each(function(el,i){
					$(el).style.cursor = 'pointer';
					$(el).setStyle('display','block');
					$(el).setOpacity(0);
					timer += 250;
						menufx[i] = new Fx.Styles(el,  {
							duration: timer,
							transition: Fx.Transitions.backOut,
							wait: false
						});
						menufx[i].start.delay(timer, menufx[i], {'right':[0,15],'opacity':[0,1]});
						
						$(el).addEvent('mouseover',function(){
							var fx = new Fx.Styles(el, {
									duration: 250, wait: false,
									transition: Fx.Transitions.linear
									});
							fx.start({'right':[15,0], 'opacity':[1,.9]});
						}.bind(this));
							
						$(el).addEvent('mouseout',function(){
							var fx = new Fx.Styles(el, {
									duration: 250, wait: false,
									transition: Fx.Transitions.linear
									});
							fx.start({'right':[0,15], 'opacity':[.9,1]});
						}.bind(this));		
						
						$(el).addEvent('click',function(){
							$(el).setStyle('backgroundColor', '#0099FF');
								this.li.each(function(tab,j){ 
									if (el==tab) tab.addClass('active');
										else tab.removeClass('active');
									  });
						}.bind(this));	
				}.bind(this));
		}
});
