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

// Image Viewer Dimensions settings (pixels):
	var InterFaceWidth		= 673;			// Set [Overall] WIDTH |||| minimum length=300
	var ViewingAreaHeight	= 114;			// Set [Viewing area] HEIGHT |||| minimum length=10
	var OverALLBorder		= 'off';		// Set [Over All] Border 'on' or '' (blank) for off
	var OverALLBorderColor	= 'gray';		// Set color of [Over All] Border
	var ControlsBGColor		= '#DCE2F0';	// Set color of [Control Area] Background |||| use '' = no color
	var ControlsFontColor	= 'black';		// Set color of [Control Area] Font
	var ViewAreaBGColor		= '#DCE2F0';	// Set color of [Viewing Area] Background |||| use '' = no color
	var ImageBorderColor	= ViewAreaBGColor;	// Set color of [Image] Border
	var CurrentImageColor	= 'black';	// Set color of [Image] Border for current image
	var ButtonBGColor		= '#B3BEDB';	// Set color of [Button] Background
	var ButtonFontColor		= 'black';		// Set color of [Button] Font
	var ButtonBorderColor	= 'black';		// Set color of [Button] border
	var ImageValignment		= 'middle';		// Set verticle alignment within viewer (options: top, bottom. middle)
var ImageArray = new Array
(
// ::::::::::::::::::::::::::
// ::: Define Images Here :::
// ::::::::::::::::::::::::::

// Thumbnail image filenames MUST be the SAME as the full sized image (to be popped)
// All the thumbnail images are to be placed in the folder "Thumbnails"
// All full sized images are to be placed in the folder "Images"

'PSM01.jpg',
'PSM02.jpg',
'PSM03.jpg',
'PSM04.jpg',
'PSM05.jpg',
'PSM06.jpg',
'PSM07.jpg',
'PSM08.jpg',
'PSM09.jpg',
'PSM10.jpg',
'PSM11.jpg',
'PSM013.jpg',
'PSM015.jpg',
'PSM023.jpg',
'PSM024.jpg',
'PSM025.jpg',
'PSM026.jpg',
'PSM028.jpg',
'PSM029.jpg'
)
// Do not edit below this line

// :::::::::::::::::::::::::
// ::: Initialize Page  ::::
// :::::::::::::::::::::::::

window.onload=InitializePage;

function InitializePage()
{
if (ImageArray!=null)
	{for (l=0; l<ImageArray.length; l++)
		{
		TDElement=document.createElement("TD");
		TDElement.innerHTML="<IMG border='0' src='thumbnails/"+ImageArray[l]+"' alt='"+ImageArray[l]+"'>"
		document.getElementById('ImageContainer').appendChild(TDElement)		
		}
	//obj.style.visibility = "visible"; // or "hidden"
	document.getElementById('interface').style.visibility = "visible";
	}

SElement=document.getElementById('Verbiage')
SElement.innerHTML='Use arrows to scroll images | Click image to view'

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";
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('controls').style.top=0+"px";
document.getElementById('ScrollLeft').style.top=3+"px";
document.getElementById('ScrollRight').style.top=3+"px";
document.getElementById('ViewingArea').style.top=28+"px";

// set Image Scroller DIVs height Dimensions
document.getElementById('controls').style.height=25+"px";
document.getElementById('Verbiage').style.height=25+"px";
document.getElementById('ViewingArea').style.height=ViewingAreaHeight+"px";
document.getElementById('interface').style.height=ViewingAreaHeight+35+"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="3px";
		IMGCol.item(im).style.borderColor=ImageBorderColor;
		}
	IMGCol.item(0).style.borderColor=CurrentImageColor;
	}

// 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;
	obj = document.getElementById("bigphotosrc");
	obj.src = "images/loading.gif";
	//if(obj.image.complete) alert("image loaded");
	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=targ.getAttribute('src');
	wholePathLength=spath.length;
	strippedPathLength=spath.substring(0,spath.lastIndexOf("/")).length;
	ifm= spath.substring(strippedPathLength+1,wholePathLength);
// Store file name in holder for use by popup windoow
	document.getElementById('fileNameHolder').value=ifm;
// display image in DIV
	obj.src = "images/"+ifm;

	IMGCol=document.getElementById('interface').getElementsByTagName('IMG');
	for (im=0; im<IMGCol.length; im++) {
		IMGCol.item(im).style.borderColor=ImageBorderColor;
		}
	targ.style.borderColor=CurrentImageColor;
}

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