// set variables
var curPage = 1;
var thumbsPerPage = 15;
// numb thumbs variable set by jsp on collection.jsp
var numPages = Math.ceil(numThumbs/thumbsPerPage);
var thumbView = true;
var curThumb; // set when user clicks
var thumbsEl; // set on load
var detailEl;
var backEl;
var previousEl;
var pageEl;
var nextEl;
var previousImgF = new Image;
var nextImgF = new Image;
var previousImgB = new Image;
var nextImgB = new Image;

// set onload
window.onload = function() { doThumbSet(); }

// functions
function doThumbSet() {
	// set variables
	thumbsEl = document.getElementById('thumbs');
	detailEl = document.getElementById('detail');
	backEl = document.getElementById('back');
	nextEl = document.getElementById('next');
	pageEl = document.getElementById('page');
	previousEl = document.getElementById('previous');
	// hide extra thumbs and set page nav
	doBack();
}

function doThumbNext() {
	if(thumbView) {
		curPage++;
		// set thumbs nav
		doBack();
		// display thumbs set
		displayThumbs();
	} else {
		curThumb++
		if(curThumb == numThumbs) { curThumb = numThumbs-1; }
		setDetailNav();
		loadDetailImages();
	}
}

function doThumbPrevious() {
	if(thumbView) {
		curPage--;
		// set thumbs page nav
		if(curPage == 1) {
			previousEl.style.display = 'none';
		}
		nextEl.style.display = 'inline';
		pageEl.innerHTML = 'Page ' + curPage + '/' + numPages;
		// display thumbs set
		displayThumbs();
	} else {
		curThumb--
		if(curThumb < 0) { curThumb = 0; }
		setDetailNav();
		loadDetailImages();
	}
}

function displayThumbs() {
	// hide all thumbs
	for(var i=0; i<numThumbs; i++) {
		document.getElementById('thumb' + i).style.display = 'none';
	}
	var j = (curPage-1) * thumbsPerPage;
	var k = j+15;
	if(k>numThumbs) { k = numThumbs; }
	// show set of thumbs
	for(var i=j; i<k; i++) {
		document.getElementById('thumb' + i).style.display = 'block';
	}
}

function doBack() {
	thumbView = true;
	thumbsEl.style.display = 'block';
	detailEl.style.display = 'none';
	backEl.style.display = 'none';
	// set thumbs nav
	pageEl.innerHTML = 'Page ' + curPage + '/' + numPages;
	if(curPage > 1) {
		previousEl.style.display = 'inline';
	} else {
		previousEl.style.display = 'none';
	}
	if(curPage < numPages) {
		nextEl.style.display = 'inline';
	} else {
		nextEl.style.display = 'none';
	}
	
}

function showDetail(thumbNum) {
	thumbView = false;
	curThumb = thumbNum;
	thumbsEl.style.display = 'none';
	detailEl.style.display = 'block';
	backEl.style.display = 'inline';
	setDetailNav();
	loadDetailImages();
}

function setDetailNav() {
	var thumbNum = curThumb + 1;
	pageEl.innerHTML = 'Design ' + thumbNum + '/' + numThumbs;
	if(thumbNum > 1) {
		previousEl.style.display = 'inline';
	} else {
		previousEl.style.display = 'none';
	}
	if(thumbNum < numThumbs) {
		nextEl.style.display = 'inline';
	} else {
		nextEl.style.display = 'none';
	}	
}

function loadDetailImages() {
	var str = '';
	if(detailImageArray[curThumb][1] != '') {
		str += '<img id="detailBack" alt="' + detailImageArray[curThumb][2] + '" onload="setBorder(this);" />';
	}
	if(detailImageArray[curThumb][0] != '') {
		str += '<img id="detailFront" alt="' + detailImageArray[curThumb][2] + '" onload="setBorder(this);" />';
	}
	// write images to page
	detailEl.innerHTML = str;
	// load images
	if(detailImageArray[curThumb][1] != '') {
		document.getElementById('detailBack').src = 'img/stuff/' + detailImageArray[curThumb][1];
	}
	if(detailImageArray[curThumb][0] != '') {
		document.getElementById('detailFront').src = 'img/stuff/' + detailImageArray[curThumb][0];
	}
	preloadDetail();
}

function preloadDetail() {
	// preload next and previous image
	var num = curThumb+1;
	if(num == numThumbs) { num = numThumbs-1; }
	nextImgF.src = 'img/stuff/' + detailImageArray[num][0];
	nextImgB.src = 'img/stuff/' + detailImageArray[num][1];
	num = curThumb-1;
	if(num < 0) { num = 0; }
	previousImgF.src = 'img/stuff/' + detailImageArray[num][0];
	previousImgB.src = 'img/stuff/' + detailImageArray[num][1];
}

function setBorder(el) {
	el.style.padding = '0px';
	el.style.border = '1px solid #999999';
}