// 'global' variables
var changer_currentFrame = 0;
var changer_maxImageIndex = 0;
var changer_images;

document.observe('dom:loaded', function() {
		if(!$('changer')) {
			return;
		}
		// loop thru all images and hide them
		changer_images = $$('#changer li');
		changer_maxImageIndex= changer_images.length -1;
		changer_currentFrame = Math.round(Math.random()*(changer_maxImageIndex));
		for(var i=0 ; i<=changer_maxImageIndex ; i++){
			if(i != changer_currentFrame){
				changer_images[i].hide();
			}
		}
		new PeriodicalExecuter(changer_changeImage, 5);
	});

function changer_changeImage(){
	// hide current image
	Effect.Fade(changer_images[changer_currentFrame]);
	if(changer_currentFrame == changer_maxImageIndex){
		changer_currentFrame = 0;
	} else {
		++changer_currentFrame;
	}
	// and show next
	Effect.Appear(changer_images[changer_currentFrame]);
}