$(function(){
    
    $('#gallery li').each(function(idx) {
        $(this).data('index', (++idx));
    });
    
    
    $("#gallery li").hover(
      function () {
        $(this).fadeTo(200, 1);
      }, 
      function () {
        if($(this).hasClass('.active'))
          return;
        else
          $(this).fadeTo(200, 0.6);
      }
    );
    
    $('#gallery').jcarousel({
        scroll: $.carousel.scroll,
        initCallback: initCallbackFunction
    })
    
    function initCallbackFunction(carousel) {        
        // 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; });
    };

    // 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',
        
        //Boolean for setting the history object in action with enabled back button
        history: true,
        
        // function fired when the image is displayed
        onImage: function(image, caption, thumb) {       
            // fade in the image 
            image.hide().fadeIn(500);
               
           //parse the html of the caption           
           var elem  = "<div class='wrap-caption' style='height:"+$.carousel.captionHeight+"px'>";
               elem += "  <div class='caption'></div>";
               elem += "</div>";
               
            var _input_hidden_text = $(thumb).next().val();

            var splitter = _input_hidden_text.split("%2F");
            var countDec = splitter.length - 1;
            for(i=0;i<countDec;i++)
              _input_hidden_text = _input_hidden_text.replace("%2F", "/")

            $('#img span.caption').html(_input_hidden_text);
            $('div.wrap-caption').remove();
            $(elem).appendTo($('#img'));
            $('div.caption').html($('#img span.caption').html());
            
            // animate active thumbnail's opacity to 1, other list elements to 0.6
            thumb.parent().fadeTo(200, 1).siblings().removeClass('active').fadeTo(200, 0.6);
            
            $('#img')
                //.trigger('image-loaded')
                .hover(
                    function(){ 
                       $('#img .caption').stop().animate({top: 0}, 250);
                    },
                    function(){ 
                        if (!$('#show-caption').is(':checked')) {
                            $('#img .caption').stop().animate({top: $.carousel.captionHeight}, 250);      
                        }
                    }
                )
                .click ( function () {
                   link = $('#img .caption').find('a').attr('href');
                   
                 });
        },
        
        // function similar to onImage, but fired when thumbnail is displayed
        onThumb: function(thumb) {

        }        
    }).find('li:first').addClass('active') // display first image when Galleria is loaded
    

    $('#img .caption').css({top: $.carousel.captionHeight});
      
});