var imgBigX = new Array();
var imgBigY = new Array();
var imgBigPosX = new Array();
var imgBigPosY = new Array();
var imgSmallX = new Array();
var imgSmallY = new Array();
var imgSmallPosX = new Array();
var imgSmallPosY = new Array();
var currentBigImage = -1;
var galleryBottom = 0;
var imagesLoadedCount = 0;
var animationDownFrame = 0;
var animationDownSizeYStep = new Array(5);
var animationDownSizeXStep = new Array(5);
var animationDownPosYStep = new Array(5);
var animationDownPosXStep = new Array(5);
var animationDownImageId = 0;
var animationDownImageObj = document.getElementById("galleryImage0");
var animationUpFrame = 0;
var animationUpImageId = 0;
var animationUpImageObj = document.getElementById("galleryImage0"); ;
var animationUpSizeYStep = new Array(5);
var animationUpSizeXStep = new Array(5);
var animationUpPosYStep = new Array(5);
var animationUpPosXStep = new Array(5);


function buildGallery() {
	//Get the image file list from the hidden field and build the gallery
	imageArray = document.getElementById("imageList").value.split(",");
	imageGalleryDiv = document.getElementById("imageGallery");


	for (i in imageArray) {
		img = new Image();
		img.id = "galleryImage" + i;
		img.src = "gallery/" + imageArray[i];
		img.onload = function () { setTimeout('waitForLoadedImg()', 250) }; 
		img.onmouseover = function () { mouseOverImg(this); };
		img.onmouseout = function () { mouseOutImg(this); };
		img.onmousedown = function () { imageUpBack(this); };
		imageGalleryDiv.appendChild(img);
	} //for loop

}

function waitForLoadedImg(id) {
	imagesLoadedCount++;
	if (imagesLoadedCount == imageArray.length) {
		
		var posX = 0;
		var posY = 0;

		for (i in imageArray) {
			var img = document.getElementById("galleryImage" + i);
			imgBigY[i] = img.height;
			imgBigX[i] = img.width;
			var addLeft = 0;
			var addTop = 0;
			//size as thumbnail
			if (imgBigY[i] > imgBigX[i]) {
				var multiple = 190 / imgBigY[i];
				imgSmallY[i] = 190;
				img.style.height = imgSmallY[i] + "px";
				imgSmallX[i] = Math.round(imgBigX[i] * multiple);
				img.style.width = imgSmallX[i] + "px";
				addTop = 10;
				addLeft = Math.round((210 - imgSmallX[i]) / 2);
			} else {
				var multiple = 190 / imgBigX[i];
				imgSmallX[i] = 190;
				img.style.width = imgSmallX[i] + "px";
				imgSmallY[i] = Math.round(imgBigY[i] * multiple);
				img.style.height = imgSmallY[i] + "px";
				addLeft = 10;
				addTop = Math.round((210 - imgSmallY[i]) / 2);
			}
			img.style.position = "absolute";
			imgSmallPosX[i] = (posX + addLeft);
			imgSmallPosY[i] = (posY + addTop);
			imgBigPosY[i] = (posY + addLeft);
			var widthDiff = 660 - imgBigX[i];
			var widthDiffHalf = widthDiff / 2;
			imgBigPosX[i] = widthDiffHalf;

			img.style.top = imgSmallPosY[i] + "px";
			img.style.left = imgSmallPosX[i] + "px";
			img.className = "imgOut";
			img.style.zIndex = "1000";

			var tempGalleryBottom = posY + imgSmallY[i];
			if (galleryBottom < tempGalleryBottom) {
				galleryBottom = tempGalleryBottom;
			}

			//For the next image position
			if (posX > 400) {
				posX = 0;
				posY = posY + 210;
			} else {
				posX = posX + 210;
			}
		}
	}
	imageGalleryDiv.style.height = (galleryBottom + 50) + "px";
	//Now we know where the bottom of the gallery is we can adjust the big image so it wont go past the bottom of the frame
	for (i in imageArray) {
		var img = document.getElementById("galleryImage" + i);
		if ((imgBigPosY[i] + imgBigY[i]) > galleryBottom) {
			var temp = (imgBigPosY[i] + imgBigY[i]) - galleryBottom;
			var temp2 = imgBigPosY[i] - temp;
			imgBigPosY[i] = temp2;	
		}
	}
}

