function startChangeImage() {
	var newimage = Math.floor(Math.random()*24) + 1; /* This will randomize a number between 1 and the number being multipled. The *12 number here is the total number of images available. */
	if (document.getElementById('top_image_container1').style.backgroundImage == 'url(images/top_image/top_image' + newimage +'.jpg)') { /* This will run if the new number placed as image source will be the same the previous source. Since we don't wanna change to the same image again, we will trigger another randomize. */
		newimage = Math.floor(Math.random()*24) + 1;
	}
	if (document.getElementById('top_image_container1').style.backgroundImage == 'url(images/top_image/top_image' + newimage +'.jpg)') { /* Repeats the previous step, in case the first one manages to randomize the same image again. */
		newimage = Math.floor(Math.random()*24) + 1;
	}
	if (document.getElementById('top_image_container1').style.backgroundImage == 'url(images/top_image/top_image' + newimage +'.jpg)') { /* A third check if the same image has come up. If it has this will hopefully randomize another number. */
		newimage = Math.floor(Math.random()*24) + 1;
	}
	
	document.getElementById('top_image_container2').style.backgroundImage = 'url(images/top_image/top_image' + newimage +'.jpg)'; /* Change the backgroundImage of our transparent container to the new one. */
	document.getElementById('top_image_container2').style.opacity='0.10';					/* Initiate the transformation from transparent to solid by setting container2 to 10% visible in Mozilla browsers... */
	document.getElementById('top_image_container2').style.filter='alpha(Opacity=10)';		/* ... and for Internet Explorer. */
	
	var t1 = setTimeout('opacityChangeImage(20)', 80)										/* Initiate the first clock for running the opacityChangeImage() function, this will trigger 80 milliseconds after we set the 10% opacity mark. We pass along "20" to the function, telling it to change the opacity to 20%. */
	var t2 = setTimeout('opacityChangeImage(30)', 160)										/* This will be triggered 160 ms after our first change. Or another 80ms after our change to 20% opacity, this time changing to 30% */
	var t3 = setTimeout('opacityChangeImage(40)', 240)										/* We repeat the delayed triggered by increasing opacity 10% another time, and again 80ms later to 40%:240ms. */
	var t4 = setTimeout('opacityChangeImage(50)', 320)										/* 50%:320ms */
	var t5 = setTimeout('opacityChangeImage(60)', 400)										/* 60%:400ms */
	var t6 = setTimeout('opacityChangeImage(70)', 480)										/* 70%:480ms */
	var t7 = setTimeout('opacityChangeImage(80)', 560)										/* 80%:560ms */
	var t8 = setTimeout('opacityChangeImage(90)', 640)										/* 90%:640ms */
	var t9 = setTimeout('endChangeImage();', 720)											/* Another 80ms later we trigger the finnishing function, endChangeImage() */
}



function opacityChangeImage(opacity) { /* This function changes the opacity of container2, making the image in it more or less visible. We assign any number passed along to the variable "opacity" */
	document.getElementById('top_image_container2').style.opacity='0.' + opacity; 						/* Changes opacity in the Mozilla browsers. This is done from 0 to 1, 1 being solid. */
	document.getElementById('top_image_container2').style.filter='alpha(Opacity="' + opacity + '")';	/* Changes opacity in Internet Explorer. IE uses filters, this filter is called opacity and changes the alpha of an element. This is a percent number from 0 to 100. With 100 being solid. */
	
	
	/* NOTE: You should avoid using the extremes in either browser. That is, do not use 0.0 or 1.0 in Mozilla, 0 or 100 in Internet Explorer. It seems both have performance problems when they have to set either fully visible or completely invisible. Using 0.01 or 0.99, 1 or 99 works equally well and will be too faint for us to see. Remember that this will not hide the layer from interaction! It is still there, only invisible.
	
	When you want to hide an element completely you can use the "style.display" property instead:
	document.getElementById('top_image_container2').style.display='none' */
}



function endChangeImage() { /* Finnishing function that ends the transformation of container2 from invisible to visible, and changes the backgroundImage of container1. */

	document.getElementById('top_image_container1').style.backgroundImage = document.getElementById('top_image_container2').style.backgroundImage; 
	/* By now the transperancy of container2 will be blocking container1 so we swap the backgroundImage in container1 to the same as in container 2. */
	
	document.getElementById('top_image_container2').style.opacity='0.01';				/* We hide container2 again so only container1 is showing, now with the new image. For Mozilla.... */
	document.getElementById('top_image_container2').style.filter='alpha(Opacity=1)';	/* ....for IE */

	var t10 = setTimeout('startChangeImage()', 10000)									/*	Restart the process with a delay of 10 seconds. */
}


var tidtillstart = setTimeout('startChangeImage()', 10000)								/* Initiate the image changing process with a delay of 10000ms/10 seconds */