//POPULATES ARRAY CONTAINING ALL OF THE IMAGE NAMES IN ORDER		 

startNum = 1
var imgArray = [];
imgArray[0] = projectDesc;

//IMAGE PRELOADER - DOESN'T APPEAR TO WORK

newImgObj = new Image();

for (i=1;i<=numberOfImgs;i++){
	 	imgNum = i
		if (i<10){
			imgNum = "0" + imgNum
		}
	 imgArray[i] = nameOfStub + (imgNum) + ".jpg";
	 newImgObj.src = "images/" + nameOfStub + (imgNum) + ".jpg"
}



//INITIAL HOUSKEEPING
function init(){

//Set First Image

	origImg = document.getElementById("imgBox")
	origImg.style.visibility = 'hidden';
	desc = document.getElementById("description")
	if (imgArray[0] != ""){
		desc.innerHTML = "<br><br>" + imgArray[0]
		desc.innerHTML += "<P><u class='cursorStyle' onClick=nextImg('first')>view series</u> &#187;"
	}
	else{
		nextImg('first');
	}
		buildThumbs();
}

//THUMBNAIL MOUSEOVERS
function swap(imgId,eventType){
	imgCat = document.getElementById(imgId);
	imgCat.src = "images/" + nameOfStub + "-" + eventType + imgId + ".jpg";
}

//CLICK THUMBNAIL - MAIN IMAGES CHANGES
function showImg(imgId){
	//alert(imgId)
	origImg.style.visibility = 'visible';
	desc.innerHTML = "";
	thumbTarget = document.getElementById("imgBox");
	thumbTarget.src = "images/" + nameOfStub + imgId + ".jpg" 
}

//CLICK ON MAIN IMAGE AND IT GOES TO THE NEXT ONE		 
function nextImg(direction){
	origImg.style.visibility = 'visible';
	desc.innerHTML = "";
	imgObj = document.getElementById("imgBox")
	
	if (direction == "first"){
		imgObj.src = "images/" + imgArray[1]
	}
	currentImg = imgObj.src
	folder = currentImg.lastIndexOf("/")+1;
	currentImg = currentImg.substr(folder);
	currentIndex = imgArray.lastIndexOf(currentImg);
	nextIndex = currentIndex + 1;
	prevIndex = currentIndex - 1;
	
	if (nextIndex == imgArray.length){
		 nextIndex = 1;
		 buildThumbs()
	}

	if (currentIndex%10 == 0){
		 buildThumbs('next')
	}


	if (direction == "next"){
		imgObj.src = "images/" + imgArray[nextIndex];
	}
}

//THUMBNAIL NAVIGATION
function buildThumbs(whichway){
	thumbnails = ""
	thumbsidebar = document.getElementById("thumb-sidebar")

	if (whichway == "next"){
			 startNum += 10
			 if (startNum > numberOfImgs){startNum -= 10}
			 remainder = numberOfImgs - startNum
			 if(remainder < 10){endNum = numberOfImgs}
			 else{endNum = startNum+9}
	}
	else if (whichway == "prev"){
			 startNum -= 10
			 if(startNum <= 0){startNum = 1}
			 else{endNum = startNum+9}
	}
	else{
			 startNum = 1
			 if (numberOfImgs > 10){endNum = 10}
			 else{endNum = numberOfImgs}
	}

	thumbnails += "<div class='title'>" + nameOfSeries + "</div><br>";

	for (i=startNum;i<=endNum;i++){
			thumbNum = i
			if (i<10){
				 thumbNum = "0" + thumbNum
			}
    	thumbnails += "<img src='images/" + nameOfStub + "-off" + thumbNum + ".jpg' id='" + thumbNum + "' "; 
    	thumbnails += "onClick=showImg('" + thumbNum + "') onMouseOver=swap('" + thumbNum + "','on') " 
    	thumbnails += "onMouseOut=swap('" + thumbNum + "','off') class='cursorStyle'>";
	}

	thumbnails += "<div class='thumb-page'><span onClick=buildThumbs('prev') class='cursorStyle'>&#171; </span>";
	thumbnails += startNum + "-" + endNum + " of " + numberOfImgs
	thumbnails += "<span onClick=buildThumbs('next') class='cursorStyle'>&#187;</span></div>";
	thumbsidebar.innerHTML = thumbnails;
}	
	
if (numberOfImgs > 0){
	 window.onload = init;
}