//box menus
boxButtonOn = new Image(16,16);
boxButtonOn.src = "../images/button-on.jpg";
boxButtonOff = new Image(16,16);
boxButtonOff.src = "../images/button-off.jpg";
boxButtonActive = new Image(16,16);
boxButtonActive.src = "../images/button-active.jpg";


function clickBox (boxNo)	{

	//update current image variable
	setCurrentImage(boxNo);

	//change main image
	changeMainImage(boxNo);

	//repaint box images
	updateBoxImages(boxNo);
}

function changeMainImage (imageNum)	{
	changeImage ("artworkmain",workImg[imageNum].src);
}

function changeImage (imageID, newSrc)	{
	document.getElementById(imageID).src = newSrc;
}

function rollOverBox (boxNum)	{
	var imageID = 'artbutton'+ boxNum;
	changeImage (imageID, "../images/button-active.jpg");
}

function setCurrentImage (imgNo)	{
	currentImg = imgNo;
}

function updateBoxImages ()	{
	var selectedBox = currentImg;

	//recolour all box images
	for	(i=0;i<imgNum;i++)	{
		var imgID = 'artbutton'+i;
		changeImage (imgID,'../images/button-off.jpg');
	}

	//selected current box
	var currentBoxID = 'artbutton'+currentImg;
	changeImage (currentBoxID,'../images/button-on.jpg');
}

function writeBoxDiv ()	{
	var divContent = '<p>';
	var button = 'button-on.jpg';
	for (i=0;i<imgNum;i++)	{
		if(i>0)	{
			button = 'button-off.jpg';
		}
		divContent += '<a href="Javascript:void(null)" onclick="clickBox('+i+')" onmouseover="rollOverBox('+i+')" onmouseout="updateBoxImages()" title="view image"><img src="../images/'+button+'" width="16" height="16" id="artbutton'+i+'" border="0" /></a>';
	}

	divContent += '</p>';
	document.getElementById("boxDiv").innerHTML = divContent;
}