/**************************************
**	Setup variables for customizing  **
**************************************/
var thImgWdth	= "133";						//the width of individual thumbnail image
var thImgHght	= "100";						//the height of individual thumbnail image
var thDir	= "pictures/thumbnails/";			//the directory of thumbnail images
var imgDir	= "pictures/images/";					//the directory of large images
var thNum	= 3;								//number of thumbnail images to display
var scrSpd	= 2;								//speed in which to scroll thumbnail images
var sldrPos	= "relative";						//position style of thumbnail DIV
var sldrTop	= "0";							//top position of thumbnail DIV
var sldrLft = "0";								//left position of thumbnail DIV

/*********************
**	Broswer sniffer	**
*********************/
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;

/** If NS4 or IE4 then it's a no go **/
//if (isNS4 || isIE4) { document.location = oldHtml }

/*****************************************
**	Preload thumbnail images for use.	**
*****************************************/
var imgs = new Array();
for (i = 0; i < imgTxt.length; i++) {
	imgs[i]		= new Image();
	imgs[i].src	= thDir + imgTxt[i];
	imgs[i].setAttribute('border', '0');
	imgs[i].setAttribute('width', thImgWdth);
	imgs[i].setAttribute('height', thImgHght);
	}

/*********************************************
**	Create the layer or div that will		**
**	be manipulated. Needs to be included	**
**	within a script block where the layer	**
**	or div will be displayed with thumbs.	**
*********************************************/
var intOn = "";
var endPos;
var sldrWdth = thImgWdth * thNum;
function createLayer () {
	var thFrm = (document.getElementById) ?
			document.getElementById('thFrame') : ((document.all) ?
					document.all.thFrame : document.layers['thFrame']);
	var sldrStyleTxt = 'position:' + sldrPos + ';';
	sldrStyleTxt += 'top:' + sldrTop + ';';
	sldrStyleTxt += 'left:' + sldrLft + ';';
	sldrStyleTxt += 'width:' + sldrWdth + ';';
	sldrStyleTxt += 'height:' + thImgHght + ';';
	sldrStyleTxt += 'overflow:visible;white-space:nowrap;vertical-align:middle;';
	/**	Create the working elements and clone those that need it later	**/
	var cloneImg = document.createElement('img');
	var sldr = document.createElement('div');
	/**	Set the appropriate attributes on the new elements	**/
	sldr.setAttribute('id', 'slider');
	if (isNS6) {sldr.setAttribute('style', sldrStyleTxt);}
	if (isIE5) {sldr.style.cssText = sldrStyleTxt;}
	/**	Loop through and create the individual img's and span's	**/
	for (i = 0; i < imgs.length; i++) {
		var cldImg = cloneImg.cloneNode(false);
		cldImg.setAttribute('id', i);
		cldImg.src = imgs[i].src;
		cldImg.width = imgs[i].width;
		cldImg.height = imgs[i].height;
		cldImg.onclick = showPic;
		cldImg.onmouseover = chgCursor;
		sldr.appendChild(cldImg);
		}
	thFrm.appendChild(sldr);
	}
/*********************************************
**	Event handler for clicking on thumbnail	**
*********************************************/
function showPic (evt) {
	intOn	= true;
	evt = (evt) ? evt : ((window.event) ? window.event : false);
	if (evt) {
		var elem = (evt.target) ? evt.target : evt.srcElement;
		if (elem) {
			var index = parseInt(elem.getAttribute("id"));
			document.getElementById('picture').src = imgDir + imgTxt[index];// + imgExt;
			document.getElementById('picDesc').innerHTML = imgDesc[index];
		}
	}
	intOn	= false;
}

function chgCursor (evt) {
	evt = (evt) ? evt : ((window.event) ? window.event : flase);
	if (evt) {
		var elem = (evt.target) ? evt.target : evt.srcElement;
		if (elem) {
			if (evt.type == "mouseover") { elem.style.cursor = "pointer"; }
			else if (evt.type == "mouseout") { elem.style.cursor = "default"; }
			}
		}
	}

/*********************************
**	Set this as an interval to	**
**	scroll the thumbnail images	**
**	to the right within the DIV	**
*********************************/
function scrollRgt () {
	var curPos = getSldrPos();
	if ( curPos >= endPos ) {
		clearInterval(intOn);
		intOn = "";return;
		}
	curPos += scrSpd;
	assignSldrPos(curPos);
	}
/*********************************
**	Set this as an interval to	**
**	scroll the thumbnail images	**
**	to the left within the DIV	**
*********************************/
function scrollLft () {
	var curPos = getSldrPos();
	if ( curPos <= endPos ) {
		clearInterval(intOn);
		intOn = "";return;
		}
	curPos -= scrSpd;
	assignSldrPos(curPos);
	}
function getSldrPos () {
	var Pos;
	if (isNS6) {Pos = parseInt(document.getElementById('slider').style.left);}
	else if (isIE5) {Pos = document.getElementById('slider').style.posLeft;}
	return Pos;
	}
function assignSldrPos (Pos) {
	if (isNS6) {document.getElementById('slider').style.left = Pos + "px";}
	else if (isIE5) {document.getElementById('slider').style.posLeft = Pos;}
	}
/*********************************
**	Link this function and pass	**
**	it either 'right' or 'left'	**
*********************************/
function slideIt (way) {
	if ( intOn ) { return; }
	var veryEnd = -1*(imgs.length*thImgWdth);
	var pos	= getSldrPos();
	if ( way == "left" ) {
		var nextPos = pos - sldrWdth;
		var nextEnd	= nextPos - sldrWdth;
		if ( nextEnd > veryEnd ) {endPos = nextPos;}
		else {endPos = pos - (sldrWdth - (veryEnd - nextEnd));}
		intOn	= setInterval( "scrollLft()", 1 );
		}
	if ( way == "right" ) {
		var nextPos = pos + sldrWdth;
		if ( nextPos < 0 ) {endPos = nextPos;}
		else {endPos = pos + (sldrWdth - nextPos);}
		intOn = setInterval( "scrollRgt()", 1 );
		}
	}