var Tabs = { 
	Init: function() {		 
		$$('.tabs').each( Tabs.Create );
	},
	/**
	 * 
	 * @param ele the tabber element itself, has components such as "ul.tabNav", and ".tabBody"
	 */
	Create: function( ele ) { 
		// by default, the active tab is the first one.
		ele.active = 0;
		
		// get all the tab elements
		ele.tabEles = ele.select('.tabNav li');
		
		// get all the tab "content" elements
		ele.tabContentEles = ele.select('.tabBody');

		// before assigning events to the tabs, check to see if a change settings link exists
		// if it does, then we need to hide that div if someone clicks on the tab.
		var changeSettingBody = ele.select('.change');

		/**
		 * go through each change settings element
		 * 
		 * @param {HtmlElement} changeEle
		 */ 
		changeSettingBody.each( function( changeEle ) { 
			// since change elements can either be for all tabs or tab specific, 
			// this is the general call to show the change settings element
			changeEle.showSettings = function( tabWide ) {
				// show the settings element
				ele.addClassName('showChangeSettingsTab');
				
				// we actually wanna hide the second active item we find, which is the content element
				// and also check that the change tab is already shown
				if( ele.__TAB_WIDE_CHANGE && ! ele.__CURRENT_ACTIVE_TAB ) {
					// usually all the tab contents should be in its own div, but its not
					
					// the local module located on the channel page is not a tabbed module, yet it is treated like a tab
					// since there's not tabs, there's only 1 active class on the main content, so pick the first one, not the 2nd
					if (ele.select('.active').length == 1) {
						ele.__CURRENT_ACTIVE_TAB = ele.selectFirst('.active').removeClassName('active');
					} else {
						ele.__CURRENT_ACTIVE_TAB = ele.select('.active')[1].removeClassName('active');
					}
					ele.__CURRENT_ACTIVE_TAB.removeClassName('active');
				}
			};
			
			// this cancel function can get called 1 of 2 ways: A) by clicking cancel
			// B) by choosing another tab when the settings element is being shown.
			changeEle.cancelChanges = function() {
				ele.removeClassName('showChangeSettingsTab');
				
				// show the element since we are done
				if( ele.__CURRENT_ACTIVE_TAB ) { 
					// usually all the tab contents should be in its own div, but its not
					ele.__CURRENT_ACTIVE_TAB.addClassName('active');
					ele.__CURRENT_ACTIVE_TAB = null;
				}
			}
			
			// set the onclick for the cancel function (if the button exists)
			var cancelButtons = changeEle.select('.cancel');
			if (cancelButtons.length > 0) {
				
				cancelButtons.each(function( cancelEle ) {
					cancelEle.voidLink();
					cancelEle.observe('click', changeEle.cancelChanges);
				});
			}
		});
					
		// go through each tab
		ele.tabEles.each( function( tabEle, index ) {
			
			// store the change settings element for this tab if it exists on this tabEle
			var changeEle =  null;
			if (ele.tabContentEles.length > 0) {
				changeEle = ele.tabContentEles[index].selectFirst('.change');
			}
			
			// check to see that this tab is actually shown
			if( tabEle.hasClassName('active') ) {
				// if it is shown, set the current index and show the appropriate tabBody
				ele.active = index;			
			}
			
			// if the change element exists in this tab, then we need to show the settings tab when we click this link
			if( changeEle ) {
				var linkEle = ele.tabContentEles[index].selectFirst('.changeSetting');
				linkEle.voidLink();
				linkEle.observe('click', changeEle.showSettings );
			}
			
			var linkEle = tabEle.selectFirst('a');
			linkEle.voidLink();
			
			// assign the click event to the tabs, show/hide the tab content based on the tab clicked on
			linkEle.observe('click', function() {
				// the last tab we clicked on if one, has to reset it, not this tab.
				if( ele.active ) { 
					var lastTabChangeEle = ele.tabContentEles[ele.active].selectFirst('.change');
					// if this tab has its own change element, then call its cancel function 
					// and reset it before we do anything else
					if( lastTabChangeEle && typeof(lastTabChangeEle.cancelChanges) == 'function' ) {
						lastTabChangeEle.cancelChanges();
					}
				}
							
				// if this tab has has a global tab-wide change then call that one
				if( ele.changeEle ) {
					ele.changeEle.cancelChanges();
				}
				
				// hide everything by reseting active
				ele.tabEles.invoke('removeClassName', 'active');				
				ele.tabContentEles.invoke('removeClassName', 'active');
				
				// highlight the correct tab
				tabEle.addClassName('active');

				// show the correct tab body
				ele.tabContentEles[index].addClassName('active');
				
				// set the active index of the current tab				
				ele.active = index;
						
			});
		});
		
		// check to see if there's a tab-wide change settings link
		var changeSettingTabWideEle = ele.selectFirst('.titleBar .changeSetting');
		if( changeSettingTabWideEle ) {
			
			// set a flag so the ShowSettings method shows/hides the active tab.
			ele.__TAB_WIDE_CHANGE = true;
			// get the tab-wide 
			var changeEle = ele.selectFirst('.change');
			
			// set the onclick but also hide the active div in this case
			changeSettingTabWideEle.voidLink();
			changeSettingTabWideEle.observe('click', changeEle.showSettings );
			
			// since there's only one change link, we need to be able to reference it from within a tab
			// so assign it to the tabber element
			ele.changeEle = changeEle;
		}
	}
};