jQuery(document).ready(function() {
         
            function carouselInit(carousel, state)
            {
                // 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();
                });
                
                //
                // CUSTOM BITS BY ROB
                //
                
                // Add a button for every item in the carousel           
                for(i=0;i<carousel.options.size;i++)
                {
                    $("#carousel_timeline").append("<a id=\"button_" + (i + 1) + "\" href=\"#\">" + (i + 1) + "<\/a>");
                };
                
                // Bind a function to each of those buttons
                $('#carousel_timeline a').bind('click', function() {
                    carousel.startAuto(0);
                    carousel.scroll(jQuery.jcarousel.intval($(this).html()));
                    return false;
                });
                
                // Center the timeline
                var timeline_width = 510;
                var timeline_button_width = 8;
                var timeline_button_margin = 20;
                var timeline_buttons_width = ((timeline_button_width + timeline_button_margin) * carousel.options.size) - timeline_button_margin;
                $("#carousel_timeline").css("padding-left",((timeline_width/2) - (timeline_buttons_width/2)) + "px");
            };
            
            function carouselTimelineUpdate(carousel, state, idx)
            {
                $("#carousel_timeline a").removeClass("selected");
                $("#carousel_timeline a#button_" + idx).addClass("selected");
            };
                       
            jQuery('#mycarousel').jcarousel({
                auto: 5,
                wrap: 'both',
                scroll: 1,
                animation: 1000,
                easing: "easeInOutBack",
                initCallback: carouselInit,
                itemVisibleInCallback: {
                    onAfterAnimation: carouselTimelineUpdate
                }
            });
            
            jQuery('#carousel_right').jcarousel({
                vertical: true,
                auto: 6,
                wrap: 'both',
                scroll: 1,
                animation: 1000,
                easing: "easeInOutBack"
            });
        });