/**
 * universal tabber library for switching contents
 *
 * Example HTML definition for tabber :
 *
 * <div id="tabsContaninerId">
 *   <a id="T_x_0" href="" class="active">tab1</a>
 *   <a id="T_x_1" href="">tab2</a>
 *   <a id="T_x_2" href="">tab3</a>
 *   ...
 * </div>
 * <div id="contensContainerId">
 *	 <div id="C_x_0" class="active">content for tab1</div>
 *	 <div id="C_x_1">content for tab2</div>
 *	 <div id="C_x_2">content for tab3</div>
 *	 ...
 * </div>
 *
 * Tabber works on principe adding/removin "active" class to active tab/content
 *
 * @author dendy
 * @version 1.0/14.03.2011
 *
 */
var tabber = {

	init : function(tabsContainerId, contentsContainerId)
	{
		$('#' + tabsContainerId + '> a').click(function(e)
		{
			e.preventDefault();

			// turn off old active buttom & turn on new one
			$(this).parent().find('a').removeClass('active');
			$(this).addClass('active');

			// get Id of clicked tab
			var openerId = $(this).attr('id').split('_')[2];

			$('#' + contentsContainerId + '> div').each(function()
			{
				// off all contents
				if ($(this).attr('class') == 'active')
				{
					$(this).addClass('inactive').removeClass('active');
				}

				// turn on the content with same id as is clicked tab's id
				if ($(this).attr('id').split('_')[2] == openerId)
				{
					$(this).addClass('active').removeClass('inactive');
				}
			});
		});
	}
	
}