function buildImagePage() {
 $pictures = "<table class=thumbnails>";
 for(i=0;i<3;i++) {
	$pictures = $pictures + "<tr>";
	for(j=0;j<3;j++) {
		$pictures = $pictures + "<td><img class=thumbnail onclick=\"expandImagePane(\'" + ((i*3)+j) + "\')\" src=images/" + ((i*3)+j) + "s.jpg></td>";
	}
	$pictures = $pictures + "</tr>";
 }
 $pictures = $pictures + "</table><br>Click a thumbnail to show image.";
}

function showImage() {
	parent.document.getElementById('largeimage').style.height = 580;
	parent.document.getElementById('largeimage').style.width = 780;
	parent.document.getElementById('largeimage').style.opacity = 1;
}

function expandImagePane(imageName) {
	$nameint = parseInt(imageName);
	$filename = "images/" + $nameint + ".jpg";
	parent.document.getElementById('largeimage').src = $filename;
	parent.document.getElementById('block').style.opacity = 4;
	parent.document.getElementById('backg').style.zIndex = 4;
	parent.document.getElementById('block').style.zIndex = 6;

	$("#backg").animate({
		opacity: 0.8
		}, 1000);

	$("#block").animate({
		width: "800",
		height:"600",
		marginTop: "-300px",
		marginLeft: "-400px"
		}, 1000, showImage);
}

function resetImagePane() {
  parent.document.getElementById('largeimage').style.height = 1;
  parent.document.getElementById('largeimage').style.width = 1;
  parent.document.getElementById('largeimage').style.opacity = 0;
  bgpane = parent.document.getElementById('backg');
  bgpane.style.zIndex = -2;
  bgpane.style.opacity = 0;
  pane = parent.document.getElementById('block');
  pane.style.width = 65;
  pane.style.height = 65;
  pane.style.marginTop = "-32px";
  pane.style.marginLeft = "-32px";
  pane.style.opacity = 0;
  pane.style.zIndex = -1;
}