var display = 3;
var gap = 10;

var imgs;
var links;
var currentImg = 0;
var timer;
var offset = 0;
var position = new Array;
var dir = -1;
var slow = 5;
var fast = 1;
var delay = slow;


function init()
	{
	if ((document.getElementById)&&(document.getElementById('clientArea')))
		{
		imgs  = document.getElementById('clientArea').getElementsByTagName('img');
		//links = document.getElementById('clientArea').getElementsByTagName('a');

		var build = '';
		for (var i=0; i<display; i++)
			{
			//build += '<a id="a' + i + '" href="' + links[currentImg].href + '" title="' + links[currentImg].title + '"><img id="img' + i + '" src="' + imgs[currentImg].src + '" alt="' + imgs[currentImg].alt + '" onmouseover="stop()" onmouseout="play()" /></a>';
			build += '<img id="img' + i + '" src="' + imgs[currentImg].src + '" alt="' + imgs[currentImg].alt + '" onmouseover="stop()" onmouseout="play()" />';
			currentImg++;
			if (currentImg == imgs.length)
				{currentImg = 0;}
			}
		document.getElementById('scroller').innerHTML = build;

		for (var i=0; i<display; i++)
			{position[i] = i;}

		setMargins();

		play();
		}
	}


function setValues(i,inc)
	{
	document.getElementById('img' + i).src = imgs[currentImg].src;
	document.getElementById('img' + i).alt = imgs[currentImg].alt;

	/*
	var link = document.getElementById('a' + i);
	link.href = links[currentImg].href;
	link.title = links[currentImg].title;
	*/

	currentImg += inc;

	if (currentImg == -1)
		{currentImg = imgs.length-1;}

	if (currentImg == imgs.length)
		{currentImg = 0;}
	}


function setMargins()
	{
	var c = 0;
	for (var i=0; i<display; i++)
		{
		if (position[i] < position[c])
			{c = i;}
		}

	var margin = offset;
	for (var i=0; i<display; i++)
		{
		var img = document.getElementById('img' + c);
		if (position[c] > 0)
			{
			var previous = (c > 0) ? (c-1) : (display-1);
			margin += document.getElementById('img' + previous).offsetWidth + gap;
			}

		img.style.left = margin + 'px';

		if (++c == display)
			{c = 0;}
		}
	}


function animate(inc)
	{
	if (imgs.length > 0)
		{
		dir = (inc > 0) ? 1 : -1;

		offset += inc;

		setMargins();

		var first = 0;
		var last  = 0;
		for (var i=0; i<display; i++)
			{
			if (position[i] < position[first])
				{first = i;}

			if (position[i] > position[last])
				{last = i;}
			}

		if (offset <= (0-document.getElementById('img' + first).offsetWidth-gap))
			{
			offset = 0;

			setValues(first,+1);

			for (var i=0; i<display; i++)
				{
				position[i]--;
				if (position[i] < 0)
					{position[i] = display-1;}
				}

			setMargins();
			}

		if (offset > gap)
			{
			setValues(last,-1);

			for (var i=0; i<display; i++)
				{
				position[i]++;
				if (position[i] == display)
					{position[i] = 0;}
				}

			offset = 0-document.getElementById('img' + last).offsetWidth+inc;

			setMargins();
			}
		}
	}


function play()
	{
	if(document.getElementById('clientArea'))
		{
		timer = setInterval('animate(' + dir + ')',delay);
		}
	}


function stop()
	{
	clearInterval(timer);
	}

function setDelay(direction,speed)
	{
	dir=direction;
	delay=speed;
	stop();
	play();
	}

function previous()
	{
	stop();
	offset = -1000;
	animate(0);
	setMargins();
	}

function next()
	{
	stop();
	offset = 1000;
	animate(0);
	setMargins();
	}
window.onload = init;