// 'Constants'
var MENU_HOME       = 1;
var MENU_LATEST     = 2;
var MENU_FLOWERS    = 3;
var MENU_TREES      = 4;
var MENU_LANDSCAPES = 5;
var MENU_MISC       = 6;
var MENU_ABOUT      = 7;

// Left menu - Latest
var LM_LAT_MOST_RECENT = 1;
var LM_LAT_ALL         = 2;
var LM_LAT_THIS_YEAR   = 3;
var LM_LAT_LAST_YEAR   = 4;
var LM_LAT_PREVIOUS    = 5;
var LM_LAT_FAVOURITES  = 6;

// Left Menu - Flowers
var LM_FLO_ALL    = 1;
var LM_FLO_PINK   = 2;
var LM_FLO_YELLOW = 3;
var LM_FLO_WHITE  = 4;
var LM_FLO_BLUE   = 5;
var LM_FLO_PURPLE = 6;
var LM_FLO_ORANGE = 7;
var LM_FLO_RED    = 8;
var LM_FLO_OTHER  = 9;

// Left Menu - Trees
var LM_TRE_ALL    = 1;
var LM_TRE_SPRING = 2;
var LM_TRE_SUMMER = 3;
var LM_TRE_AUTUMN = 4;
var LM_TRE_WINTER = 5;

// Left Menu - Landscapes
var LM_LAN_ALL           = 1;
var LM_LAN_SUNRISE       = 2;
var LM_LAN_SUNSET        = 3;
var LM_LAN_SEA           = 4;
var LM_LAN_WALES         = 5;
var LM_LAN_CANADA        = 6;
var LM_LAN_CORNWALL      = 7;
var LM_LAN_LAKE_DISTRICT = 8;
var LM_LAN_OTHER         = 9;

// Left menu - Misc
var LM_MIS_ALL       = 1;
var LM_MIS_MONO      = 2;
var LM_MIS_BIRDS     = 3;
var LM_MIS_SNOW      = 4;
var LM_MIS_BUILDINGS = 5

// Left Menu - About
var LM_ABT_ME          = 1;
var LM_ABT_SITE        = 2;
var LM_ABT_PHOTOGRAPHY = 3;
var LM_ABT_CONTACT     = 4;
var LM_ABT_LINKS       = 5;
var LM_ABT_RSS         = 6;

// 'Globals'
var curHeight = 0;
var curWidth = 0;
var curMenu = MENU_HOME;
var curLeftMenu = LM_LAT_MOST_RECENT;
var curImageId = 0;
var thumbnailMode = true;
var firstImage = true;

var maxRows = 0;
var maxCols = 0;
var maxThumbs = 0;
var photoAreaHeight = 0;
var photoAreaWidth = 0;
var mainImageId = "mainImageContent";

// Page load
function loadPage()
{
	document.getElementById ( "rssanchor" ).href = SITE + "/exhibitionrss.xml";
	loadxml();
//	resize();

//	moveThumb ( MENU_HOME );
}

// Re-display the window according to the selected item and move the horizontal menu selector 'hoverdiv' to the selected menu position
function moveThumb( menuItem, clicked )
{
	var selMenu ;

	// Remember selected menu
	curMenu = menuItem;

	switch ( menuItem )
	{
		case MENU_HOME:
		showHome();
		selMenu = document.getElementById ( 'menuHome' ) ;
		break;

		case MENU_LATEST:
		showLatest(clicked);
		selMenu = document.getElementById ( 'menuLatest' ) ;
		break;

		case MENU_FLOWERS:
		showFlowers(clicked);
		selMenu = document.getElementById ( 'menuFlowers' ) ;
		break;

		case MENU_TREES:
		showTrees(clicked);
		selMenu = document.getElementById ( 'menuTrees' ) ;
		break;

		case MENU_LANDSCAPES:
		showLandscapes(clicked);
		selMenu = document.getElementById ( 'menuLandscapes' ) ;
		break;

		case MENU_MISC:
		showMisc(clicked);
		selMenu = document.getElementById ( 'menuMisc' ) ;
		break;

		case MENU_ABOUT:
		showAbout(clicked);
		selMenu = document.getElementById ( 'menuAbout' ) ;
		break;

	}

   	var thumb = document.getElementById("hoverdiv");

	// Size & move the thumb marker that shows the selected menu item	
	var hoverLeft = selMenu.offsetLeft + 5 ;
	var hoverWidth = selMenu.offsetWidth;
	thumb.style.width = (hoverWidth - 10) + "px" ;
  	thumb.style.left = hoverLeft + "px";
}

// Control the visibility of the main display based on the menu selection
function controlVisibility( visHome, visLeft, visAbout, visThumb, visImage )
{
	document.getElementById ( "paHome" ).style.visibility = visHome;
	document.getElementById ( "leftMenu" ).style.visibility = visLeft;
	document.getElementById ( "leftHover" ).style.visibility = visLeft;
	document.getElementById ( "paAbout" ).style.visibility = visAbout;
	document.getElementById ( "paThumbs" ).style.visibility = visThumb;
	document.getElementById ( "paImage" ).style.visibility = visImage;
}


