function numberPad(iNumber, iLength){  
	sPadded = iNumber.toString();
	while(iLength > sPadded.length) { 
	  sPadded = '0' + sPadded; 
	} 
	return sPadded; 
} 

// function to show an item
function showIt(oParent, iCaptionToUse) {

	// get an array of all the images within the parent anchor
	aMoveImg = oParent.getElementsByTagName('img');

	// set an object which is the first image within this parent anchor
	oImgToSlide = aMoveImg[0];

	// set the position to slide all the other images to given this images width
	iXPos = xWidth(oImgToSlide);

	// set an object which is the parent div of this image (bit dodgy this bit but it works...)
	oRow = oImgToSlide.parentNode.parentNode;
	// get an array of all images in the paretn div
	aImgs = oRow.getElementsByTagName('img');
	
	// loop over that array
	for (i = 0; i < aImgs.length; i++) {
		// setting an object to move
		oImg = aImgs[i];
		// if it is not the one we are now highlighting
		if (oImgToSlide != oImg) {
			// do an xSlide over 1 second to its new position
			xSlideTo(oImg, iXPos, 0,1000);
			// calculate the position of the next one
			iXPos = iXPos + xWidth(oImg);
		}
	}
	// now slide the one we want to highlight to the correct position	
    xSlideTo(oImgToSlide,0,0,1000);

	// work out the source of this image
	sThumbSrc = oImgToSlide.src;
	sThumbSrc = sThumbSrc.toString();
	// turn it into a reference for the full size image
	sFullSrc = sThumbSrc.replace("\/thumbs\/","/fulls/");
	// wait a little while then show the full size one
	window.setTimeout('showFeatureItem(\'' + sFullSrc + '\',\'' + iCaptionToUse + '\')',1050);	
}


// function to show the feature image 
function showFeatureItem(sImgSrc, iCaptionToUse) {  
	// set an object of the feature item container
	oDisplayImage = xGetElementById('featureItem');
	// write its innerHTML to include the link and display image
	oDisplayImage.innerHTML = '<a href="#" onclick="hideFeatureItem(); return false;"><img src="' + sImgSrc + '" height="500" alt="" title="" border="0" id="imgDisplay"></a>';
	// turn it on
	oDisplayImage.style.visibility = 'visible';
	// work out which caption to turn on
	sCaption = 'caption';
	sCaption = sCaption + numberPad(iCaptionToUse, 2);
	// wait a little while and now show the caption
	setTimeout('showFeatureCaption(sCaption)',2000);	 
}

// function to hide the feature item
function hideFeatureItem() {
	// set an object of the feature item
	oDisplayImage = xGetElementById('featureItem');
	// set an object of the current caption
	oDisplayCaption = xGetElementById(sCurrentCaption);	
	// get rid of any innerHTML
	oDisplayImage.innerHTML = '';
	// fly away peter...
	oDisplayImage.style.visibility = 'hidden';
	// fly away paul
	oDisplayCaption.style.visibility = 'hidden';	
}

// set a var for the current caption name
var sCurrentCaption = '';
// function to show the feature caption
function showFeatureCaption(sCaption) {
	// set the current caption variable to the one we are about to turn on
	sCurrentCaption = sCaption;
	// get an object of the image we are displaying
	oDisplayImage = xGetElementById('imgDisplay');
	// work out how wide the image is and therefore where the caption has to go
	iLeftPos = xWidth(oDisplayImage);
	// get an object for the caption
	oDisplayCaption = xGetElementById(sCaption);
	// work out where it is from the top
	iTopPos = xOffsetTop(oDisplayCaption);
	// move it to its final resting space
	xMoveTo(oDisplayCaption, iLeftPos, iTopPos);
	// BOO! turn it on
	oDisplayCaption.style.visibility = 'visible';
}

// function to reposition all the images added into the right place
function initRow(sRowname) {
	// set our starting x position
	iXPos = 0;

	// get the row name we are initializing
	oRow = xGetElementById(sRowname);
	// get an array of images in the row
	aImgs = oRow.getElementsByTagName('img');
	// loop over the array
	for (i = 0; i < aImgs.length; i++) {
		// set an objecty of the image
		oImg = aImgs[i];
		// move the image to the next point
		xMoveTo(oImg, iXPos, 0);
		// work out what the next point is given the width
		iXPos = iXPos + xWidth(oImg);
	}	
	oRow.style.visibility = 'visible';
}

// function to kick it all off...
function initCheckboard() {
	initRow('rowO1');
	initRow('rowO2');
	initRow('rowO3');
	initRow('rowO4');		
}