function InitializePage()
{

if (ImageArray!=null)
	{for (l=0; l<ImageArray.length; l++)
		{
		TDElement=document.createElement("TD");
		TDElement.innerHTML="<IMG border='0' src='"+ImageArray[l]+"'>"
		document.getElementById('ImageContainer').appendChild(TDElement)		
		}
	}

setStyles();
setIDs();
attachEventhandlers();
}

function setStyles()
{
// set Image Scroller DIVs width Dimensions and position type
document.getElementById('interface').style.position="absolute";
document.getElementById('interface').style.width=InterFaceWidth+"px";
document.getElementById('interface').style.overflow="hidden";

DIVCol=document.getElementById('interface').getElementsByTagName('DIV');
if (DIVCol!=null)
	{for (p=0; p<DIVCol.length; p++)
		{
		DIVCol.item(p).style.position="absolute";
		DIVCol.item(p).style.width=InterFaceWidth+"px";
		if(DIVCol.item(p).id=="ScrollRight")
			{
			DIVCol.item(p).style.width=InterFaceWidth-40+"px";
			DIVCol.item(p).style.textAlign="right";
			}
		}
	}

document.getElementById('ScrollLeft').style.width=40+"px";

// set positions (left)
document.getElementById('ViewingArea').style.left=0+"px";
document.getElementById('controls').style.left=0+"px";
document.getElementById('ScrollLeft').style.left=2+"px";
document.getElementById('ScrollRight').style.left=38+"px";

// set positions (top)
document.getElementById('ViewingArea').style.top=0+"px";
document.getElementById('ScrollLeft').style.top=5+"px";
document.getElementById('ScrollRight').style.top=5+"px";
document.getElementById('controls').style.top=ViewingAreaHeight+2+"px";

// set Image Scroller DIVs height Dimensions
document.getElementById('controls').style.height=35+"px";
document.getElementById('ViewingArea').style.height=ViewingAreaHeight+"px";
document.getElementById('interface').style.height=ViewingAreaHeight+35+"px";




}


// ::::::::::::::::::::::::
// ::: Event Handlers ::
// ::::::::::::::::::::::::

function onclickHandler(e)
{
	// Browser compatibility code
	var targ;
	if (!e){var e = window.event;}
	
	if (e.target)
		{	targ = e.target;
			var xpos=(e.pageX); var ypos=(e.pageY);}
	
	else if (e.srcElement)
		{	var xpos=(event.x);	var ypos=(event.y);
			targ = e.srcElement;}

	// Strip file name from image src
	
	var spath_src = targ.getAttribute('src');
	spath_src = spath_src.replace("small","large")
	spath_src = spath_src.replace("_sm","_lg")
	
	var spath_href = targ.getAttribute('src');
	spath_href = spath_href.replace("small","full")
	spath_href = spath_href.replace("_sm","_full")
	
	//wholePathLength=spath.length;
	//strippedPathLength=spath.substring(0,spath.lastIndexOf("/")).length;
	//ifm= spath.substring(strippedPathLength+1,wholePathLength);
	
	document.getElementById('prod_image').setAttribute('src', spath_src);
	document.getElementById('prod_image_link').setAttribute('href', spath_href);

}

// Attach event handlers to all images within container
function attachEventhandlers()
{
ContainerElement=document.getElementById('ImageContainer')
TDCol=ContainerElement.getElementsByTagName('TD');

if (TDCol!=null)
	{for (l=0; l<TDCol.length; l++)
		{
		IMGCol=TDCol.item(l).getElementsByTagName("IMG");
		IMGCol.item(0).style.cursor="pointer"
		IMGCol.item(0).setAttribute('id',"Image"+l)
		IMGCol.item(0).onclick=onclickHandler;
		}
	}
}

// Set ID's for all table cells
function setIDs()
{
ContainerElement=document.getElementById('ImageContainer')
TDCol=ContainerElement.getElementsByTagName('TD');
if (TDCol!=null)
	{	for (i=0; i<TDCol.length; i++)
			{TDCol.item(i).setAttribute('id',i)}
	}
}

// :::::::::::::::::::::::::
// ::: Scroll Functions ::
// :::::::::::::::::::::::::

function moveLeft()
{
ContainerElement=document.getElementById("ImageContainer");
firstTD=document.getElementById("0");
dupfirstTD=firstTD.cloneNode(false)
dupfirstTD.innerHTML=firstTD.innerHTML
ContainerElement.removeChild(firstTD);
ContainerElement.appendChild(dupfirstTD);
setStyles; setIDs();attachEventhandlers();
}

function moveRight()
{
lastTD=document.getElementById(TDCol.length-1);
duplastTD=lastTD.cloneNode(false)
duplastTD.innerHTML=lastTD.innerHTML
firstTD=document.getElementById("0");
ContainerElement=document.getElementById("ImageContainer");
ContainerElement.insertBefore(duplastTD,firstTD);
ContainerElement.removeChild(lastTD);
setStyles; setIDs();attachEventhandlers();
}