// Show the 'home' menu
function showHome()
{
	controlVisibility ( "visible", "hidden", "hidden", "hidden", "hidden" );
document.getElementById ( mainImageId ).style.visibility = "hidden";
document.getElementById ( "hiddenDiv" ).style.visibility = "hidden";
displayHourglass ( "hidden" );

	// Find the nav buttons (and hide them) in case we've come here from viewing an image
	document.getElementById ( "buttonLeft" ).style.visibility = "hidden";
	document.getElementById ( "buttonRight" ).style.visibility = "hidden";

	// Get the div dimensions so that we can position the text and the picture wihin the frame
	var photoDiv = document.getElementById ( "photoArea" );
	var divWidth = photoDiv.offsetWidth;
	var divHeight = photoDiv.offsetHeight ;
	var leftWidth = divWidth * 0.35;
	var rightWidth = divWidth * 0.6;

	// Make sure that the image will fit.  Check the width, and then check the height (changing the width again if needed)
	var imageWidth = rightWidth ;
	if ( imageWidth > 750 ) { imageWidth = 750 ; }
	var imageHeight = imageWidth * 0.667;
	if ( imageHeight > ( divHeight - 100 ) )
	{
		imageHeight = divHeight - 100 ;
		imageWidth = imageHeight * 1.5;
	}

	// Need to centre image within space
	var imageTop = ( divHeight - imageHeight ) / 2 - 25 ;
	var imageLeft = ( ( rightWidth - imageWidth ) / 2 ) + leftWidth ;

	// Select an image at random from the landscape list
	var randomImage = imageList[ landscapeImages[ Math.floor(Math.random()*landscapeImages.length) ] ];
	var imageURL = "MainExhibition/" + randomImage.year + "/" + randomImage.name + ".jpg";
	var imageLabel = randomImage.title;

	// Position the text and the image
	var leftText = document.getElementById ( "leftText" );
	var rightImage = document.getElementById ( "homeImage" );
	var rightImageLabel = document.getElementById ( "homeImageLabel" ) ;
	var rightImageDiv = document.getElementById ( "rightImage" );
	
	leftText.innerHTML = HOME_TEXT;
	leftText.style.left = "-55px";
	leftText.style.width = leftWidth + "px" ;
	leftText.style.top = (imageTop - 20) + "px";
	rightImage.style.width = imageWidth + "px";
	rightImage.style.height = imageHeight + "px";
	rightImage.src = imageURL;
	rightImageLabel.innerHTML = imageLabel;
	rightImageDiv.style.left = imageLeft + "px";
	rightImageDiv.style.top = imageTop + "px";



}

// Show the 'latest' menu
function showLatest(clicked)
{
	controlVisibility ( "hidden", "visible", "hidden", "visible", "hidden" );


	// If this was a click, then always show first lh menu selection
	if ( clicked ) { curLeftMenu = LM_LAT_MOST_RECENT } ;

	// If we have been clicked, or this is a refresh and we were previously showing thumbnails, then refresh the thumbnails, otherwise refresh the image 
	if ( thumbnailMode || clicked )
	{
		// Set up the left menu
		var leftMenu = document.getElementById ( "leftMenu" );
		leftMenu.innerHTML = "<div class='leftHover' id='leftHover'></div>" + 
				"<div class='ml1' onclick='lmLatest ( LM_LAT_MOST_RECENT, true ); '><span class='menutext'>Most Recent</span></div>" + 
				"<div class='ml2' onclick='lmLatest ( LM_LAT_ALL, true ); '><span class='menutext'>All</span></div>" + 
				"<div class='ml3' onclick='lmLatest ( LM_LAT_THIS_YEAR, true ); '><span class='menutext'>2011</span></div>" + 
				"<div class='ml4' onclick='lmLatest ( LM_LAT_LAST_YEAR, true ); '><span class='menutext'>2010</span></div>" + 
				"<div class='ml5' onclick='lmLatest ( LM_LAT_PREVIOUS, true ); '><span class='menutext'>Previous Years</span></div>" + 
				"<div class='ml6' onclick='lmLatest ( LM_LAT_FAVOURITES, true ); '><span class='menutext'>Favourites</span></div>" ;
		// Position the Left Hover menu
		lmLatest ( curLeftMenu, clicked );
	}
	else
	{
		displayImage ( curImageId ) ;	
	}

}

// Show the 'flowers' menu
function showFlowers(clicked)
{
	controlVisibility ( "hidden", "visible", "hidden", "visible", "hidden" );

	// If this was a click, then always show first lh menu selection
	if ( clicked ) { curLeftMenu = LM_FLO_ALL } ;

	// If we have been clicked, or this is a refresh and we were previously showing thumbnails, then refresh the thumbnails, otherwise refresh the image 
	if ( thumbnailMode || clicked )
	{
		// Set up the left menu
		var leftMenu = document.getElementById ( "leftMenu" );	
		leftMenu.innerHTML = "<div class='leftHover' id='leftHover'></div>" + 
				"<div class='ml1' onclick='lmFlowers (LM_FLO_ALL, true); '><span class='menutext'>All</span></div>" + 
				"<div class='ml2' onclick='lmFlowers (LM_FLO_PINK, true); '><span class='menutext'>Pink</span></div>" + 
				"<div class='ml3' onclick='lmFlowers (LM_FLO_YELLOW, true); '><span class='menutext'>Yellow</span></div>" + 
				"<div class='ml4' onclick='lmFlowers (LM_FLO_WHITE, true); '><span class='menutext'>White</span></div>" + 
				"<div class='ml5' onclick='lmFlowers (LM_FLO_BLUE, true); '><span class='menutext'>Blue</span></div>" + 
				"<div class='ml6' onclick='lmFlowers (LM_FLO_PURPLE, true); '><span class='menutext'>Purple</span></div>" +
				"<div class='ml7' onclick='lmFlowers (LM_FLO_ORANGE, true); '><span class='menutext'>Orange</span></div>" +
				"<div class='ml8' onclick='lmFlowers (LM_FLO_RED, true); '><span class='menutext'>Red</span></div>" +
				"<div class='ml9' onclick='lmFlowers (LM_FLO_OTHER, true); '><span class='menutext'>Other</span></div>" ;
	
		// Position the Left Hover menu
		lmFlowers ( curLeftMenu, true );
	}
	else
	{
		displayImage ( curImageId ) ;	
	}
}

