/* una volta che il dom è stato caricato -domready- */
window.addEvent('domready', function() {

/*fintanto che il sipario è davanti nascondo tutto ciò che è sotto */
$('left_zone_on').fade(0);
$('right_zone_on').fade(0);
$('right_zone_el').fade(0);
$('left_zone_el').fade(0);
$('log').fade(0);
$('container').fade(0);

var log = $('log');

/* creo un effetto che serve a trasformare il layer di log per 8 secondi e mezzo (8500) */
var highlight = new Fx.Morph(log, {
		duration: 8500,
		transition: 'quad:out'
	});

/* creo un effetto che serve a trasformare il layer msg_zone_el per 5 secondi e mezzo (5500) */
var msg_zone_elOn = new Fx.Morph($('msg_zone_el'), {
		duration: 5500,
		transition: 'quad:out'
	});

/* creo un effetto che serve a trasformare il layer msg_zone_el per mezzo secondo (500) */
var msg_zone_elOff = new Fx.Morph($('msg_zone_el'), {
		duration: 500,
		transition: 'quad:out'
	});

/*
	applico a tutti ($$) gli elementi di classe zone un effetto on click 
	con cui mostro la zona con la lente colorata, e il pulsante con la pillola scelta,
	inoltre rendo leggermente trasparente la zona con la lente normale
*/
	$$('div.zone').addEvents({
		'click': function() {
					$(this.id+'_on').fade(1);
					$(this.id+'_el').fade(1);
					$(this.id).fade(0.4);

			//applico l'effetto che nasconde in mezzo secondo
			msg_zone_elOff.start({
				opacity: [1, 0]
				
			});
			
			}
	});
	

/*
	applico all'elemento con id showMsgMatrix un effetto on click 
	con cui nascondo la zona con la lente colorata, e il pulsante con la pillola scelta,
	inoltre mostro la zona con la lente normale

	e scateno l'effetto che trasforma per 8 secondi e mezzo il layer con id log
	cambiandogli sfondo (background), colore del testo (da nero a bianco), altezza (da 100 pixell a 0), 
	la trasparenza (da visibile (1) a invisibile (0))
	e mostro nuovamente il messaggio iniziale con l'effetto msg_zone_elOn creato in precedenza 
*/
	$('showMsgMatrix').addEvents({
		'click': function() {
			$('left_zone_on').fade(0);
			$('left_zone_el').fade(0);
			
			$('left_zone').fade(1);

			// then we start the highlight morphing
			highlight.start({
				backgroundColor: ['#ccffcc', '#00000'],
				color:['black', 'white'],
				height:['100px','0px'],
				opacity: [1, 0]
				
			});

			msg_zone_elOn.start({
				opacity: [0, 1]
				
			});
		}
	});


/*
	tutto come sopra ma creo un semplice alert, come si faceva e si vedeva fino a un paio di anni fa
*/
	$('showMsgNormal').addEvents({
		'click': function() {
			$('right_zone_on').fade(0);
			$('right_zone_el').fade(0);
			$('right_zone').fade(1);

			alert('Un messaggio normale per un vecchio mondo!');

			msg_zone_elOn.start({
				opacity: [0, 1]
				
			});

		}
	});


/* creato tutto questo.... solleviamo il sipario e che lo spettacolo cominci */

	var leave_sipario = function() {
		$('sipario').fade(0);
		$('sipario').setStyle('display','none');
		$('container').setStyle('display','block');
		$('container').fade(1);
		
		};

	/*creato l'effetto che fa sparire il sipario, lo applico con un ritardo (delay) di un secondo (1000)*/	
	leave_sipario.delay(1000);




});