var ImageCache = new Array();

var paneContent = new Array(
	new Array(	'<div>Welcome to the home of Mark Holliday Photography</div>' + 
				'<div>Please move your cursor over the images to explore the site</div>',
				null
			),
	new Array(	'<div class="bold">Creative Photography to Any Brief</div>' +
				'<div>Creative and adaptive, whatever your photography needs, we can produce a high quality solution</div>' +
				'<div class="click">Click on the thumbnails for a larger image</div>',
				new Array(
					new Array('images/green_oak_200x300_thumb.jpg','images/green_oak_200x300.jpg'),
					new Array('images/don_john_with_falcon_200x300_thumb.jpg','images/don_john_with_falcon_200x300.jpg'),
					new Array('images/sunset_woods_200x300_thumb.jpg','images/sunset_woods_200x300.jpg'),
					new Array('images/masked_ball_200x300_thumb.jpg','images/masked_ball_200x300.jpg'),
					new Array('images/dscf2575-thumb.jpg','images/dscf2575-web.jpg'),
					new Array('images/two_girls_on_leander_600x300_thumb.jpg','images/two_girls_on_leander_600x300_1.jpg','images/two_girls_on_leander_600x300_2.jpg','images/two_girls_on_leander_600x300_3.jpg'),
					new Array('images/west_woods_600x300_thumb.jpg','images/west_woods_600x300_1.jpg','images/west_woods_600x300_2.jpg','images/west_woods_600x300_3.jpg')
						)
			),
	new Array(	'<div class="bold">Studio and Location</div>' +
				'<div>Based in Berkshire, we are well placed for assignments in the South of England and Continental Europe</div>' +
				'<div class="click">Click on the thumbnails for a larger image</div>',
				new Array(
					new Array('images/deck_shot_300x400_thumb.jpg','images/deck_shot_300x400_1.jpg','images/deck_shot_300x400_2.jpg'),
					new Array('images/google-space-thumb.jpg','images/google-space-web_01.jpg','images/google-space-web_02.jpg','images/google-space-web_03.jpg'),
					new Array('images/head-shot-2-thumb.jpg','images/head-shot-2-web.jpg'),
					new Array('images/daler_thumb.jpg','images/daler.jpg'),
					new Array('images/man-with-metal-things-thumb.jpg','images/man-with-metal-things-web_01.jpg','images/man-with-metal-things-web_02.jpg','images/man-with-metal-things-web_03.jpg'),
					new Array('images/reception_600x300_thumb.jpg','images/reception_600x300_1.jpg','images/reception_600x300_2.jpg','images/reception_600x300_3.jpg'),
					new Array('images/ascot-racecourse-thumb.jpg','images/ascot-racecourse-web.jpg')
						)
			),
	new Array(	'<div class="bold">Public Relations and Advertising</div>' +
				'<div>Supporting campaigns with eye catching images</div>' +
				'<div class="click">Click on the thumbnails for a larger image</div>',
				new Array(
					new Array('images/tony-thumb.jpg','images/tony-web.jpg'),
					new Array('images/head-shot-1-thumb.jpg','images/head-shot-1-web.jpg'),
					new Array('images/led_man_200x300_thumb.jpg','images/led_man_200x300.jpg'),
					new Array('images/girl-in-glasses-thumb.jpg','images/girl-in-glasses-web_01.jpg','images/girl-in-glasses-web_02.jpg'),
					new Array('images/tumbleweed-thumb.jpg','images/tumbleweed-web.jpg'),
					new Array('images/biting-girl-thumb.jpg','images/biting-girl-web.jpg'),
					new Array('images/david_shepherd_200x300_thumb.jpg','images/david_shepherd_200x300.jpg')
						)
			)
	);


function filterApply(node)
{
	var i;
	for (i=0 ; node && node.filters && i < node.filters.length ; i++)
	{
		node.filters[i].stop();
		node.filters[i].apply();
	}
}

function filterPlay(node)
{
	var i;
	for (i=0 ; node && node.filters && i < node.filters.length ; i++)
	{
		node.filters[i].play();
	}
}


var paneIndex = 1;

function showImage()
{
	/*
	 * Iterate images from 1, as 0 is the thumbnail
	 */
	
	if (this.arrImages)
	{
		if (this.arrImages.length == 2)
			paneIndex = 2;
		else
			paneIndex = 1;
	
		var i;
		var ix;
		for(i=1, ix=1 ; i <= 3 ; i++)
		{
			if (i == paneIndex && ix < this.arrImages.length)
			{
				setPaneImage(paneIndex, this.arrImages[ix++]);
				paneIndex = (paneIndex >= 3) ? 1 : paneIndex + 1;
			}			
			else
				setPaneImage(i, 'images/redtree_2x' + i + '.jpg');
				
		}
		
	}
}	

