Thumbnail image switching

I have a div clalled product_main_img that is the full standalone image. I then have four thumbnail images that are underneath switch when clicked switch with the main image to become the full displayed image.

What I need to accomplish is have the standalone image (the first one on page load) change to the image that is being clicked, and then have the standalone image move into the thumbnail section.

I have the thumbnails moving into the main div area, but the standalone image is then disappearing.

    div class="product_visuals">
        <div class="product_main_img">
            <div class="main_img_switch"><img src="/images/main_img.jpg"></div> 
        </div>
        <div class="product_selection">
            <div class="product_details">
                <img src="/images/img_01.jpg">
            </div>
            <div class="product_details">
                <img src="/images/img_02.jpg">
            </div>
            <div class="product_details">
                <img src="/images/img_03.jpg">
            </div>
            <div class="product_details">
                <img src="/images/img_04.jpg">
            </div>
        </div

script:

    $('.product_details img').click(function() {
        $('.main_img_switch img').attr("src", $(this).attr("src"));
    });