$(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) }); }
 });


 $('#gallery').galleria({
 // #img is the empty div which holds full size images
 insert: '#img',

 // enable history plugin
 history: false,

 // function fired when the image is displayed
 onImage: function(image, caption, thumb) {
 // fade in the image
 image.hide().fadeIn(500);

 // animate active thumbnail's opacity to 1, other list elements to 0.6
 thumb.parent().fadeTo(200, 1).siblings().fadeTo(200, 0.6)

 // $('#img').data('currentIndex', $li.data('index')).trigger('image-loaded')

 $('#img')
 .trigger('image-loaded')
 .hover(
 function(){ $('#img .caption').stop().animate({height: 50}, 250) },
 function(){
 if (!$('#show-caption').is(':checked')) {
 $('#img .caption').stop().animate({height: 0}, 250)
 }
 }
 );
 },

 // function similar to onImage, but fired when thumbnail is displayed
 onThumb: function(thumb) {
 var $li = thumb.parent(),
 opacity = $li.is('.active') ? 1 : 0.6;

 // hover effects for list elements
 $li.hover(
 function() { $li.fadeTo(200, 1); },
 function() { $li.not('.active').fadeTo(200, opacity); }
 )
 }
 }).find('li:first').addClass('active') // display first image when Galleria is loaded

 $('#img .caption').css('height', 0)

 $('#slideshow').hide()

 // this one is for Firefox, which loves to leave fields checked after page refresh
 $('#toggle-slideshow, #show-caption').removeAttr('checked')

 $('#show-caption').change(function(){
 if (this.checked) {
 $('#img .caption').stop().animate({height: 50}, 250)
 } else {
 $('#img .caption').stop().animate({height: 0}, 250)
 }
 })


 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)
 }
 })
});