function mouseOverImg(obj){
	obj.className = "imgOver";
}
function mouseOutImg(obj) {
	obj.className = "imgOut";
}
function imageUpBack(obj) {
	var imageId = obj.id.replace("galleryImage", ""); ;

	if (imageId == currentBigImage) {
		//The image clicked is big make it small
		down(imageId);
	} else {
		if (currentBigImage == -1) {
			//There is no big image, make the image clicked big
			up(imageId);
		} else {
			//Make the current big image small
			cross(imageId, currentBigImage);

//			document.getElementById("galleryImage" + currentBigImage).style.top = imgSmallPosY[currentBigImage] + "px";
//			document.getElementById("galleryImage" + currentBigImage).style.left = imgSmallPosX[currentBigImage] + "px";
//			document.getElementById("galleryImage" + currentBigImage).style.width = imgSmallX[currentBigImage] + "px";
//			document.getElementById("galleryImage" + currentBigImage).style.height = imgSmallY[currentBigImage] + "px";
//			document.getElementById("galleryImage" + currentBigImage).className = "imgOut";
//			document.getElementById("galleryImage" + currentBigImage).style.zIndex = "100";
//			//Make the image clicked big
//			obj.style.top = imgBigPosY[imageId] + "px";
//			obj.style.left = imgBigPosX[imageId] + "px";
//			obj.style.width = imgBigX[imageId] + "px";
//			obj.style.height = imgBigY[imageId] + "px";
//			obj.className = "imgUp";
//			obj.style.zIndex = "10000";
//			currentBigImage = imageId;
		}
	}
}

function down(imageId) {
	//Animation Setup
	animationDownImageId = imageId;
	animationDownImageObj = document.getElementById("galleryImage" + imageId);
	animationDownFrame = 5;
	animationDownSizeXStep[5] = imgBigX[imageId];
	animationDownSizeYStep[5] = imgBigY[imageId];
	animationDownPosXStep[5] = imgBigPosX[imageId];
	animationDownPosYStep[5] = imgBigPosY[imageId];
	for (i = 4; i > 0; i--) {
		animationDownSizeXStep[i] = animationDownSizeXStep[i + 1] - (Math.round((animationDownSizeXStep[i + 1] - imgSmallX[imageId]) / (i + 1)));
		animationDownSizeYStep[i] = animationDownSizeYStep[i + 1] - (Math.round((animationDownSizeYStep[i + 1] - imgSmallY[imageId]) / (i + 1)));
		animationDownPosXStep[i] = animationDownPosXStep[i + 1] - (Math.round((animationDownPosXStep[i + 1] - imgSmallPosX[imageId]) / (i + 1)));
		animationDownPosYStep[i] = animationDownPosYStep[i + 1] - (Math.round((animationDownPosYStep[i + 1] - imgSmallPosY[imageId]) / (i + 1)));
	}
	animationDownSizeXStep[0] = imgSmallX[imageId];
	animationDownSizeYStep[0] = imgSmallY[imageId];
	animationDownPosXStep[0] = imgSmallPosX[imageId];
	animationDownPosYStep[0] = imgSmallPosY[imageId];
	animationDownImageObj.className = "imgOut";
	currentBigImage = -1;
	animationDown();
}

function animationDown() {
	animationDownFrame--;
	if (animationDownFrame > 0) {
		animationDownImageObj.style.top = animationDownPosYStep[animationDownFrame] + "px";
		animationDownImageObj.style.left = animationDownPosXStep[animationDownFrame] + "px";
		animationDownImageObj.style.width = animationDownSizeXStep[animationDownFrame] + "px";
		animationDownImageObj.style.height = animationDownSizeYStep[animationDownFrame] + "px";
		setTimeout("animationDown()",20);
	} else {
		//Finalize the image pos and size
		animationDownImageObj.style.top = imgSmallPosY[animationDownImageId] + "px";
		animationDownImageObj.style.left = imgSmallPosX[animationDownImageId] + "px";
		animationDownImageObj.style.width = imgSmallX[animationDownImageId] + "px";
		animationDownImageObj.style.height = imgSmallY[animationDownImageId] + "px";
		animationDownImageObj.style.zIndex = "100";
	}
}

