$slideshow = {   
    context: false,   
    tabs: false,   
    timeout: 3000,      // time before next slide appears (in ms)   
    slideSpeed: 750,   // time it takes to slide in each slide (in ms)   
    tabSpeed: 300,      // time it takes to slide in each slide (in ms) when clicking through tabs   
    fx: 'scrollLeft',   // the slide effect to use   
  
    init: function() {   
        // set the context to help speed up selectors/improve performance   
        this.context = $('#slideshow');   
  
        // set tabs to current hard coded navigation items   
        this.tabs = $('ul.slides-nav li', this.context);   
  
        // remove hard coded navigation items from DOM   
        // because they aren't hooked up to jQuery cycle   
        this.tabs.remove();   
  
        // prepare slideshow and jQuery cycle tabs   
        this.prepareSlideshow();   
    },   
  
    prepareSlideshow: function() {   
        // initialise the jquery cycle plugin -   
        // for information on the options set below go to:   
        // http://malsup.com/jquery/cycle/options.html   
        $("div.slides > ul", $slideshow.context).cycle({   
            fx: $slideshow.fx,   
            timeout: $slideshow.timeout,   
            speed: $slideshow.slideSpeed,   
            fastOnEvent: $slideshow.tabSpeed,   
            pager: $("ul.slides-nav", $slideshow.context),   
            pagerAnchorBuilder: $slideshow.prepareTabs,   
            before: $slideshow.activateTab,   
            pauseOnPagerHover: true,   
            pause: true  
        });   
    },   
  
    prepareTabs: function(i, slide) {   
        // return markup from hardcoded tabs for use as jQuery cycle tabs   
        // (attaches necessary jQuery cycle events to tabs)   
        return $slideshow.tabs.eq(i);   
    },   
  
    activateTab: function(currentSlide, nextSlide) {   
        // get the active tab   
        var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);  
 
        // if there is an active tab  
        if(activeTab.length) {  
            // remove active styling from all other tabs  
            $slideshow.tabs.removeClass('on');  
 
            // add active styling to active button  
            activeTab.parent().addClass('on');   
        }   
    }   
};   
  
$(function() {   
    // add a 'js' class to the body  
    $('body').addClass('js'); 
    // initialise the slideshow when the DOM is ready   
    $slideshow.init();   
});