$slideshow = { 
    context: false,  
    slides: {},
    tabs: {},
    timeout: 2000,      // time before next slide appears (in ms)  
    slideSpeed: 2000,   // time it takes to slide in each slide (in ms)  
    tabSpeed: 500,      // time it takes to slide in each slide (in ms) when clicking through tabs  
    fx: 'fade',   // the slide effect to use  

    init: function(slides, tabs, context) {  
        // set the context to help speed up selectors/improve performance  
        this.context = $(context);  

        // set an instance var for the slides to cycle
        this.slides = $(slides, this.context);

        // set tabs to current hard coded navigation items  
        this.tabs = $(tabs, this.context);
        this.tabs.parent = this.tabs.parent();

        // 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  
        this.slides.cycle({  
            fx: $slideshow.fx,
            timeout: $slideshow.timeout,
            speed: $slideshow.slideSpeed,
            fastOnEvent: $slideshow.tabSpeed,
            pager: $slideshow.tabs.parent,
            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) {
        var href = $(this).children('a').attr('href');
        $('#caption').html('<a href="' + href + '">' + this.title + '</a>');            
        // 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');  
        }              
    },

    pause: function() {
        this.slides.cycle('pause');
    },

    resume: function(instant) {
        this.slides.cycle('resume', instant);
    }
};  


$(function() {  
    // add a 'js' class to the body  
    $('body').addClass('js');

    // initialise the slideshow when the DOM is ready  
    $slideshow.init('div.slides > ul', 'ul.slides-nav li', '#slideshow');

    // attach pause functionality to pause button
    $('#pauseButton').click(function() {
        $slideshow.pause();
    });

    // attach resume functionality to resume button
    $('#resumeButton').click(function() {
        $slideshow.resume(true);
    });
});