/**
 * Tabs class
 */
var FnTabs = Class.create();

FnTabs.prototype = {

	/**
	* Initialize
	*/
	initialize : function(elm){

		this.baseElm = elm;
		this.panels = [];
		this.activeTabId = -1;

		this.setup();
		this.loadDefaultTab();
	},

	/**
	* Setup elements
	*/
	setup: function(){

    // Setup tabs
		$(this.baseElm).select('.tabs li a').each(function(elm, index){

			// add handle for tab click
			$(elm).observe('click',function(event){
				var elm = Event.element(event);
				Event.stop(event);
				this.activateTab(index);
			}.bind(this));

			// Add panels to array
			this.panels[index] = $(elm).getAttribute('href').gsub(/^.*#/, '#');
		  }.bind(this));

		// hide panels
		$$(this.panels).each(function(elm){
								 $(elm).addClassName('tabs-item');
								 $(elm).removeClassName('active');
							 });

	},

	/**
	 * Load default tab
	 */
	loadDefaultTab : function(){
		var target = document.location.toString().gsub(/^.*#/,'#').gsub(/\//, '');
		var defPanel = this.panels.indexOf(target);
		if( defPanel != -1) {
			this.activateTab(defPanel);
		} else {
			this.activateTab(0);
		}
	},

	/**
	* Activate tab
	*/
	activateTab: function(tabId){
		if( tabId != this.activeTabId ){

		  // toggle tab
			var activeTab = $(this.baseElm).select('.tabs li.active').first();
		  if(activeTab){
			$(activeTab).removeClassName('active');
		  }
		  $(this.baseElm).select('.tabs li')[tabId].addClassName('active');

		  // toggle panel
			var panels = this.panels;

		  $$(panels).each(function(elm){
							  if (elm == $$(panels[tabId])[0]) {
								  elm.addClassName('active');
							  }
							  else {
								  elm.removeClassName('active');
							  }
						  });
			
		  // save  active panel
			this.activeTabId = tabId;
		}
	}

};