/** 
	This object allows a simple setup to hide/show elements on a page, such as blocks 
	in a mini tabbed object. You can choose the event to respond to (mouseover, mousedown, etc.) when the object is created.
	Then, simply passing a list of control elements' ids (the tabs) and then a list of the blocks to hide/show will link them
	altogether. 
	
	For example:
		oTabs = new ZW_Tabby( 'mouseover' );
		oTabs.registerTabs( 'tab1,tab2,tab3', 'blockA,blockB,blockC' );

	Assuming there are elements on the page that have each of the IDs in the list, mousing over 'tab1' will cause 'blockA'
	to show, while hiding 'blockB' and 'blockC'
	
	You can use multiple calls to registerTabs to set up the controls. Also note that you can set up multiple controls for the
	same content block.
		oTabs.registerTabs( 'tab1,tab2,tab3', 'blockA,blockB,blockC' );
		oTabs.registerTabs( 'tab4,tab5, 'blockC,blockD' );		// Now tabs 3 AND 4 will turn on 'blockC'

	
	Note that it is up to the designer to hide all the appropriate elements for the initial page load. Or, use
		oTabs.setCurrentTab('tab3')
	to initialize the tabs when the page loads. 
	
	Also, remember that the html elements must exist on the page or they cannot be registered. This means the JS must either appear
	after the page content, or the object should not be created or registered until after the onload event is triggered. For example,
	this might be a good way to set up the call (using a COB, perhaps, or by including it in another js file)
		<script>
			if(window.addEventListener){
				window.addEventListener( 'load', function(){ loadTabby(); }, false);	// FireFox, Mozilla
			} else {
				window.attachEvent( 'onload', function(){ loadTabby(); }, false);		// IE
			}
						
			function loadTabby(){
				tab = new ZW_Tabby( 'mouseover' );
				tab.registerTabs("tab1,tab2,tab3,tab4", "tabcontent1,tabcontent2,tabcontent3,tabcontent4");
				tab.setCurrentTab('tab1');
			}
		</script>

			
	The active tab control will be in the class 'zw-activetab'. Use this class to apply CSS to the tab if you want the look to change.
	
	ZW_Tabby()

	ZW_Tabby(e_typ)
	e_typ	string	This is the type of event that should trigger the tab-switch. Leave off the 'on' part (i.e. mouseover, click)
					The default is 'mouseover'
**/
function ZW_Tabby( e_typ ){
	/* ************************************************************************ */
	/* Private variables ****************************************************** */	
	
	var i_delay=10;
	var a_registeredTabs = new Array();
	var a_registeredContent = new Array();
	var s_currentTab;
	var s_eventType;
	
	
	/* ************************************************************************ */
	/* Initialize the Tabby here ********************************************** */
	if( e_typ ){
		s_eventType = e_typ;
	} else {
		s_eventType = 'mouseover';
	}
	
	
	/* ************************************************************************ */
	/* Public methods ********************************************************* */	
	
	this.registerTabs =  registerTabs;
	this.getCurrentTab = getCurrentTab;
	this.setCurrentTab = setCurrentTab;	
	
	
	/* ************************************************************************ */
	/* Public properties ****************************************************** */

		
	
	/* ************************************************************************ */
	/* Member Functions ******************************************************* */
	
	function getCurrentTab(){ return currentTab; }
	
	/**
		This allows control of the tab explicitly by other JS in case you don't want to just use the event.	
	**/
	function setCurrentTab( s_id ){
		if( s_currentTab == s_id ){ return; }
		s_currentTab = s_id;
		showTab(s_id);
	}
		
	/**
		registerTabs
		
		s_tabList	string - a comma list of the id's that will be the tab-controls
		s_contentList	string - a comma list of the id's of the content blocks
		
		There should be the same number of values in each comma list. The controls will be parsed into arrays, so the two lists
		will be correlated based on their positions in the list.
		If either the tab Id or the content block Id does not exist on the html page, the pair will be skipped.
		Calling registerTabs multiple times is supported. All previous elements will remain, and any new elements will be added.
		This is true also if you register tabs with the constructor.
	**/
	function registerTabs( s_tabList, s_contentList ){
		var a_Tabs = new Array();
		var a_Content = new Array();
		
		try{
			a_Tabs = s_tabList.split(',');
			a_Content = s_contentList.split(',');
			
			for( i = 0; i<a_Tabs.length; i++){
				if( document.getElementById( a_Tabs[i] ) && document.getElementById( a_Content[i] )){		// Make sure it exists on the page before we register it!
					if( window.addEventListener){			// Mozilla, Netscape, Firefox
						document.getElementById( a_Tabs[i] ).addEventListener(s_eventType, showThisTab, true);
					} else{ 								// IE
						document.getElementById( a_Tabs[i] ).attachEvent("on" + s_eventType, showThisTab, true);
					}
					a_registeredTabs.push( a_Tabs[i] );
					a_registeredContent.push( a_Content[i] );
				}
			}
		}catch(e){
			// alert(e)
		}
	}

	
	/**
		Event driven wrapper for setCurrentTab
	**/
	function showThisTab( e ){
		var obj = window.event ? window.event.srcElement : e.target;
		var cnt = 0;
		var b_found = false;
		
		// If there are any other elements (such as an A or SPAN tag), we need to find the tag that's got the Id.
		// Otherwise, the innermost element becomes the 'event target' even though it wasn't triggering the event.
		while( (!b_found) && cnt < 400 ){
			if( obj.id != ""){
				for( i = 0; i<a_registeredTabs.length; i++){
					if( obj.id == a_registeredTabs[i] ){
						b_found = true;
					}
				}
			}
			if(!b_found){ obj = obj.parentNode; }
			cnt++;	// just in case..
		}
		
		if( !b_found ){ return; }

		setCurrentTab(obj.id);
	}
	
	
	/**
		Loop through all the registered tabs. If the tabId doesn't match the argument, then that tab is cleared of the zw-activetab
		class, and the respective content block is hidden.
		If the tabId matches, that tab's class is set to zw-activetab, and the content display property is set to 'block'
		The tab-class is not completly
	**/
	function showTab( s_id ){
		var pickedContent;
		var pickedTab;
		var content;
		var tab; 
				
			
		for( i = 0; i<a_registeredTabs.length; i++){
			s_tmpId = a_registeredTabs[i];
			
			content = document.getElementById(a_registeredContent[i]);
			tab = document.getElementById(a_registeredTabs[i]);
			
			if( s_id != s_tmpId ){
				content.style.display = "none";
				clearActiveClass( tab );
			}
			else{
				pickedContent = content;
				pickedTab = tab;
			}
		}
		
		
		pickedContent.style.display = "block";
		pickedTab.className += " zw-activetab";
	}
	
	/**
		Self-explanitory.
	**/
	function clearActiveClass( el ){
		el.className = el.className.replace(/ ?zw-activetab/gi, "");
	}
	
}




