$(function(){
    $('#gallery li').each(function(idx) {
        $(this).data('index', (++idx));
    });

    $('#gallery').jcarousel({
        scroll: 1,
        initCallback: initCallbackFunction
    })
    
    function initCallbackFunction(carousel) {
        $('#img').bind('image-loaded',function() {
            var idx =  $('#gallery li.active').data('index') - 2;
            
            carousel.scroll(idx);
            return false;
        });
        
    };

    // load and fade-in thumbnails
    $('#gallery li img').css('opacity', 0).each(function() {    
        if (this.complete || this.readyState == 'complete') { $(this).animate({'opacity': 1}, 300) } 
        else { $(this).load(function() { $(this).animate({'opacity': 1}, 300) }); }
    });

    
      
    var slideshow,
        slideshowPause =  $('#slideshow-pause').val() 

    $('#slideshow-pause').change(function(){
        slideshowPause = this.value
        
        // clear interval when timeout is changed
        window.clearInterval(slideshow)

        // and set new interval with new timeout value
        slideshow = window.setInterval(function(){$.galleria.next()}, slideshowPause * 1000) // must be set in milisecond
    })

    $('input#toggle-slideshow').change(function(){
        if (this.checked) {
            $('#slideshow').fadeIn()
            
            // set interval when slideshow is enabled
            slideshow = window.setInterval(function(){$.galleria.next()}, slideshowPause * 1000)
        } else {
            $('#slideshow').fadeOut()
            
            // clear interval when slideshow if disabled
            window.clearInterval(slideshow)
        }
    })
});