$(document).ready(function()
{
	
	// The horizontal rules are no longer needed.
	$('hr').hide();
	
	
	// IMAGES
	
	// The big image div should not be initially visible.
	// When clicked on, the visible image should disappear.
	$('#imageDiv').hide().click(function(event)
	{
		$('#imageDiv').fadeOut('slow');
/* 		$('.temporaryBlowUp').remove(); */
	});
		
	// Stop the click behaviour for the thumbnail anchors.
	$('a.thumbnail').click(function(event)
	{
		event.preventDefault();
	});
	
	// Add a click behaviour to the thumbnail images themselves.
	// Also add a rollover behaviour.
	$('a.thumbnail img').each(function(i)
	{
		$(this).click(function(event)
		{	
			var screenWidth = screen.width;
			var imgWidth = '500';
			var href = this.parentNode.href;
			var name = href.substr(href.lastIndexOf('/'), href.length);
			
			if (750 < screenWidth)
				imgWidth = '1000';
			if (1500 < screenWidth)
				imgWidth = '2000';
			
			var img = document.createElement('img');
			img.setAttribute('class', 'bigImage');
			img.setAttribute('width', '100%');
			img.setAttribute('src', 'images/photos/' + imgWidth + name);
			$("#imageDiv").empty().append(img);
			
			var cap = document.createElement('h1');
			cap.appendChild(document.createTextNode(this.alt));
			$("#caption").empty();
			$("#caption").append(cap);
			
			var blowUp = document.createElement('div');
			var blowUpImg = this.cloneNode(true);
			blowUpImg.setAttribute('width', '100%');
			blowUp.appendChild(blowUpImg);
			var msg = document.createElement('p');
			msg.appendChild(document.createTextNode('Loading...'));
			blowUp.appendChild(msg);
			$(blowUp).addClass('temporaryBlowUp');
			this.parentNode.parentNode.appendChild(blowUp);
			
/*
			if (this.myLoadedProperty)
			{
				$('#imageDiv').fadeIn("slow");
			}
			else
			{
				this.myLoadedProperty = true;
				$(blowUp).fadeIn("slow");
				$('#imageDiv').fadeIn(1800);
			}
*/
			$('#imageDiv').fadeIn("slow");
		});
		
		$(this).hover(function(event)
		{
			var cap = document.createElement('h1');
			cap.appendChild(document.createTextNode(this.alt));
			$("#caption").empty();
			$("#caption").append(cap);
		});
	});
	
	
	// POPUPS
	
	// Popup buttons trigger the relevant div layer.
	$('.popup').each(function(i)
	{
		$(this).click(function(event)
		{
			event.preventDefault();
			var boxID = this.href.substr(this.href.lastIndexOf('#'), this.href.length);
			$('.box').fadeOut(1200);
			$(boxID).fadeIn('slow');
		});
	});
	
	// The popup boxes should not initially be visible.
	// When clicked on, a visible box should disappear.
	$('.box').addClass('overlayBox').hide().click(function(event)
	{
		$('.box').fadeOut('slow');
	});


	// The 'Susie Freeman' title should fade everything out if clicked.
	$('h1').each(function(i)
	{
		$(this).click(function(event)
		{
			event.preventDefault();
			$('.box').fadeOut(1200);
			$('#imageDiv').fadeOut('slow');
		});
	});
	
});