function growImage(index) {
	var theElement = $('thumbWrapper_'+index);
	if (theElement) {
		// stop any current animation
		if (theElement.animation) {
			theElement.animation.stop();
		}

		// start the animation
		theElement.animation = new Fx.Styles(theElement.id, {duration: 300, transition: Fx.Transitions.Quint.easeOut });
		theElement.animation.custom({
			'height': [100, 140], 
			'width': [100, 140], 
			'border-color': ['#000', '#D32026']
		});

	}
}


function shrinkImage(theElement) {
	if (theElement) {
		// stop any current animation
		if (theElement.animation) {
			theElement.animation.stop();
		}

		// start the animation
		theElement.animation = new Fx.Styles(theElement.id, {duration: 300, transition: Fx.Transitions.quadOut});
		theElement.animation.custom({
			'height': [theElement.offsetHeight, 100], 
			'width': [theElement.offsetWidth, 100], 
			'border-color': ['#D32026', '#000']
		});
	}
}

function changeColor (theElement) {
	//var colorChange = new Fx.Color(theElement, 'color', {duration: 500, wait: false});
	//colorChange.toColor('#fff');
	$(theElement.id).setStyle('background-color', '#fff');
}

function getLargeImage(imageID) {
	var postData = "";
	var queryString = "&what=getLargeImage&imageID="+imageID;
	
	sendRequest(queryString, postData, "processLargeImage();");
}

function processLargeImage() {
	var imageData = eval('('+httpReq.responseText+')');
	
	// store the text details
	var imageInfoDetails = $('imageInfoDetails');
	imageInfoDetails.innerHTML = imageData.details;

	loadLargeImage(imageData.largeImage, imageData.largeImageWidth, imageData.largeImageHeight);
}

document.loadedImages = new Array();
function loadLargeImage(imagePath, imageWidth, imageHeight) {
	// load the image first
	var newImage = new Image();
	newImage.src = imagePath;
	document.loadedImages.push(newImage);
	
	// make sure it's loaded before attempting to show it
	waitForImageLoad(document.loadedImages.length-1, imageWidth, imageHeight);
}

function waitForImageLoad(imageIndex, imageWidth, imageHeight) {
	if (typeof document.loadedImages[imageIndex].complete=='boolean' && !document.loadedImages[imageIndex].complete) {
		setTimeout("waitForImageLoad("+imageIndex+", "+imageWidth+", "+imageHeight+");", 200);
		return;
	}
	else {
		// we're ready to proceed
		showLargeImage(imageIndex, imageWidth, imageHeight);
	}
}

function showImageInfoHelper() {
	var helper = $('imageInfoHelper');
	
	if (helper.animation) {
		helper.animation.stop();
	}
	helper.animation = new Fx.Style(helper.id, 'left', {duration: 2000, transition: Fx.Transitions.Quint.easeOut} );
	helper.animation.start(helper.offsetLeft, (helper.offsetLeft-30));
}

function showImageDetails() {
	var imageDetails = $('imageInfoDetails');
	if (imageDetails) {
		if (imageDetails.animation) {
			imageDetails.animation.stop();
		}
		imageDetails.animation = new Fx.Style(imageDetails.id, 'top', {duration: 1000, transition: Fx.Transitions.Quint.easeOut} );
		imageDetails.animation.start(imageDetails.offsetTop, 0);	
		
		$('imageDetailsLink').href = "javascript: hideImageDetails();";	
	}
}
function hideImageDetails() {
	var imageDetails = $('imageInfoDetails');
	if (imageDetails) {
		if (imageDetails.animation) {
			imageDetails.animation.stop();
		}
		imageDetails.animation = new Fx.Style(imageDetails.id, 'top', {duration: 1000, transition: Fx.Transitions.Quint.easeOut} );
		imageDetails.animation.start(imageDetails.offsetTop, (0-imageDetails.offsetHeight));
		
		$('imageDetailsLink').href = "javascript: showImageDetails();";	
	}
}

