window.addEvent('domready', function()
{
	centre_photo();
});






// 19 July 2007
// First script to resize the toolbar to the browser window width

// User definable variables

var headerHeight = 48;
var toolbarHeight = 35;

function setupStage()
{
	resize_bottomToolbar();
	resizeToFit();
}


function centre_photo() 
{
	// hide the photo
	$('lightBox').setStyles({ 'visbility': 'hidden' });
	
	
	var imgWidth = $('photo').width;
	var imgHeight = $('photo').height;
	
	var windowDim = window.getSize();
	var stageWidth = windowDim.size.x;
	var stageHeight = windowDim.size.y;
	//alert ('img w ' + imgWidth + ' h ' + imgHeight + '\n\nst w ' + stageWidth + ' h ' + stageHeight);
	
	// Calculate the left and top position
	newTop = ((stageHeight - imgHeight) - headerHeight - toolbarHeight) / 2;
	newLeft = (stageWidth - imgWidth) / 2;
	$('lightBox').setStyles({ 'left': newLeft });
	//$('lightBox').setStyles({ 'top': newTop });
	$('lightBox').setStyles({ 'visbility': 'visible' });
}


function resizeToFit()
{
	var imgWidth = $('photo').width;
	var imgHeight = $('photo').photo.height;
	var stageWidth = window.innerWidth;
	var stageHeight = window.innerHeight;
	var newHeight;
	var newWidth;
	
	// calculate the ratio of each side
	var ratioWidth = imgWidth / imgHeight;
	var ratioHeight = imgHeight / imgWidth;
	
	var stageStructuresH = headerHeight + toolbarHeight;
	var lightboxRegion = stageHeight + stageStructuresH
	
	//alert ('ratio Width ' + ratioWidth + '\n\nratio Height ' + ratioHeight);
	
	if (imgHeight > lightboxRegion)
	{
		// make the new height of the image 85% of the original size
		newHeight = (.75 * lightboxRegion);
		
		// what is the difference between the original height and the new height
		var hDifference = imgHeight - newHeight;
		
		// to find the amount the width needs to be multiply the difference (above) with the width ratio
		newWidth = imgWidth - (hDifference * ratioWidth);
		
		alert ('Original w ' + imgWidth + ' h ' + imgHeight + '\n\n' + 'New w ' + newWidth + ' h ' + newHeight);
		
		document.getElementById("photo").style.width = newWidth + "px";
		document.getElementById("photo").style.height = newHeight + "px";
	}
	
	/*
	if (the image height is larger than the stageHeight (minus any structural elements)
	{
		resize the image height (and width) to 80% of the available stage height
	}
	if (if the image width is larger than the stageWidth)
	{
		resize the image width (and height) to 80% of the available stage width
	}
	
	equation to figure out the new height
	var resizePercent = .8 (as a fraction 80%);
	newheight = resizePercent * (stageHeight - headerHeight - toolbarHeight);
	
	resizePercent = (stageHeight - headerHeight - toolbarHeight) / 
	*/
	centre_photo();
}


// I'd like to have a function that calls up any of a range of variables.
// For example getVariable(imageWidth, stageWidth)
// This would return the variable in a local variable that shares the same name