/* CONFIGURATION AREA */
/**
 *	html structure should be like this:
 *	<container id="<tab_prefix>_menu">
 *		<a href="#" class="active" rel="<tab identifier1>">Link1</a>
 *		<a href="#" rel="<tab identifier2>">Link2</a>
 *		...
 *	</container>
 *	<container id="<tab_prefix>_content">
 *		<container id="<tab_prefix>_<tab identifier1>">
 *				Tab 1 content
 *		</container>
 *		<container id="<tab_prefix>_<tab identifier2>">
 *				Tab 2 content
 *		</container>
 *		... 
 *	</container>       
 *
 *	Variables:
 *	
 *	prefix:  <tab_prefix>
 *	activeTag: 'this' (will add class to current element) / 'tag' (first parent with such tag will be taken)
 *  activeClass: 'active'
*/

var config = {
	tabs: new Array(
		{
			prefix:'tabtoggler1',
			activeTag: 'li',
			activeClass: 'active', 
			contentTag: 'div'
		},

		{
			prefix:'tabtoggler2',
			activeTag: 'this', 
			activeClass: 'active', 
			contentTag: 'div'
		}
	)
};

addEvent('load', initTabs);


/* CODE AREA */
var TabsToggler = {};
function initTabs(){
	if(!config.tabs) return;
	for(var i=0; i < config.tabs.length; i++){
		var tab = config.tabs[i];
		var menu = document.getElementById( tab.prefix + '_menu' );
		var content = document.getElementById( tab.prefix + '_content' );
		if( !menu || !content ) continue;
		
		var oTab = tab;
		oTab.active = null;
		oTab.elements = {};
		
		var links = menu.getElementsByTagName("A");
		for(var j=0; j<links.length; j++){
			var linkEl = links[j];
			var activeEl = (tab.activeTag == 'this')? linkEl : getParentByTag(linkEl, tab.activeTag);
			var tabID = linkEl.getAttribute('rel');
			if( activeEl.className.lastIndexOf(tab.activeClass) > -1 ){
				oTab.active = tabID;
			}
			var tabContent = document.getElementById( tab.prefix + '_' + tabID );
			if( tabContent ){
				tabContent.style.display = (oTab.active && oTab.active == tabID)? 'block' : 'none';
			}
			
			linkEl.setAttribute('prefix', tab.prefix);
			oTab.elements[tabID] = {
				tabID: tabID,
				linkEl: linkEl,
				activeEl: activeEl,
				content: tabContent
			};
			
			linkEl.onclick = function(){
				var prefix = this.getAttribute('prefix');
				var tabID = this.getAttribute('rel');
				var oTab = TabsToggler[prefix];
				
				var activeTab = oTab.elements[ oTab.active ];
				activeTab.activeEl.className = activeTab.activeEl.className.replace(' '+oTab.activeClass, '').replace(oTab.activeClass, '');
				activeTab.content.style.display = 'none';
				
				oTab.active = tabID;
				var activeTab = oTab.elements[ oTab.active ];
				if( activeTab.activeEl.className.lastIndexOf(oTab.activeClass) == -1  )
					activeTab.activeEl.className += ' ' + oTab.activeClass;
				activeTab.content.style.display = 'block';
				
				return false;
			}
		} // end for( links )

		TabsToggler[ tab.prefix ] = oTab;
		
	} // end for( config.tabs )
}

function getParentByTag( node, tag ){
	if(typeof(node.tagName) != 'undefined'){
		if(node.tagName.toUpperCase() == tag.toUpperCase()){
			return node;
		}
		else if(typeof(node.parentNode) != 'undefined'){
			return getParentByTag(node.parentNode, tag);
		}
	}
	return null;
}

/* common */
function addEvent(event,initMethod) {
	if (window.addEventListener){
		window.addEventListener(event, initMethod, false);
	}
	else if (window.attachEvent){
		window.attachEvent("on" + event, initMethod);
	}
}