var Tabber = Class.create();

Tabber.prototype = {
	initialize : function( tabholder, contentholder ) {
		this.tabholder = $(tabholder);
		this.contentholder = $(contentholder);

		this.tabs = new Array();
		this.articles = new Array();

		// Assume our tabs and our content are in the same order -- step through them in pairs.
		var tabs = $A( this.tabholder.childElements() );
		var articles = $A( this.contentholder.childElements() );

		for( var i = 0; i < tabs.length; ++i ) {
			// Ignore empty tabs --> likely style related.
			if( !tabs[i].firstChild.nodeValue.blank() ) {
				this.tabs.push( tabs[i] )
				this.articles.push( articles[i] )
			}
		}
		this.tabs.each( this.add.bind( this ));
	},
	add : function( element ) {
		Event.observe( element, 'click', this.activate.bindAsEventListener( this ), false );
	},
	activate : function( event ) {
		var element = Event.findElement( event, "div" )	

		this.select( element );
		this.tabs.without( element ).each( this.unselect.bind(this) );

		var index = this.tabs.indexOf( element );
		var element = this.articles[ index ];

		this.select( element );
		this.articles.without( element ).each( this.unselect.bind(this) );
	},
	select : function( element ) {
		$(element).removeClassName('unselected')	
		$(element).addClassName('selected')	
	},
	unselect : function( element ) {
		$(element).removeClassName('selected')	
		$(element).addClassName('unselected')	
	}
	
}