$slideshow = {  
        context: false,  
        tabs: false,  
        timeout: 4000,      // time before next slide appears (in ms)  
        slideSpeed: 1000,   // 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: 'fade',   // 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();  
});