//--------------------------------------------------------------------------------------------------
// 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)

//onmouseout='imager.width=ow;imager.height=oh;clipdiv.style.top=ot;clipdiv.style.left=ol;imager.src=prev0.src;'
document.getElementById('slides').innerHTML="<INPUT type=hidden id=fileNameHolder>"+
"<DIV id='interface' >" + 
"	<DIV id='ViewingArea' >" + 
"	<TABLE border='0' cellpadding='0' cellspacing='0' style='padding-right:4px;'>" + 
"		<TR  id='ImageContainer' valign='top'>" + 
"		</TR>" + 
"	</TABLE>" + 
"	</DIV>" + 
"	<DIV id='controls'>" + 
"		<DIV id='Verbiage'>" + 
"		</DIV>" + 
"		<DIV id='ScrollLeft'>" + 
"		</DIV>" + 
"		<DIV id='ScrollRight'>" + 
"		</DIV>" + 
"	</DIV>" + 
"</DIV>"

if (photos!=null) //this is for excep prop detail
	{
		for (l=0; l<photos.length; l++)
		{
		var imgstuff = photos[l].split("|");
		var sizer = imgstuff[1];
		//var h = imgstuff[3];
		TDElement=document.createElement("TD");
		TDElement.innerHTML="<IMG border='1' width='49' height='49' src='" + imgstuff[0] + "' onclick='clickimage(" + l + ");pauseslideshow();' >"
		document.getElementById('ImageContainer').appendChild(TDElement)
		}
	}


SElement=document.getElementById('Verbiage')
//SElement.innerHTML='<A href="#" target=_blank><font color='+ControlsFontColor+'>[DHTML Image Viewer]</font></A><br><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="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="left";
			}
		}
	}

document.getElementById('ScrollLeft').style.width=30+"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=-1;
document.getElementById('ScrollLeft').style.zIndex=4;
document.getElementById('ScrollRight').style.zIndex=4;


// set positions (left)
document.getElementById('ViewingArea').style.left=0+"px";
//document.getElementById('ViewingArea').style.left=document.getElementById('imager').style.left;
document.getElementById('controls').style.left=0+"px";
document.getElementById('ScrollLeft').style.left=0+"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=1+"px";
document.getElementById('ScrollRight').style.top=1+"px";
document.getElementById('controls').style.top=ViewingAreaHeight+2+"px";

// set Image Scroller DIVs height Dimensions
document.getElementById('controls').style.height=75+"px";
document.getElementById('Verbiage').style.height=0+"px";
document.getElementById('ViewingArea').style.height=75+"px";
document.getElementById('interface').style.height=60+"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;}}
}




// 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 scrollLeft2()
{
	if(document.getElementById("0")){
	//swapped script so when it moves left its moving the images right
	//the original script was visually confusing moving that way
	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();
	}
}



function scrollRight()
{

	//if(document.getElementById("0")){
	//swapped script so when it moves right its moving the images left
	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();
	//}

}