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


$(window).resize(function() {
    doResize();
});

function doResize() {
        $('#carouselDetail').width(0);
        $('#carouselDetail').width($('#imageCell').width());

}

function carousel() {

        var cl = 0;
        var $firstA = $('#thumbsA li a:first').attr('href');
        $('<img src="' + $firstA + '" />').load();
        var $first = $('#thumbs li a:first').attr('href');
        $('<img src="' + $first + '" />').load(start);
        
        
    function start() {

        $('#thumbs li a').each(function() {
            var $lia = this.href;
            var $liaA = this.href.replace(/.jpg/, "_left.jpg");
            if (cl == 0) {

                $("#slideshow").append('<img alt="' + $lia + '" class="active" src="' + $lia + '" />')
                $("#firstCol").append('<img alt="' + $liaA + '" class="active" src="' + $liaA + '" />')

            } else {
            $("#slideshow").append('<img src="/images/impressions/spacer.gif" alt="' + $lia + '" class="' + $(this).attr('class') + '" />')
            $("#firstCol").append('<img src="/images/impressions/spacer.gif" alt="' + $liaA + '" class="' + $(this).attr('class') + '" />')
            }
            cl += 1;
        })

        if (cl != 1) {
            refreshIntervalId = setInterval("slideSwitch()", 4000);
        }

    }
   

}

function slideSwitch() {
    var $active = $('#slideshow img.active');
    if ($active.length == 0) $active = $('#slideshow img.active');
    var $next = $active.next().length ? $active.next() : $('#slideshow img:first');

    var $activeA = $('#firstCol img.active');
    if ($activeA.length == 0) $activeA = $('#firstCol img.active');
    var $nextA = $activeA.next().length ? $activeA.next() : $('#firstCol img:first');

    $('<img src="' + $next.attr('alt') + '" />').load(nextImg);
    $('<img src="' + $nextA.attr('alt') + '" />').load();
    
    function nextImg() {
        $next.attr('src', $next.attr('alt'));
        $active.addClass('last-active');
        $next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 1000, function() {
            $active.removeClass('active last-active');
        })

        $nextA.attr('src', $nextA.attr('alt'));
        $activeA.addClass('last-active');
        $nextA.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 1000, function() {
            $activeA.removeClass('active last-active');
        })
        

    }

}