//function to display the first image 
function firstImage()
{
	currentIndx=0;

	document.theImage.src=imagesPreloaded[currentIndx].src;
	/* The NAME of the image in our slide show is theImage. We can change the image loaded here as above */
	document.getElementById('text1').innerHTML=Messages[currentIndx];
	/* The NAME of the form is 'form1', and the name of the text area is 'text1'. We make its value (content) equal the text in the array 'Messages'. So if currentIndx is 0, the text will be 'We learn about our world through the 5 senses' and so on */
}

//function to display the last image 
function lastImage()
{
	currentIndx=imagesPreloaded.length-2;

	document.theImage.src=imagesPreloaded[currentIndx].src;
	/* The NAME of the image in our slide show is theImage. We can change the image loaded here as above */
	document.getElementById('text1').innerHTML=Messages[currentIndx];
	/* The NAME of the form is 'form1', and the name of the text area is 'text1'. We make its value (content) equal the text in the array 'Messages'. So if currentIndx is 0, the text will be 'We learn about our world through the 5 senses' and so on */
}


//function to display the next image 
function Nexter()
{

	var iLength = imagesPreloaded.length-2;
	if (currentIndx>iLength)
	{
		currentIndx=0;
	}

	/* To go forward, we add one, providing the number is less than the number of images */
	document.theImage.src=imagesPreloaded[currentIndx].src;
	/* The NAME of the image in our slide show is theImage. We can change the image loaded here as above */
	document.getElementById('text1').innerHTML=Messages[currentIndx];
	/* The NAME of the form is 'form1', and the name of the text area is 'text1'. We make its value (content) equal the text in the array 'Messages'. So if currentIndx is 0, the text will be 'We learn about our world through the 5 senses' and so on */
	currentIndx=currentIndx+1;

}

/* The function Baccker() is similar to the previous function, so it contains no comments */
//function to display previous image
function Backer()
{
	if (currentIndx<0)
	{
		currentIndx=0;
	}

	if(currentIndx >(imagesPreloaded.length-2))	currentIndx = currentIndx-2;

	/* To go forward, we add one, providing the number is less than the number of images */
	document.theImage.src=imagesPreloaded[currentIndx].src;
	/* The NAME of the image in our slide show is theImage. We can change the image loaded here as above */
	document.getElementById('text1').innerHTML=Messages[currentIndx];
	/* The NAME of the form is 'form1', and the name of the text area is 'text1'. We make its value (content) equal the text in the array 'Messages'. So if currentIndx is 0, the text will be 'We learn about our world through the 5 senses' and so on */

	if (currentIndx==0)
	{
		currentIndx=imagesPreloaded.length-2;
	}else 
	{
		currentIndx=currentIndx-1;
	}
}


function startSlideShow(sValue) 
{
	if(sValue=="Play") 
	{
		//start automatic slide show
		document.getElementById('action').value="Play";
		automatically();

		document.getElementById('automatic').value="Stop";

	}else 
	{
		//stop auto slide show
		document.getElementById('action').value="Stop";

		document.getElementById('automatic').value="Play";
		
	}
}


//function for automatically displaying the images
function automatically() 
{
	if(document.getElementById('action')!=undefined)
	{
		if(document.getElementById('action').value=="Play") 
		{
			var iLength = imagesPreloaded.length-2;
			if (currentIndx>iLength)
			{
				currentIndx=0;
			}
			/* I have put this code at the end, so it follows on naturally after the value of currentIndx is determined */
			document.theImage.src=imagesPreloaded[currentIndx].src;
			document.getElementById('text1').innerHTML=Messages[currentIndx];

			/* The only special bit of script is this line, which sets the timer value to 5 seconds, or 5000 milliseconds. */
			var delay = setTimeout("automatically()",5000);
			currentIndx=currentIndx+1;
		}
	}
}