// Scrolls the specified images in the HTML list
function runSlideShow( slideShowId, maxWidth, speedDelay, pauseDelay, step )
{
	var width = 0;

	var slideshow = document.getElementById( slideShowId );
	var list = slideshow.getElementsByTagName("li");
	var img = slideshow.getElementsByTagName("img");

	var offset = 0;

	// Set initial positions for each image so that they are laid one after each
	// other horizontally.
	for(var i = 0; i < list.length; i++)
	{
		if ( i > 0 )
			offset += maxWidth;

		list[i].style.left = offset + "px";
	}

	slideshow.style.width = maxWidth + "px";
	width = maxWidth * list.length;

	move( slideShowId, width, maxWidth, speedDelay, pauseDelay, step );
}




//Animate specified slideshow

// (could improve this by loading images dynamically?)
function move( slideShowId, width, maxWidth, speedDelay, pauseDelay, step )
{
	var slideshow = document.getElementById( slideShowId );
	var list = slideshow.getElementsByTagName("li");
	img = slideshow.getElementsByTagName("img");
	var delay = speedDelay;
	var maxHeight = 0;

	// move each image
	for(var i = 0; i < list.length; i++)
	{
		// Resize images (need to do here, and not in initialisation due to when
		// images get downloaded (particularly noticed this on  Firefox)
		
		// Contrain width to fit
		if ( img[i].width > maxWidth )
		{
			// calculate aspect ratio
			var ratio = img[i].height / img[i].width;

			// scale image
			img[i].width = maxWidth - 1;
			img[i].height = maxWidth * ratio;
		}
		else
		{
			// pad any images that are smaller
			var border = (maxWidth - img[i].width) / 2;
			img[i].style.marginRight = border + "px";
			img[i].style.marginLeft = border + "px";
		}


		// Calculate new coordinate for image

		var left = list[i].style.left.slice(0,-2) - step;
		list[i].style.left = left + "px";

		if ( maxHeight < img[i].height )
		{
			maxHeight = img[i].height;
		}

		// Put the image back at the end when its gone off the screen
		// in order to make the slideshow wrap

		if(left <= -maxWidth )
		{
			list[i].style.left = width - maxWidth + "px";

			// Set pause for each new image
			delay = pauseDelay;
		}	

	}

	slideshow.style.height = maxHeight + "px";


	// Animate to next step
	setTimeout( "move('" + slideShowId + "'," + width + "," + maxWidth + "," + speedDelay + "," + pauseDelay + "," + step + ")", delay );
}