$(document).ready(function() {

    //jCarousel Plugin
    $('#carousel').jcarousel({
        vertical: true, //display vertical carousel
        scroll: 1,  //auto scroll
        auto: 6,    //the speed of scrolling
        wrap: 'last',   //go back to top when reach last item
        buttonPrevHTML: null,
        initCallback: mycarousel_initCallback   //extra called back function
    });

    //Add hover and click event to each of the item in the carousel
    $('div#slideshow-carousel li a').hover(function() {
    
        //remove the active class from the slideshow main
        $('div#slideshow-main li').removeClass('active');

        //display the main image by appending active class to it.       
        $('div#slideshow-main li.' + $(this).attr('rel')).addClass('active');      

    }).click(function() {

        //remove the active class from the slideshow main
        $('div#slideshow-main li').removeClass('active');

        //display the main image by appending active class to it.       
        $('div#slideshow-main li.' + $(this).attr('rel')).addClass('active');

        return false;
    });


});

//Carousel Tweaking
function mycarousel_initCallback(carousel) {

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