function heroCarousel_initCallback(carousel) {
    
	// Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });
	
    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
	
	$('#next').click(function(){
		carousel.next();						  
	})
	$('#previous').click(function(){
		carousel.prev();						  
	})
		
	$('.nav-button').bind('click', function() {
		carousel.startAuto(0);
		$('.nav-button').removeClass('active');
		$('.slide-info').removeClass('active');
		$(this).addClass('active');
		$(this).children('h2').addClass('active');
		carousel.scroll(jQuery.jcarousel.intval((this.id)));
		return false;
	});
	
};

function smartButtons(carousel, item, idx, state) {
	$('.nav-button').removeClass('active');
	$('.nav-button').each(function(){
		if($(this).attr('id') == idx) {
			$(this).addClass('active');
			$(this).children('h2').addClass('active');
		}							  
	})
}

jQuery(document).ready(function() {
    jQuery('#hero-image').jcarousel({
        auto: 8,
        scroll:1,
		wrap: 'last',
        initCallback: heroCarousel_initCallback,
		itemVisibleInCallback: smartButtons
    });
	
});