/*
	author: Pier Luigi Covarelli (picov@e-link.it)
	version: 1.1 - 10-09-2009
	version: 1.2 - 07-11-2009
		- added initialDelay support
		- added autoStart support
*/

var ELF_ItemsBrowser = new Class({
	Implements: Options,

	options: {
		autoStart: true,
		defaultPane: 1,
		duration: 1000,
		transition: Fx.Transitions.Back.easeOut,
		autoBrowsePeriod: 0,
		initialDelay: 0,
		itemsDynamic: true,
		contentClassName: 'itemsbrowser-content',
		contentPaneElement: 'table',
		usePrevButton: true,
		useNextButton: true,
		usePaneButtons: true,
		prevButtonClassName: 'prev-button',
		nextButtonClassName: 'next-button',
		paneButtonClassName: 'pane-button',	
		paneButtonActiveClassName: 'pane-button active'	
	},

	initialize: function( itemsBrowserID, controlsContainerID, options ){
		this.setOptions(options);
		this.itemsBrowserID=itemsBrowserID;
		this.controlsContainerID=controlsContainerID;
		this.itemsBrowserContentElement=$$('#'+this.itemsBrowserID+' .'+this.options.contentClassName)[0];		
		if (!this.itemsBrowserContentElement) 
			return;

		this.slideFx = new Fx.Tween( this.itemsBrowserContentElement , {
			property: 'margin-left',	
			unit: "%",
			duration: this.options.duration, 
			transition: this.options.transition,
			link: 'cancel'
		});	

		this.totalPane=$$('#'+this.itemsBrowserID+' .'+this.options.contentClassName+' '+this.options.contentPaneElement).length;
		this.itemsBrowserContentElement.setStyle('width',(this.totalPane*100)+'%');
		this.itemsBrowserContentElement.getElements(this.options.contentPaneElement).setStyle('width',(100/this.totalPane)+"%");
		
		if ( $(this.controlsContainerID) ) {
			if (this.options.usePrevButton) {
				var aPrev = new Element('a', { 'href': '#', 'class': this.options.prevButtonClassName} ).inject($(this.controlsContainerID));
				var imgPrev = new Element('img',{ 'src': 'immagini/transparent_pixel.gif', alt: 'previous'} ).inject(aPrev);
			}
			if (this.options.usePaneButtons) {
				for (i=1; i<=this.totalPane; i++) {
					var a = new Element('a',{ 'href': '#', 'class': this.options.paneButtonClassName} ).inject($(this.controlsContainerID));
					var img = new Element('img',{ 'src': 'immagini/transparent_pixel.gif', alt: ''} ).inject(a);
				}
			}
			if (this.options.useNextButton) {
				var aNext = new Element('a',{ 'href': '#', 'class': this.options.nextButtonClassName} ).inject($(this.controlsContainerID));
				var img = new Element('img',{ 'src': 'immagini/transparent_pixel.gif', alt: 'next'} ).inject(aNext);
			}
		}
		this.setControls();
		if (this.options.itemsDynamic) {
			this.itemsDynamic();
		}
		//this.showPane(this.options.defaultPane);
		if (this.options.autoStart) {
			this.start();
		}
	},

	start: function() {
		this.showPane.delay(this.options.initialDelay,this,this.options.defaultPane);
	},
	
	showPrevPane: function() {
		if (this.currentPane>1) {
			this.showPane(this.currentPane-1);	
		} else {
			this.showPane(this.totalPane);
		}
	},

	showNextPane: function() {
		if (this.currentPane<this.totalPane) {
			this.showPane(this.currentPane+1);	
		} else {
			this.showPane(1);
		}
	},

	showPane: function(paneNumber) {		
		if (this.currentPane!=paneNumber) {
			//OverPaneButton(numero);
			this.slideFx.start(-(paneNumber-1)*100);
			this.currentPane=paneNumber;
			if ( this.paneButtons.length>0 ) {
				this.paneButtons.set( "class", this.options.paneButtonClassName ); // Resetto tutti i bottoni 						
				this.paneButtons[paneNumber-1].set( "class", this.options.paneButtonActiveClassName );
			}
			if (this.options.autoBrowsePeriod!=0 && this.timer==null) {
				// E' la prima chiamata oppure c'è stato un intervento dell'utente -> ripristino il timer
				this.timer=this.showNextPane.periodical(this.options.autoBrowsePeriod,this);
			}
		}
	},

	itemsDynamic: function() {
		var szNormal = 150, szSmall  = 150, szFull   = 170;
		var thumbicons = $$("#"+this.itemsBrowserID+" img"); // su a o td non funziona bene su IE
		var fx = new Fx.Elements(thumbicons, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
		thumbicons.each(function(thumbicon, i) {
			thumbicon.addEvent("mouseenter", function(event) {
				var o = {};
				o[i] = {width: [thumbicon.getStyle("width").toInt(), szFull], opacity: 1 }
				thumbicons.each(function(other, j) {
					if(i != j) {
						var w = other.getStyle("width").toInt();
						if(w != szSmall) o[j] = {width: [w, szSmall], opacity: [other.getStyle("opacity"), 0.3 ]};
					}
				});
				fx.start(o);
			});
		});

		$(this.itemsBrowserID).addEvent("mouseleave", function(event) {
			var o = {};
			thumbicons.each(function(thumbicon, i) {
				o[i] = {width: [thumbicon.getStyle("width").toInt(), szNormal] , opacity: 1 }
			});
			fx.start(o);
		})
	},

	setControls: function() {
		
		// la imposto come proprietà in modo da fare il selector una volta solo e poterla riutilizzare -> se non trono vulla diventa un'array vuota
		// e le successive istruzioni non generano errori e la variabile this.paneButtons è sempre definita (se faccio in modo di passare sempre da qui)
		this.paneButtons=$$("#"+this.controlsContainerID+" ."+this.options.paneButtonClassName);
		//if (this.paneButtons.length==0) { this.paneButtons=null };
		
		this.paneButtons.each(function(paneButton, i) {
			paneButton.addEvent("click", function(event) {				
				event.stop(); // Equivale al "return false" sull'onclick del link
				this.timer=$clear(this.timer); // l'assegnazione no sarebbe necessaria ma ha la funzione di eliminare il timer impostando contemporaneamente la corrispondente propriet a null
				this.showPane(i+1);
			}.bind(this) );
		}.bind(this));
		
		$$("#"+this.controlsContainerID+" ."+this.options.prevButtonClassName).addEvent('click', function(event) { 
			event.stop();
			this.timer=$clear(this.timer);
			this.showPrevPane();
		}.bind(this) );

		$$("#"+this.controlsContainerID+" ."+this.options.nextButtonClassName).addEvent('click', function(event) { 
			event.stop();
			this.timer=$clear(this.timer);
			this.showNextPane();
		}.bind(this) );

	}
	
	
});