carousel = {
    images: [
        '/photos/Amanda1464.jpg',
        '/photos/Amanda1571.jpg',
        '/photos/Amanda1639.jpg',
        '/photos/Amanda1817.jpg',
        '/photos/Amanda1823.jpg',
        '/photos/Amanda1922.jpg',
        '/photos/Shayn0998.jpg',
        '/photos/Shayn1005.jpg',
        '/photos/Shayn1126.jpg',
        '/photos/Shayn1129.jpg',
        '/photos/Shayn1317.jpg',
        '/photos/Shayn1430.jpg',
        '/photos/Ash Beauty.jpg',
        '/photos/Shayn1451.jpg'

    ],
    index: 0,

    // load an image, then fadeout existing image while attaching/fading in new image, trigger next load.
    showImage: function () {

        var width = $(window).width();
        var height = $(window).height();

        var preload = new Image();
        preload.src = carousel.images[carousel.index] + '/' + (width - 100) + 'x' + (height - 300);
        preload.onload = (function () {
            return function () {
                var $oldTable = $('table');
                var $newTable = $('<table class="super-container" cellpadding="0" cellspacing="0"><tr><td align="center" valign="middle"><img src="' + preload.src + '" /></td></tr></table>').css({ display: 'none', height: (height - 100 - 100) });

                $oldTable.fadeOut(1000, function () {
                    $(this).remove();
                    $newTable.appendTo('body');
                    $newTable.fadeIn(1000, function () { setTimeout(carousel.showImage, 3000); });
                });
            }
        })();

        carousel.index = (carousel.index + 1) % carousel.images.length;
    }
};

$(document).ready( function () {
    carousel.showImage();
});