/**
 * 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("#banner, #reference").jcarousel({
        auto: 4,                  // autoscroll carousel in 4 secconds
        wrap: 'circular',         // play the slides in loop
        scroll: 1,                // scroll only one slide
        initCallback: mycarousel_initCallback
    });
    
    // Set up the fading overlay text
    jQuery('#banner, #reference').mouseenter(function() {
      jQuery('#banner h3, #reference h3').fadeIn('fast');
      jQuery('div.jcarousel-prev, div.jcarousel-next').addClass("hover");
    }); 
    jQuery('#banner, #reference').mouseleave(function() {
      jQuery('#banner h3, #reference h3').fadeOut('fast');
      jQuery('div.jcarousel-prev, div.jcarousel-next').removeClass("hover");
    }); 
    
    
    $('#ref1').click(function() {
      $('div.referenceList.ref1').toggle("fast");
      $('#ref1').parent().toggleClass("selected");
    }); 
    $('#ref2').click(function() {
      $('div.referenceList.ref2').toggle("fast");
      $('#ref2').parent().toggleClass("selected");
    });
    $('#ref3').click(function() {
      $('div.referenceList.ref3').toggle("fast");
      $('#ref3').parent().toggleClass("selected");
    });
    $('#ref4').click(function() {
      $('div.referenceList.ref4').toggle("fast");
      $('#ref4').parent().toggleClass("selected");
    });
    $('#ref5').click(function() {
      $('div.referenceList.ref5').toggle("fast");
      $('#ref5').parent().toggleClass("selected");
    });
});