$(document).ready(function() {
	$('<div id="photoGallery"><div class="photoShow"><img src="photos/photoThumb01.jpg" width="60" height="80" alt="" border="0" /><img src="photos/photoThumb02.jpg" width="60" height="80" alt="" border="0" /><img src="photos/photoThumb03.jpg" width="60" height="80" alt="" border="0" /><img src="photos/photoThumb04.jpg" width="60" height="80" alt="" border="0" /><img src="photos/photoThumb05.jpg" width="60" height="80" alt="" border="0" /><img src="photos/photoThumb06.jpg" width="60" height="80" alt="" border="0" /><img src="photos/photoThumb07.jpg" width="60" height="80" alt="" border="0" /><img src="photos/photoThumb08.jpg" width="60" height="80" alt="" border="0" /><img src="photos/photoThumb09.jpg" width="60" height="80" alt="" border="0" /><img src="photos/photoThumb10.jpg" width="60" height="80" alt="" border="0" /></div></div>').insertAfter('div.rightColHome p:eq(0)');
	var spacing = 65;
	$('#photoGallery').css({
		'width':spacing * 3,
		'height':'80px',
		'overflow':'hidden'
	}).find('.photoShow img').css({
		'float':'none',
		'position':'absolute',
		'left':1500
	});
	var setUpPhotos = function() {
		var $pics = $('#photoGallery .photoShow img');
		// left image
		$pics.eq(0).css('left',0);
		// right image
		$pics.eq(2).css('left',spacing * 2);
		//centre image
		$pics.eq(1).css('left',spacing);
		setTimeout(function() {
			$pics.eq(0).animate({'left':-spacing},'slow',function() {
				$(this).appendTo('#photoGallery .photoShow');
				setUpPhotos();
			});
			$pics.eq(1).animate({'left':0},'slow');
			$pics.eq(2).animate({'left':spacing},'slow');
			$pics.eq(3).css('left',spacing * 3).animate({'left':spacing * 2},'slow');
		},2000)
	};
	setUpPhotos();
	/* font size changer for accessibility */
	$('<li class="topNavLast">Text size: <span id="switchS" title="Small" style="cursor:pointer;font-size:0.8em;">S</span>&nbsp;<span id="switchM" title="Medium" style="cursor:pointer;">M</span>&nbsp;<span id="switchL" title="Large" style="cursor:pointer;font-size:1.2em;">L</span></li>').insertAfter('div.topNav li:gt(4)');
	$('#switchL').bind('click', function() {
		$('body').removeClass().addClass('large');
//		$('body').animate({'font-size':'1.5em'},'slow');
	});
	$('#switchM').bind('click', function() {
		$('body').removeClass().addClass('medium');
	});
	$('#switchS').bind('click', function() {
		$('body').removeClass();
	});
	/* use AJAX to get random glossary entries (random done at ASP end) */
	$.ajaxSetup({cache:false});
	var setAjax = function() {
		setTimeout(function() {
			$.getJSON('glossary/glossajax.asp', function(data) {
				$('div.glossBox').empty();
				$.each(data, function(entryIndex, entry) {
					var html = '<p class="glossP"><strong>';
					html += entry['term'];
					html += ':</strong><br />';
					html += '<em>';
					html += entry['definition'];
					html += '</em></p>';
					$('div.glossBox').append(html);
				});
			});
			setAjax();
		},9000)
	};
	setAjax();
});