// Show the 'trees' menu
function showTrees(clicked)
{
	controlVisibility ( "hidden", "visible", "hidden", "visible", "hidden" );


	// If this was a click, then always show first lh menu selection
	if ( clicked ) { curLeftMenu = LM_TRE_ALL } ;

	// If we have been clicked, or this is a refresh and we were previously showing thumbnails, then refresh the thumbnails, otherwise refresh the image 
	if ( thumbnailMode || clicked )
	{
		// Set up the left menu
		var leftMenu = document.getElementById ( "leftMenu" );	
		leftMenu.innerHTML = "<div class='leftHover' id='leftHover'></div>" + 
				"<div class='ml1' onclick='lmTrees (LM_TRE_ALL, true); '><span class='menutext'>All</span></div>" + 
				"<div class='ml2' onclick='lmTrees (LM_TRE_SPRING, true); '><span class='menutext'>Spring</span></div>" + 
				"<div class='ml3' onclick='lmTrees (LM_TRE_SUMMER, true); '><span class='menutext'>Summer</span></div>" + 
				"<div class='ml4' onclick='lmTrees (LM_TRE_AUTUMN, true); '><span class='menutext'>Autumn</span></div>" + 
				"<div class='ml5' onclick='lmTrees (LM_TRE_WINTER, true); '><span class='menutext'>Winter</span></div>" ;
		// Position the Left Hover menu
		lmTrees ( curLeftMenu, true );
	}
	else
	{
		displayImage ( curImageId ) ;	
	}
}

// Show the 'landscapes' menu
function showLandscapes(clicked)
{
	controlVisibility ( "hidden", "visible", "hidden", "visible", "hidden" );

	// If this was a click, then always show first lh menu selection
	if ( clicked ) { curLeftMenu = LM_LAN_ALL } ;

	// If we have been clicked, or this is a refresh and we were previously showing thumbnails, then refresh the thumbnails, otherwise refresh the image 
	if ( thumbnailMode || clicked )
	{
		// Set up the left menu
		var leftMenu = document.getElementById ( "leftMenu" );	
		leftMenu.innerHTML = "<div class='leftHover' id='leftHover'></div>" + 
				"<div class='ml1' onclick='lmLandscapes (LM_LAN_ALL, true); '><span class='menutext'>All</span></div>" + 
				"<div class='ml2' onclick='lmLandscapes (LM_LAN_SUNRISE, true); '><span class='menutext'>Sunrises</span></div>" + 
				"<div class='ml3' onclick='lmLandscapes (LM_LAN_SUNSET, true); '><span class='menutext'>Sunsets</span></div>" + 
				"<div class='ml4' onclick='lmLandscapes (LM_LAN_SEA, true); '><span class='menutext'>The Sea</span></div>" + 
				"<div class='ml5' onclick='lmLandscapes (LM_LAN_WALES, true); '><span class='menutext'>Wales</span></div>" +
				"<div class='ml6' onclick='lmLandscapes (LM_LAN_CANADA, true); '><span class='menutext'>Canada</span></div>" +
				"<div class='ml7' onclick='lmLandscapes (LM_LAN_CORNWALL, true); '><span class='menutext'>Cornwall</span></div>" +
				"<div class='ml8' onclick='lmLandscapes (LM_LAN_LAKE_DISTRICT, true); '><span class='menutext'>Lake District</span></div>" +
				"<div class='ml9' onclick='lmLandscapes (LM_LAN_OTHER, true); '><span class='menutext'>Other</span></div>" ;
	
		// Position the Left Hover menu
		lmLandscapes ( curLeftMenu, true );
	}
	else
	{
		displayImage ( curImageId ) ;	
	}
}

// Show the 'misc' menu
function showMisc(clicked)
{
	controlVisibility ( "hidden", "visible", "hidden", "visible", "hidden" );

	// If this was a click, then always show first lh menu selection
	if ( clicked ) { curLeftMenu = LM_MIS_ALL } ;

	// If we have been clicked, or this is a refresh and we were previously showing thumbnails, then refresh the thumbnails, otherwise refresh the image 
	if ( thumbnailMode || clicked )
	{
		// Set up the left menu
		var leftMenu = document.getElementById ( "leftMenu" );	
		leftMenu.innerHTML = "<div class='leftHover' id='leftHover'></div>" + 
				"<div class='ml1' onclick='lmMisc (LM_MIS_ALL, true); '><span class='menutext'>All</span></div>" + 
				"<div class='ml2' onclick='lmMisc (LM_MIS_MONO, true); '><span class='menutext'>Monochrome</span></div>" + 
				"<div class='ml3' onclick='lmMisc (LM_MIS_BIRDS, true); '><span class='menutext'>Birds/Animals</span></div>" + 
				"<div class='ml4' onclick='lmMisc (LM_MIS_SNOW, true); '><span class='menutext'>Snow & Frost</span></div>" +
				"<div class='ml5' onclick='lmMisc (LM_MIS_BUILDINGS, true); '><span class='menutext'>Buildings</span></div>";
	
		// Position the Left Hover menu
		lmMisc ( curLeftMenu, true );
	}
	else
	{
		displayImage ( curImageId ) ;	
	}
}

