var OsloVVSTabMenu = Class.create(
{
	currentActive: 0,
	contentElements: new Array(),
	handleElements: new Array(),
	initialize: function(containerId, handleClassName, contentClassName)
	{
		if(!$(containerId)) return false;
		if($($$('#'+containerId+' .'+handleClassName)[0]))
		{
			$$('#'+containerId+' .'+handleClassName).each(function(tabBtn)
			{
				this.handleElements.push(tabBtn);
			}.bind(this));
		}
		else
		{
			throw('Failed indexing handles');
			return false;
		}
			
		if($($$('#'+containerId+' .'+contentClassName)[0]))
		{
			$$('#'+containerId+' .'+contentClassName).each(function(content)
			{
				this.contentElements.push(content);
			}.bind(this));
		}
		else
		{
			throw('Failed indexing content');
			return false;
		}
			
		this.setObservers();
	},
	
	setObservers: function()
	{
		var self = this;
		this.handleElements.each(function(tabBtn)
		{
			$(tabBtn).setAttribute('onclick', 'return false');
			$(tabBtn).observe('click', function()
			{
				var index = self.handleElements.indexOf(this);
				self.changeActiveElements(index)
				self.changeTabcontent(index);
			});
		});
	},
	
	changeActiveElements: function(index)
	{
		$(this.handleElements[this.currentActive]).removeClassName('active');
		$(this.handleElements[index]).addClassName('active');
	},
	
	changeTabcontent: function(index)
	{
		$(this.contentElements[this.currentActive]).removeClassName('active');
		this.currentActive = index;
		$(this.contentElements[index]).addClassName('active');
	}
});
document.observe('dom:loaded', function()
{
	var tabmenu = new OsloVVSTabMenu('tabmenuContainer', 'handle', 'content');
});