var TabRakker = new Class({
	Implements: [Options,Events],
	initialize: function(tabs,contents) {
		this.tabs = $$(tabs);
		this.contents = $$(contents);
		this.activeTab = this.tabs[0].addClass('active');
		this.activeContent = this.contents[0].setStyle('height','auto');
		this.tabs.each(function(tab,i) {
			this.processItem(tab,this.contents[i],i);
		},this);

		this.fireEvent('load');
	},
	processItem:function(tab,content,i) {
		var contentHeight = content.getScrollSize().y;
		tab.addEvent('click',function(e) {
			if(e) e.stop();
			
			if(tab != this.activeTab) {	//Dus een tabswitch					
				this.activeTab.removeClass('active'); 
				(this.activeTab = tab).addClass('active'); //Wijzig de tabknopjes
				
				this.activeContent.setStyles({ //Verstop de oude tab
					height: 0,
					overflow: 'hidden'
				});
				content.setStyles({				//Maak de nieuwe tab even groot als de oude tab
					height: this.activeContent.getScrollSize().y				  
								  
				});
				this.activeContent = content.set('tween').tween('height',contentHeight); //Tween naar de juiste grootte.
			}
		}.bind(this));
	}
});