var TabSwitcher = new Class({

    options: {
		trigger				: 'click',
		display				: null
	},
	
	initialize: function(tabs,elements,options){
		this.setOptions(options);
	
		this.tabs			= $$(tabs); 
		this.elements		= $$(elements); 
		this.trigger 		= this.options.trigger;
		this.activeTabIndex	= null;
		this.onActive		= this.options.onActive || this.onActive;
		this.onBackground	= this.options.onBackground || this.onBackground;
		
		this.tabs.each(function(item,index){

			// add trigger event
			item.addEvent(this.trigger,function(){
				this.displayTab(index);
			}.bind(this));

		}.bind(this));
		
		// hide all elements
		this.elements.each(function(item,index){
			this.hideTab(index);
		}.bind(this));
		
		// display the default element
		if(this.options.display != null && this.options.display >=0 && this.options.display < this.elements.length ) this.displayTab(this.options.display);
	},
	
	displayTab: function(index){
		var el,tab;
		if (!(index != this.activeTabIndex && index >= 0 && index < this.elements.length && (el = this.elements[index]) && (tab = this.tabs[index]))) return;

		// if there's an active element hide it
		if(this.activeTabIndex != null) this.hideTab(this.activeTabIndex);

		el.setStyle('display','block');
		this.activeTabIndex = index;

		// onActive event
		this.onActive.run([tab,el],this);
	},
	hideTab: function(index){
		var el,tab;
		if (!(index >= 0 && index < this.elements.length && (el = this.elements[index]) && (tab = this.tabs[index]))) return;

		// onBackground event
		this.onBackground.run([tab,el],this);

		this.elements[index].setStyle('display','none');
		this.activeTabIndex = null;
	},
	onActive: function(tab,element){},
	onBackground: function(tab,element){}

});
TabSwitcher.implement(new Options, new Events);