//--------------------------------------------------------------------------------------------------
// 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/
//---------------------------------------------------------------------------------------------------
// :::::::::::::::::::::::::
// ::: Initialize Page ::::
// :::::::::::::::::::::::::

window.onload=InitializePage;

function InitializePage()	{
	// Install Image Viewer HTML file name holderInput element
	// FirstDIV=document.createElement('DIV')
	// document.body.appendChild(FirstDIV)
	// FirstDIV.innerHTML="<INPUT type=hidden id=fileNameHolder>"+
	// "<DIV id='interface'>" + 
	// "	<DIV id='ViewingArea'>" + 
	// "	<TABLE border='0' cellpadding='2'>" + 
	// "		<TR  id='ImageContainer'>" + 
	// "		</TR>" + 
	// "	</TABLE>" + 
	// "	</DIV>" + 
	// "	<DIV id='controls'>" + 
	// "		<DIV id='Verbiage'>" + 
	// "		</DIV>" + 
	// "		<DIV id='ScrollLeft'>" + 
	// "			<INPUT onclick='moveLeft()' type='button' value='&lt;--'>" + 
	// "		</DIV>" + 
	// "		<DIV id='ScrollRight'>" + 
	// "			<INPUT onclick='moveRight()' type='button' value='--&gt;'>" + 
	// "		</DIV>" + 
	// "	</DIV>" + 
	// "</DIV>"


	if (ThumbnailArray!=null)   {
		for (i=0; i<ThumbnailArray.length; i++)	{
			TDElement=document.createElement("TD");
			TDElement.innerHTML="<IMG border='0' src='/images/thumbnails/"+ThumbnailArray[i]+"'>"
			document.getElementById('ImageContainer').appendChild(TDElement)		
		}
	}
	
	SElement=document.getElementById('Verbiage')
	SElement.innerHTML='<font size=2>Use arrows to scroll images | Click image to view</font>'
	
	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.display="block";
	document.getElementById('interface').style.marginLeft="auto";
	document.getElementById('interface').style.marginRight="auto";
	//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.width=InterFaceWidth+"px";
			DIVCol.item(p).style.position="absolute";
			DIVCol.item(p).style.display="block";
			DIVCol.item(p).style.marginLeft="auto";
			DIVCol.item(p).style.marginRight="auto";
			if(DIVCol.item(p).id=="ScrollRight")	{
				DIVCol.item(p).style.width=InterFaceWidth-40+"px";
				DIVCol.item(p).style.textAlign="center";
			}
		}
	}
	
	document.getElementById('ScrollLeft').style.width=40+"px";
	document.getElementById('Verbiage').style.width=InterFaceWidth-80+"px";
	
	// set z-index
	document.getElementById('interface').style.zIndex=1;
	document.getElementById('ViewingArea').style.zIndex=2;
	document.getElementById('controls').style.zIndex=2;
	document.getElementById('Verbiage').style.zIndex=5;
	document.getElementById('ScrollLeft').style.zIndex=4;
	document.getElementById('ScrollRight').style.zIndex=4;
	
	
	// 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";
	document.getElementById('Verbiage').style.left=40+"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('Verbiage').style.height=35+"px";
	document.getElementById('ViewingArea').style.height=ViewingAreaHeight+"px";
	document.getElementById('interface').style.height=ViewingAreaHeight+35+"px";
	
	// Set Viewer Page position
	document.getElementById('interface').style.left= PagePositionLEFT+"px";
	document.getElementById('interface').style.top= PagePositionTOP+"px";
	
	// text alignment for controller text
	document.getElementById('Verbiage').style.textAlign='center';
	
	// image Viewer Color Scheme
	document.getElementById('controls').style.backgroundColor=ControlsBGColor;
	document.getElementById('Verbiage').style.color=ControlsFontColor;
	document.getElementById('ViewingArea').style.backgroundColor=ViewAreaBGColor;
	
	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="1px";
			IMGCol.item(im).style.borderColor=ImageBorderColor;
			}
		}
	
	// Button Styles
	BTNCol=document.getElementById('interface').getElementsByTagName('INPUT');
	if (BTNCol!=null)
		{for (p=0; p<BTNCol.length; p++)
			{
			BTNCol.item(p).style.borderStyle='solid';
			BTNCol.item(p).style.borderWidth="1px";
			BTNCol.item(p).style.backgroundColor=ButtonBGColor;
			BTNCol.item(p).style.color=ButtonFontColor;
			BTNCol.item(p).style.borderColor=ButtonBorderColor;
			}
		}
	
	// 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;
		}
	}
}
	
	
// ::::::::::::::::::::::::
// ::: 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;}
	
	// Retrieve paht from current src, replace it with the new filename to show in the main image display.
		var spath=targ.getAttribute('src');
		spath = spath.replace('/thumbnails', '');
		spath = spath.replace('_thumb', '_800x600');
		document.getElementById('imageMain').src = spath;
}

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