/*==================================================
  $Id$
  tabber.js by Patrick Fitzgerald pat@barelyfitz.com

  Documentation can be found at the following URL:
  http://www.barelyfitz.com/projects/tabber/

  License (http://www.opensource.org/licenses/mit-license.php)

  Copyright (c) 2006 Patrick Fitzgerald

  Permission is hereby granted, free of charge, to any person
  obtaining a copy of this software and associated documentation files
  (the "Software"), to deal in the Software without restriction,
  including without limitation the rights to use, copy, modify, merge,
  publish, distribute, sublicense, and/or sell copies of the Software,
  and to permit persons to whom the Software is furnished to do so,
  subject to the following conditions:

  The above copyright notice and this permission notice shall be
  included in all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
  BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
  ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  SOFTWARE.
  ==================================================*/

function tabberObj(argsObj)
{
	var arg; // name of an argument to override

	// Element for the main tabber div.
	// If you supply this in argsObj, then the init() method will be called.
	this.div = null;

	// Class of the main tabber div
	this.classMain = "tabber";

	// Rename classMain to classMainLive after tabifying
    // (so a different style can be applied)
	this.classMainLive = "tabberlive";

	// Class of each DIV that contains a tab
	this.classTab = "tabbertab";

	// Class to indicate which tab should be active on startup
	this.classTabDefault = "tabbertabdefault";

	// Class for the navigation UL
	this.classNav = "tabbernav";

	// When a tab is to be hidden, instead of setting display='none',
	// we set the class of the div to classTabHide. In your screen
    // stylesheet you should set classTabHide to display:none.  In your
    // print stylesheet you should set display:block to ensure that all
    // the information is printed.
	this.classTabHide = "tabbertabhide";

	// Class to set the navigation LI when the tab is active, so you can
	// use a different style on the active tab.
	this.classNavActive = "tabberactive";

	// Elements that might contain the title for the tab, only used if a
    // title is not specified in the TITLE attribute of DIV classTab.
	this.titleElements = ['h2','h3','h4','h5','h6'];

	// Should we strip out the HTML from the innerHTML of the title elements?
    // This should usually be true.
	this.titleElementsStripHTML = true;

	// If the user specified the tab names using a TITLE attribute on
    // the DIV, then the browser will display a tooltip whenever the
    // mouse is over the DIV. To prevent this tooltip, we can remove the
    // TITLE attribute after getting the tab name.
	this.removeTitle = true;

	// If you want to add an id to each link set this to true
	this.addLinkId = false;

	// If addIds==true, then you can set a format for the ids.
	// <tabberid> will be replaced with the id of the main tabber div.
	// <tabnumberzero> will be replaced with the tab number
    //   (tab numbers starting at zero)
	// <tabnumberone> will be replaced with the tab number
    //   (tab numbers starting at one)
    // <tabtitle> will be replaced by the tab title
    //   (with all non-alphanumeric characters removed)
	this.linkIdFormat = '<tabberid>nav<tabnumberone>';

	// You can override the defaults listed above by passing in an object:
    // var mytab = new tabber({property:value,property:value});
	for (arg in argsObj) { this[arg] = argsObj[arg]; }

	// Create regular expressions for the class names.
	// Note: if you change the class names after a new object is created
	// you must also change these regular expressions.
	this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
	this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
	this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
	this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
	this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');

	// Array of objects holding info about each tab
	this.tabs = [];

	// If the main tabber div was specified, call init() now
	if (this.div) {

		this.init(this.div);

		// We don't need the main div anymore, and to prevent a memory leak
		// in IE, we must remove the circular reference between the div
		// and the tabber object.
		this.div = null;
	}
}


//--------------------------------------------------
// Methods for tabberObj
//--------------------------------------------------


