//<![CDATA[
jQuery(function($) {

// to each list item
$('#gallery li').each(function(idx) {
    // add data 'index' with value idx+1
    $(this).data('index', (++idx));
});

$('#gallery').jcarousel({
    scroll: 7,
    vertical: false,
	auto: 0,
	size: 50,
    initCallback: initCallbackFunction
})

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

$('#gallery').galleria({
    // #img is an empty div which holds full size images
    insert: '#img',
 
    // enable history plugin
    history: true,
 
    // function fired when the full size 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') // displays first image when Galleria is loaded

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






}); 
//]]>