function initImageFader()
{
	cycleInterval = window.setInterval('imageFader()', 6000);

	// fade all images with a class of imageToFade within the imageFader div
	imageArray01 = document.getElementsByClassName('imageToFade', $('imageFader01'));
	imageArray02 = document.getElementsByClassName('imageToFade', $('imageFader02'));
	imageArray03 = document.getElementsByClassName('imageToFade', $('imageFader03'));
	imageArray04 = document.getElementsByClassName('imageToFade', $('imageFader04'));
	i=0;
	activeImageIndex = i;
	Effect.Appear($(imageArray01[i]), { from:0.0, to:1.0, duration: 1 });
	Effect.Appear($(imageArray02[i]), { from:0.0, to:1.0, duration: 2 });
	Effect.Appear($(imageArray03[i]), { from:0.0, to:1.0, duration: 3 });
	Effect.Appear($(imageArray04[i]), { from:0.0, to:1.0, duration: 4 });
}

function imageFader()
{
	i++;
	if (i == imageArray01.length) i = 0;

	new Effect.Parallel([
		Effect.Fade($(imageArray01[activeImageIndex]), { from:1.0, to:0.0, duration:2.5,delay:0.5 }), 
		Effect.Appear($(imageArray01[i]), { from:0.0, to:1.0, duration:2.5  }) ], 
		{ duration:3 }
		);

	new Effect.Parallel([
		Effect.Fade($(imageArray02[activeImageIndex]), {  from:1.0, to:0.0, duration:2.5, delay:0.5 }), 
		Effect.Appear($(imageArray02[i]), {  from:0.0, to:1.0, duration:2.5 }) ], 
		{ duration:3 }
		);

	new Effect.Parallel([
		Effect.Fade($(imageArray03[activeImageIndex]), {  from:1.0, to:0.0, duration:2.5, delay:0.5 }), 
		Effect.Appear($(imageArray03[i]), { from:0.0, to:1.0, duration:2.5 }) ], 
		{ duration:3 }
		);

	new Effect.Parallel([
		Effect.Fade($(imageArray04[activeImageIndex]), { from:1.0, to:0.0, duration:2.5, delay:0.5 }), 
		Effect.Appear($(imageArray04[i]), { from:0.0, to:1.0, duration:2.5 }) ], 
		{ duration:3 }
		);


	activeImageIndex = i;
}