document.observe("dom:loaded", function() {
	$$('.tab_container').each(function(elem) {
		new tabControl(elem.identify());
	});
});

var tabControl = Class.create({
	initialize: function(id, active){
		this.tabs = $$('#'+id+' .tab');
		this.spots = $$('#'+id+' .tab-panel');
		if (!active || active > this.tabs.length || isNaN(active)) active = 0;
		this.setActive(active);
		this.tabs.each(function(elem, i){
			elem.down('a').observe('click', function(event){
				Event.stop(event);
				event.element().blur();
				this.setActive(i);
			}.bindAsEventListener(this));
		}.bind(this));
	},
	setActive: function(tab){
		if (tab >= 0 && tab <= this.tabs.length){
			this.tabs.each(function(elem, i) {
				if (tab == i) {					
					elem.addClassName('active');
					$(this.spots[i]).addClassName('active');
					this.activeTab = i;
				} else {
					elem.removeClassName('active');
					$(this.spots[i]).removeClassName('active');
				}
			}.bind(this));
		}
	},
	first: function(){
		this.setActive(this.tabs.indexOf(this.tabs.first()));
	},
	previous: function(){
		this.setActive(this.activeTab - 1);
	},
	next: function(){
		this.setActive(this.activeTab + 1);
	},
	last: function(){
		this.setActive(this.tabs.indexOf(this.tabs.last()));
	}
});