var nl = "\n";						// new line, for nice code :-)
var imgFolder = '/images/sale';				//folder with subfolders that contain big images
var smallFolder = '/images/sale/thumbs';		//folder with subfolders that contain small images (thumbnails)
var imgExt = 'jpg';					//extension (filetype) for big images
var smallExt = 'jpg';					//extension (filetype) for small images
var setColumns = 4;					// how many columns per page
var setRows = 0;					// how many rows to skip before scroll starts, check and adjust manually
var setHeight = 76+10+10;				// this is important for scroller: max small image (thumbnail) height + <td> padding-top + <td> padding-bottom (see css file)

var setFolders = Array ( Array('detail',4) );

//GALLERY FUNCTIONS

function leadingZero(getImage) {
	if (getImage < 10)setImage = "00" + getImage;
	if (getImage > 9 && getImage < 100)setImage = "0" + getImage;
	if (getImage > 99)setImage = getImage;
	return setImage;
}
function initGallery() {
	showGallery(0,setFolders[0][1],setFolders[0][0]);
}	
function showMenu() {
	returnData = '<tr><td id="menu" colspan="'+ setColumns +'"> | ';
	for (getFolder = 0; getFolder < setFolders.length; getFolder++){
		returnData += '<a href="javascript:showGallery(0,'+setFolders[getFolder][1]+',\''+setFolders[getFolder][0]+'\')">'+setFolders[getFolder][0]+'</a> | ';
	}
	returnData += '</td></tr>'+nl;
	return returnData;	
}
function showGallery(getImage,maxImages,setFolder) {
	i = 0;
	setScroll = Math.round(getImage / setColumns)-setRows;
	if (setScroll < 0)setScroll = 0;
	setScroll = setScroll*setHeight;
	returnData = '<table align="center">'+nl;
	returnData += '<tr><td id="header" colspan="'+ setColumns +'">Samples from the Red Ribbon Collection</td></tr>'+nl;
	for (displayImage = 1; displayImage <= maxImages; displayImage++){
		i++;
		setImage = leadingZero(displayImage);
		if (i == 1) returnData += '<tr>'+nl;
		setClass = (displayImage == getImage)? ' class="selected"': '';
		returnData += '<td id="image" '+ setClass +'>';
		returnData += '<a href="javascript:showImage('+ displayImage +','+ maxImages +',\''+ setFolder +'\')"><img src="'+ smallFolder +'/'+ setFolder +'/'+ setImage +'.'+ smallExt +'" /></a>'+nl;
		returnData += '</td>';
		if (i == setColumns){
			returnData += '</tr>'+nl;
			i = 0;
		}
	}
	if (i > 0)returnData += '<td colspan="'+ (setColumns - i) +'"></td>'+ nl +'</tr>'+nl;
	returnData += '</table>'+nl;
	writeGalleryData(returnData,setScroll);
}
function showImage(getImage,maxImages,setFolder) {	
	setImage = leadingZero(getImage);
	imgNxt = getImage + 1;
	imgPre = getImage - 1;	
	if (imgNxt > maxImages)imgNxt = 1;
	if (imgPre < 1)imgPre = maxImages;
	returnData = '<table id="pic" align="center">'+nl;
	returnData += '<tr id="selector">'+nl;
	returnData += '<td width="33%"><a href="javascript:showImage('+ imgPre +','+ maxImages +',\''+ setFolder +'\')"><< PREVIOUS</a></td>'+nl;
	returnData += '<td width="34%"><a href="javascript:resetData()">CLOSE</a></td>'+nl;
	returnData += '<td width="33%"><a href="javascript:showImage('+ imgNxt +','+ maxImages +',\''+ setFolder +'\')">NEXT >></a></td>'+nl;
	returnData += '</tr>'+nl;
	returnData += '<tr><td colspan="3"><a href="javascript:resetData()"><img src="'+ imgFolder +'/'+ setFolder +'/'+ setImage +'.'+ imgExt +'" height="410" width="640" /></a></td></tr>'+nl;
	returnData += '<tr id="selector"><td colspan="3">'+ getImage +' / '+ maxImages +'</td></tr>'+nl;
	returnData += '</table>'+nl;	
	writeData(returnData,0);
}
function writeGalleryData(returnData,setScroll) {
	document.getElementById('gallery').innerHTML = returnData;
	scrollTo(0,setScroll);
}
function writeData(returnData,setScroll) {
	document.getElementById('right_col_middle').innerHTML = returnData;
	scrollTo(0,setScroll);
}
function resetData() {
	document.getElementById('right_col_middle').innerHTML = htmlMain;
	initGallery();
}
var htmlMain = document.getElementById('right_col_middle').innerHTML;
initGallery();