//--------------------------------------------------------------------------------------------------
// All material contained within this and associated downloaded pages is the property of 4thorder(TM) 
// Copyright © 2005.  All rights reserved.
//
// Author: Michael Falatine || Authors email: 4thorder@4thorder.us
//
// USAGE: You may use this script for commercial or personal use, however, the copyright is retained-
// by 4thorder (TM).
//
// For other free Scripts visit: http://www.4thorder.us/Scripts/
//---------------------------------------------------------------------------------------------------
function popupWindow(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,statusbar=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=530,height=450,screenX=150,screenY=150,top=350,left=370')
}
	
	
	var InterFaceWidth 			= 163; 			// Set [Overall] WIDTH |||| minimum length=300
	var ViewingAreaHeight		= 54; 			// Set [Viewing area] HEIGHT |||| minimum length=10

	var OverALLBorder			= 'off'; 			// Set [Over All] Border 'on' or '' (blank) for off

// Image Viewer Colors [example: 'red' or '#FF0000']
	var OverALLBorderColor		= 'black'; 		// Set color of [Over All] Border

	var ControlsBGColor			= 'white'; 		// Set color of [Control Area] Background |||| use '' = no color
	var ControlsFontColor		= 'black'; 		// Set color of [Control Area] Font
	
	var ViewAreaBGColor		= 'white';		// Set color of [Viewing Area] Background |||| use '' = no color
	
	var ImageBorderColor		= 'white'; 		// Set color of [Image] Border
	
	var ButtonBGColor			= 'black'; 		// Set color of [Button] Background
	var ButtonFontColor			= 'white'; 		// Set color of [Button] Font
	var ButtonBorderColor		= 'white'; 		// Set color of [Button] border
	
// Image Alignment
	var ImageValignment		= 'top'; 		// Set verticle alignment within viewer (options: top, bottom. middle)
// :::::::::::::::::::::::::
// ::: Initialize Page ::::
// :::::::::::::::::::::::::

	
window.onload=InitializePage;

function InitializePage()
{
// Install Image Viewer HTML file name holderInput element
FirstDIV=document.createElement('DIV')
document.body.appendChild(FirstDIV)
document.getElementById('imageViewer').innerHTML="<INPUT type=hidden id=fileNameHolder>"+
"		<DIV id='ScrollLeft'>" + 
"			<a href='#' onclick='moveLeft()'><img src='IMG/design/viewerLeft.gif' border='0'></a>" + 
"		</DIV>" + 
"		<DIV id='ScrollRight'>" + 
"			<a href='#' onclick='moveRight()'><img src='IMG/design/viewerRight.gif' border='0'></a>" + 
"		</DIV>" + 
"<DIV id='interface'>" + 
"	<DIV id='ViewingArea'>" + 
"	<TABLE border='0' cellpadding='3' cellspacing='0'>" + 
"		<TR  id='ImageContainer'>" + 
"		</TR>" + 
"	</TABLE>" + 
"	</DIV></DIV>" + 
""


if (ImageArray!=null)
	{for (l=0; l<ImageArray.length; l++)
		{
		TDElement=document.createElement("TD");
		TDElement.innerHTML="<a href='javascript:popupWindow(\"pop.php3?img="+ImageArrayBig[l]+"\")'><IMG border='0' src='IMG/"+ImageArray[l]+"'></a>"
		document.getElementById('ImageContainer').appendChild(TDElement)		
		}
	}


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

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

//document.getElementById('interface').style.top=65+"px";


DIVCol=document.getElementById('interface').getElementsByTagName('DIV');
if (DIVCol!=null)
	{for (p=0; p<DIVCol.length; p++)
		{
		DIVCol.item(p).style.position="relative";
		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";
		//	}
		}
	}

// set z-index
document.getElementById('interface').style.zIndex=1;
document.getElementById('ViewingArea').style.zIndex=2;

document.getElementById('interface').style.height=ViewingAreaHeight+"px";


document.getElementById('ViewingArea').style.top=0+"px";
document.getElementById('ViewingArea').style.height=ViewingAreaHeight+"px";
document.getElementById('ViewingArea').style.backgroundColor="";


if(OverALLBorder=='on'){
document.getElementById('interface').style.borderStyle='solid';
document.getElementById('interface').style.borderWidth="1px";
document.getElementById('interface').style.borderColor=OverALLBorderColor;}

// Image Styles
IMGCol=document.getElementById('interface').getElementsByTagName('IMG');
if (IMGCol!=null)
	{for (im=0; im<IMGCol.length; im++)
		{
		IMGCol.item(im).style.borderStyle='solid';
		IMGCol.item(im).style.borderWidth="0px";
		IMGCol.item(im).style.borderColor=ImageBorderColor;
		}
	}



// Table Cell Styles
TDCol=document.getElementById('interface').getElementsByTagName('TD');
if (TDCol!=null)
	{for (td=0; td<TDCol.length; td++)
		{TDCol.item(td).style.verticalAlign=ImageValignment;}}
}


// 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();
}

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();
}