/******************************************************************************
 ******************************************************************************
								STORY ROTATER

 ******************************************************************************
 *****************************************************************************/

function ZW_StoryRotate( i_del ){
	/* **************************************************************************/
	/* Private variables ****************************************************** */	
	
	var i_delay=3000;
	var a_registeredNodes = new Array();
	var s_eventType;
	var el_current;

	/* **************************************************************************/
	/* Initialize the class here ********************************************** */
	if( i_del ){
		i_delay = i_del;
	}
	
	/* **************************************************************************/
	/* Public methods ********************************************************* */	
	this.start = start;
	this.registerClasses =  registerClasses;
	
	/* **************************************************************************/
	/* Public properties ****************************************************** */

		
	/* **************************************************************************/
	/* Member Functions ******************************************************* */
	
	/**
		This allows control of the tab explicitly by other JS in case you don't want to just use the event.	
	**/
	function setCurrent( el ){
		if( el_current ){ el_current.style.display = "none"; }
		el_current = el;
		el_current.style.display = "block";
	}
		
	/**
		registerClasses
		
		s_classes	string - a comma list of the classes that will be rotating
		
	**/
	function registerClasses( id, s_classes ){
		var a_Classes = new Array();
		var i;
		
		try{
			a_Classes = s_classes.split(',');
			
			for( i = 0; i<a_Classes.length; i++){
				if( document.getElementById( id ) ){		// Make sure it exists on the page before we register it!
					el = getFirstClassElementInNode( document.getElementById( id ), a_Classes[i] );
					if( el != null  && el != ''){
						a_registeredNodes.push( el );
					}
				}
			}
		}catch(e){
			 alert(e)
		}
	}
	
	function start(){
		setInterval( rotateEm, i_delay )	
	}
	
	
	function rotateEm(){
		var rnd =  Math.random();
		var lng = a_registeredNodes.length;
		var indexVal = Math.round( rnd * (lng - 1) );
//		logIt(indexVal + " --> " + a_registeredNodes[ indexVal ] )
		setCurrent( a_registeredNodes[indexVal] );
	}

}

function getFirstClassElementInNode( el, classNm ){
	var i = 0;
	var cNodes;
	
	if( el.className && el.className == classNm ){ return el; }
	if( !el.hasChildNodes() ){ return null; }
	
	cNodes = el.childNodes;
	 for (i = 0; i < cNodes.length; i++){
		result = getFirstClassElementInNode( cNodes[i], classNm );
		if( result != null && result.className == classNm ){ return result; }

	 }
	 return null;
}

function logIt( msg ){
	document.getElementById('logIt').innerHTML = document.getElementById('logIt').innerHTML + "<br>" + msg;
}