//array of values for the popup thumbnail box - "left" css attribute (depending on which thumb is rolled over)
var leftArray_row1 = ['94', '195', '297', '400', '501', '604', '710'];
var leftArray_row2 = ['48', '164', '278', '398', '508', '630', '745'];
var leftArray_row3 = ['0', '128', '260', '392', '518', '650', '782'];
var leftArray = [leftArray_row1, leftArray_row2, leftArray_row3];

//array of values for the popup thumbnail box - "bottom" css attribute (depending on which thumb is rolled over)
var bottomArray_row1 = ['2', '3', '4', '4', '5', '4', '3'];
var bottomArray_row2 = ['2', '1', '0', '0', '2', '1', '2'];
var bottomArray_row3 = ['3', '3', '-1', '-1', '1', '4', '4'];
var bottomArray = [bottomArray_row1, bottomArray_row2, bottomArray_row3];

//shortcut for getElementById
function $_(id) {
	return document.getElementById(id);
}

function thumbOver(num, file) {
	var row = num.substr(0,1);
	var col = num.substr(2,1);
	$_('thumb'+row+'-overImg').src = file;
	$_('thumb'+num).style.backgroundImage = "none"; //"url('')";
	$_('thumb'+row+'-over').style.display = "block";
	$_('thumb'+row+'-over').style.zIndex = parseInt($_('thumb'+num).style.zIndex,10) - 1;
	$_('thumb'+row+'-over').style.left = leftArray[row-1][col-1] + "px";
	$_('thumb'+row+'-over').style.bottom = bottomArray[row-1][col-1] + "px";
}

function thumbOut(num, file) {
	var row = num.substr(0,1);
	$_('thumb'+num).style.backgroundImage = "url('"+file+"')";
	$_('thumb'+row+'-over').style.display = "none";
}