var numberOfImages=24;			/* number of images to loop through */
var curImage = 1;				/* id of the image to start on */
var imageArray = [];			/* array to preload images into */
var imageChangeInterval;		/* variable to hold interval timer that fires an image change */
var imageChangeChainInterval;	/* variable to hold interval timer that performs the change of an image once the previous has faded */
var frequencyOfChange=3000;		/* speed in ms that the images will change */
var durationOfFadeout=1000;		/* how long the fade out of an image will last */
var durationOfFadein=1000;		/* how long the fade in of an image will last */
var fnChain = new Chain();		/* a chain class that holds chained functions to change the image */

/* preload the images to prevent flicker */
for (var i=1; i<=numberOfImages; i++) {
	var newImageElement = new Element('img',{'src':'/logos/'+i+'.gif'});
	imageArray[imageArray.length] = newImageElement;
}

/* fire when the DOM is ready (i.e. preload is done) */
window.addEvent('domready', function() {
	$("rotating_image").setStyles({'opacity':'0'});								/* cross browser compatible setting of opacity */
	$("rotating_image").src = imageArray[curImage-1].src;							/* use the preloaded version of the current image */
	$("rotating_image").morph({'opacity':'1','duration':durationOfFadein});		/* fade in the first image */
	shiftInterval = setInterval('changeImage()',frequencyOfChange);				/* initialise the image change interval */
});

function changeImage() {
	var currentImageElement = $("rotating_image");								/* instance of the current image element */
	curImage = curImage + 1;													/* increase the current image */
	if (curImage > numberOfImages) { curImage = 1; }							/* check to see if the current id exceeds the number of images in the loop */
	var newImageElement = new Element('img', {
		'src':imageArray[curImage-1].src,
		'opacity':'0',															/* create a new image element with the required properties */
		'id':'rotating_image_new'
	});
	
	$('imageHolder').appendChild(newImageElement);								/* append the image element to the holder div */
	
	fnChain.chain(
		function(){$('rotating_image').morph({'opacity':'0','duration':durationOfFadeout});},
		function(){
			$('imageHolder').removeChild($('rotating_image'));
			$('rotating_image_new').id='rotating_image'; 						/* create a chain that will change the previous image to the next */									
			$('rotating_image').morph({'opacity':'1','duration':durationOfFadein}); 
			clearInterval(imageChangeChainInterval); 
		}
	);
	fnChain.callChain();														/* initial call of the chain to fade out the current image */
	imageChangeChainInterval = setInterval('fnChain.callChain()',durationOfFadeout);	/* interval is set in order to make the second call of the chain to complete the cycle */
}