function up(imageId) {
	//Animation Setup	
	animationUpImageId = imageId;
	animationUpImageObj = document.getElementById("galleryImage" + imageId);
	animationUpFrame = 0;
	animationUpSizeXStep[5] = imgBigX[imageId];
	animationUpSizeYStep[5] = imgBigY[imageId];
	animationUpPosXStep[5] = imgBigPosX[imageId];
	animationUpPosYStep[5] = imgBigPosY[imageId];
	for (i = 4; i > 0; i--) {
		animationUpSizeXStep[i] = animationUpSizeXStep[i + 1] - (Math.round((animationUpSizeXStep[i + 1] - imgSmallX[imageId]) / (i + 1)));
		animationUpSizeYStep[i] = animationUpSizeYStep[i + 1] - (Math.round((animationUpSizeYStep[i + 1] - imgSmallY[imageId]) / (i + 1)));
		animationUpPosXStep[i] = animationUpPosXStep[i + 1] - (Math.round((animationUpPosXStep[i + 1] - imgSmallPosX[imageId]) / (i + 1)));
		animationUpPosYStep[i] = animationUpPosYStep[i + 1] - (Math.round((animationUpPosYStep[i + 1] - imgSmallPosY[imageId]) / (i + 1)));
	}
	animationUpSizeXStep[0] = imgSmallX[imageId];
	animationUpSizeYStep[0] = imgSmallY[imageId];
	animationUpPosXStep[0] = imgSmallPosX[imageId];
	animationUpPosYStep[0] = imgSmallPosY[imageId];
	animationUpImageObj.className = "imgUp";
	animationUpImageObj.style.zIndex = "10000";
	currentBigImage = imageId;
	animationUp();
}

function animationUp() {
	animationUpFrame++;
	if (animationUpFrame <5) {
		animationUpImageObj.style.top = animationUpPosYStep[animationUpFrame] + "px";
		animationUpImageObj.style.left = animationUpPosXStep[animationUpFrame] + "px";
		animationUpImageObj.style.width = animationUpSizeXStep[animationUpFrame] + "px";
		animationUpImageObj.style.height = animationUpSizeYStep[animationUpFrame] + "px";
		setTimeout("animationUp()", 20);
	} else {
		//Finalize the image pos and size
		animationUpImageObj.style.top = imgBigPosY[animationUpImageId] + "px";
		animationUpImageObj.style.left = imgBigPosX[animationUpImageId] + "px";
		animationUpImageObj.style.width = imgBigX[animationUpImageId] + "px";
		animationUpImageObj.style.height = imgBigY[animationUpImageId] + "px";
		
	}
}

