var $totalImages;
var $interval;

jQuery(document).ready(function () {
    $totalImages = jQuery('.item').size();

    jQuery('#gallery .item:first').addClass('active');

    var $active = jQuery('#gallery .active');
    var $imgId = $active.find('img').attr('rel');
    var $caption = $active.find('img').attr('alt');

    setGalleryInfo($imgId, $caption);
});

function slideSwitch() {
    var $active = jQuery('#gallery .active');

    if ($active.length == 0) $active = jQuery('#gallery .item:last');

    var $next = $active.next().length ? $active.next() : jQuery('#gallery .item:first');

    var $imgId = $next.find('img').attr('rel');
    var $caption = $next.find('img').attr('alt');

    $active.addClass('last-active');

    $next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 1000, function() {
            $active.removeClass('active last-active');
        });

    setGalleryInfo($imgId, $caption);
}

function setGalleryInfo(imgId, caption) {
    var $htmlCaption = '<span class="imageInfo"><strong>Image ' + imgId + ' of ' + $totalImages + ':</strong></span> <span>' + caption + '</span><span class="separator"> | </span> <a href="#" onclick="next(); return false;" class="btn-next"><strong>Next</strong></a>'

    $("#rightGalleryInfo").html($htmlCaption);
}

function next() {
    clearInterval($interval);


    jQuery('.item').stop(true, true);

    slideSwitch();
    $interval = setInterval("slideSwitch()", 5000);
}

jQuery(function() {
    $interval = setInterval("slideSwitch()", 5000);
});