jQuery(document).ready(function() {
	// Save  the jQuery objects for later use.
	var outer	= jQuery("#preview_outer");
	var arrow	= jQuery("#arrow");
	var thumbs	= jQuery("#thumbs span");
 
	var preview_pos;
	var preview_els	= jQuery("#preview_inner div");
	var image_width	= preview_els.eq(0).width(); // Get width of imaages
 
	// Hook up the click event
	thumbs.click(function() {
		// Get position of current image
		preview_pos = preview_els.eq( thumbs.index( this) ).position();
 
		// Animate them!
		outer.stop().animate( {'scrollLeft' : preview_pos.left},	500 );
		arrow.stop().animate( {'left' : jQuery(this).position().left },	500 );
	});
 
	// Reset positions on load
	arrow.css( {'left' : thumbs.eq(0).position().left } ).show();
	outer.animate( {'scrollLeft' : 0}, 0 );
 
	// Set initial width
	jQuery("#preview_inner").css('width', preview_els.length * image_width);
});