function setPaneImage(nPane, url)
{
	var img = null;
	var idPane = 'pane' + nPane;

/*	----------
 * commented out 24/05/05 because of images no loading on Safari (mac) as it
 * appears not to allow setting of the 'pane' or 'thumb' properties (i.e. no
 * custom object properties).  they are undefined by the time you get to the 
 * onload function.
 * ----------
	if (ImageCache[url] == null)
	{
		img = new Image();
		ImageCache[url] = img;

		img.id = url;
		img.onload = loadPane;
		img.pane = idPane;
	}
*/	
	var pane = document.getElementById(idPane);
	if (pane)
	{
		filterApply(pane);
		pane.src = (img == null) ? url : 'images/wait.jpg';
		filterPlay(pane);
	}
	
	if (img != null)
	{
		img.src = url;
	}

}

function selectPane(index,redraw)
{

	var useFilter = false;
		
	for (var paneIndex=1 ; paneIndex <= 3 ; paneIndex++)
	{
		var pane = document.getElementById('pane'+paneIndex);
		if (pane)
		{
			if (paneIndex != index)
				filterApply(pane);
				
			pane.src = 'images/redtree_' + ((paneIndex == index) ? 1 : 2) + 'x' + paneIndex + '.jpg';

			if (paneIndex != index)
				filterPlay(pane);
		}
		
	}

	paneIndex = 1;
	
	var text = document.getElementById('text');
	var images = document.getElementById('images');
	
	if (text && images)
	{
		filterApply(text);
		filterApply(images);

		/*
		 * Get the text
		 */
		text.style.visibility = 'hidden';
		text.innerHTML = paneContent[index][0];
			
		/*
		 * Get the images
		 */
		images.style.visibility = 'hidden';
		images.innerHTML =	'';

		for(var i=0 ; paneContent[index][1] && i < paneContent[index][1].length ; i++)
		{
			var arrImages = paneContent[index][1][i];
			var idThumb = 'pane' + index + '_thumb' + i;
			var thumb = null;
/*	----------
 * commented out 24/05/05 because of images no loading on Safari (mac) as it
 * appears not to allow setting of the 'pane' or 'thumb' properties (i.e. no
 * custom object properties).  they are undefined by the time you get to the 
 * onload function.
 * ----------
			if (ImageCache[ arrImages[0] ] == null)
			{
				thumb = new Image();
				ImageCache[ arrImages[0] ] = thumb;
				thumb.thumb = idThumb;
				thumb.onload = loadThumb;
				thumb.id = arrImages[0];
				
				thumb.arrImages = arrImages;
			}
*/
			var img = document.createElement('img');
			img.id = idThumb;
			img.src = ((thumb == null) ? arrImages[0] : 'images/wait-thumb.jpg');
			img.arrImages = arrImages;
			img.onclick = showImage;
			
			images.appendChild(img);
			
			if (thumb) thumb.src = arrImages[0];
					
		}

		/*
		 * Display text and images
		 */
		images.style.visibility = 'visible';
		text.style.visibility = 'visible';
		
		/*
		 * Play the transition
		 */	
		filterPlay(text);
		filterPlay(images);
	}
}

function loadPane()
{
	var pane = document.getElementById(this.pane);
	if (pane)
	{
		filterApply(pane);
		pane.src = this.src;
		filterPlay(pane);
	}
}


function loadThumb()
{
	var thumb = document.getElementById(this.thumb);
	if (thumb)
	{
		filterApply(thumb);
		thumb.src = this.src;
		filterPlay(thumb);
	}
}

function init()
{
	var i;
		
	for (i=0 ; i < 3 ; i++)
	{
		var pane = document.getElementById('pane'+(i+1));
		/*
		 * load the red before the grey, so that its available once the 
		 * grey images appear on screen
		 */
		var img_red = new Image();
		img_red.src = 'images/redtree_1x' + (i+1) + '.jpg';
		ImageCache[img_red.src] = img_red;

		var img_grey = new Image();
		img_grey.onload = loadPane;
		img_grey.pane = 'pane'+(i+1);
		img_grey.src = 'images/redtree_2x' + (i+1) + '.jpg';
		ImageCache[img_grey.src] = img_grey;
	}
	
	var thumb = new Image();
	thumb.src = 'images/wait-thumb.jpg';
	
	selectPane(0, false);
}