var currentURL = "";
var currentWidth = 100;
var currentHeight = 100;
var originalWidth = 100;
var originalHeight = 100;
var aspectRatio = 1;
var pictureType = "F";		// set to "F" for Full-size or "D" for Detail
var orientation = "V";		// set to "V" for Vertical or "H" for Horizontal
var sizeSetting = "D";		// set to "D" for Default or "F" for Fit-to-screen


function showPicture(url, width, height)  {
	currentURL = url;
	currentWidth = width;
	currentHeight = height;
	var image = document.getElementById("big_picture");
	image.src=url;
	if (sizeSetting === "D")  {
		if (width) image.width = width;
		if (height) image.height = height;
	}
	else if (sizeSetting === "F")  {
		if (orientation === "V")  {
			setVertical();
		}
		else if (orientation === "H")  {
			setHorizontal();
		}
		image.width = currentWidth;
		image.height = currentHeight;
	}
}

function showPicVertMain(url, w, h)  {
	pictureType = "F";
	orientation = "V";
	originalWidth = w;
	originalHeight = h;
	var height = 850;		// Change this value to change the displayed size of
								//  all pictures affected by this function. (originally 750)
	var width = w * (height / h);
	showPicture(url, width, height);
}

function showPicVertDetail(url, w, h)  {
	pictureType = "D";
	orientation = "V";
	originalWidth = w;
	originalHeight = h;
	var height = 1150;		// Change this value to change the displayed size of
								//  all pictures affected by this function. (originally 850)
	var width = w * (height / h);
	showPicture(url, width, height);
}

function showPicHorizMain(url, w, h)  {
	pictureType = "F";
	orientation = "H";
	originalWidth = w;
	originalHeight = h;
	var width = 900;		// Change this value to change the displayed size of
								//  all pictures affected by this function. (originally 950)		
	var height = h * (width / w);
	showPicture(url, width, height);
}

function showPicHorizDetail(url, w, h)  {
	pictureType = "D";
	orientation = "H";
	originalWidth = w;
	originalHeight = h;
	var width = 1450;		// Change this value to change the displayed size of
								//  all pictures affected by this function. (originally 950)
	var height = h * (width / w);
	showPicture(url, width, height);
}


// If title is not set for an image, set title based on its 'name' attribute: 
// The two recognized names are: 'full' and 'detail'
function setIconTitles()  {
	// Get array of all image elements from the page
	var images = document.getElementsByTagName("IMG");
	for (var i = 0; i < images.length; i++)  {
		var img = images[i];
		if ( ! img.title )	{
			if (img.name === "full")
				img.title = "Full view";
			else if (img.name === "detail")
				img.title = "Detail view";
		}
	}
}

 
// Preload image browser's cache
function preload(url)  {
	if (url.length > 0)
		(new Image()).src = url;
}

// Initialize page
function initialize()  {
	for (var i = 0; i < arguments.length; i++)  {
		preload(arguments[i]);
	}
	setIconTitles();
}

// Adjust height of image to fit on screen
function fitVertical()  {
	setVertical();
	showPicture(currentURL, currentWidth, currentHeight);
}

// Helper function for 'fitVertical()'
function setVertical()  {
	sizeSetting = "F";
	aspectRatio = currentHeight / currentWidth;
	currentHeight = getInnerHeight() - 30;
	currentWidth = currentHeight / aspectRatio;	
}

// Adjust width of image to fit on screen
function fitHorizontal()  {
	setHorizontal();
	showPicture(currentURL, currentWidth, currentHeight);
}

// Helper function for 'fitHorizontal()'
function setHorizontal()  {
	sizeSetting = "F";
	aspectRatio = currentHeight / currentWidth;
	currentWidth = getInnerWidth() - 60;
	currentHeight = currentWidth * aspectRatio;
}

// Helper function
function getInnerHeight()  {
	// if Microsoft IE browser
	if (document.documentElement.clientHeight)
		return document.documentElement.clientHeight;
		
	// if another browser
	if (window.innerHeight)
		return window.innerHeight;
}

// Helper function
function getInnerWidth()  {
	// if Microsoft IE browser
	if (document.documentElement.clientWidth)
		return document.documentElement.clientWidth;
		
	// if another browser
	if (window.innerWidth)
		return window.innerWidth;
}

function restoreSize()  {
	sizeSetting = "D";
	if (orientation === 'V')
	{
		if (pictureType === 'F')
			showPicVertMain(currentURL, originalWidth, originalHeight);
		else if (pictureType === 'D')
			showPicVertDetail(currentURL, originalWidth, originalHeight);
	}
	else if (orientation === 'H')
	{
		if (pictureType === 'F')
			showPicHorizMain(currentURL, originalWidth, originalHeight);
		else if (pictureType === 'D')
			showPicHorizDetail(currentURL, originalWidth, originalHeight);
	}
}