var Photofader = {
	iterationImages: new Array(),
	images: PhotofaderImagePathArray,
	nextToLoad : 0,
	/**
	 * open the subdialog. check to see if the initiator is a link or a form
	 * redirect the request to the iframe
	 */
	startFader:function(e) {
		
		
		//load the first 2
		Photofader.loadMore();
		Photofader.loadMore();
		
		window.setTimeout(Photofader.doFade, 6000);
	},
	loadMore : function() {
		if(Photofader.nextToLoad<Photofader.images.length) {
			photoContainer = $('photoContainer');
			className = 'fadeImage';
			if(Photofader.nextToLoad == 0) {
				className = className + ' onTop';
			}
			else if (Photofader.nextToLoad == 1) {
				className = className + ' underlay';
			}
			var attrs = {
				src   : Photofader.images[Photofader.nextToLoad],
				'class' : className,
		    	id : ('fadeImage' + (Photofader.nextToLoad+1))
			};
			image = new Element('img', attrs);
			photoContainer.insert(image);
			Photofader.nextToLoad = Photofader.nextToLoad + 1;
		}
	},
	doFade:function(){
		shown = $$('#photoContainer .onTop')[0];
		
		Effect.Fade(shown);

		//when the fade is done, start reloading the image in the back
		window.setTimeout(Photofader.stepOrder, 2000);
	},
	stepOrder:function() {
		photoContainer = $('photoContainer');
		shown = $$('#photoContainer .onTop')[0];
		underlay = $$('#photoContainer .underlay')[0];
		
		shown.toggleClassName('onTop');
		underlay.toggleClassName('onTop');
		underlay.toggleClassName('underlay');
		
		Effect.Appear(shown);
		
		next = underlay.next('.fadeImage');
		if(!next || next == null) {
			next = $$('#photoContainer .fadeImage')[0];
		}
		next.toggleClassName('underlay');
		Photofader.loadMore();
		//start a new fade in 6 seconds
		window.setTimeout(Photofader.doFade, 6000);
	}
}

Photofader.startFader();