var Tabular  =  new Class({
	Implements: [Events, Options],
	options: {
		show:0,
		hideonclick:false
	},
	initialize: function(elements,options) {


		this.elements = elements;

		this.setOptions(options);
		this.selected = null;

		this.elements.each( function(item,idx) {
			item.addEvent('click', function(){

				if ( this.options.hideonclick && this.selected == idx ) {
					this.unselect(item);
				}
				else {
					this.selected = idx;
					this.select(this.selected);
				}

				if (item.get('tag') == 'a' ) { return false;}

			}.bind(this))
			.addEvent('mouseover', function(){
				$$('.tab-explanations').setStyle('display','none');
				if (item.get('rel')) {
					this.get_els( item.get('rel') ).setStyle('display','block');					
				}	
			}.bind(this))
			.addEvent('mouseout', function(){
				$$('.tab-explanations').setStyle('display','none');
			})
		}.bind(this))

		this.select(this.options.show);
	},
	select: function(idx) {
		this.elements.each( function(item, item_id) {
			
			if ( item_id==idx) {
				this.get_els( item.get('ref') ).setStyle('display','block');
				item.addClass('selected');
			}
			else {
				this.get_els( item.get('ref') ).setStyle('display','none');
				item.removeClass('selected');
			}
		}.bind(this)) 
	},
	unselect: function(item) {
		$( item.get('title') ).setStyle('display','none');
		item.removeClass('selected');
	},
	get_els: function( title ) {
		return $$("#"+title.replace(',',',#','g'));
	}
	
})