// Copyright (C) 2007 Stephane Lavergne <http://www.imars.com/>
//
// This program is free software: you can redistribute it and/or modify it
// under the terms of the GNU General Public License as published by the Free
// Software Foundation, either version 3 of the License, or (at your option)
// any later version.
//
// This program is distributed in the hope that it will be useful, but WITHOUT
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
// FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
// more details.
//
// You should have received a copy of the GNU General Public License along
// with this program. If not, see <http://www.gnu.org/licenses/>.

/*

Non-obstrusive tab bars.

Usage: Simply include "imars.dom.tabs.js" and it will initialize when document loads.

Dependencies: imars.js, imars.dom.js

Adding tab bars:

1. Create a tab bar.

The bar's containing element should be given an ID in the form: "tabbar_A"
where A identifies this bar uniquely across your document. In your CSS, this
bar should be display:none for non-JavaScript browsers as they won't need it.

Each element of which you'll want to change active/inactive CSS classes when clicked,
needs to be given an ID in the form: "tab_A_B" where A identifies this bar uniquely
across your document, and B identifies this specific tab.

2. Create content zones.

Each element which is to be associated with a tab needs to be given an ID in
the form: "tabcontent_A_B" where it shares the same A and B as its tab link.

3. Set default tab. (Optional.)

If you want a tab other than the first foudn to be open initially, after the
inclusion of this file, use onLoad() to select another tab, so that the
selection occurs at the appropriate time. Example:

	imars.require("imars.dom.tabs");  // If you use imars-require.js
	imars.onLoad(imars.dom.tabs.select, ["A", "B"]);

4. Create some CSS.

All "tabbar_A_B" elements are initialized with CSS class "inactive" and are
granted the class "active" when they are clicked, until another tab is
selected. You might want to do some highlighting for active vs the rest.


When Tabs initializes, it scans the document for any "tabbbar_*" elements and
reveals them to the user with display:block. It then scans "tab_*_*" inside
each and adds onClick events to each of those; they do not have to be anchors.
Finally, it hides all matching "tabcontent_*_*" elements found.

This makes sure that non-JavaScript clients will view your entire page, and
those with JavaScript will benefit from tabbed nagivation within the page.

Note on AJAX: If you created new portions of the current page which contain
tabs, call imars.dom.tabs.scan(node) on the new document node to initialize the
same way Tabs did automatically when the page initially loaded. The entire
document will be re-scanned if "node" isn't specified.

*/

imars.require("imars.dom");

imars.dom.tabs = {

	scan: function (doc) {
		if (!doc) doc = document;
		var bars = imars.dom.getElementsById(doc, '*', 'tabbar_*');
		for (var i=0, imax = bars.length; i < imax; i++) {
			imars.dom.show(bars[i]);
			var tid = bars[i].id;
			tid = tid.replace(/^tabbar_/, '');
			var tabs = imars.dom.getElementsById(bars[i], '*', 'tab_'+tid+'_*');
			for (var j=0, jmax = tabs.length; j < jmax; j++) {
				var cid = tabs[j].id;
				cid = cid.replace(/^tab_.*_/, '');
				tabs[j].onclick = imars.dom.tabs.handleClick;
				if (j == 0) {
					tabs[j].className = 'active';
				} else {
					tabs[j].className = 'inactive';
					var cbox = document.getElementById ? document.getElementById('tabcontent_'+tid+'_'+cid) : null;
					if (cbox) {
						imars.dom.hide(cbox);
					};
				};
			};
		};
	},

	select: function (a, b) {
		imars.dom.tabs.handleClick(document.getElementById('tab_'+a+'_'+b));
		return false;
	},

	handleClick: function (e) {
		var node;
		if (e) {
			if (e.target) node = e.target; else if (e.nodeName) node = e; else return true;
		} else {
			if (window.event) node = window.event.srcElement; else return true;
		};
		var ids = node.id.split('_');
		if ((ids[0] != 'tab')  ||  !ids[2]) return true;
		if (node.className == 'active') return false; // From this point, return false for anchors.

		var bar = document.getElementById ? document.getElementById('tabbar_'+ids[1]) : null;
		if (!bar) return false;

		var tabs = imars.dom.getElementsById(bar, '*', 'tab_'+ids[1]+'_*');
		for (var j=0, jmax = tabs.length; j < jmax; j++) {
			var cid = tabs[j].id;
			cid = cid.replace(/^tab_.*_/, '');
			if (cid == ids[2]) {
				tabs[j].className = 'active';
			} else {
				tabs[j].className = 'inactive';
			};
			// Hide all BEFORE revealing new one. Don't show two at any time.
			var cbox = document.getElementById('tabcontent_'+ids[1]+'_'+cid);
			if (cbox) {
				imars.dom.hide(cbox);
			};
		};
		var cbox = document.getElementById('tabcontent_'+ids[1]+'_'+ids[2]);
		if (cbox) {
			imars.dom.show(cbox);
		};

		// If we're an anchor or button, invite browser not to follow.
		return false;
	}

};

imars.onLoad(imars.dom.tabs.scan);