var display = 15;
var gap = 10;

var imgs;
var links;
var currentImg = 0;
var timer;
var offset = 0;
var position = new Array;
var dir = -1;
var slow = 1;
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;