/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * UI TAB BAR
 * Convert a series of DIVs into a switchable tab bar
 *+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


var TabBar = Class.create( {

	initialize: function(el, settings) {
		this.DefaultSettings();
		var obj = this;
		this.id = ($(el).id);
		$(el).appendChild(new Element("div",{"class":"clear"}));
		var tabs = $(el).getElementsByTagName("li");
		for (i = 0; i < tabs.length; i++) {
			if (tabs[i].hasClassName('tab-selected')) {
				this.currentTab = tabs[i].id;
				}
			this.tabDivs[i] = "tab-" + tabs[i].id;
			tabs[i].observe("click", function(event) { obj.SwitchTab(event); });
			}
		},

	SwitchTab: function(event) {
		//var el = Event.element(event);
		var el = Event.findElement(event, 'li');
		
		$('tab-' + this.currentTab).addClassName("tab-hidden");
		$('tab-' + this.currentTab).removeClassName("tab-visible");
		$(this.currentTab).removeClassName("tab-selected");
		$(el.id).addClassName("tab-selected");
		$('tab-' + el.id).addClassName("tab-visible");
		$('tab-' + el.id).removeClassName("tab-hidden");
		this.currentTab = el.id;
		},
		
	DefaultSettings: function() {
		this.id = "";
		this.tabDivs = new Array();
		this.currentTab = "";
		}
	});