var Multitab = new Class({
	Implements: Options,
	options: {
        id: 'guide'
    },		

	initialize: function(options){	
		this.setOptions(options);
		
		var activetab = 0;		
		// crea i box
		var container  = new Element('div', {
			'id': 'guide_all'
			});	
		
		var titles  = new Element('div', {
			'id': 'guide_titoli'
			});	
			
		var contents  = new Element('div', {
			'id': 'guide_contenuti'
			});
			
		$(this.options.id).getChildren().each(function(item){
			item.getElement('h4').inject(titles);			
			item.getElement('div').inject(contents);			
		});		
		
		titles.getChildren().each(function(item, num){
			if (num == 0) { 
				item.set('id', 'activetitle');
				item.setStyle('background-color', item.get('rel'));
			}			
			item.addEvent('click', function(){
				if(num != activetab) {
					contents.getChildren()[activetab].setStyle('display', 'none');
					contents.getChildren()[num].setStyle('display', 'block');
					contents.getChildren()[activetab].erase('id');
					contents.getChildren()[num].set('id', 'activetab');
					titles.getChildren()[activetab].erase('id');
					titles.getChildren()[activetab].setStyle('background-color', '');
					this.set('id', 'activetitle');
					this.setStyle('background-color', this.get('rel'));
					activetab = num;
				}
			});
		});
		
		contents.getChildren().each(function(item, num){
			if (num == 0) { 
				item.set('id', 'activetab');				
			}
			else {
				item.setStyle('display', 'none');
			}
		});
		
		titles.inject(container);
		contents.inject(container);
		container.replaces($(this.options.id))					
	}	
});