tabs.js

var Tabs=new Class({

	Implements: [Events, Options],
	
	options: {
		
	},

	initialize: function(options){
		this.setOptions(options);
		this.ids={};
		this.container=new Element('div', {'class':'tabs'});
		this.initEvents();
	},
	
	load: function(items){
		for(var i=0,l=items.length;i<l;i++){
			var item=new Tabs.Item(items[i], {owner:this});
			this.items.push(item);
		}
		this.draw();
	},
	
	inject: function(element, how){
		this.container.inject(element, how);
		return this;
	},
	
	getById: function(id){
		return this.ids[id];
	},
	
	initEvents: function(){
		this.container.addEvent('click' ,this.showOnClick.bind(this));
	},
	
	showOnClick: function(event){
		var target=$(event.target);
		if(!target.match('tabs-header-item')) return;
		
	}

});

Tabs.Item=new Class({

	Implements: [Events, Options],
	
	options: {
		
	},
	
	initialize: function(options, structure){
		this.setOptions(options);
		$extend(this, structure);
		$extend(this, this.options);
		var id=options.id;
		if(id!=undefined){
			this.owner.ids[id]=this;
		}
	}

});

Tabs.implement({

	draw: function(){
		this.header=new Element('div', {'class': 'tabs-header'}).inject(this.container);
		this.content=new Element('div', {'class': 'tabs-content'}).inject(this.container);
		var header_html=[];
		var content_html=[];
		for(var i=0,l=this.items.length;i<l;i++){
			var item=this.items[i];
			header_html.push(this.drawItemHeader(item));
			content_html.push(this.drawItemContent(item));
		}
		this.container.set('html',html);
	},
	
	drawItemHeader: function(item){
		return '<div class="tabs-header-item">'+(item.title||'untitled')+'</div>';
	},
	
	drawItemContent: function(item){
		return '<div class="tabs-content">'+(item.content||'')+'</div>';
	}
});