/* TEXT SCROLLER */

/**
 * We use the initCallback callback
 * to assign functionality to the controls
 */
function mycarousel_initCallback(carousel) {
    jQuery('.jcarousel-control span').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        return false;
    });

    jQuery('#mycarousel-next').bind('click', function() {
        carousel.next();
        return false;
    });

    jQuery('#mycarousel-prev').bind('click', function() {
        carousel.prev();
        return false;
    });
};

function mycarousel_itemToggle(carousel, li, index, state) {
	$('.jcarousel-control span:contains('+index+')').toggleClass('current');
}

// Ride the carousel...
jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
    
    	// VARIABLES 
        scroll: 1, // don't change this
        auto: 18, // delay between text changes, in s
        animation: 1350, // length of transition, in ms
        wrap: 'last', // whether or not to loop back to 1st element
        
        
		itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemToggle},
		itemVisibleOutCallback: {onBeforeAnimation: mycarousel_itemToggle},

        initCallback: mycarousel_initCallback,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
});



/* IMAGE SCROLLER */

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

    $('#gallery').jcarousel({
        scroll: 5,
        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', 1).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, 1)
            
            // $('#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 = 1;
                
            // 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
        
    $('#slideshow').hide()


  	// VARIABLES
  	
    var slideshow        
    slideshow = window.setInterval(function(){
        $.galleria.next()
    }, 10750) // <-- adjusts how long between images, in ms

 
});