// Show the 'about' menu
function showAbout(clicked)
{
	controlVisibility ( "hidden", "visible", "visible", "hidden", "hidden" );

	// Find the nav buttons (and hide them) in case we've come here from viewing an image
	document.getElementById ( "buttonLeft" ).style.visibility = "hidden";
	document.getElementById ( "buttonRight" ).style.visibility = "hidden";

	// Set up the left menu
 	var leftMenu = document.getElementById ( "leftMenu" );	
	leftMenu.innerHTML = "<div class='leftHover' id='leftHover'></div>" + 
			"<div class='ml1' onclick='lmAbout (LM_ABT_ME, true); '><span class='menutext'>About Me</span></div>" + 
			"<div class='ml2' onclick='lmAbout (LM_ABT_SITE, true); '><span class='menutext'>About this site</span></div>" + 
			"<div class='ml3' onclick='lmAbout (LM_ABT_PHOTOGRAPHY, true); '><span class='menutext'>My Photos</span></div>" + 
			"<div class='ml4' onclick='lmAbout (LM_ABT_CONTACT, true); '><span class='menutext'>Contact Me</span></div>" + 
			"<div class='ml5' onclick='lmAbout (LM_ABT_RSS, true); '><span class='menutext'>Using RSS <img src='images/rss.png' width='15' height='15' alt='RSS icon'/></span></div>" ;
//			"<div class='ml6' onclick='lmAbout (LM_ABT_LINKS, true); '><span class='menutext'>Links</span></div>" + 

	// If this was a click, then always show first lh menu selection
	if ( clicked ) { curLeftMenu = LM_ABT_ME } ;

	// Position the Left Hover menu
	lmAbout ( curLeftMenu, true );
}

// Left Menu - Latest - most recent
function lmLatest( lmSelection, clicked )
{
	// Save selected menu for later (e.g. resize)
	curLeftMenu = lmSelection;

	// Start with the first image
	curImage = 0 ;

	var hover = document.getElementById ( "leftHover" );

	// Move thumb to selected point, and set curIndex to the appropriate image index
	switch ( lmSelection )
	{
		case LM_LAT_MOST_RECENT:
		curIndex = la_recent;
		hover.style.top = "58px";
		break ;

		case LM_LAT_ALL:
		curIndex = la_all;
		hover.style.top = "91px";
		break ;

		case LM_LAT_THIS_YEAR:
		curIndex = la_thisyear;
		hover.style.top = "124px";
		break;

		case LM_LAT_LAST_YEAR:
		curIndex = la_lastyear;
		hover.style.top = "158px";
		break;

		case LM_LAT_PREVIOUS:
		curIndex = la_older;
		hover.style.top = "190px";
		break;

		case LM_LAT_FAVOURITES:
		curIndex = la_favourite;
		hover.style.top = "223px";
		break;
	}

	curImageId = 0 ;
	displayThumbs( clicked );
}

function lmFlowers (lmSelection, clicked )
{
	// Save selected menu for later (e.g. resize)
	curLeftMenu = lmSelection;

	// Start with the first image
	curImage = 0 ;

	var hover = document.getElementById ( "leftHover" );

	// Move thumb to selected point, and set curIndex to the appropriate image index
	switch ( lmSelection )
	{
		case LM_FLO_ALL:
		curIndex = fl_all;
		hover.style.top = "58px";
		break ;

		case LM_FLO_PINK:
		curIndex = fl_pink;
		hover.style.top = "91px";
		break ;

		case LM_FLO_YELLOW:
		curIndex = fl_yellow;
		hover.style.top = "124px";
		break;

		case LM_FLO_WHITE:
		curIndex = fl_white;
		hover.style.top = "158px";
		break;

		case LM_FLO_BLUE:
		curIndex = fl_blue;
		hover.style.top = "190px";
		break;

		case LM_FLO_PURPLE:
		curIndex = fl_purple;
		hover.style.top = "222px";
		break;

		case LM_FLO_ORANGE:
		curIndex = fl_orange;
		hover.style.top = "254px";
		break;

		case LM_FLO_RED:
		curIndex = fl_red;
		hover.style.top = "286px";
		break;

		case LM_FLO_OTHER:
		curIndex = fl_other;
		hover.style.top = "318px";
		break;
	}

	curImageId = 0 ;
	displayThumbs( clicked );

}

function lmTrees (lmSelection, clicked )
{
	// Save selected menu for later (e.g. resize)
	curLeftMenu = lmSelection;

	// Start with the first image
	curImage = 0 ;

	var hover = document.getElementById ( "leftHover" );

	// Move thumb to selected point, and set curIndex to the appropriate image index
	switch ( lmSelection )
	{
		case LM_TRE_ALL:
		curIndex = tr_all;
		hover.style.top = "58px";
		break ;

		case LM_TRE_SPRING:
		curIndex = tr_spring;
		hover.style.top = "91px";
		break ;

		case LM_TRE_SUMMER:
		curIndex = tr_summer;
		hover.style.top = "124px";
		break;

		case LM_TRE_AUTUMN:
		curIndex = tr_autumn;
		hover.style.top = "158px";
		break;

		case LM_TRE_WINTER:
		curIndex = tr_winter;
		hover.style.top = "190px";
		break;
	}

	curImageId = 0 ;
	displayThumbs( clicked );

}