tabberObj.prototype.init = function(e)
{
	// Set up the tabber interface.
	// 
    // e = element (the main containing div)
	//
    // Example:
    // init(document.getElementById('mytabberdiv'))
	var
	childNodes, // child nodes of the tabber div
	i, i2, // loop indices
	t, // object to store info about a single tab
	defaultTab=0, // which tab to select by default
	DOM_ul, // tabbernav list
	DOM_li, // tabbernav list item
	DOM_a, // tabbernav link
	aId, // A unique id for DOM_a
	headingElement; // searching for text to use in the tab

	// Verify that the browser supports DOM scripting
	if (!document.getElementsByTagName) { return false; }

	// If the main DIV has an ID then save it.
	if (e.id) {
		this.id = e.id;
	}

	// Clear the tabs array (but it should normally be empty)
	this.tabs.length = 0;

	// Loop through an array of all the child nodes within our tabber element.
	childNodes = e.childNodes;
	for(i=0; i < childNodes.length; i++) {

		// Find the nodes where class="tabbertab"
		if(childNodes[i].className &&
		   childNodes[i].className.match(this.REclassTab)) {
			
			// Create a new object to save info about this tab
			t = {};
			
			// Save a pointer to the div for this tab
			t.div = childNodes[i];
			
			// Add the new object to the array of tabs
			this.tabs[this.tabs.length] = t;

			// If the class name contains classTabDefault,
			// then select this tab by default.
			if (childNodes[i].className.match(this.REclassTabDefault)) {
				defaultTab = this.tabs.length-1;
			}
		}
	}

	// Create a new UL list to hold the tab headings
	DOM_ul = document.createElement("ul");
	DOM_ul.className = this.classNav;
	
	// Loop through each tab we found
	for (i=0; i < this.tabs.length; i++) {

		t = this.tabs[i];

		// Get the label to use for this tab:
		// From the title attribute on the DIV,
		// Or from one of the this.titleElements[] elements,
		// Or use an automatically generated number.
		t.headingText = t.div.title;

		// Remove the title attribute to prevent a tooltip from appearing
		if (this.removeTitle) { t.div.title = ''; }

		if (!t.headingText) {

			// Title was not defined in the title of the DIV,
			// So try to get the title from an element within the DIV.
			// Go through the list of elements in this.titleElements
			// (typically heading elements ['h2','h3','h4'])
			for (i2=0; i2<this.titleElements.length; i2++) {
				headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
				if (headingElement) {
					t.headingText = headingElement.innerHTML;
					if (this.titleElementsStripHTML) {
						t.headingText.replace(/<br>/gi," ");
						t.headingText = t.headingText.replace(/<[^>]+>/g,"");
					}
					break;
				}
			}
		}

		if (!t.headingText) {
			// Title was not found (or is blank)
			// so automatically generate a number for the tab.
			t.headingText = i + 1;
		}

		// Create a list element for the tab
		DOM_li = document.createElement("li");

		// Save a reference to this list item so we can later change it to
		// the "active" class
		t.li = DOM_li;

		// Create a link to activate the tab
		DOM_a = document.createElement("a");
		DOM_a.innerHTML = t.headingText;
		DOM_a.href = "#";
		DOM_a.title = t.headingText;
		DOM_a.onclick = this.navClick;

		// Add some properties to the link so we can identify which tab
		// was clicked. Later the navClick method will need this.
		DOM_a.tabber = this;
		DOM_a.tabberIndex = i;

		// Do we need to add an id to DOM_a?
		if (this.addLinkId && this.linkIdFormat) {

			// Determine the id name
			aId = this.linkIdFormat;
			aId = aId.replace(/<tabberid>/gi, this.id);
			aId = aId.replace(/<tabnumberzero>/gi, i);
			aId = aId.replace(/<tabnumberone>/gi, i+1);
			aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

			DOM_a.id = aId;
		}

		// Add the link to the list element
		DOM_li.appendChild(DOM_a);

		// Add the list element to the list
		DOM_ul.appendChild(DOM_li);
	}

	// Add the UL list to the beginning of the tabber div
	e.insertBefore(DOM_ul, e.firstChild);

	// Make the tabber div "live" so different CSS can be applied
	e.className = e.className.replace(this.REclassMain, this.classMainLive);

	// Activate the default tab, and do not call the onclick handler
	this.tabShow(defaultTab);

	// If the user specified an onLoad function, call it now.
	if (typeof this.onLoad == 'function') {
		this.onLoad({tabber:this});
	}

	return this;
};


tabberObj.prototype.navClick = function(event)
{
	// This method should only be called by the onClick event of an <A>
	// element, in which case we will determine which tab was clicked by
    // examining a property that we previously attached to the <A>
    // element.
	//
    // Since this was triggered from an onClick event, the variable
    // "this" refers to the <A> element that triggered the onClick
    // event (and not to the tabberObj).
	//
    // When tabberObj was initialized, we added some extra properties
    // to the <A> element, for the purpose of retrieving them now. Get
    // the tabberObj object, plus the tab number that was clicked.

	var
	rVal, // Return value from the user onclick function
	a, // element that triggered the onclick event
	self, // the tabber object
	tabberIndex, // index of the tab that triggered the event
	onClickArgs; // args to send the onclick function

	a = this;
	if (!a.tabber) { return false; }

	self = a.tabber;
	tabberIndex = a.tabberIndex;

	// Remove focus from the link because it looks ugly.
    // I don't know if this is a good idea...
	a.blur();

	// If the user specified an onClick function, call it now.
    // If the function returns false then do not continue.
	if (typeof self.onClick == 'function') {

		onClickArgs = {tabber:self, index:tabberIndex, event:event};

		// IE uses a different way to access the event object
		if (!event) { onClickArgs.event = window.event; }

		rVal = self.onClick(onClickArgs);
		if (rVal === false) { return false; }
	}

	self.tabShow(tabberIndex);

	return false;
};


