$(function(){
	
	// preload the images
	$('#thumbs a').each(function(){
		var href = $(this).attr('href');
		jQuery("<img>").attr("src",href);
	});

	// show nav arrows
	$('#navarrows').css('display','block');
	
	// set caption to that of first image
	var caption = $('#thumbs a:eq(0)').attr('title');
	$('#caption p').html(caption+'&nbsp;');
	
	
	//set opacity of all thumbs
	$('#thumbs a').css('opacity','0.8');
	
	//set the first thumbnail to be active
	$('#thumbs a:eq(0)').addClass('active').css('opacity','1');
	

	// thumbnail clicks
	$('#thumbs a').click(function(){				
		// change the border colour on the active link
		$('.active').css('opacity','0.8').removeClass('active');
		$(this).addClass('active');
		//change main image
		change_main_image($(this).attr('href'));
		//change caption
		change_caption( $(this).attr('title'));
		// stop the default click firing
		return false;
	});
	
	
	// thumbnail rollovers
	$('#thumbs a').hover(
		function(){
			$(this).animate(
				{'opacity':'1'},
				300
			);
		},
		function(){
			if(!$(this).hasClass('active')){
				$(this).animate(
					{'opacity':'0.8'},
					150
				);
			}
		}
	);
	
	
	//next button
	
	$('#nextimage').click(function(){
		
		// check to make sure we aren't on the first image, if we are then bail out!
		if($('#thumbs a:last').hasClass('active')){
			return false;
		}
		
		//determine which is the next image by looking for current active thumb
		var newthumb = $('#thumbs a.active').parent().next().find('a');
		
		//update the thumbnails
		$('.active').removeClass('active').css('opacity','0.8');
		$(newthumb).addClass('active').css('opacity','1');
		
		//swap the main image for the next		
		change_main_image($('.active').attr('href'));
		//change the caption
		change_caption($('.active').attr('title'));
		
		//cancel the default link behaviour
		return false;
	})
	
	
	//previous image
	$('#previmage').click(function(){
		
		// check to make sure we aren't on the first image, if we are then bail out!
		if($('#thumbs a:eq(0)').hasClass('active')){
			return false;
		}
			
		//determine which is the previous image by looking at current active thumb
		var newthumb = $('#thumbs a.active').parent().prev().find('a');

		//update the thumbnails
		$('.active').removeClass('active').css('opacity','0.8');
		$(newthumb).addClass('active').css('opacity','1');

		//swap the main image for the next	
		change_main_image($('.active').attr('href'));
		//change the caption
		change_caption($('.active').attr('title'));
	
		//cancel the default link behaviour
		return false;
	})
	
	
	
	// preload rollover images
	$('.rollover').each(function() {
		rollsrc = $(this).attr('src');
		rollON = rollsrc.replace(/(.*)\.(jpg|gif|png)$/i, '$1_over.$2');
		$('<img>').attr('src', rollON);
	});

	// check for rollover
	$('.rollover').mouseover(function(){
		var imgsrc=$(this).attr('src');
		var matches = imgsrc.match(/_over/);

		// don't do the rollover if state is already ON
		if (!matches) {
			var imgsrcOn = imgsrc.replace(/(.*)\.(jpg|gif|png)$/i, '$1_over.$2');
			$(this).attr('src', imgsrcOn);

			$('.rollover').mouseout(function(){
				$(this).attr('src', imgsrc);
			});
		}
	});
	
// end
});

function change_main_image(newimg){
	// change the main image
	$('#mainimage').css('background-image','url('+newimg+')').css('width','680px').css('height','454px');
	$('#mainimage img').fadeOut(700,function(){				
		$(this).attr('src',newimg).fadeIn(10);
	})
	return true
}


function change_caption(caption){
	// change the caption
	$('#caption').fadeOut(100, function(){
		$(this).html(caption).fadeIn(10);
	});
}