var Multitab = new Class({
	Implements: Options,
	options: {
        id: 'tabulae',
		picsperwindow : 2
    },		

	initialize: function(options){	
		this.setOptions(options);
		var picsperwindow = this.options.picsperwindow; // la rendo accessibile alle funzioni annidate
				
		var chunk = 1;
				
		// estrae tutti gli elementi
		var elements = $(this.options.id).getElements('li');				
			
		// crea il box per le sottovoci
		var panelContainer  = new Element('div', {
			'class': 'panelContainer'
			});	
			
		var panelWindow  = new Element('div', {
			'class': 'panelWindow'
			});
		
		var panelSlider  = new Element('ul', {
			'class': 'panelSlider'
			});
		
		panelSlider.inject(panelWindow);
		elements.inject(panelSlider);
		var goLeft  = new Element('span', {
			'class': 'goLeft',
			'styles' : {
				'opacity' : 0.4
			},
			'events' : {
				'click' : function() {
					if (this.getStyle('opacity')==1) {
						chunk--;
						if(chunk >= 1) {
							chunkWidth = $$('ul.panelSlider li')[0].getComputedSize({
									'styles' : ['padding','border','margin']
								})['totalWidth']
							goRight.fade('in');
							panelSlider.set('tween', {duration: 750, transition: 'back:out'});
							panelSlider.tween('margin-left', -chunkWidth * (chunk-1));
							}				
						if(chunk==1) { 					
							this.fade('0.4');
							}											
						}
					}
				}	
			});

		
		var goRight  = new Element('span', {
			'class': 'goRight',
			'events' : {
				'click' : function() {
					if (this.getStyle('opacity')==1) {
						if((panelSlider.getChildren().length - picsperwindow) >= chunk ) {
							chunkWidth = $$('ul.panelSlider li')[0].getComputedSize({
									'styles' : ['padding','border','margin']
								})['totalWidth']
							goLeft.fade('in');
							panelSlider.set('tween', {duration: 750, transition: 'back:out'});
							panelSlider.tween('margin-left', -chunkWidth * chunk);
							}				
						if(panelSlider.getChildren().length - picsperwindow == chunk ) { 
							this.fade('0.4');
						}
						chunk++;
						}
					}
				}
			});
			
		goLeft.inject(panelContainer);
		panelWindow.inject(panelContainer);
		goRight.inject(panelContainer);
		
		panelContainer.replaces($(this.options.id).getElement('ul'));
		
		if (panelSlider.getChildren('li').length <= picsperwindow) {
			goRight.fade('0.4');
		} 	
	}	
		
});