$(document).ready(function() {
    // Save  the jQuery objects for later use.
    var outer		= $("#preview_outer");
    var arrow		= $("#arrow");
    var thumbs		= $(".thumbItem");

    var preview_pos;
    var preview_els	= $("#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' : $(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
    $("#preview_inner").css('width', preview_els.length * image_width);
});