/* jslint verified 2008.10.14  */
/*jslint browser: true, onevar: true, undef: true, white: false, eqeqeq: true */
/*global $, $$, document, TabOrganizer, TabHandler, Class */
/***************************************************************************************************
****************************************************************************************************

	Add the javascript necessary for tabbed navigation.
	This is a little more intrusive. It assumes a pretty rigid structure to the XHTML, but it
	does simplify a fairly common (and cool) website feature, so I think its worth it.
	
	The links for the tabs must be contained within spans directly underneath the div with
	'tab_organizer' class. The tabs that contain the content must be named 'id_0', 'id_1', etc.
	where id is the id of the main div.
		
****************************************************************************************************
***************************************************************************************************/
var TabHandler = function () {
	var self = {
		tabOrganizers: [],
		setup: function () {
			// Setup tabs for tabbed organization
			self.tabOrganizers = [];
			var divs = document.getElementsByTagName("DIV"), i;
			for (i=0; i<divs.length; ++i) {
				if ($$(divs[i]).hasClassName("tab_organizer")) {
					self.tabOrganizers.push(new TabOrganizer(divs[i]));
				}
			}
		}
	};
	return self;
}();
window.addLoad(TabHandler.setup);

var TabOrganizer = new Class({
	initialize: function (div) {
		this.div = $$(div);
		this.tabHeaders = [];
		this.tabs = [];
		this.selectedTab = -1;

		var tabIndex = 0,
			tabToSelect = 0, tabHeader, tab,
			children = div.childNodesNonText(),
			index;
		for (index in children) {
			if (children.hasOwnProperty(index)) {
				tabHeader = children[index];
				// Attach tab switching javascript to the children
				if (tabHeader.isNode('span') || tabHeader.isNode('div')) {
					this._makeClickable(tabHeader, tabIndex);
					if (tabHeader.hasClassName('currentTab')) {
						this.selectedTab = tabIndex;
						tabToSelect = tabIndex;
					}
					this.tabHeaders.push(tabHeader);
					tab = $(div.id + '_' + tabIndex);
					if (tab) { this.tabs.push(tab); }
					++tabIndex;
				}
			}
		}
		if (tabIndex !== 0) { this.switchTab(tabToSelect); }
	},
	// Switch the current content with the selected content (by using the display property)
	switchTab: function (tabIndex) {
		if (tabIndex !== this.selectedTab) {
			this.tabHeaders[this.selectedTab].removeClassName('currentTab');
			this.tabs[this.selectedTab].hide();
			this.tabHeaders[tabIndex].addClassName('currentTab');
			this.tabs[tabIndex].show();
			this.selectedTab = tabIndex;
			var handful = this.tabs[tabIndex].getElementsByTagName('div')[0];
			if (handful && handful.handful && handful.handful.firstPage) {
				handful.handful.firstPage();
			}
		}
	},
	_makeClickable: function (tabHeader, tabIndex) {
		var me = this;
		tabHeader.addClick(me.switchTab.bind(me, tabIndex));
	}
});