/*
 * 
 * Gallery of Photos Initialization:
 * 
 * 		1. Finds the image inside the gallery
 * 		2. Determines the width/height of the image's container
 * 		3. Determines the width/height of the image
 * 		4. Centers the image in the container
 * 
 * 
 * 		NOTE:  CSS Borders add to the total width of an element.
 * 
 */
function initGallery(){


	// Assumes there is only one image in the gallery
		// NOTE: had to get the image using Prototype
	var image = $($("galleryPhoto").getElementsByTagName("img")[0]);
	var imageContainer = $('galleryPhoto');

	// Hiding the image until the image centering is done.
	image.setStyle({"display": "none"});

	if( image != null && imageContainer != null ){

		// see NOTE
		if( image.getWidth() + 10 <  imageContainer.getWidth() ){
			var hpadding = ( (imageContainer.getWidth() - 10) - image.getWidth()) / 2;
			$(image).setStyle( {"margin-left": hpadding.toString() + "px"} );
		}
		if( image.getHeight() + 10 < imageContainer.getHeight() ){
			var vpadding = ( (imageContainer.getHeight() - 10) - image.getHeight()) / 2;
			image.setStyle({"margin-top": vpadding.toString() + "px" });		
		}
	}

	// Showing the image after the centering is done.
	image.setStyle({ "display": "block"})

}
Event.observe(window,'load',initGallery);