var images = new Array();

function
removeAllChildren(divid)
{
	var div = document.getElementById(divid);
	for (var i = 0; i < div.childNodes.length; i++)
	{
		div.removeChild(div.childNodes[i]);
	}
}

function
buildImages(divid)
{
	//get first image
	var div = document.getElementById(divid);	
	var firstimage = div.firstChild;
	while (firstimage && firstimage.tagName != 'IMG')
	{
		firstimage = firstimage.nextSibling;
	}

	// load all images into array
	var image = firstimage;
	while (image)
	{
		if (image.tagName == "IMG")
		{
			images[images.length] = image;
		}
		image = image.nextSibling;
	}
}

function
randomImage()
{
	var randno = Math.random();
	var imagecount = images.length;
	//var randomindex = parseInt( randno * ( imagecount + 1 ) );
	var randomindex = parseInt( randno * ( imagecount ) );
	if (randomindex >= imagecount)
		randomindex = imagecount - 1;
	
	var alertstring = "randno: " + randno + ", imagecount: " + imagecount + " randomindex: " + randomindex
	var image = images[randomindex];
	return images[randomindex];
}

//set the opacity depending on browser type 
function
setOpacity(obj, op)
{
	obj.style.opacity = (op/100);
	obj.style.MozOpacity = (op/100);
	obj.style.KhtmlOpacity = (op/100);
	obj.style.filter = 'alpha(opacity=' + op + ')';
}

function
continuousFade(divid, image, opacity, rate, hold, fadein)
{
	fadein = (fadein != 1) ? 0 : 1; 
	//image.style.display = 'block';
	var thisdiv = document.getElementById(divid);
	
	if (fadein == 1)
		opacity = opacity + 5;
	else
		opacity = opacity - 5;

	if (opacity <= 100 && opacity >= 0)
	{
		setOpacity(image, opacity);
		setTimeout(function() {continuousFade(divid, image, opacity, rate, hold, fadein)}, rate);
	}
	else
	{
		// get another random image
		var randomimage = randomImage();

		if (fadein == 1)
		{
			/*
			* Change the background, and fade out the newly faded in image
			*/
			thisdiv.style.backgroundImage = "url(" + randomimage.src + ")";
			setTimeout(function() {continuousFade(divid, image, 100, rate, hold, 0)}, hold);
		}
		else
		{
			/*
			* Change the image, and fade in the new image
			*/
			removeAllChildren(divid);
			image = randomImage();
			setOpacity(image, 0);
			thisdiv.appendChild(image);
			image.style.display = 'inline';
			image.width = parseInt(thisdiv.style.width);
			image.height = parseInt(thisdiv.style.height);
			setTimeout(function() {continuousFade(divid, image, 0, rate, hold, 1)}, hold);
		}
	}
}

// The top level function. Gets the first image then kicks of the eternal fading
function
fadeImages(divid, rate, hold, delay)
{
	rate = (rate == null) ? 50 : rate; 
	hold = (hold == null) ? 5000 : hold; 
	delay = (delay == null) ? 0 : delay; 

	/*
	* Pick a random image for each div
	*/
	var randomimage = randomImage();
	var div = document.getElementById(divid);
	div.style.backgroundImage = "url(" + randomimage.src + ")";	

	removeAllChildren(divid);

	var image = randomImage();
	setOpacity(image,0);
	div.appendChild(image);
	image.style.display = 'inline';
	image.width = parseInt(div.style.width);
	image.height = parseInt(div.style.height);

	setTimeout(function() {continuousFade(divid, image, 0, rate, hold, 1)}, delay);
}