function lmLandscapes ( lmSelection, clicked )
{
	// Save selected menu for later (e.g. resize)
	curLeftMenu = lmSelection;

	// Start with the first image
	curImage = 0 ;

	var hover = document.getElementById ( "leftHover" );

	// Move thumb to selected point, and set curIndex to the appropriate image index
	switch ( lmSelection )
	{
		case LM_LAN_ALL:
		curIndex = ln_all;
		hover.style.top = "58px";
		break ;

		case LM_LAN_SUNRISE:
		curIndex = ln_sunrise;
		hover.style.top = "91px";
		break ;

		case LM_LAN_SUNSET:
		curIndex = ln_sunset;
		hover.style.top = "124px";
		break;

		case LM_LAN_SEA:
		curIndex = ln_sea;
		hover.style.top = "158px";
		break;

		case LM_LAN_WALES:
		curIndex = ln_wales;
		hover.style.top = "190px";
		break;

		case LM_LAN_CANADA:
		curIndex = ln_canada;
		hover.style.top = "222px";
		break;

		case LM_LAN_CORNWALL:
		curIndex = ln_cornwall;
		hover.style.top = "254px";
		break;

		case LM_LAN_LAKE_DISTRICT:
		curIndex = ln_lake_district;
		hover.style.top = "286px";
		break;

		case LM_LAN_OTHER:
		curIndex = ln_other;
		hover.style.top = "318px";
		break;
	}

	curImageId = 0 ;
	displayThumbs( clicked );
}

function lmMisc ( lmSelection, clicked )
{
	// Save selected menu for later (e.g. resize)
	curLeftMenu = lmSelection;

	// Start with the first image
	curImage = 0 ;

	var hover = document.getElementById ( "leftHover" );

	// Move thumb to selected point, and set curIndex to the appropriate image index
	switch ( lmSelection )
	{
		case LM_MIS_ALL:
		curIndex = mi_all;
		hover.style.top = "58px";
		break ;

		case LM_MIS_MONO:
		curIndex = mi_mono;
		hover.style.top = "91px";
		break ;

		case LM_MIS_BIRDS:
		curIndex = mi_birds;
		hover.style.top = "124px";
		break;

		case LM_MIS_SNOW:
		curIndex = mi_snow;
		hover.style.top = "158px";
		break;

		case LM_MIS_BUILDINGS:
		curIndex = mi_buildings;
		hover.style.top = "190px";
		break;
	}

	curImageId = 0 ;
	displayThumbs( clicked );
}

function lmAbout ( lmSelection, clicked )
{
	// Save selected menu for later (e.g. resize)
	curLeftMenu = lmSelection;

	var hover = document.getElementById ( "leftHover" );

	// Move thumb to selected point, and set curIndex to the appropriate image index
	switch ( lmSelection )
	{
		case LM_ABT_ME:
		displayAbout( ABOUT_ME );
		hover.style.top = "58px";
		break ;

		case LM_ABT_SITE:
		displayAbout( ABOUT_SITE );
		hover.style.top = "91px";
		break ;

		case LM_ABT_PHOTOGRAPHY:
		displayAbout( ABOUT_PHOTOGRAPHY );
		hover.style.top = "124px";
		break;

		case LM_ABT_CONTACT:
		displayAbout( ABOUT_CONTACT );
		hover.style.top = "158px";
		break;

		case LM_ABT_RSS:
		displayAbout( ABOUT_RSS );
		hover.style.top = "190px";
		break;

		case LM_ABT_LINKS:
		displayAbout( ABOUT_LINKS );
		hover.style.top = "222px";
		break;
	}
}

function displayAbout( contentText )
{
	controlVisibility ( "visible", "visible", "hidden", "hidden", "hidden" );
	document.getElementById ( mainImageId ).style.visibility = "hidden";

	// Get the div dimensions so that we can position the text and the picture wihin the frame
	var photoDiv = document.getElementById ( "photoArea" );
	var divWidth = photoDiv.offsetWidth - 125; // take off width of left menu bar
	var divHeight = photoDiv.offsetHeight ;
	var leftWidth = divWidth * 0.45;
	var rightWidth = divWidth * 0.6;

	// Make sure that the image will fit.  Check the width, and then check the height (changing the width again if needed)
	var imageWidth = rightWidth ;
	if ( imageWidth > 500 ) { imageWidth = 500 ; }
	var imageHeight = imageWidth * 1.5;
	if ( imageHeight > ( divHeight - 100 ) )
	{
		imageHeight = divHeight - 100 ;
		imageWidth = imageHeight * 0.667;
	}

	// Need to centre image within space
	var imageTop = ( divHeight - imageHeight ) / 2 ;
	var imageLeft = ( ( rightWidth - imageWidth ) / 2 ) + leftWidth + 125; // add 125 for width of left menu bar

	// Select an image at random from the portrait list
	var randomImage = imageList[ portraitImages[ Math.floor(Math.random()*portraitImages.length) ] ];
	var imageURL = "MainExhibition/" + randomImage.year + "/" + randomImage.name + ".jpg";
	var imageLabel = "<p/>" + randomImage.title;

	// Position the text and the image
	var leftText = document.getElementById ( "leftText" );
	var rightImage = document.getElementById ( "homeImage" );
	var rightImageLabel = document.getElementById ( "homeImageLabel" ) ;
	var rightImageDiv = document.getElementById ( "rightImage" );
	rightImage.src = "";

	leftText.innerHTML = contentText;
	leftText.style.left = "25px";
	leftText.style.width = (leftWidth + 75) + "px" ;
	leftText.style.top = imageTop + "px";
	rightImage.style.width = imageWidth + "px";
	rightImage.style.height = imageHeight + "px";
	rightImage.src = imageURL;
	rightImageLabel.innerHTML = imageLabel;
	rightImageDiv.style.left = (imageLeft - 60) + "px";
	rightImageDiv.style.top = imageTop + "px";
}

