/* 

Creating a Rotating Header Image
=============================================
Using the generateRandomHeaderImage() Function

1.
If you haven't already, create a directory to contain the images that wil be rotated.
The directory has to be called "images" and has to be located in the same directory as
the web page where the image is rotated.

2.
Place the images that you want to rotate into the "images" folder. Name each file
"image_#.jpg, where # is the next number that is to be added. For example, image_3.jpg
should be the third image that was added.

3.
Place the following code where you want to insert your header image:

	<img id="header-image" />
	<script src="http://www.caes.uga.edu/global/javascript/generateRandomHeaderImage.js">
	</script>
	<script type="text/javascript">
	<!--
		generateRandomHeaderImage(numberOfImagesInDirectory,alternateText,imageWidth);
	//-->
	</script>
	<noscript>
		<img src="images/image_1.jpg" />
	</noscript>

4.
Replace the following parameters in the generateRandomHeaderImage() function:

	a. numberOfImagesInDirectory - Replace with the number of images that are located in the
		directory.
	b. alternateText - Replace with alternate text for the image. If you do not want alternate
		text, just replace "alternateText" with " ".
	c. imageWidth - Replace with the width of the image. Recommended width is 600 for the
		template. If you do not want to specify a width, take out ",imageWidth" in the above
		parameter list.

*/ 

function generateRandomHeaderImage(imagesInDirectory,altText,width) {
	randomNumber = Math.floor(Math.random() * imagesInDirectory + 1);
	
	headerImage = document.getElementById("header-image");
	headerImage.src = "../images/image_" + randomNumber + ".jpg";
	if (altText != null)
		headerImage.alt = altText;
	if (width != null)
		headerImage.width = width;
}