window.onload = init;
var d=document;
var zInterval=null;
var _temp;

var imageObjects = new Array(); 		// object reference array to the images
var imageSizes = new Array(); 		// object reference array to the images
var activeImage=-1; 			// index of the currently active image
var prevImage=-1; 			// index of the formerly active image
var TOTAL_IMAGES=4;			// the total number of images
var IMAGES_PER_ROW=4;			// how many images per row
var IMAGE_MIN_SIZE=100;			// the minimum size of the thumbnails
var IMAGE_MAX_WIDTH=500;		// max width of the enlarged images
var IMAGE_MAX_HEIGHT=300;		// max height of the enlarged images
var IMAGE_SPACING=10;			// spacing between the thumbnails
var DEST_Y=110;				// the y position of where the animation stops
var DEST_X=20;				// the x position of where the animation stops

function init() {
	if(!document.getElementById)return;	// bail out if this is an old browser
	initSizes(new Array('100','100','100','100'),4);
	//initThumbnails();			// initialize the thumbnail images
}

function initSizes(sizeArray, total)
{
	TOTAL_IMAGES = total;
	IMAGES_PER_ROW = total;
	imageSizes = sizeArray;
	initThumbnails();
}

function initThumbnails() {
	x=0; y=0; i=0; z=0;
	// loop over how many images we have to deal with
	while(i<TOTAL_IMAGES) {
		// create an object reference variable to the image
		if(!imageObjects[i])imageObjects[i]=d.getElementById("image"+i);

		// set the top and left of the image
		imageObjects[i].style.left = x + "px";
		imageObjects[i].style.top = y + "px";

		// set up the bogus "xid" attribute to ID the images when they are clicked on
		imageObjects[i].xid=i;

		// set up the onclick event
		imageObjects[i].onclick=function(){set(this.xid)}

		// increment the x coordinate for the next image
		x+=parseInt(imageSizes[i])+IMAGE_SPACING;

		// if we've got as many images in the row as we want, start the next row
		z++;
		if(z>=IMAGES_PER_ROW) {
			x=0; z=0;
			y+=IMAGE_MIN_SIZE+IMAGE_SPACING;
		}
		i++;
	}
	// set the default image
	set(0);
}

function set(index) {
	if(index==activeImage) {
		// the user has clicked on the enlarged image. set prevImage to activeImage and set activeImage to -1
		prevImage=activeImage;
		imageObjects[activeImage].style.zIndex=100;
		activeImage=-1;	
	} else {
		prevImage=activeImage;
		activeImage=index;
		imageObjects[activeImage].style.zIndex=100;
		
		if(prevImage >= 0)
		{
		imageObjects[prevImage].style.filter="alpha(opacity=100)";
		imageObjects[prevImage].style.MozOpacity="1";
		imageObjects[prevImage].style.opacity="1";
		}
		
		imageObjects[activeImage].style.filter="alpha(opacity=50)";
		imageObjects[activeImage].style.MozOpacity="0.5";
		imageObjects[activeImage].style.opacity="0.5";
		//put the image
		if(_temp != null)
		{
			_temp.parentNode.removeChild(_temp);
		}
		_temp = document.createElement("img");
		_temp.src=imageObjects[activeImage].src.replace("thumbnails/tn","");
		_temp.className = "foto";
		_temp.style.left = DEST_X + "px";
		_temp.style.top = DEST_Y + "px";
		//_temp.width = imageObjects[activeImage].width;
		//_temp.height = imageObjects[activeImage].height;
		imageObjects[activeImage].parentNode.appendChild(_temp);
		// set the opacity of the object. Once for Gecko, once for Safari and once for MSIE.
		_temp.style.filter="alpha(opacity=100)";
		_temp.style.MozOpacity="1";
		_temp.style.opacity="1";
	}

}