// Display the current set of thumbnails
function displayThumbs( clicked )
{
	var thumbHTML = "";
	var thumbId;
	var thumbTop;
	var thumbLeft;
	var thumbImage;
	var isPortrait ;
	var theImage;

	// Currently displaying thumbnails
	thumbnailMode = true;
	firstImage = true;
	controlVisibility ( "hidden", "visible", "hidden", "visible", "hidden" );
	document.getElementById ( mainImageId ).style.visibility = "hidden";

	// If curImageId were, say, 3, then images 0, 1, and 2 would not be visible, but the 'left' button would be hidden too.  In thumbnail mode, 
	// curImageId needs to be a multiple of maxThumbs
	curImageId = curImageId - ( curImageId % maxThumbs ) ;

	for ( var i = 0 ; i < maxRows ; i++ )
	{
		for ( var j = 0 ; j < maxCols ; j++ )
		{
			thumbId = curImageId + ( i * maxCols + j );

			// Have we run out of images?
			if ( thumbId >= curIndex.length )
				break ;

			theImage = imageList[ curIndex[ thumbId ] ];
			isPortrait = ( theImage.orientation == "P" ) ;

			thumbImage = theImage.year + "/" + theImage.name;

			// Calculate top and left positions based on image orientation
			thumbTop = 10 + 106 * i ;
			thumbLeft = 10 + 106 * j ;
			if ( isPortrait )
			{
				thumbLeft = thumbLeft + 16;
			}
			else
			{
				thumbTop = thumbTop + 16 ;
			}

			thumbHTML = thumbHTML + "<div class='thumbImage' style='width:96px; height:64px; top:" + thumbTop + "px; left:" + thumbLeft + 
						"px;' onclick='displayImage(" + thumbId + ")'><img title='Click here to see this image full size' " + 
						"src='MainExhibition/" + thumbImage + "Thumb.jpg' /></div>";
		}
	}

	// Hide the buttons in case they're visible from showing a single image
	document.getElementById ( "buttonRight" ).style.visibility = "hidden";
	document.getElementById ( "buttonLeft" ).style.visibility = "hidden";

	// Work out whether to display the left and right nav buttons
	if ( ( curImageId - maxThumbs ) >= 0 )
	{
		thumbHTML = thumbHTML + "<div class='buttonOne' onclick='pageLeft();'><img title='Click here to see the previous page of images' src='images/left2.jpg' /></div>";
	}

	if ( ( curImageId + maxThumbs ) < curIndex.length )
	{
		thumbHTML = thumbHTML + "<div class='buttonTwo' onclick='pageRight();'><img title='Click here to see the next page of images' src='images/right2.jpg' /></div>";
	}

	document.getElementById ( "paThumbs" ).innerHTML = thumbHTML;
}

// Display a selected image
function displayImage ( imageId )
{
	var theImage;
	var imageImage;
	var leftButton;
	var rightButton;
	var nextImage = "";
	
	// Remember the selected image in case the page is refreshed
	curImageId = imageId

	/// Get the image to be displayed and (if it exists) the next image
	theImage   = imageList[ curIndex[ imageId ] ];
	imageImage = "MainExhibition/" + theImage.year + "/" + theImage.name + ".jpg";

	imageId++;
	if ( curIndex.length > imageId )
	{
		theImage  = imageList[ curIndex[ imageId ] ];
		nextImage = "MainExhibition/" + theImage.year + "/" + theImage.name + ".jpg";
	}

	// Make the image area visible
	controlVisibility ( "hidden", "visible", "hidden", "hidden", "visible" );
	
	// Currently displaying image
	thumbnailMode = false;

	var rightImg = document.getElementById ( mainImageId );
	rightImg.style.visibility = "visible";
	transition ( rightImg, imageImage, nextImage, firstImage );

	// Decide which of the navigation buttons to display
	leftButton = document.getElementById ( "buttonLeft" );
	rightButton = document.getElementById ( "buttonRight" );
	if ( curImageId == 0 )
	{
		// No need to display prev image button as we're at the start
		leftButton.style.visibility = "hidden";
	}
	else
	{
		leftButton.style.visibility = "visible";
	}

	if ( curImageId >=  (curIndex.length - 1 ) )
	{
		// No need to display next image button as we're at the end
		rightButton.style.visibility = "hidden";
	}
	else
	{
		rightButton.style.visibility = "visible";
	}

	firstImage = false;
}

