$(document).ready(function(){
   
   //This module is called from different HTML pages so we need to resolve the names of the images for the actual page 
   //These names are coded in ID tag for each thumbnail IMAGE in the form THUMBNAILx 
   //We assume there are always FOUR thumbnails on the page

   // array pictureIndex holds the names of the four images for the loaded page
   var pictureIndex=new Array(4);
   
   for (i=0; i<=3; i++)
   	{
		pictureIndex[i] = $("img[@id*=thumbnail]").get(i).id.substr(9);
	}
   
   // Attach behaviors to the four images - for some reason this would not work using a loop AHHHHHH
	$("#thumbnail"+pictureIndex[0]).click(function(){imageSwap(pictureIndex[0]);});
	$("#thumbnail"+pictureIndex[1]).click(function(){imageSwap(pictureIndex[1]);});
	$("#thumbnail"+pictureIndex[2]).click(function(){imageSwap(pictureIndex[2]);});
	$("#thumbnail"+pictureIndex[3]).click(function(){imageSwap(pictureIndex[3]);});
    
	$("#thumbnail"+pictureIndex[0]).mouseover(function(){hoverEffect(pictureIndex[0]);});
	$("#thumbnail"+pictureIndex[1]).mouseover(function(){hoverEffect(pictureIndex[1]);});
	$("#thumbnail"+pictureIndex[2]).mouseover(function(){hoverEffect(pictureIndex[2]);});
	$("#thumbnail"+pictureIndex[3]).mouseover(function(){hoverEffect(pictureIndex[3]);});
    
	$("#thumbnail"+pictureIndex[0]).mouseout(function(){resetEffect(pictureIndex[0]);});
	$("#thumbnail"+pictureIndex[1]).mouseout(function(){resetEffect(pictureIndex[1]);});
	$("#thumbnail"+pictureIndex[2]).mouseout(function(){resetEffect(pictureIndex[2]);});
	$("#thumbnail"+pictureIndex[3]).mouseout(function(){resetEffect(pictureIndex[3]);});
	
	// Attach the behaviours to the two directional arrows
    $("#prevarrow").mouseover(function(){onArrow("prevarrow");});
    $("#prevarrow").mouseout(function(){offArrow("prevarrow");});
    
    $("#nextarrow").mouseover(function(){onArrow("nextarrow");});
    $("#nextarrow").mouseout(function(){offArrow("nextarrow");});
    

   // We need to CACHE the BIG pictures otherwise we get a nasty little jump effect
   var BigImage1 = new Image();
   BigImage1.src = '/images/gallery/image'+pictureIndex[0]+'big.jpg'; 
   var BigImage2 = new Image();
   BigImage2.src = '/images/gallery/image'+pictureIndex[1]+'big.jpg';
   var BigImage3 = new Image();
   BigImage3.src = '/images/gallery/image'+pictureIndex[2]+'big.jpg';
   var BigImage4 = new Image();
   BigImage4.src = '/images/gallery/image'+pictureIndex[3]+'big.jpg';
   
   // Finally we need to set the first image as the current one
   imageSwap(pictureIndex[0]);
   
});


function imageSwap(pictureRef)
{
	// We are going to use a COOKIE to pass variables to a callback function so best check COOKIES enabled first
	var cookieEnabled=(navigator.cookieEnabled)? true : false

	//if not IE4+ nor NS6+ browser do a  test COOKIE 
	if (typeof navigator.cookieEnabled=="undefined" && !cookieEnabled)
		{ 
			document.cookie="testcookie"
			cookieEnabled=(document.cookie.indexOf("testcookie")!=-1)? true : false
		}


	// Set up the variables for this function [assumes that we can't use COOKIES]
	fileToLoad = '/images/gallery/image' + pictureRef + 'big.jpg';
	thumbnailNew = '#thumbnail' + pictureRef;
	fullAddress = document.getElementById('BigPicture').src;
	lfullAddress = fullAddress.length;
	
	//We need to deal with images with an index number more than 9 (two digits)
	if (lfullAddress==61)
	{
		numChars=1;
		startPos=8;
	}
	else
	{
		numChars=2;
		startPos=9;
	}
	
	startPos = lfullAddress - startPos;
	lastIndex = fullAddress.substr(startPos,numChars);
	thumbnailOld = '#thumbnail' + lastIndex;
	
	// If COOKIES are on then do a nice soft switch else just change the photo
	// 20.7.8 This was commented out as there was a problem with cookies on Julia's machine.
	// Code left in as it might get used in the future.
	
	if (cookieEnabled)
		{
			// document.cookie = "pictureInfo=" + fileToLoad;		
			// $('#BigPicture').fadeOut(2000, softSwitch);
			$('#BigPicture').attr({src: fileToLoad});
		}
	else
		{
			$('#BigPicture').attr({src: fileToLoad});
		}

	
	// Sort out the thumbnails
	$(thumbnailOld).fadeTo("slow", 1)
	$(thumbnailNew).fadeTo("slow", 0.1)

}

function hoverEffect(pictureIndex)
{
	document.body.style.cursor = 'pointer';
	width = document.getElementById("thumbnail"+pictureIndex).width - 6;
	height = document.getElementById("thumbnail"+pictureIndex).height - 6;
	document.getElementById("thumbnail"+pictureIndex).height = height;
	document.getElementById("thumbnail"+pictureIndex).width = width;
	document.getElementById("thumbnail"+pictureIndex).style.border = "solid #294F28 3px";
}

function resetEffect(pictureIndex)
{
	document.body.style.cursor = 'default';
	document.getElementById("thumbnail"+pictureIndex).width = document.getElementById("thumbnail"+pictureIndex).width + 6;
	document.getElementById("thumbnail"+pictureIndex).height = document.getElementById("thumbnail"+pictureIndex).height + 6;
	document.getElementById("thumbnail"+pictureIndex).style.border = "none";
}

function onArrow(arrow)
{
	document.body.style.cursor = 'pointer';
	height = document.getElementById(arrow).height - 2;
	document.getElementById(arrow).height = height;
	$("img#"+arrow).css("border-top", "2px solid #294F28");
}

function offArrow(arrow)
{
	document.body.style.cursor = 'default';
	height = document.getElementById(arrow).height + 2;
	document.getElementById(arrow).height = height;
	$("img#"+arrow).css("border-top", "none");
}

function softSwitch()
{	
	fileToLoad = document.cookie.split("=")[1];
	$('#BigPicture').attr({src:fileToLoad}).fadeIn(2000);
}