var theImages = new Array()

//Random-loading images
theImages[0] = 'images/climatology.jpg' // replace with names of images
theImages[1] = 'images/snowpack-ice.jpg' // replace with names of images
theImages[2] = 'images/astronomy.jpg' // replace with names of images
theImages[3] = 'images/atmosphere.jpg' // replace with names of images

var preBuffer = new Array();
for (var i = 0; i < theImages.length; ++i) {
    preBuffer[i] = new Image();
    preBuffer[i].src = theImages[i];
}

var opacity=1.0;
var curr = 0;
function dissolveImage() {
	var div = document.getElementById("fgd");
	if (opacity >= 1.0) {
		var nextImage = curr;
		while (nextImage == curr) {
			nextImage = Math.round(Math.random()*(theImages.length-1));
		}
		var img = preBuffer[nextImage];
		opacity = 0.0;
		img.style.opacity = 0.0;

		var bgDiv = document.getElementById("bkgd");
		if (bgDiv.childNodes.length > 0) {
			bgDiv.removeChild(bgDiv.firstChild);
		}
		var bgImg = div.removeChild(div.firstChild);
		bgImg.style.opacity = 1.0;
		bgDiv.appendChild(bgImg);
		div.appendChild(img);
		curr = nextImage;
		setTimeout(dissolveImage, 7000);
	}
	else {
		opacity += 0.030;
		if (opacity > 1.0) opacity = 1.0
		div.firstChild.style.opacity = opacity;
		setTimeout(dissolveImage, 100);
	}
}

function showImage() {
	var whichImage = Math.round(Math.random()*(theImages.length-1));
	curr = whichImage;
	var div = document.getElementById("fgd");
	var img = preBuffer[curr];
	div.appendChild(img);
	if (img && img.style && ("opacity" in img.style)) {
		setTimeout(dissolveImage, 3000);
	}
}