// Display a selected image
function displayImageNext ()
{
	var theImage;
	var imageTitle;
	var imageImage;
	var imageText;
	var isLarge;
	var isPortrait;
	var hasText;
	var leftButton;
	var rightButton;
	
	theImage = imageList[ curIndex[ curImageId ] ];
	isPortrait = ( theImage.orientation == "P" ) ;
	imageImage = theImage.year + "/" + theImage.name;
	imageTitle = theImage.title;
	imageText  = theImage.description;
	hasText    = imageText != "" ;
	isLarge    = ( theImage.size == "L" );

	// Get the div dimensions so that we can position the text and the picture wihin the frame
	var photoDiv = document.getElementById ( "photoArea" );
	var divWidth = photoDiv.offsetWidth;
	var divHeight = photoDiv.offsetHeight ;
	var leftWidth = divWidth * 0.35;
	var rightWidth = divWidth * 0.6;

	// If the image has a text description, then split the screen 40/60, else allocate all the space to the image
	if ( hasText )
	{
		leftWidth = divWidth * 0.35;
		rightWidth = divWidth * 0.6;
	}
	else
	{
		leftWidth = 0;
		rightWidth = divWidth;
	}
	
	// Make sure that the image will fit.  
	var imageWidth;
	var imageHeight;
	var maxImageDimension = isLarge ? 750 : 500 ;;
	
	if ( isPortrait )
	{ // Portrait image, so check the height, and then check the width (changing the height again if needed)
		imageHeight = ( divHeight - 100 );
		if ( imageHeight > maxImageDimension ) { imageHeight = maxImageDimension ; }
		imageWidth = imageHeight * 0.667;
		if ( imageWidth > ( rightWidth - 100 ) )
		{
			imageWidth = rightWidth - 100;
			imageHeight = imageWidth * 1.5;
		}
	}
	else
	{ // Landscape image, so check the width, and then check the height (changing the width again if needed)
		imageWidth = rightWidth ;
		if ( imageWidth > maxImageDimension ) { imageWidth = maxImageDimension ; }
		imageHeight = imageWidth * 0.667;
		if ( imageHeight > ( divHeight - 100 ) )
		{
			imageHeight = divHeight - 100 ;
			imageWidth = imageHeight * 1.5;
		}
	}
	
	// Need to centre image within space
	var imageTop = ( divHeight - imageHeight ) / 2 ;
	var imageLeft = ( ( rightWidth - imageWidth ) / 2 ) + leftWidth ;

	// Position the text and the image
	var leftTextDiv = document.getElementById ( "mainText" );
	var leftText = document.getElementById ( "mainTextContent" );
	var rightImgDiv = document.getElementById ( "mainImage" );

	// Generate new image HTML to avoid browser caching issues
	mainImageId = theImage.id + Math.floor(Math.random() * 1000);
	rightImgDiv.innerHTML = "<img id='" + mainImageId + "' title='Click here to return to thumbnail view' src=''/>";

	var rightImg = document.getElementById ( mainImageId );
//	rightImg.src = "";
	rightImg.style.visibility = "hidden";
	leftTextDiv.style.width = leftWidth + "px" ;
	leftTextDiv.style.top = imageTop + "px";
	rightImg.style.width = imageWidth + "px";
	rightImg.style.height = imageHeight + "px";
	rightImgDiv.style.left = (imageLeft + 25) + "px";
	rightImgDiv.style.top = imageTop + "px";
	
	if ( hasText )
	{
		leftText.innerHTML = imageText;
	}
	else
	{
		leftText.innerHTML = "";
	}
	rightImg.src = "MainExhibition/" + imageImage + ".jpg";
	
	// Set the image title & ID
	document.getElementById ( "mainTitleContent" ).innerHTML = imageTitle;
	document.getElementById ( "imageIdText" ).innerHTML = "Image ID: " + theImage.id;

	return rightImg;
}


// Display the previous image when in 'image' mode
function imagePrevious()
{
	if ( curImageId > 0 )
	{
		displayImage ( curImageId - 1 );
	}
}

// Display the next image when in 'image' mode
function imageNext()
{
	if ( curImageId < ( curIndex.length - 1 ) )
	{
		displayImage ( curImageId + 1 );
	}
}

// Display the previous page of thumbnails when in thumbnail mode
function pageLeft()
{
	if ( ( curImageId - maxThumbs ) >= 0 )
	{
		curImageId = curImageId - maxThumbs;
		displayThumbs ( false ) ;
	}
}

// Display the next page of thumbnails when in thumbnail mode
function pageRight()
{
	if ( ( curImageId + maxThumbs ) < curIndex.length )
	{
		curImageId = curImageId + maxThumbs;
		displayThumbs ( false ) ;
	}
}

// If window is resized, then check if we need to resize display.  IE sends loads of events per re-size hence comparison with previous values
window.onresize = function(){
	if( (curHeight != document.documentElement.clientHeight) || (curWidth != document.documentElement.clientWidth) )
	{
		resize();	

		// Redraw thumb position, as there may be a need to re-align pictures etc.
		moveThumb (curMenu, false);
	}
	curHeight = document.documentElement.clientHeight;
	curWidth = document.documentElement.clientWidth;
}

// Resize display
function resize()
{
	// Get main display rectangle and photo display rectangle elements
	var mainDisp = document.getElementById("mainDisplay");  
	var photoArea = document.getElementById("photoArea");

	// Calculate new window height, allowing room for the banner & top menu
	photoAreaHeight = window.innerHeight - 140;  

	// Some browsers don't understand innerHeight, so have to try something else
	if( isNaN( photoAreaHeight ) ) 
	{
		photoAreaHeight = document.documentElement.clientHeight - 140;
	}

	// Size body and main display rectangle
	document.body.style.height = photoAreaHeight + "px"; 
	mainDisp.style.height = photoAreaHeight + "px";

	// Photo display rectangle is smaller beause of decoration along the bottom (Note: 'mainDisplay' has a min height of 440 px in the stylesheet)
	if ( photoAreaHeight < 440 )
		photoAreaHeight = 420 ;
	else
		photoAreaHeight = photoAreaHeight - 20 ;
	photoArea.style.height = photoAreaHeight + "px";

	// Set photo area width to reflect size of main rectangle 
	photoAreaWidth = mainDisp.offsetWidth - 145;
	photoArea.style.width = photoAreaWidth + "px" ;

	// Calculate thumbnail rows & cols (thumbs are 96px x 64px with a 10px border, and can be landscape or portrait)
	maxCols = Math.floor ( ( photoAreaWidth -110 ) / 106 ) + 1;
	maxRows = Math.floor ( ( photoAreaHeight - 155 ) / 106 ) + 1;
	maxThumbs = maxCols * maxRows;
}

