			function loadImages()
			{
				if (document.images)
				{
					// define object parameters
					this.Name 					= new Array();

					this.Off					= new Array();
					this.On						= new Array();
					this.SecondOn 				= new Array();
					this.SecondOff 				= new Array();

					// fill in relevant data
					for (i = 0; i < arguments.length; ++i)
					{
						this.Name[i] 			= arguments[i];

						this.Off[i] 			= new Image();
						this.Off[i].src			= mediaDirectory + arguments[i] + '-off' 		+ imageType;

						this.On[i]				= new Image();
						this.On[i].src 			= mediaDirectory + arguments[i] + '-on' 		+ imageType;

						this.SecondOn[i]		= new Image();
						this.SecondOn[i].src 	= mediaDirectory + arguments[i] + '-secondon' 	+ imageType;

						this.SecondOff[i]		= new Image();
						this.SecondOff[i].src 	= mediaDirectory + arguments[i] + '-secondoff' 	+ imageType;
					}
				}
			}

			function roll(img,rpt)
			{
				if (document.images)
				{
					// find the index within the array
					var idx,ref;
					for (idx = 0; idx < docImages.Name.length; ++idx)
					{
						if (docImages.Name[idx] == img)
						{
							break;
						}
					}

					// if same images is used, change the image reference value
					ref = docImages.Name[idx];
					if (rpt != '' || rpt != '1')
					{
						ref += rpt;
					}

					// depending on what actions are used, find out what the handler wants to do, and do it
					for (i = 2; i < arguments.length; ++i)
					{
						if (arguments[i] == 'on')
						{
							document.images[ref].src = docImages.On[idx].src;
						}

						if (arguments[i] == 'off')
						{
							document.images[ref].src = docImages.Off[idx].src;
						}

						if (arguments[i] == 'secondon')
						{
							document.images[secondPlaceHolderName].src = docImages.SecondOn[idx].src;
						}

						if (arguments[i] == 'secondoff')
						{
							document.images[secondPlaceHolderName].src = docImages.SecondOff[idx].src;
						}
					}
				}
			}

			/* INSTRUCTIONS
			 *
			 * There are three main aspects to using this rollover script
			 *
			 * 1.	Preloader
			 * 		The preloader is in fact an object which loads the images and stays resident
			 *		as an accessible object.
			 *
			 *		Below, there is a line that looks like this:
			 *
			 *			docImages = new loadImages(...);
			 *
			 *		Instead of the dots, add a list of however many rollovers you need on the page, ie:
			 *
			 *			docImages = new loadImages('nav1','nav2');
			 *
			 *		in order to add two images called 'nav1' and 'nav2'. To to a basic rollover, you
			 *		need to name the images as 'nav1-on.gif' and 'nav1-off.gif' in the media folder
			 *
			 *		The whole script allows you to use either one or two rollovers per handler
			 *      (a handler is the bit of javascript in the 'onMouseOver=""' attribute in
			 *      the HTML). If you want to use the second rollover facility, then append the
			 *		filenames with '-secondon' or '-secondoff'. e.g.: 'nav1-secondon.gif'.
			 *
			 *		The 'secondon' and 'secondoff' images always change a predefined image name. See
			 *		section 2 regarding this.
			 *
			 * 2.	Variables
			 *		Make sure the values in the variables named 'mediaDirectory', 'imageType' and
			 *		'secondPlaceHolderName' are correct.
			 *
			 *		'mediaDirectory' is quite simply the path to the directory relative to the
			 *		page. For images in the same directory, use './' as the value.
			 *
			 *		'imageType' is the extension of the image, ie '.gif', '.jpg' or '.png' for eg.
			 *
			 *		'secondPlaceHolderName' is the reference name of the image which '-secondon'
			 *		and '-secondoff' images will be displayed.
			 *
			 * 3.	Event handlers
			 *		As I explained, the event handlers is the code within the HTML that triggers
			 *		the rollover. The function that handles the events is called 'roll()'. In this
			 *		you need to pass either 3 or 4 arguments.
			 *
			 *		The first one is the name of the file, ie 'nav1' or 'nav2'. This has to be the
			 *		same as one of the names you put in the preloader list, and also the same
			 *		value you have in the '<IMG NAME=""' attribute.
			 *
			 *		The second is the repeater, which is only used if you need to use the same
			 *		image file in two or more places on the page. Usually, you just pass 1 or a
			 *		null value (''), when there is only one, but just enter the repeat number
			 *		instead. If you do this, make sure you add the same number to the name in
			 *		the '<IMG NAME=""' attribute, otherwise it won't work. e.g. '<IMG NAME="nav12"'
			 *
			 *		Thirdly, you add the actions, you can have either one or two values, in any
			 *		order from any of the following values:
			 *
			 *			'on'		to change the image to the '-on' image in the media directory
			 *			'off'		to change the image to the '-off' image in the media directory
			 *			'secondon'	to change the image to the '-secondon' image in the media directory
			 *			'secondoff'	to change the image to the '-secondoff' image in the media directory
			 *
			 *		so in the end, the rollover should look something like:
			 *
			 *			roll('nav1',2,'on','secondon');
			 *
			 *		which will put the '-on' image instead of an image with a placeholder called 'nav12',
			 *		because of the repeater, and will also change an image named in the
			 *		'secondPlaceHolderName' variable.
			 */