function showLargeImage(imageIndex, imageWidth, imageHeight) {
	//alert('have '+imageHeight);
	
	
	// SHOULD HAVE SOME TIMEOUT LOOPING INSTEAD, TO CHECK FOR LOAD COMPLETION...
	
	// make sure the image will fit within the current view
	// get the details on our current window view
	var windowDetails = getWindowDetails();
	var maxDimensions = {'width':(windowDetails.viewWidth-40), 'height':(windowDetails.viewHeight-40)};
	var currentDimensions = {'width':imageWidth, 'height':imageHeight};
	var scaledDimensions = scaleDimensions(maxDimensions, currentDimensions);

	imageWidth = scaledDimensions['width'];
	imageHeight = scaledDimensions['height'];
		
	var halfHeight = imageHeight/2;
	var halfWidth = imageWidth/2;
	
	// get handles to the image quarters
	var topHalf = $("largeTopMask");
	var topImage = $("topImage");
	var bottomHalf = $("largeBottomMask");
	var bottomImage = $("bottomImage");
		
	if (topHalf && bottomHalf && topImage && bottomImage) {
		// set the dimensions on our masks
		topHalf.style.width = imageWidth+"px";
		topHalf.style.height = halfHeight+"px";
		bottomHalf.style.width = imageWidth+"px";
		bottomHalf.style.height = halfHeight+"px";

		// clear out the old images
		topImage.src = 'images/blank.gif';
		bottomImage.src = 'images/blank.gif';
		
		// set the image sources for each
		topImage.src = document.loadedImages[imageIndex].src;
		bottomImage.src = document.loadedImages[imageIndex].src;
		topImage.style.width = imageWidth+"px";
		topImage.style.height = imageHeight+"px";
		bottomImage.style.width = imageWidth+"px";
		bottomImage.style.height = imageHeight+"px";
		
		// move the bottom image a little, so we only see the bottom half of it
		bottomImage.style.marginTop = "-"+(halfHeight-3)+"px";	// I need the -3 to get it to line up right...why?  borders?
		
		// get the Image Info Helper ready for action
		var helper = $('imageInfoHelper');
		helper.style.left = (imageWidth)+"px";
		$('imageDetailsLink').href = "javascript: showImageDetails();";	
		
		// position each initially
		var INITIAL_SPACING = 100;
		
		topHalf.style.top = (windowDetails.centerY-halfHeight)+"px"; 
		topHalf.style.left = (windowDetails.centerX-halfWidth-INITIAL_SPACING)+"px"; 
		bottomHalf.style.top = (windowDetails.centerY)+"px"; 
		bottomHalf.style.left = (windowDetails.centerX-halfWidth+INITIAL_SPACING)+"px"; 
		
		topHalf.setStyle('opacity', 0);
		bottomHalf.setStyle('opacity', 0);
		
		topHalf.style.display = 'block';
		bottomHalf.style.display = 'block';
		
		// now that it's kinda shown, and will give us a real read, move the Image Detail text into it's starting spot
		var imageInfoDetails = $('imageInfoDetails');
		imageInfoDetails.style.width = (imageWidth-50)+"px";
		imageInfoDetails.style.top = -imageInfoDetails.offsetHeight+"px";
		
		// start the animations
		topHalf.animation = new Fx.Styles(topHalf.id, {duration: 500, transition: Fx.Transitions.Quint.easeOut, onStart: function(){topHalf.style.display = 'block';} });
		topHalf.animation.custom({
			'left': [topHalf.offsetLeft, (topHalf.offsetLeft+INITIAL_SPACING)],
			'opacity': [0, 1]
		});
		
		bottomHalf.animation = new Fx.Styles(bottomHalf.id, {duration: 500, transition: Fx.Transitions.Quint.easeOut, onStart: function(){bottomHalf.style.display = 'block';}, onComplete: showImageInfoHelper});
		bottomHalf.animation.custom({
			'left': [bottomHalf.offsetLeft, (bottomHalf.offsetLeft-INITIAL_SPACING)],
			'opacity': [0, 1]
		});
	}
}

function hideLargeImage() {
	// get handles to the image quarters
	var halves = new Array($("largeTopMask"), $("largeBottomMask"));
	
	for (var i = 0; i < halves.length; i++) {
		halves[i].style.display = 'none';
		if (halves[i].animation) {
			halves[i].animation.stop();
			halves[i].animation = null;
		}
	}	
	
	var helper = $('imageInfoHelper');
	if (helper.animation) {
		helper.animation.stop();
	}
}

function getCategoryPhotos(categoryID) {
	var categoryPhotoMask = document.getElementById("categoryPhotoMask_"+categoryID);
	if (categoryPhotoMask) {
		// see if it's already open
		if (categoryPhotoMask.offsetHeight > 50) {	// this is so lame.  But IE 6 is reporting > 0, when there's nothing in the damn thing.
			// yep, so we just need to close it instead
			if (categoryPhotoMask.animation) {
				categoryPhotoMask.animation.stop();
			}
			categoryPhotoMask.animation = new Fx.Style(categoryPhotoMask.id, 'height', {duration: 1000, transition: Fx.Transitions.Quint.easeOut, onStart: function(){setArrowDirection(categoryID, 'down');} });
			categoryPhotoMask.animation.start(categoryPhotoMask.offsetHeight, 10);
		}
		else {
		
			// it's closed - but let's see if we've already got data inside it
			if (categoryPhotoMask.getAttribute("haveGallery") == 'true') {
				// yep, already have data.  So let's just open it
				if (categoryPhotoMask.animation) {
					categoryPhotoMask.animation.stop();
				}
				categoryPhotoMask.animation = new Fx.Style(categoryPhotoMask.id, 'height', {duration: Math.floor(categoryPhotoMask.scrollHeight*5), transition: Fx.Transitions.Quint.easeOut, onStart: function(){setArrowDirection(categoryID, 'up');} });
				categoryPhotoMask.animation.start(categoryPhotoMask.offsetHeight, categoryPhotoMask.scrollHeight);
			}
			else {
				// nope, no data.  Let's go get some
				var postData = "";
				var queryString = "&what=getCategoryPhotos&categoryID="+categoryID;
				
				sendRequest(queryString, postData, "showCategoryPhotos("+categoryID+");");
			}
		}
	}
}

function showCategoryPhotos(categoryID) {
	var categoryPhotoMask = $("categoryPhotoMask_"+categoryID);
	if (categoryPhotoMask) {
		categoryPhotoMask.innerHTML = httpReq.responseText;
		categoryPhotoMask.setAttribute("haveGallery", "true");
		// show it
		if (categoryPhotoMask.animation) {
			categoryPhotoMask.animation.stop();
		}
		categoryPhotoMask.animation = new Fx.Style(categoryPhotoMask.id, 'height', {duration: Math.floor(categoryPhotoMask.scrollHeight*5), transition: Fx.Transitions.Quint.easeOut, onStart: function(){setArrowDirection(categoryID, 'up');} });
		categoryPhotoMask.animation.start(categoryPhotoMask.offsetHeight, categoryPhotoMask.scrollHeight);
	}
}

function setArrowDirection(categoryID, direction) {
	var theArrow = $('arrow_'+categoryID);
	if (theArrow) {
		theArrow.src = (direction == 'down' ? 'images/arrow_down.jpg' : 'images/arrow_up.jpg');
	}
}