var scrolldelay;
	
	function scrollDiv(direction) {
		// the scroll button has been pressed! //
		var movewidth = parseInt(document.getElementById('wrapper').style.width);
		var moveBy = new Number(movewidth * direction);
		var endPos = (document.getElementById('wrapper').scrollLeft + moveBy);
		if (endPos >= (totalwidth-movewidth)) { endPos = (totalwidth-movewidth); }
		if (endPos < 0 ) { endPos = 0; }
		scrolldelay = window.setTimeout('doDivScroll('+moveBy+',' + direction + ',' + endPos + ')', 5); 
		return false;
	}
	
	function doDivScroll(moveBy, direction, endPos) {
		// the actual thumbbar scrolling code. a little complicated. //
		document.getElementById('wrapper').scrollLeft=Math.floor(document.getElementById('wrapper').scrollLeft+(moveBy/30));
		if (direction == -1) {
			if ((document.getElementById('wrapper').scrollLeft) <= Math.floor(endPos-(moveBy/15))) {
				document.getElementById('wrapper').scrollLeft=endPos;
				window.clearInterval(scrolldelay);
			} else {
				scrolldelay = window.setTimeout('doDivScroll('+moveBy+','+direction+','+endPos+')', 15); 
			}
		} else {
			if (document.getElementById('wrapper').scrollLeft >= Math.floor(endPos-(moveBy/15))) {
				document.getElementById('wrapper').scrollLeft=endPos;
				window.clearInterval(scrolldelay);
			} else {
				scrolldelay = window.setTimeout('doDivScroll('+moveBy+','+direction+','+endPos+')', 15); 
			}
		}
	}
	
	
	function errImage(theImage) {
		var msg = 'Error: The ' + theImage.name + ' image did not load properly.\n\n' +
		'The image failed to load from URL:\n' + theImage.src + '\n\nPlease ' +
		'click reload in your browser to try again.';
		alert(msg);
	}
	
	var nextaction;

	function imageHTML(caption, url, pid) {
		if (caption=="") { caption = "<br />"; }
		pid=parseInt(pid);
		// if there's an image to the left, set up the leftlink //
		if (document.getElementById("jsThumb" + (pid-1))) { 
			var prevpic = document.getElementById("jsPiclink" + (pid-1)).href;
			var prevpict = document.getElementById("jsPiclink" + (pid-1)).title.replace(/&/g,'&amp;');
			var leftLink = " onClick='dispImage(\"" + prevpic + "\",\""+ prevpict +"\",\"" + (pid-1) + "\"); return false;' ";
		} else {
			var leftLink=" onClick='return false;' ";
		}

		// if there's an image to the right, set up the rightlink //
		if (document.getElementById("jsThumb" + (pid+1))) {
			var nextpic = document.getElementById("jsPiclink" + (pid+1)).href;
			var nextpict = document.getElementById("jsPiclink" + (pid+1)).title.replace(/&/g,'&amp;');
			var rightLink = " onClick='dispImage(\"" + nextpic + "\",\""+ nextpict +"\",\"" + (pid+1) + "\"); return false;' ";
		} else {
			var rightLink=" onClick='return false;' ";
		}

		// dump out the HTML for drawing the image and the left/right links for it, and the onLoad to hide the throbber //
		var result = "<div id='inner' class='image'><img src='"+ url +"' id='curimage' onLoad='hideThrobber()' onError='errImage(this)' onAbort='errImage(this)' style='margin-bottom:4px;'>" +
						"<div id='links'><a href='#' id='leftlink' " + leftLink+ "></a><a href='#' id='rightlink' " + rightLink+ "></a></div></div>";

		return result;
	}
	
	function dispImage(url, caption, pid) {
		var newURL=url.replace(/%20/g," ");
		var direction;
		// reset the thumbnail highlighting //
		resetImages();

		// change image details, set thumbnail colour, paypalid, caption and filename at bottom //
		document.getElementById('jsPaypalFile').value=newURL.substring(newURL.lastIndexOf("/")+1);
		document.getElementById("jsThumb" + pid).style.borderColor='lightblue';
		document.getElementById("jsCaption").innerHTML=caption;
		//document.getElementById("jsTempcount").innerHTML=tempcount;
		document.getElementById("jsFilename").innerHTML=newURL.substring(newURL.lastIndexOf("/")+1);
		
		// move the thumbs list to ensure the image is shown up there //
		var movewidth = parseInt(document.getElementById('wrapper').style.width);
		var numimgs = (movewidth/166);
		var moveBy = new Number(((pid-1)*166));
		var endPos = moveBy-(((numimgs/2)*166)-166);
		var moveBy = (endPos - document.getElementById('wrapper').scrollLeft);
		if (moveBy<0) { direction=-1; } else { direction=1; }
		if (endPos >= (totalwidth-movewidth)) { endPos = (totalwidth-movewidth); }
		if (endPos < 0 ) { endPos = 0; }
		scrolldelay = window.setTimeout('doDivScroll('+Math.floor(moveBy)+',' + Math.floor(direction) + ',' + Math.floor(endPos) + ')', 15); 
		
		
		if (navigator.userAgent.indexOf("Firefox")==-1) {
			// no firefox? just do a straight swap from image to throbber, then set the new image using imageHTML //
			document.getElementById('jsImagearea').style.visibility ='hidden';
			document.getElementById('jsThrobber').style.display ='block';
			document.getElementById('jsImagearea').innerHTML=imageHTML(caption, url, pid);
		} else {
			// we have firefox! set the nextaction var then run the fading. it'll run when the fade has finished //
			nextaction= 'drawImage("' + url + '","' + caption + '","' + pid + '")';
			fade(document.getElementById('jsThrobber'), fade.IN);
			fade(document.getElementById('jsImagearea'), fade.OUT);
		}
		return false;
	}
	
	function drawImage(url, caption, picid) {
		// draw the image based on imageHTML. This is only used after fade for firefox //
		document.getElementById('jsImagearea').style.MozOpacity = 0;
		document.getElementById('jsImagearea').innerHTML=imageHTML((caption), url, picid); 
	}
	
	function hideThrobber() {
		// this simply hides the throbber, which is actioned automatically when the image has finished loading //
		if (navigator.userAgent.indexOf("Firefox")==-1) {
			document.getElementById('jsImagearea').style.visibility ='visible';
			document.getElementById('jsThrobber').style.display ='none';
		} else {
			fade(document.getElementById('jsThrobber'), fade.OUT);
			fade(document.getElementById('jsImagearea'), fade.IN);
		}
		if (document.getElementById('curimage').height>10) {
			document.getElementById('leftlink').style.height = document.getElementById('curimage').height + "px";
			document.getElementById('rightlink').style.height = document.getElementById('curimage').height + "px";
		}
	}
	
	function fade(el, direction) {
		if (typeof(el.style.MozOpacity) == 'undefined' ||
			(typeof(direction) == 'undefined' && (typeof(el.fadeDirection) == 'undefined' || el.fadeDirection == null))) {
			return;
		}
		if (typeof(direction) != 'undefined') {
			el.fadeDirection = direction;
		}
		var newOpacity = new Number(el.style.MozOpacity);
		var timer;
		if ((el.fadeDirection == fade.IN) && (1 > newOpacity)) {
			newOpacity += 0.05;
			timer = fade.IN;
		} else if ((el.fadeDirection == fade.OUT) && (newOpacity > 0)) {
			newOpacity -= 0.05;
			timer = fade.OUT;
		} else if ((el.fadeDirection == newOpacity || timer != el.fadeDirection)) {
			el.fadeDirection == null;
			timer = 'STOP';
			if (nextaction) {
				eval(nextaction);
				nextaction="";
			}
		}
		el.style.MozOpacity = newOpacity;

		if (typeof(el.fadeTimer) != 'number' && el.fadeDirection != null) {
			el.fadeTimer = window.setInterval(function(){fade(el)}, 1);
		}
		if (timer == 'STOP') {
			window.clearInterval(el.fadeTimer);
			el.fadeTimer = '';
		}
	}
	fade.IN = true;
	fade.OUT = false;