Wd.Tabs = {};

Wd.Tab = new Class
({
	options:
	{
		opacityIn: 0.8,
		opacityOut: 0.4
	},
 
	initialize: function(el)
	{
		this.element = $(el);
		
		this.fx = new Fx.Styles(this.element, { wait: false, duration: 250 });
		
		this.element.setOpacity(this.options.opacityOut);
		
		this.element.onmouseover = this.slideIn.bind(this);
		this.element.onmouseout = this.slideOut.bind(this);
	},
	
	slideIn: function()
	{
		this.fx.start({'margin-left': -160, 'opacity': this.options.opacityIn});
	},
	
	slideOut: function()
	{
		this.fx.start({'margin-left': 0, 'opacity': this.options.opacityOut});
	}
});

Wd.Tabs.Vertical = new Class
({
 	children: [],
	
	initialize: function(el, children)
	{
		this.element = $(el);
		this.element.setStyle('visibility', 'visible');
		
//		console.info('tabs: %a, %a', this.element, children);
		
		children.each
		(
			function(child)
			{
				this.children.push(new Wd.Tab(child));
			},
			
			this
		)			  
	}
});

window.addEvent
(
	'domready', function()
	{
		var tabs = document.getElementById('tabs');
		
		if (!tabs)
		{
			return;
		}
		
		new Wd.Tabs.Vertical(tabs, $$('#tabs a.tab'));
	}
);