var ImageFader = new Class({

					arrMastImg: null,
					elCurrent: 	null,
					elPrevious: null,
					iCounter: 	null,
					iTimeout: 	4000,
					
					initialize: function()
					{
					
						// set the counter at 0
						this.iCounter	= 0;
						
						// get the images in the masthead
						this.arrMastImg = $$('#masthead img');
						
						// hide all the images
						for(var j = 0; j < this.arrMastImg.length; j++)
							this.arrMastImg[j].set('opacity', 0);
						
					},
					
					fadeNext: function()
					{
						// if we have an element
						// assign it over as the previous one
						if(this.elCurrent)
							this.elPrevious = this.elCurrent;
						
						// get the next from the array and 
						// assign it as current
						this.elCurrent = this.arrMastImg[this.iCounter%this.arrMastImg.length];
						
						// fade in the current
						var elTween = this.elCurrent.get('tween', {duration:3000, transition:Fx.Transitions.Expo.easeInOut, onComplete:this.killPrevious.bind(this)});
						
						// go ahead
						this.elCurrent.set('opacity', 0);
						this.elCurrent.setStyle('display', 'block');
						this.elCurrent.setStyle('position', 'absolute');
						this.elCurrent.setStyle('top', '0');
						this.elCurrent.setStyle('zIndex', '1');
						
						if(this.elPrevious)
							this.elPrevious.setStyle('zIndex', '0');
							
						elTween.start('opacity', 0, 1);
						
						// increment the counter
						this.iCounter++;
					},
					
					killPrevious: function()
					{
						if(this.elPrevious)
						{
							this.elPrevious.set('opacity', 0);
							this.elPrevious.setStyle('display', 'none');
												
							delete this.elPrevious;
						}
						
						this.fadeNext.bind(this).delay(this.iTimeout);
					}

})

if(!document.FIN)
{
	var imageFader = null;
	window.addEvent('domready', function()
								{
									imageFader = new ImageFader();
									imageFader.fadeNext();
								});
}