// add containing DIVs
document.write("<div id='thumbnailsArea'><div id='thumbnailsContainer'></div></div>");

// browser detection

if(navigator.userAgent.indexOf("Opera")!=-1) GetBrowserType = "opera"
else if(navigator.appName == "Microsoft Internet Explorer") GetBrowserType = "ie"
else if(navigator.appName == "Netscape") GetBrowserType = "ns";

// book data

var book = new Array();

book[0] = new Object;
book[0].imageSrc = "/olivermoon/images/books/thumbnails/potion_commotion.jpg";
book[0].titleText = "Oliver Moon and the Potion Commotion";

book[1] = new Object;
book[1].imageSrc = "/olivermoon/images/books/thumbnails/dragon_disaster.jpg";
book[1].titleText = "Oliver Moon and the Dragon Disaster";

book[2] = new Object;
book[2].imageSrc = "/olivermoon/images/books/thumbnails/nipperbat_nightmare.jpg";
book[2].titleText = "Oliver Moon and the Nipperbat Nightmare";

book[3] = new Object;
book[3].imageSrc = "/olivermoon/images/books/thumbnails/summer_howliday.jpg";
book[3].titleText = "Oliver Moon's Summer Howliday";

book[4] = new Object;
book[4].imageSrc = "/olivermoon/images/books/thumbnails/christmas_cracker.jpg";
book[4].titleText = "Oliver Moon's Christmas Cracker";

book[5] = new Object;
book[5].imageSrc = "/olivermoon/images/books/thumbnails/spell_off.jpg";
book[5].titleText = "Oliver Moon and the Spell-off";

book[6] = new Object;
book[6].imageSrc = "/olivermoon/images/books/thumbnails/fangtastic_sleepover.jpg";
book[6].titleText = "Oliver Moon's Fangtastic Sleepover";

book[7] = new Object;
book[7].imageSrc = "/olivermoon/images/books/thumbnails/broomstick_battle.jpg";
book[7].titleText = "Oliver Moon and the Broomstick Battle";

book[8] = new Object;
book[8].imageSrc = "/olivermoon/images/books/thumbnails/happy_birthday.jpg";
book[8].titleText = "Happy Birthday, Oliver Moon";

book[9] = new Object;
book[9].imageSrc = "/olivermoon/images/books/thumbnails/spider_spell.jpg";
book[9].titleText = "Oliver Moon and the Spider Spell";

book[10] = new Object;
book[10].imageSrc = "/olivermoon/images/books/thumbnails/monster_mystery.jpg";
book[10].titleText = "Oliver Moon and the Monster Mystery";

book[11] = new Object;
book[11].imageSrc = "/olivermoon/images/books/thumbnails/troll_trouble.jpg";
book[11].titleText = "Oliver Moon and the Troll Trouble";

// initial values

var widthLimit = 680;
var bookCount = book.length;
var bookSpacer = 5;
var spacerTotal = (bookCount-1) * bookSpacer;
var maxBookWidth = 109;
var maxBookHeight = 162;
var startSize;
var minBookWidth;
var minBookHeight;
var activeBook = -1;
var thumbsScaling = false;
var incrementCount = 10;
var widthIncrement;
var heightIncrement;

// calculate min book widths

minBookWidth = Math.floor(((widthLimit-spacerTotal) - maxBookWidth) / (bookCount-1));
if(minBookWidth < maxBookWidth) {
	thumbsScaling = true;
	thisScale = minBookWidth/maxBookWidth;
	minBookHeight = Math.floor(maxBookHeight * thisScale);
	widthIncrement = (maxBookWidth-minBookWidth) / (incrementCount-1);
	heightIncrement = (maxBookHeight-minBookHeight) / (incrementCount-1);
} else {
	minBookWidth = maxBookWidth;
	minBookHeight = maxBookHeight;
}

// scaling data
var thumbsX = new Array(incrementCount+1);
var thumbsY = new Array(incrementCount+1);
for(i=1;i<incrementCount;i++) {
	thumbsX[i] = Math.floor(minBookWidth + ((i-1) * widthIncrement));
	thumbsY[i] = Math.floor(minBookHeight + ((i-1) * heightIncrement));
}
thumbsX[incrementCount] = maxBookWidth;
thumbsY[incrementCount] = maxBookHeight;

// calculate start book widths

