/**
 * We use the initCallback callback
 * to assign functionality to the controls
 */
function mycarousel_initCallback(carousel) {
    jQuery('.jcarousel-control a').bind('click', function () {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        return false;
    });
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function () {
        carousel.stopAuto();
    });

    //hover effect for prev/next buttons
    carousel.buttonNext.hover(function () {
        carousel.buttonNext.animate({ opacity: 1 }, 300);
    }).mouseleave(function () {
        carousel.buttonNext.animate({ opacity: 0 }, 300);
        carousel.buttonPrev.animate({ opacity: 0 }, 300);
    }); 

    carousel.buttonPrev.bind('click', function () {
        carousel.stopAuto();
    });

    //hover effect for prev/next buttons
    carousel.buttonPrev.hover(function () {
        carousel.buttonPrev.animate({ opacity: 1 }, 300);
    }).mouseleave(function () {
        carousel.buttonPrev.animate({ opacity: 0 }, 300);
        carousel.buttonNext.animate({ opacity: 0 }, 300);
    }); 

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function () {
        carousel.stopAuto();
    }, function () {
        carousel.startAuto();
    });

    //don't show the gallery until everything is ready
    $('#gallery').css('visibility', 'visible');
};

function beforechange_callback(carousel, item, index, state) {
  // activate appropriate thumb selector
    $('div.jcarousel-control a').removeClass('active');

    //in circular mode we need to mod divide to get real index of thumb
//    var thumbIndex = (Math.abs(index) - 1) % $('#gallery ul').children().length;
	var thumbIndex = index - 1;
    $('div.jcarousel-control').find('a:eq(' + thumbIndex + ')').addClass('active');
};



// Ride the carousel...
jQuery(document).ready(function() {
  // for every item in the carousel, make a dot for it
  $('#gallery ul').children().each(function(index, value){
    // add a control
    $('#gallery .jcarousel-control').append('<a href="#">'+(index+1)+'</a>');
  });

jQuery("#gallery").jcarousel({
      scroll: 1,
      auto: 5,
      wrap: 'both',
    initCallback: mycarousel_initCallback,
    itemVisibleInCallback: {
      onBeforeAnimation: beforechange_callback
    }
  });
});