var currentImage = 0;
var nextImage;
var nextNextImage;
var fadeEffect;
var otherEl;
var fadeDelay = 5000;
var fadeDuration = 500;
var fadeImages = new Array();
var fadeImagesWidth = 420;
var fadeImagesHeight = 315;
var timeoutId = 0;

//window.addEvent('domready', function() {
function startFade() {
	if(timeoutId > 0) {
		clearTimeout(timeoutId);
		timeoutId = 0;
		fadeEffect.removeEvent('complete', fadeComplete);
	}
	initFadeImages();
	fadeElement = $('topDiv');
	fadeEffect = new Fx.Tween(fadeElement, {'duration': fadeDuration});
	
	fadeEffect.addEvent('complete', fadeComplete);
	
	timeoutId = setTimeout("fadeEffect.start('opacity', '0');", fadeDelay);
}
//});

function fadeComplete() {
		nextImage = currentImage+1;
		if(nextImage == fadeImages.length) {
			nextImage = 0;
		}
		nextNextImage = nextImage+1;
		if(nextNextImage == fadeImages.length) {
			nextNextImage = 0;
		}
		
		$('topDivImg').src = fadeImages[nextImage];
		setTimeout("setOpacNBotDivIEHack();", 100);
		
		currentImage = nextImage;
		
		timeoutId = setTimeout("fadeEffect.start('opacity', '0');", fadeDelay);
	
}

function setOpacNBotDivIEHack() {
	fadeElement.setStyle('opacity', 1.0);
	$('bottomDivImg').src = fadeImages[nextNextImage];
}

function initFadeImages() {
	var fadeImagesElement = $('fadeImages');
	var topDiv = new Element('div', {id: 'topDiv'});
	var bottomDiv = new Element('div', {id: 'bottomDiv'});
	var topDivImg = new Element('img', {id: 'topDivImg'});
	var bottomDivImg = new Element('img', {id: 'bottomDivImg'});
	
	fadeImagesElement.innerHTML = "";
	fadeImagesElement.style.position = "relative";
	fadeImagesElement.style.width = fadeImagesWidth + 'px';
	fadeImagesElement.style.height = fadeImagesHeight + 'px';
	bottomDiv.inject(fadeImagesElement);
	topDiv.inject(fadeImagesElement);
	
	var topDivElement = $('topDiv');
	topDivElement.style.position = "absolute";
	topDivElement.style.left = '0px';
	topDivElement.style.top = '0px';
	topDivElement.style.width = fadeImagesWidth + 'px';
	topDivElement.style.height = fadeImagesHeight + 'px';
	topDivImg.inject(topDivElement);
	
	var bottomDivElement = $('bottomDiv');
	bottomDivElement.style.position = "absolute";
	bottomDivElement.style.left = '0px';
	bottomDivElement.style.top = '0px';
	bottomDivElement.style.width = fadeImagesWidth + 'px';
	bottomDivElement.style.height = fadeImagesHeight + 'px';
	bottomDivImg.inject(bottomDivElement);
	
	var topDivImageElement = $('topDivImg');
	topDivImageElement.width = fadeImagesWidth.toString();
	topDivImageElement.height = fadeImagesHeight.toString();
	topDivImageElement.src = fadeImages[0];
	
	var bottomDivImageElement = $('bottomDivImg');
	bottomDivImageElement.width = fadeImagesWidth.toString();
	bottomDivImageElement.height = fadeImagesHeight.toString();
	bottomDivImageElement.src = fadeImages[1];
	
	if(fadeImages.length < 2) {
		alert("fadeImages must contain atleast two images!");
	}
}