$(document).ready(function () {
    slideshow()
});

function slideshow() {

    //fadeIn the img: done in custom.js after resize...
    //$('#imageGallery img').fadeIn(300);

    var actions = $('#imageGallery div').not(':first').length;
    if (actions > 0) {$('#loader').fadeIn(130);}

    //show its label
    if ($('#imageGallery div:first').html().length != 0) {
        $('#imageGalleryCap').html($('#imageGallery div:first').html()).fadeIn(130);
    }

    //load all images
    $('#imageGallery div').not(':first').each(function () {
        var img = new Image();
        var src = $(this).attr('src');
        $(img).load(next).attr('src', src);
    })

//    $('#imageLogo div').not(':first').each(function () {
//        var img = new Image();
//        var src = $(this).attr('src');
//        $(img).load(next).attr('src', src);
//    })
    
    function next() {
        if (--actions) return;
        //all loaded
        startCarousel();
    }
    if (actions == 0) { $('#imageGalleryNav').hide().addClass('single') }

}

var refreshIntervalId;
var interval = 1500;
function startCarousel() {

    $('#loader:visible').fadeOut(130);
    $('#imageGalleryNav').not('.single').show()

    var cycleNav = $('#imageGalleryNav');
    //$(cycleNav).fadeIn('fast', function () {
        refreshIntervalId = setInterval(function () { carousel('nxt', false); }, interval);
        $('.cycleBtn').one('click', function () {
            clearInterval(refreshIntervalId)
            carousel($(this).attr('id'), true)
        });
   //});

   //show cycleNav on mouse over the image
    $('#imageGallery img, #imageGalleryNav').hover(function () {
        $('#imageGalleryNav').not('.single').show()
    }, function () {
        $('#imageGalleryNav').not('.single').hide()
    })

}

function carousel(direction, isButton) {
    
    //hide label
    $('#imageGalleryCap').empty().fadeOut(130);

    var $active = $('#imageGallery div.active');
//    var $activeLogo = $('#imageLogo div.active');
//    var $nextLogo;
    if (direction == 'nxt') {
        $next = $active.next().length ? $active.next() : $('#imageGallery div:first');
//        $nextLogo = $activeLogo.next().length ? $activeLogo.next() : $('#imageLogo div:first');
    }
    if (direction == 'prv') {
        $next = $active.prev()
//        $nextLogo = $activeLogos.prev()
        if ($active.attr('src') == $('#imageGallery div:first').attr('src')) {
            $next = $('#imageGallery div:last');
//            $nextLogo = $('#imageLogo div:last');
        }
    }

    //get next img src attr
    var src = $next.attr('src');
    var $img = $('#imageGallery img');
//    var srcLogo = $nextLogo.attr('src');
//    var $imgLogo = $('#imageLogo img');

    $img
    .animate({ opacity: 0.0 }, 300, function () {
        $(this).attr('src', src)
        .animate({ opacity: 1.0 }, 300, function () {

            //show its label
            if ($next.html().length != 0) {
                $('#imageGalleryCap').html($next.html()).fadeIn(130);
            }
            
            //change active
            $active.removeClass('active');
            $next.addClass('active');
            if (isButton) {
                $('#' + direction).one('click', function () { carousel(direction, true) })
            }

        })
    })

//    $imgLogo
//    .animate({ opacity: 0.0 }, 300, function () {
//        $(this).attr('src', srcLogo)
//        .animate({ opacity: 1.0 }, 300, function () {
//            //change active
//            $activeLogo.removeClass('active');
//            $nextLogo.addClass('active');
//            if (isButton) {
//                $('#' + direction).one('click', function () { carousel(direction, true) })
//            }

//        })
//    })

}