/*
* adapted from: 
* http://net.tutsplus.com/tutorials/javascript-ajax/building-an-auto-scrolling-slideshow-that-works-with-and-without-javascript/ */
 $slideGroup = {  
            context: false,  
            tabs: false,  
            timeout: 5000,      // 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 = $('.slideGroup');  
  
                // set tabs to current hard coded navigation items  
                this.tabs = $('#centeredmenu 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  
                $(".slides", $slideGroup.context).cycle({
                    fx: $slideGroup.fx,
                    timeout: $slideGroup.timeout,
                    speed: $slideGroup.slideSpeed,
                    fastOnEvent: $slideGroup.tabSpeed,
                    
                    pager: $("#centeredmenu ul", $slideGroup.context),  
                    pagerAnchorBuilder: $slideGroup.prepareTabs,  
                    
                    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 $slideGroup.tabs.eq(i);  
            },  
            // I am not using this because the navigator has tiny images.
            activateTab: function(currentSlide, nextSlide) {  
                // get the active tab  
                var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideGroup.context); 
 
                // if there is an active tab 
                if(activeTab.length) { 
                    // remove active styling from all other tabs 
                    $slidesGroup.tabs.removeClass('on'); 
 
                    // add active styling to active button 
                    activeTab.parent().addClass('on');  
                }  
            }  
        };