function cross(imageIdUp, imageIdDown) {
	//Animation Setup	
	//Up
	animationUpImageId = imageIdUp;
	animationUpImageObj = document.getElementById("galleryImage" + imageIdUp);
	animationUpFrame = 0;
	animationUpSizeXStep[5] = imgBigX[imageIdUp];
	animationUpSizeYStep[5] = imgBigY[imageIdUp];
	animationUpPosXStep[5] = imgBigPosX[imageIdUp];
	animationUpPosYStep[5] = imgBigPosY[imageIdUp];
	for (i = 4; i > 0; i--) {
		animationUpSizeXStep[i] = animationUpSizeXStep[i + 1] - (Math.round((animationUpSizeXStep[i + 1] - imgSmallX[imageIdUp]) / (i + 1)));
		animationUpSizeYStep[i] = animationUpSizeYStep[i + 1] - (Math.round((animationUpSizeYStep[i + 1] - imgSmallY[imageIdUp]) / (i + 1)));
		animationUpPosXStep[i] = animationUpPosXStep[i + 1] - (Math.round((animationUpPosXStep[i + 1] - imgSmallPosX[imageIdUp]) / (i + 1)));
		animationUpPosYStep[i] = animationUpPosYStep[i + 1] - (Math.round((animationUpPosYStep[i + 1] - imgSmallPosY[imageIdUp]) / (i + 1)));
	}
	animationUpSizeXStep[0] = imgSmallX[imageIdUp];
	animationUpSizeYStep[0] = imgSmallY[imageIdUp];
	animationUpPosXStep[0] = imgSmallPosX[imageIdUp];
	animationUpPosYStep[0] = imgSmallPosY[imageIdUp];
	animationUpImageObj.className = "imgUp";
	currentBigImage = imageIdUp;
	//Down
	animationDownImageId = imageIdDown;
	animationDownImageObj = document.getElementById("galleryImage" + imageIdDown);
	animationDownFrame = 5;
	animationDownSizeXStep[5] = imgBigX[imageIdDown];
	animationDownSizeYStep[5] = imgBigY[imageIdDown];
	animationDownPosXStep[5] = imgBigPosX[imageIdDown];
	animationDownPosYStep[5] = imgBigPosY[imageIdDown];
	for (i = 4; i > 0; i--) {
		animationDownSizeXStep[i] = animationDownSizeXStep[i + 1] - (Math.round((animationDownSizeXStep[i + 1] - imgSmallX[imageIdDown]) / (i + 1)));
		animationDownSizeYStep[i] = animationDownSizeYStep[i + 1] - (Math.round((animationDownSizeYStep[i + 1] - imgSmallY[imageIdDown]) / (i + 1)));
		animationDownPosXStep[i] = animationDownPosXStep[i + 1] - (Math.round((animationDownPosXStep[i + 1] - imgSmallPosX[imageIdDown]) / (i + 1)));
		animationDownPosYStep[i] = animationDownPosYStep[i + 1] - (Math.round((animationDownPosYStep[i + 1] - imgSmallPosY[imageIdDown]) / (i + 1)));
	}
	animationDownSizeXStep[0] = imgSmallX[imageIdDown];
	animationDownSizeYStep[0] = imgSmallY[imageIdDown];
	animationDownPosXStep[0] = imgSmallPosX[imageIdDown];
	animationDownPosYStep[0] = imgSmallPosY[imageIdDown];
	animationDownImageObj.className = "imgOut";

	animationCross();
}

function animationCross() {
	animationUpFrame++;
	animationDownFrame--;
	if (animationUpFrame < 5) {
		//Up
		animationUpImageObj.style.top = animationUpPosYStep[animationUpFrame] + "px";
		animationUpImageObj.style.left = animationUpPosXStep[animationUpFrame] + "px";
		animationUpImageObj.style.width = animationUpSizeXStep[animationUpFrame] + "px";
		animationUpImageObj.style.height = animationUpSizeYStep[animationUpFrame] + "px";
		//Down
		animationDownImageObj.style.top = animationDownPosYStep[animationDownFrame] + "px";
		animationDownImageObj.style.left = animationDownPosXStep[animationDownFrame] + "px";
		animationDownImageObj.style.width = animationDownSizeXStep[animationDownFrame] + "px";
		animationDownImageObj.style.height = animationDownSizeYStep[animationDownFrame] + "px";
		if (animationUpFrame == 3) {
			animationUpImageObj.style.zIndex = "10000";
			animationDownImageObj.style.zIndex = "100";
		}

		setTimeout("animationCross()", 20);
	} else {
		//Finalize the image pos and size
		//Up
		animationUpImageObj.style.top = imgBigPosY[animationUpImageId] + "px";
		animationUpImageObj.style.left = imgBigPosX[animationUpImageId] + "px";
		animationUpImageObj.style.width = imgBigX[animationUpImageId] + "px";
		animationUpImageObj.style.height = imgBigY[animationUpImageId] + "px";
		//Down
		animationDownImageObj.style.top = imgSmallPosY[animationDownImageId] + "px";
		animationDownImageObj.style.left = imgSmallPosX[animationDownImageId] + "px";
		animationDownImageObj.style.width = imgSmallX[animationDownImageId] + "px";
		animationDownImageObj.style.height = imgSmallY[animationDownImageId] + "px";
		animationDownImageObj.style.zIndex = "100";
	}
}