var clipTop = 0;		//Constant, top of the clip relative to the scroll layer
var clipBottom = 116;	//Constant, bottom of the clip relative to the scroll layer

var layerWidth = 0;		//Holds the width of the entire scroll layer

var theInterval;		//How fast to scroll in #msec
var theAmount;			//The # of pixels to scroll for each time frame
var theScrollLayer;		//Scroll layer element
var timeoutId;			//Holds the timeout ID from the timer

function initBridge()
{
	var scrollLayer = document.getElementById('scrollLayer');
	
	if (scrollLayer)
	{
		//Total width of the scroll layer

		layerWidth = setupLayerWidth(scrollLayer); //scrollLayer.offsetWidth;
		scrollLayer.style.width = layerWidth + 'px';
		//alert(layerWidth);
		
		//Set the clip on the scroll layer
		scrollLayer.style.clip = 'rect(' + clipTop + 'px,' + clipRight + 'px,' + clipBottom + 'px,' + clipLeft + 'px)';
		scrollLayer.style.left = layerLeft + 'px';
		//scrollLayer.style.right = layerLeft + layerWidth + 'px';
		
		//Show the scroll layer (hidden initially to prevent flicker)
		scrollLayer.style.visibility = 'visible';
		
		setupButtons();
	}
}

function setupLayerWidth(scrollLayer)
{
	var myWidth = 0;
	var listElements = scrollLayer.getElementsByTagName('li');
	for (var i=0; i< listElements.length; i++)
	{
		curLi = listElements[i];
		myWidth = myWidth + curLi.offsetWidth;
	}
	
	return myWidth + listElements.length * 6;
}

function setupButtons()
{
	var leftButton = document.getElementById("moveImagesLeft");
	var rightButton = document.getElementById("moveImagesRight");
	
	leftButton.onmouseover = function()
	{
		scrolLayer(-10,100);
		return false;
	}
	
	leftButton.onmouseout = function()
	{
		stopScroll();
		return false;
	}
	
	rightButton.onmouseover = function()
	{
		scrolLayer(10,100);
		return false;
	}
	
	rightButton.onmouseout = function()
	{
		stopScroll();
		return false;
	}
	
	var bridgeNavItems = document.getElementsByTagName('a')
	
	for (var i=0; i < bridgeNavItems.length; i++)
	{
		var myItem = bridgeNavItems[i];
		if (myItem.className == 'bridgeNavItem')
		{
			myItem.onclick = function()
			{
				this.href = this.href + "&cr=" + clipRight + "&cl=" + clipLeft + "&ll=" + layerLeft;
				return true;
			}
		}
	}
}

function scrolLayer(amount, interval)
{
	theAmount = amount;
	theInterval = interval;
	theScrollLayer = document.getElementById('scrollLayer');
	if (theScrollLayer)
	{
		doScroll();
	}
}

function doScroll()
{
	clipRight += theAmount;
	clipLeft += theAmount;
	layerLeft -= theAmount;
	
	// If we have gone too far to the right or left, undo our change and return w/o
	// modifying the clip
	if (clipLeft < 0 || clipRight > layerWidth)
	{
		clipRight -= theAmount;
		clipLeft -= theAmount;
		layerLeft += theAmount;
		return;
	}

	theScrollLayer.style.clip = 'rect(' + clipTop + 'px,' + clipRight + 'px,' + clipBottom + 'px,' + clipLeft + 'px)';
	theScrollLayer.style.left = layerLeft + 'px';

	timeoutId = setTimeout('doScroll()', theInterval);
}

function stopScroll()
{
	if (timeoutId)
		clearTimeout(timeoutId);
}