TabMenu = {

	/**
	 * Perform actual initialization 
	 */
	init: function()
	{
		
		if($('payoff-tabs'))
		{
		
			/* add functions to the what-where menu items */
			var elements = $('payoff-tabs').getElementsByTagName("li");
					
			/* loop through all list items and add a function call to those items */			
			for (var j = 0; j < elements.length; j++)
			{
				connect(elements[j], "onclick", bind(TabMenu._switchTab, elements[j]))	
			}
		}

	}, // function _doInit

	/**
	 * Shows a specific block.
	 */
	_switchTab: function()
	{
	
		/* no need to show the tab when it is allready active */
		if(hasElementClass(this, "active"))
		{
			return;
		}
	
		/* this clicked tab will be the active tab */
		activeBlockId = this.id.replace('-tab', '');
					
		/* find the all the tabs next to the current tab */
		var elements = this.parentNode.getElementsByTagName("li");

		/* loop through the tabs and deactivate those tabs and hide the corresponding divs */
		for (var i = 0; i < elements.length; i++)
		{
			blockId = elements[i].id.replace('-tab', '');
			
			//blindUp(blockId, {'duration': 0.1});

			removeElementClass($(blockId + '-tab'), "active");
			
			fade(blockId, {'delay': 0, 'duration': 0.1});

		}

		/* show the text */
		appear(activeBlockId, {'delay': 0.4, 'duration': 0.1});

		/* set the clicked tab as active */
		addElementClass($(activeBlockId + '-tab'), "active");

	} // function _switchTab


}; // class TabMenu

/**
 * Load menu on document load.
 */
addLoadEvent(TabMenu.init);