// Called the very first time the site loads to make the menu visible, and hide the welcome text
function xmlLoaded()
{
	document.getElementById("mainDisplay").style.visibility="visible";
	document.getElementById("mainMenu").style.visibility="visible";
	document.getElementById("waitMessage").style.visibility="hidden";
}

// Textual content
var ABOUT_ME ="<span class='abouttext'>My name is David Thomas, and I am an amateur photographer based in Wiltshire in the UK.<br/><br/>I am married with two children and am incredibly grateful to my family who have been very supportive of my photography, and put up with all the frequent stops on journeys to 'just take a quick picture' (or ten!). Without their support, this site would not have been made.<br/><br/>I primarily take photographs for pleasure; as a committed Christian I find myself in constant awe at the wonders of God's creation, and my photography is part of my response to that beauty and a chance to express my own creativity.<br/><br/>Through the site I hope to be able to share my photography with family and friends, and also to assist with sales of my work.</span>";
var ABOUT_SITE ="<span class='abouttext'>The site first went live in 2006, and this is the third version. I wanted this site to have a clean and uncluttered feel, hence the choice of a white background with pages that are (hopefully) not too crowded.  I've also tried to make it as easy as possible to navigate around and find images on different subjects.<br/><br/>I've endeavoured to make the site as 'standards' compliant as I can; the site makes extensive use of JavaScript and Cascading Style Sheets (CSS) and is tested with Internet Explorer 8 and FireFox 3.6.  This has been quite a steep learning curve, but there are a number of web resources out there that make life a lot simpler - just search for 'CSS Tutorial' or 'HTML Tutorial' in your favourite search engine.</span>";
var ABOUT_PHOTOGRAPHY ="<span class='abouttext'>My enthusiasm for photography really began in 2000 with the purchase of a 3MP digital compact camera. I've subsequently upgraded to a Canon EOS SLR with a series of lenses ranging from a 10-20mm wide angle zoom to a 75-300mm telephoto zoom. <br/><br/>All my post-processing is carried out in Photoshop. My general approach, however, is to try and get the picture ‘right’ in camera; my experience has been that it is a lot easier to improve a good picture using Photoshop than it is to improve a bad one! Generally I adjust levels, curves and saturation though I do on occasions remove unwanted people etc.<br/><br/>Most of my shots these days are taken as Raw images, with conversion being done in Photoshop as this allows me the maximum control over the end result.<br/><br/>Although I enjoy taking pictures of almost everything, my preferences are landscapes and macro photography (as you can probably tell from the galleries!).  My wife bought me a waterpoof camera for my birthday, so hopefully at some point some undersea images should start to appear on the site!</span>";
var ABOUT_CONTACT ="<span class='abouttext'>If you would like to contact me regarding any of the images on this site, please feel free to <a href='&#109;&#97;&#x69;&#x6c;&#116;&#x6f;&#x3a;&#100;&#97;&#118;&#x69;&#100;&#64;&#112;&#x69;&#x78;&#x65;&#108;&#x65;&#120;&#104;&#105;&#98;&#x69;&#x74;&#105;&#111;&#x6e;&#x2e;&#99;&#x6f;&#109;&#63;&#x73;&#x75;&#98;&#x6a;&#101;&#99;&#x74;&#61;&#80;&#105;&#120;&#101;&#108;&#32;&#x45;&#120;&#104;&#105;&#98;&#105;&#x74;&#105;&#x6f;&#110;'> Mail Me </a><br /><br /><br /><span class='pagetextbold'>Picture Sales</span><br /><br />Although this site is primarily aimed at sharing my work with others online, most of the images you can see here are available for purchase in a variety of sizes including prints up to A3, A5 and A6 greetings cards, and packs of notelets.  If you are interested in purchasing items in any of these formats, please feel free to get in touch.</span>";
var ABOUT_RSS ="<span class='abouttext'>RSS (Really Simple Syndication) is a mechanism to 'subscribe' to a site so that you recieve updates when the site changes either through your browser or through a dedicated 'news reader'.<br/><br/>Most browsers support this capability - for help with using RSS with your browser click one of the following links -<br/><br/><a href='http://windows.microsoft.com/en-GB/windows-vista/Using-feeds-RSS' target='_blank'>Internet Explorer</a><a href='http://kb.mozillazine.org/RSS:_Live_Bookmarks_overview_%28Firefox%29' target='_blank'>Firefox</a><br/><br/>Click on the orange RSS icon <img src='images/rss.png' width='15' height='15' alt='RSS icon'/> on the top right of the this page to subscribe to my news feed.<br/><br/>As I add new images to the site, I will also update the RSS news feed, so you should always know when I have made changes.</span>";
var ABOUT_LINKS ="";

var HOME_TEXT = "<span id='descriptiveText'><p class='boldcentre'>Welcome to PixelExhibition.com</p><p class='justify'>Here you will find a collection of my photography, with images ranging from 2003 to the present day.<br/><br/>Although I enjoy photographing most things, my favourite subjects are the sea and close-up shots of flowers.<br/><br/>Most of the images are available for purchase as prints or cards; please contact me if you are interested.<br/><br/>I hope that you enjoy looking at the images as much as I've enjoyed taking them.</p></span>";