<!-- the width of the hittable area on each image. this number is used more for spacing than for actually determining the width of the mouse over area, as that is determined by the transparent gif in each section. this number will determine the gap between the animating divs at rest -->
var hitWidth = 30;

<!-- contains the location from the index file to the images to be used in the sliding content. the missing JPG extension will be added later. the number of images in this array should match the number of animating divs -->
var imageArray = ['_images/_sliderImages/home-1', '_images/_sliderImages/home-2', '_images/_sliderImages/home-3', '_images/_sliderImages/home-4'];

function spaceDivs()
{
	<!-- an array containing the absolute positioned divs in the "homeSlideContainer" that will be animated -->
	var elements = $("homeSlideContainer").childElements();
	for (var i = 0; i < elements.length; i++)
	{
		<!-- aranges the divs in the initial layout -->
		if (i > 0) elements[i].style.left = parseFloat($("homeSlideContainer").offsetWidth) - (hitWidth * (elements.length - i)) + "px";
		<!-- here is where the missing JPG extension is added, along with a random integer from 1 to 4, to create a final file name such as: _images/_sliderImages/home-1-1.jpg. -->
		<!-- JPG is the ONLY image file type that should be used, as it is hard coded into this function -->
		<!-- be sure that there are 4 images for each section (eg: 1-1, 1-2, 1-3, 1-4), otherwise the script may try to load an image that doesn't exist -->
		var img = new Element('img', {src: imageArray[i] + "-" + Math.ceil(Math.random() * 4) + ".jpg"});
		$(img).observe('load', function(event) {
				var element = Event.element(event);
				fadeIn(element);
			});
		<!-- places the newly created random image in the approriate div -->
		$(elements[i]).insert({top: img});
		$(elements[i]).style.display = 'none';
	}
}

function fadeIn(t)
{
	<!-- fades the images in sequentially as they load. to remove this effect, comment or delete the call to fadeIn() from the spaceDivs() function AND remove the inline style="display: none;" CSS attribute from each div (in the HTML) -->
	var index = t.src.split("/")[t.src.split("/").length - 1].split("home-")[1].substring(0, 1);
	new Effect.Appear($("homeSlideContainer").childElements()[index - 1], {duration: 1});
}

function slideContent(t)
{
	<!-- because the element actually being animated is not the element that triggered the mouse event, the parent element (div) of the target (gif) needs to be determined -->
	var target = $(t).up('div');
	var elements = $("homeSlideContainer").childElements();
	var index = elements.indexOf(target);
	for (var i = 0; i < elements.length; i++)
	{
		if (i <= index)
		{
			new Effect.Move(elements[i], { duration: .5, x: (hitWidth * i), mode: 'absolute', transition: Effect.Transitions.easeInOutExpo });
		}
		else {
			new Effect.Move(elements[i], { duration: .5, x: parseFloat($("homeSlideContainer").offsetWidth) - (hitWidth * (elements.length - i)), mode: 'absolute', transition: Effect.Transitions.easeInOutExpo });
		}
		
		<!-- switches the arrow from up facing to right facing and vice-versa -->
		for (var ii = 0; ii < $$("img.arrow").length; ii++)
		{
			if (ii == index) $$("img.arrow")[ii].src = "_images/arrow-right.gif";
			else $$("img.arrow")[ii].src = "_images/arrow-up.gif";
		}
	}
}

window.onload = spaceDivs;