

var Tabs = new Class({
	
	menu:[],
	menuContent:[],
	current:null,
	
	initialize: function(menu, content) {
		this.menu = $(menu).getElements('li');
		this.menuContent = $(content).getChildren('div');
		
		var self = this;
		
		this.menu.each(function(el, i) {
			el.addEvent('mouseover', function() { this.addClass('hover')});
			el.addEvent('mouseout', function() { this.removeClass('hover')});
			el.addEvent('click', function() { self.selectItem(i); })
		});
		
		this.selectItem(0)
	},
	
	selectItem: function(index) {
		if (this.current == null) {
			this.menuContent.each(function(el) {
				el.setStyle('display', 'none');
			});
		} else {
			this.menuContent[this.current].setStyle('display', 'none');
			this.menu[this.current].removeClass('selected');
		}
		
		this.current = index;
		
		this.menuContent[index].setStyle('display', 'block');
		this.menu[index].addClass('selected');
	}
	
})

window.addEvent('domready', function() {
	var tabs = new Tabs('menu', 'menucontent');
});