if(thumbsScaling) {
	countDown = incrementCount;
	checkWidth = widthLimit + 10;
	while(checkWidth > widthLimit) {
		countDown -= 1;
		checkWidth = spacerTotal + (thumbsX[countDown] * bookCount);
	}
	startSize = countDown;
} else {
	startSize = incrementCount;
}

// function to set thumbnail position and image size

function setThumbPos(thumbIndex,getX,getY,getSize) {
	if(GetBrowserType == "ns" || GetBrowserType == "opera") {
		document.getElementById("thumb" + thumbIndex).style.left = getX + "px";
		document.getElementById("thumb" + thumbIndex).style.top = getY + "px";
	} else {
		document.getElementById("thumb" + thumbIndex).style.posLeft = getX;
		document.getElementById("thumb" + thumbIndex).style.posTop = getY;
	}
	document.getElementById("thumbImg" + thumbIndex).width = (thumbsX[getSize] - 2);
	document.getElementById("thumbImg" + thumbIndex).height = (thumbsY[getSize] - 2);
}

// add thumbnails
containerX = widthLimit;
for(i=0;i<bookCount;i++) {
	// set thumbnail object variables
	book[i].active = false;
	book[i].imgSize = startSize;
	// add thumbnail div
	newDiv = document.createElement("div");
	newDiv.setAttribute("id", "thumb" + i);
	document.getElementById('thumbnailsContainer').appendChild(newDiv);
	newDiv = null;
	// add link to div
	newA = document.createElement("a");
	newA.setAttribute("id", "thumbLink" + i);
	newA.setAttribute("href", "javascript:updateBooksContent(" + (i+1) + ");");
	document.getElementById("thumb" + i).appendChild(newA);
	newA = null;
	// add img to link
	newImg = document.createElement("img");
	newImg.setAttribute("id", "thumbImg" + i);
	newImg.setAttribute("src", book[i].imageSrc);
	newImg.setAttribute("alt", book[i].titleText);
	newImg.setAttribute("title", book[i].titleText);
	document.getElementById("thumbLink" + i).appendChild(newImg);
	newImg = null;
	// apply class + functions (IE compatible technique)
	document.getElementById("thumb" + i).className = "thumbnail";
	document.getElementById("thumb" + i).index = i;
	document.getElementById("thumb" + i).onmouseover = function() {setActive(this.index)};
	document.getElementById("thumb" + i).onmouseout = function() {clearActive()};
}

// mouseover functions

var clearActiveThumb;

function setActive(getIndex) {
	clearTimeout(clearActiveThumb);
	clearActiveThumb = null;
	activeBook = getIndex;
}

function clearActive() {
	clearActiveThumb = setTimeout("activeBook = -1;",200);
}

// functions to update thumbnails

function positionThumbnails() {
	xPosition = 0;
	for(i=0;i<bookCount;i++) {
		thisSize = book[i].imgSize;
		thisY = Math.floor((maxBookHeight - thumbsY[thisSize])/2);
		setThumbPos(i,xPosition,thisY,thisSize);
		xPosition += (thumbsX[thisSize] + bookSpacer);
	}
	// position container
	containerX = Math.floor((widthLimit - (xPosition - bookSpacer)) / 2);
	if(GetBrowserType == "ns" || GetBrowserType == "opera") {
		document.getElementById("thumbnailsContainer").style.left = containerX + "px";
	} else {
		document.getElementById("thumbnailsContainer").style.posLeft = containerX;
	}
}

function updateThumbnails() {
	// first set new sizes
	changeFlag = false;
	if(activeBook >= 0) {
		for(i=0;i<bookCount;i++) {
			if(activeBook == i && book[i].imgSize < incrementCount) {
				book[i].imgSize += 1;
				changeFlag = true;
			} else if(activeBook != i && book[i].imgSize > 1) {
				book[i].imgSize -= 1;
				changeFlag = true;
			}
		}
	} else {
		for(i=0;i<bookCount;i++) {
			if(book[i].imgSize < startSize) {
				book[i].imgSize += 1;
				changeFlag = true;
			} else if(book[i].imgSize > startSize) {
				book[i].imgSize -= 1;
				changeFlag = true;
			}
		}
	}
	// now size and position thumbnails
	if(changeFlag) positionThumbnails();
	// call this function again
	setTimeout("updateThumbnails()",5);
}

// initial setup
positionThumbnails();
if(thumbsScaling) updateThumbnails();