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

    $('#gallery').jcarousel({
        scroll: 5,
        initCallback: initCallbackFunction
    })
	.find('li:first').addClass('active') // display first image when Galleria is loaded
    
    function initCallbackFunction(carousel) {
        $('#img').bind('image-loaded',function() {
            var idx =  $('#gallery li.active').data('index') - 2;
            
            carousel.scroll(idx);
            return false;
        });
        
        // hotkeys plugin: use arrows to control the gallery
        //$(document).bind('keydown', 'right', function (evt){ $.galleria.next(); });
      	// $(document).bind('keydown', 'left', function (evt){ $.galleria.prev(); });
        //$(document).bind('keydown', 'up', function (evt){ $('.jcarousel-next-horizontal').click(); return false; });
        //$(document).bind('keydown', 'down', function (evt){ $('.jcarousel-prev-horizontal').click(); return false; });
    };
	/* NOT NECESSARY
	// 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(1000);
            
            // fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// fade out inactive thumbnail
				_li.siblings().children('img.selected').fadeTo(500,0.3);
				
				// fade in active thumbnail
				thumb.fadeTo('fast',1).addClass('selected');
				
				// add a title for the clickable image
				image.attr('title','Next image >>');
            
            	// $('#img').data('currentIndex', $li.data('index')).trigger('image-loaded')
            
           		$('#img')
                .trigger('image-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)   
        }
      */
    })