/**
 * We use the initCallback callback
 * to assign functionality to the controls
 */
function mycarousel_initCallback(carousel) {
    jQuery('.carousel-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        carousel.startAuto(0);
        jQuery('.carousel-control a.active').removeClass("active");
        jQuery(this).addClass("active"); 
        return false;
    });
    
    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
    
    
};

// Give the selected control button special class
function my_callback(){
    if(jQuery('.carousel-control a.active').attr('id') == null){
      // first itteration
      jQuery('.carousel-control a:first-child').addClass("active");
    }
    else if(jQuery('.carousel-control a.active').attr('id') == jQuery('.carousel-control a:last-child').attr('id')) {
      // add class to first
      jQuery('.carousel-control a.active').removeClass("active");
      jQuery('.carousel-control a:first-child').addClass("active");  
    } 
    else {
      //add class to next
      jQuery('.carousel-control a.active').removeClass("active").next().addClass("active");
    }
}


// Ride the carousel...
jQuery(document).ready(function() {
    jQuery("#main_banner").jcarousel({
        auto: 4,                  // autoscroll carousel in 4 secconds
        wrap: 'circular',         // play the slides in loop
        scroll: 1,                // scroll only one slide
        initCallback: mycarousel_initCallback
    });    
});