var offset = 0.0;
	var delta = 0.0;
	var ddelta = 0;
	var step = 10;
	var limit;
	var current = false;
	
	$(document).ready( function()
	{
		// hide the slideshow pictures that aren't the first image
			$('#screen img').hide();
			
			current = $('#screen img:first');
			current.show();
			
			// find out the limit
			var displayable_width = $('#thumbs_container').width() - 4; // link
																		// margin is
																		// 4px
			var container_width = $('#thumb_gallery').width();
	
			// only set up the thumbscrolling if it is needed:
			if (displayable_width > container_width)
			{
				limit = -1 * (displayable_width - container_width);
				initGallery();
			}
			
			$(document).pngFix();
		});
	
	function initGallery()
	{
		// set up the thumbnail scroll
		$('#triggerL').bind('mouseenter', function()
			{
				ddelta = step
			});
		
		$('#triggerR').bind('mouseenter', function()
			{
				ddelta = -1.0 * step;
				
				//$('#footer').html( "step: " + step + "<br />limit: " + limit + "<br />ddelta: " + ddelta + "<br />delta: " + delta + "<br />offset: " + offset);
			});
		
		$('#triggerL').bind('mouseleave', function()
			{
				ddelta = 0
			});
		
		$('#triggerR').bind('mouseleave', function()
			{
				ddelta = 0
			});
	
		// ugh, click passing. do this for now:
		$('#triggerL').bind('click', function()
			{
				$('#thumbs_container a:first').click()
			});
		$('#triggerR').bind('click', function()
			{
				$('#thumbs_container a:last').click()
			});
		
		// triggers are hidden until they are ready
		$('#triggerL').show();
		$('#triggerR').show();
		
		setInterval(updatePosition, 5);
	}
	
	function onscreen(id)
	{
		current.fadeOut( 600 );
		current = $(id);
		
		current.fadeIn( 600 );
	}
	
	function updatePosition()
	{
		delta += ddelta; // accelerate
		delta *= 0.97;   // damping
		
		if (delta != 0.0)
		{
			offset += delta / 100.0;
			
			// limit offset
			if (offset > 0) offset = 0;
			if (offset < limit) offset = limit;
			
			//$('#footer').html( "step: " + step + "<br />limit: " + limit + "<br />ddelta: " + ddelta + "<br />delta: " + delta + "<br />offset: " + offset);
			
			$('#thumbs_liner').css('left', offset);
		}
	}