window.addEvent('domready',function(){
	
	// impostazione dello slideshow
	var qTot = 6;
	var loop = false;
	var mode = 'alpha';	
	var path = "img/quotes/";
	var textCont = $$('td.dx-texts');
	var text = $('text');
	var imgs = new Array();
	
	// preload delle immagini
	new Element('img', {src : 'img/loader.gif'});	
	for (var i=1; i<=qTot; i++) {
		var img = new Element('img', { 
			id: 'quote'+ i,
			src: path +'quote'+ i +'.jpg' })
		imgs.push(img);
	}

	// apertura dello slideshow
	$$('.openQuotes').addEvent('click', function(e){
				
		textCont.addClass('quotes'); // imposta il padding a 0 e il loader
		
		// creo i div maschera e contenitore
		var mask = new Element('div', {id : 'mask'}); // div maschera
		var cont = new Element('div', {id : 'cont'}); // div contenitore
		
		// creo i pulsanti prev, next, close
		var prevBtn = new Element('div', {id : 'prevBtn'}); // prev
		var nextBtn = new Element('div', {id : 'nextBtn'}); // next
		var clsBtn = new Element('div', {id : 'closeBtn'}); // close
		
		// inserisco le immagini nel contenitore
		imgs.each(function(el, n){
			cont.adopt(el);
		});
		
		// creo l'animazione del div maschera		
		maskTween = new Fx.Tween(cont).set('opacity', 0);		
		
		// aggiungo i div maschera, contenitore e i pulsanti all'interno della pagina
		mask.adopt([cont, clsBtn, prevBtn, nextBtn]);
		textCont.adopt(mask);	
		
		// avvio la dissolvenza	
		maskTween.start('opacity', 1);	
		
		// nascondo il testo	
		text.addClass('hidden'); 
		
		// inizializzo lo slideshow
		var slides = new viewer(($$('#cont img')),{
			mode: [mode],
			loop: loop
		});
		
		// associo le azioni prev/next ai pulsanti
		prevBtn.addEvent('click',slides.previous.bind(slides));
		nextBtn.addEvent('click',slides.next.bind(slides));
		
		// creo l'azione di chiusura dello slideshow
		clsBtn.addEvent('click', function(e){
			maskTween.start('opacity', 0).chain(function(){
				textCont.removeClass('quotes'); // resetto il padding
				text.removeClass('hidden');	// mostro il testo		
				mask.destroy(); // rimuovo il div machera ed il suo contenuto
			});				
		}); 
	});	
	
});