var slideShow = new Array()
slideShow[0] = "images/etera/homepage_slideshow/01.jpg";
slideShow[1] = "images/etera/homepage_slideshow/02.jpg";
slideShow[2] = "images/etera/homepage_slideshow/03.jpg";

function fadeinSlideshow(elem, imageList, slideDuration, fadeSpeed, current) {
	// get the length of the image array.
	var listSize = imageList.length;
	
	// If there's no current image selected, or the value is out of the range of the
	// slideshow, then set the current image to zero.
	if (!current || current >= listSize) current = 0;
	
	// If there's no slide duration set, set it to 5 seconds.
	if (!slideDuration) slideDuration = 5000;
	
	// If there's no fade speed set, set it to 1 second.
	if (!fadeSpeed) fadeSpeed = 1000;
	
	// Set the image's source to the current image's url.
	$(elem + " img").attr("src", imageList[current]);
	
	// If the current element is at the maximum of the element size, then set the 
	// wrapper's background (aka, the next image) to the first image.
	if (current == (listSize - 1)) {
		$(elem).css("background", "transparent url(" + imageList[0] + ") no-repeat");
	} else {
	// If not, set the next image in the list to the background of the wrapper.
		$(elem).css("background", "transparent url(" + imageList[current + 1] + ") no-repeat");
	}
	
	// Hold the current image for a period of time equal to slideDuration. Once that's done, then
	// fade the current image's opacity until the background image shows. Once that is done, then
	// call this same function again with the next image in line.
	$(elem + " img").animate({ opacity: "1" }, slideDuration).animate({ opacity: "0.01" }, fadeSpeed, function() { $(this).css("opacity", "1"); fadeinSlideshow(elem, imageList, slideDuration, fadeSpeed, current + 1) });
} // end of function fadeinSlideshow()

function runSlideshow(divId){
    fadeinSlideshow(divId, slideShow, 5000, 1000);
}