document.FadeImage_ID = null;

function FadeImage(backgroundID, imageID, oldImageURL, newImageURL, increment, speed) {
	FadeImage_Stop(imageID);
	if (document.getElementById) {
		var objBackground = document.getElementById(backgroundID);
		var objImage = document.getElementById(imageID);
		if (objBackground && objImage) {
			// Set the old image to the background
			objBackground.style.backgroundImage = "url(" + oldImageURL + ")";
			
			// Set the foreground image opacity to 0%.
			setOpacity(imageID, 0);
			
			// Change the foreground image to the new image
			objImage.src = newImageURL;
			
			// Start the fading
			document.FadeImage_ID = setTimeout("FadeImage_Increment('"+backgroundID+"', '"+imageID+"', '"+oldImageURL+"', '"+newImageURL+"', 0, "+increment+", "+speed+");", speed);
		}
	}
}

function FadeImage_Increment(backgroundID, imageID, oldImageURL, newImageURL, current, increment, speed) {
	current = current + increment;
	
	// Make sure the current opacity is not over 100%
	if (current > 100) current = 100;
	
	// Set the opacity to the image.
	setOpacity(imageID, current);
	
	// If the opacity is less than 100%, then continue fading.
	if (current < 100) {
		document.FadeImage_ID = setTimeout("FadeImage_Increment('"+backgroundID+"', '"+imageID+"', '"+oldImageURL+"', '"+newImageURL+"', "+current+", "+increment+", "+speed+");", speed);
	}
	// Otherwise, we're finished fading.
	else {
		document.FadeImage_ID = null;
		document.getElementById(backgroundID).style.backgroundImage = "url(" + newImageURL + ")";
		setOpacity(imageID, 0);
	}
	
}

function FadeImage_Stop(imageID) {
	if (!isNull(document.FadeImage_ID)) {
		clearTimeout(document.FadeImage_ID);
	}
	setOpacity(imageID, 100);
}