tabberObj.prototype.tabHideAll = function()
{
	var i; // counter

	// Hide all tabs and make all navigation links inactive
	for (i = 0; i < this.tabs.length; i++) {
		this.tabHide(i);
	}
};


tabberObj.prototype.tabHide = function(tabberIndex)
{
	var div;

	if (!this.tabs[tabberIndex]) { return false; }

	// Hide a single tab and make its navigation link inactive
	div = this.tabs[tabberIndex].div;

	// Hide the tab contents by adding classTabHide to the div
	if (!div.className.match(this.REclassTabHide)) {
		div.className += ' ' + this.classTabHide;
	}
	this.navClearActive(tabberIndex);

	return this;
};


tabberObj.prototype.tabShow = function(tabberIndex)
{
	// Show the tabberIndex tab and hide all the other tabs

	var div;

	if (!this.tabs[tabberIndex]) { return false; }

	// Hide all the tabs first
	this.tabHideAll();

	// Get the div that holds this tab
	div = this.tabs[tabberIndex].div;

	// Remove classTabHide from the div
	div.className = div.className.replace(this.REclassTabHide, '');

	// Mark this tab navigation link as "active"
	this.navSetActive(tabberIndex);

	// If the user specified an onTabDisplay function, call it now.
	if (typeof this.onTabDisplay == 'function') {
		this.onTabDisplay({tabber:this, index:tabberIndex});
	}

	return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{
	// Note: this method does *not* enforce the rule
    // that only one nav item can be active at a time.

	// Set classNavActive for the navigation list item
	this.tabs[tabberIndex].li.className = this.classNavActive;

	return this;
};


tabberObj.prototype.navClearActive = function(tabberIndex)
{
	// Note: this method does *not* enforce the rule
    // that one nav should always be active.

	// Remove classNavActive from the navigation list item
	this.tabs[tabberIndex].li.className = '';

	return this;
};


//==================================================


function tabberAutomatic(tabberArgs)
{
	// This function finds all DIV elements in the document where
    // class=tabber.classMain, then converts them to use the tabber
    // interface.
	// tabberArgs = an object to send to "new tabber()"
	var
    tempObj, // Temporary tabber object
    divs, // Array of all divs on the page
    i; // Loop index

	if (!tabberArgs) { tabberArgs = {}; }

	// Create a tabber object so we can get the value of classMain
	tempObj = new tabberObj(tabberArgs);

	// Find all DIV elements in the document that have class=tabber

	// First get an array of all DIV elements and loop through them
	divs = document.getElementsByTagName("div");
	for (i=0; i < divs.length; i++) {
		
		// Is this DIV the correct class?
		if (divs[i].className &&
			divs[i].className.match(tempObj.REclassMain)) {
			
			// Now tabify the DIV
			tabberArgs.div = divs[i];
			divs[i].tabber = new tabberObj(tabberArgs);
		}
	}
	
	return this;
}


//==================================================


function tabberAutomaticOnLoad(tabberArgs)
{
	// This function adds tabberAutomatic to the window.onload event,
    // so it will run after the document has finished loading.

	var oldOnLoad;

	if (!tabberArgs) { tabberArgs = {}; }

	// Taken from: http://simon.incutio.com/archive/2004/05/26/addLoadEvent
	oldOnLoad = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = function() {
			tabberAutomatic(tabberArgs);
		};
	} else {
		window.onload = function() {
			oldOnLoad();
			tabberAutomatic(tabberArgs);
		};
	}
}


//==================================================


// Run tabberAutomaticOnload() unless the "manualStartup" option was specified

if (typeof tabberOptions == 'undefined') {

    tabberAutomaticOnLoad();

} else {

	if (!tabberOptions.manualStartup) {
		tabberAutomaticOnLoad(tabberOptions);
	}

}