/**	TABS*	---------------------------------------------------------------------------*	Copyright (c) 2008 Dan Peverill*	http://www.danpeverill.com**	LICENSE*	---------------------------------------------------------------------------*	The MIT License*	http://www.opensource.org/licenses/mit-license.php**	INSALLATION*	---------------------------------------------------------------------------*	Tabs are controlled with links. Each link has a target that it is attached to and specified*	as an #anchor in the href attribute. Example: <a href="#tab">tab</a>. The #anchor*	is the id of the actual target.**	Tabs can be grouped or single. Grouping tabs you specify the parent*	class of the tabs with the "tabs" class. For a single tab just add the class "tabs" to it.**	Active tabs given the class "active" by default. Inactive tabs have no class. You may*	specify the default active/inactive tabs  by adding the class "active" to any of them in*	your HTML.**	Tab targets are automatically shown and hidden as you click the appropriate tabs. You can control*	this behavior with callback functions (see below). It is up to you to style the tabs and tab targets*	with CSS. This script only toggles the active class on tabs and shows/hides the tab targets.**	You may add custom tabs yourself with Tabs.create(tabs, callbacks).*	*	Callbacks is an optional argument. Callbacks is an object with two optional properties: click, show.*	These options are a function that handles the appropriate callback. Each callback can accept*	two arguments, the click event and the currently active tab target. this refers to the tab.*	click: This callback is triggered just as a tab is clicked. Returning false cancels the entire event.*	show: This callback is triggered after the active class and tab has been set, but just before*		the tab targets are shown.  Returning false means you  handled the showing/hiding of*		of the tab targets.*/var Tabs = {	className: "tabs",	activeClass: "active",		addLoadEvent: function(event) {		var oldLoad = window.onload;				window.onload = function() {			event();			if (oldLoad) oldLoad();		}	},		create: function(tabs, callbacks) {		if (!tabs.length)			this.createSingle(tabs, callbacks);		else			this.createGroup(tabs, callbacks);	},		createSingle: function(tab, callbacks) {		if (this.Element.hasClass(tab, this.activeClass))			this.Element.show(this.getTarget(tab));			this.Element.addClickEvent(tab, function(e) {			if (!Tabs._callback(this, callbacks, "click", e))				return false;	// Cancel event.						Tabs.Element.toggleClass(this, Tabs.activeClass);						if (!Tabs._callback(this, callbacks, "show", e))				return false;	// Callback handled visibility change.						Tabs.Element.toggleVisibility(Tabs.getTarget(this));		});	},		createGroup: function(tabs, callbacks) {		var active;				for (var i = 0; i < tabs.length; i++) {			var tab = tabs[i];			if (this.Element.hasClass(tab, this.activeClass)) {				active = tab;				this.Element.addClass(tab);				this.Element.show(this.getTarget(tab));			}			else {				this.Element.hide(this.getTarget(tab));			}			Tabs.Element.addClickEvent(tab, function(e) {				if (!Tabs._callback(this, callbacks, "click", e, active))					return false;	// Cancel event.									Tabs.Element.removeClass(active, Tabs.activeClass);				Tabs.Element.addClass(this, Tabs.activeClass);								var from = active;				active = this;								if (!Tabs._callback(this, callbacks, "show", e, from))					return false;	// Callback handled visibility change.								Tabs.Element.hide(Tabs.getTarget(from));				Tabs.Element.show(Tabs.getTarget(this));			});		}				if (!active) {			var tab = tabs[0];			active = tab;						this.Element.addClass(tab, this.activeClass);			this.Element.show(this.getTarget(tab));		}	},		_callback: function(element, callbacks, type, e, active) {		if (callbacks && callbacks[type] && callbacks[type].call(element, e, active) === false)			return false;				return true;	},		getTarget: function(tab) {		var match = /#(.*)$/.exec(tab.href);		var target;				if (match && (target = document.getElementById(match[1])))			return target;	},		getElementsByClassName: function(className, tag) {		var elements = document.getElementsByTagName(tag || "*");		var list = new Array();				for (var i = 0; i < elements.length; i++) {			if (this.Element.hasClass(elements[i], this.className))				list.push(elements[i]);		}				return list;	}};Tabs.Element = {	addClickEvent: function(element, callback) {		var oldClick = element.onclick;				element.onclick = function(e) {			callback.call(this, e);			if (oldClick) oldClick.call(this, e);	// Play nice with others.						return false;		}	},		addClass: function(element, className) {		element.className += (element.className ? " " : "") + className;	},		removeClass: function(element, className) {		element.className = element.className.replace(new RegExp("(^|\\s)" + className + "(\\s|$)"), "$1");		if (element.className == " ")			element.className = "";	},	hasClass: function(element, className) {		return element.className && (new RegExp("(^|\\s)" + className + "(\\s|$)")).test(element.className);	},		toggleClass: function(element, className) {		if (this.hasClass(element, className))			this.removeClass(element, className);		else			this.addClass(element, className);	},		getStyle: function(element, property) {		if (element.style[property]) return element.style[property];				if (element.currentStyle)	// IE.			return element.currentStyle[property];					property = property.replace(/([A-Z])/g, "-$1").toLowerCase();	// Turns propertyName into property-name.		var style = document.defaultView.getComputedStyle(element, "");		if (style)			return style.getPropertyValue(property);	},		show: function(element) {		element.style.display = "";		if (this.getStyle(element, "display") == "none")			element.style.display = "block";	},		hide: function(element) {		element.style.display = "none";	},		isVisible: function(element) {		return this.getStyle(element, "display") != "none";	},		toggleVisibility: function(element) {		if (this.isVisible(element))			this.hide(element);		else			this.show(element);	}};Tabs.addLoadEvent(function() {	var elements = Tabs.getElementsByClassName(Tabs.className);	for (var i = 0; i < elements.length; i++) {		var element = elements[i];					if (element.tagName == "A") {			Tabs.create(element);		}		else {	// Group			var tabs = element.getElementsByTagName("a");			var group = new Array();							for (var t = 0; t < tabs.length; t++) {				if (Tabs.getTarget(tabs[t]))					group.push(tabs[t]);	// Only group actual tab links.			}			if (group.length) Tabs.create(group);		}	}});