// valori: 0 = nessun effetto, 1 = sta apparendo, 2 = sta scomparendo, 3 = deve apparire, 4 = deve scomparire
var effectQueue = new Array(null, 0, 0, 0, 0);
// dichiara l'array degli effetti
var imgAppearing = new Array;

window.addEvent('domready', function(){

	// dichiara gli effetti
	imgAppearing[1] = new Fx.Style('img_1', 'opacity', {duration:300, onComplete: function(){effectCompleted(1)}});
	imgAppearing[2] = new Fx.Style('img_2', 'opacity', {duration:300, onComplete: function(){effectCompleted(2)}});
	imgAppearing[3] = new Fx.Style('img_3', 'opacity', {duration:300, onComplete: function(){effectCompleted(3)}});
	imgAppearing[4] = new Fx.Style('img_4', 'opacity', {duration:300, onComplete: function(){effectCompleted(4)}});

	// la funzione è chiamata ogni volta che un effetto ha termine
	function effectCompleted(key) {
		if (effectQueue[key] == 3) {
				effectQueue[key] = 1;
				imgAppearing[key].start(0, 1);
				return;
		} else if (effectQueue[key] == 4) {
				effectQueue[key] = 2;
				imgAppearing[key].start(1, 0);
				return;
		} else {
		effectQueue[key] = 0;
		}
	}

	// la funzione inizializza un effetto
	function initEvents(id, key) {
		$E('p', id).addEvent('mouseenter', function(){
			if (effectQueue[key] == 0 || effectQueue[key] == 3) {
				effectQueue[key] = 1;
				imgAppearing[key].start(0, 1);
			} else if (effectQueue[key] == 1) {
				return;
			} else {
				effectQueue[key] = 3;
			}
		});

		$E('p', id).addEvent('mouseleave', function(){
			if (effectQueue[key] == 0 || effectQueue[key] == 4) {
				effectQueue[key] = 2;
				imgAppearing[key].start(1, 0);
			} else if (effectQueue[key] == 2) {
				return;
			} else {
				effectQueue[key] = 4;
			}
		});
	}

	// inizializza tutti gli effetti
	initEvents('home', 1);
	initEvents('photo', 2);
	initEvents('cai', 3);
	initEvents('trecentoundici', 4);
});