// JavaScript Document
var imageDir = "Pictures";
var graphicDir = "graphics";
var imageFrame = null;

var imageRows = new Array();
imageRows[imageRows.length++] = { img: "20081028-06small.jpg", lnk: "20081028-06.jpg" };
imageRows[imageRows.length++] = { img: "20081028-05small.jpg", lnk: "20081028-05.jpg" };
imageRows[imageRows.length++] = { img: "20081028-04small.jpg", lnk: "20081028-04.jpg" };
imageRows[imageRows.length++] = { img: "20081028-03small.jpg", lnk: "20081028-03.jpg" };
imageRows[imageRows.length++] = { img: "20081028-02small.jpg", lnk: "20081028-02.jpg" };
imageRows[imageRows.length++] = { img: "20081028-01small.jpg", lnk: "20081028-01.jpg" };
imageRows[imageRows.length++] = { img: "0286small.jpg", lnk: "0286.jpg" };
imageRows[imageRows.length++] = { img: "0281small.jpg", lnk: "0281.jpg" };
imageRows[imageRows.length++] = { img: "0285small.jpg", lnk: "0285.jpg" };
imageRows[imageRows.length++] = { img: "0300small.jpg", lnk: "0300.jpg" };
imageRows[imageRows.length++] = { img: "0305small.jpg", lnk: "0305.jpg" };
imageRows[imageRows.length++] = { img: "0298small.jpg", lnk: "0298.jpg" };
imageRows[imageRows.length++] = { img: "0294small.jpg", lnk: "0294.jpg" };
imageRows[imageRows.length++] = { img: "9small.jpg", lnk: "9.jpg" };
imageRows[imageRows.length++] = { img: "10small.jpg", lnk: "10.jpg" };
imageRows[imageRows.length++] = { img: "11small.jpg", lnk: "11.jpg" };
imageRows[imageRows.length++] = { img: "12small.jpg", lnk: "12.jpg" };
imageRows[imageRows.length++] = { img: "13small.jpg", lnk: "13.jpg" };
imageRows[imageRows.length++] = { img: "14small.jpg", lnk: "14.jpg" };
imageRows[imageRows.length++] = { img: "15small.jpg", lnk: "15.jpg" };
imageRows[imageRows.length++] = { img: "16small.jpg", lnk: "16.jpg" };
imageRows[imageRows.length++] = { img: "17small.jpg", lnk: "17.jpg" };
imageRows[imageRows.length++] = { img: "18small.jpg", lnk: "18.jpg" };
imageRows[imageRows.length++] = { img: "19small.jpg", lnk: "19.jpg" };
imageRows[imageRows.length++] = { img: "20small.jpg", lnk: "20.jpg" };
imageRows[imageRows.length++] = { img: "1small.jpg", lnk: "1.jpg" };
imageRows[imageRows.length++] = { img: "3small.jpg", lnk: "3.jpg" };
imageRows[imageRows.length++] = { img: "4small.jpg", lnk: "4.jpg" };
imageRows[imageRows.length++] = { img: "7small.jpg", lnk: "7.jpg" };
imageRows[imageRows.length++] = { img: "", lnk: "" };

// when the document loads, this will be called
function onDocumentLoad( )
{
	MM_preloadImages( 'graphics/AboutUsPushed.jpg',
						'graphics/ServicesPushed.jpg',
						'graphics/PortfolioPushed.jpg',
						'graphics/ContactInfoPushed.jpg',
						'graphics/LinksPushed.jpg',
						'graphics/HomePushed.jpg' );
						
	makeImageTable( );
}

// make the table that contains the images
function makeImageTable( )
{
	var img = null;
	var anch = null;
	var row = null;
	var cell = null;
	var j = 0;
	
	// get the table
	var table = document.getElementById( "imageTable" );
	table.style.width = "600px";
	table.style.border = "none";
	
	// create the first row with the instructions
	row = table.insertRow( table.rows.length );
	cell = row.insertCell( row.cells.length );
	cell.colSpan = 2;
	cell.style.textAlign = "center";
	cell.style.fontStyle = "italic";
	cell.style.fontWeight = "bold";
	cell.style.fontFamily = "Georgia, Times New Roman, Times, serif";
	cell.style.fontSize = 20;
	cell.innerHTML = "Please click on a picture to view a full size version of it.";

	// create a spacer row
	row = table.insertRow( table.rows.length );
	cell = row.insertCell( row.cells.length );
	cell.colSpan = 2;
	cell.innerHTML = " ";
	
	// create the rest of the rows with the images from the array 'imageRows'
	for ( var i = 0; i < imageRows.length; i++ )
	{
		if ( ( i % 2 ) == 0 )
			row = table.insertRow( table.rows.length );
		cell = row.insertCell( row.cells.length );
		cell.style.textAlign = "center";
		cell.style.verticalAlign = "middle";
		cell.style.padding = 10;
		if ( imageRows[i].img != "" )
		{
			img = document.createElement( "img" );
			img.src = imageDir + "/" + imageRows[i].img;
			img.style.border = "none";
			img.onclick = createTableImageOnClick( imageRows[i].lnk );
			cell.appendChild( img );
		}
		else
			cell.innerHTML = "&nbsp";
	}
}

// create the onclick function for the table images
function createTableImageOnClick( image )
{
	return function ( ) {
			showImage( image );
		}
}

// show the given image in a created iframe
function showImage( image )
{
	var winW = 0;
	var winH = 0;
	var frmW = 800;
	var frmH = 525;
	var x = 0;
	var y = 0;
	
	// if the iframe is active, remove it
	if ( imageFrame )
		removeImageFrame( );
	
	// figure out the dimensions of the iframe
	if ( document.all )
	{
		winW = document.body.offsetWidth;
		winH = document.body.offsetHeight;
	}
	else
	{
		winW = window.innerWidth;
		winH = window.innerHeight;
	}
	
	// figure out how far we've scrolled
	var scrolled = document.body.scrollTop;
	
	// set the left(x) and top(y) corner of the frame
	x = ( winW / 2 ) - ( frmW / 2 ) - 10 + "px";
	y = scrolled;
	
	// create the iframe
	imageFrame = document.createElement( "iframe" );
	document.body.appendChild( imageFrame );
	
	// set the specs of the iframe
	imageFrame.style.backgroundColor = "#FFFFFF";
	imageFrame.style.position = "absolute";
	imageFrame.style.width = frmW + "px";
	imageFrame.style.height = ( winH - 5 ) + "px";
	imageFrame.style.left = x;
	imageFrame.style.top = y;
	
	// create the html for the iframe
	var html = "<table align=\"center\">";
	html += "<tr align=\"center\"><td>";
	html += "<img src=\"" + imageDir + "/" + image +"\" border=\"2\">";
	html += "</td></tr>";
	html += "<tr align=\"center\"><td>";
	html += "<input type=\"button\" value=\"Close\" onclick=\"parent.removeImageFrame()\"/>";
	html += "</td></tr>";
	html += "</table>";

	// write the html to the iframe
	if ( document.all )
		imageFrame.contentWindow.document.write( html );
	else
		imageFrame.contentDocument.write( html );
}

// remove the image frame
function removeImageFrame( )
{
	imageFrame.parentNode.removeChild( imageFrame );
	imageFrame = null;
}