;(function($) { 

    function slideSwitch() {
        var $active = $('#slideshow DIV.active'); //currently active article
        var $activeHeadline = $('#nextHeadlines span.active'); //currently active "next" headline

        if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
        if ( $activeHeadline.length == 0 ) $active = $('#nextHeadlines span:last');

        // use this to pull the images in the order they appear in the markup
        var $next =  $active.next().length ? $active.next()
            : $('#slideshow DIV:first');
        var $nextHeadline =  $activeHeadline.next().length ? $activeHeadline.next()
            : $('#nextHeadlines span:first');

        $active.addClass('last-active');
        $activeHeadline.addClass('last-active');

        $next.addClass('active');
        $active.removeClass('active last-active');
            
        $nextHeadline.addClass('active');
        $activeHeadline.removeClass('active last-active');
        
        var $slideIndex = $next.attr("id");
        $("#curSlide").text($slideIndex);
        
    }

    $(function() {
        var playSlideshow = setInterval( slideSwitch, 8000 ); 
        
        $("#slideshow").hover(
            function() {
                clearInterval(playSlideshow);
            },
            function() {
                playSlideshow = setInterval( slideSwitch, 8000 );
            }
        );
        
        $("#showNext").click(showNext); //button action to move to the next article
        $("#nextHeadlines").click(showNext);
        $("#showPrev").click(showPrev); //button action to move to the previous article
        
    });

    function showNext() {
        var $active = $('#slideshow DIV.active');
        var $makeactive =  $active.next().length ? $active.next()
            : $('#slideshow DIV:first');
        $active.removeClass('active');
        $makeactive.addClass('active');
        var $slideIndex = $makeactive.attr("id");
        $("#curSlide").text($slideIndex);
            
        var $activeHeadline = $('#nextHeadlines span.active');
        var $makeactiveHeadline =  $activeHeadline.next().length ? $activeHeadline.next()
            : $('#nextHeadlines span:first');
        $activeHeadline.removeClass('active');
        $makeactiveHeadline.addClass('active');
        
        return false;
    }

    function showPrev() {
        var $active = $('#slideshow DIV.active');
        var $makeactive =  $active.prev().length ? $active.prev()
            : $('#slideshow DIV:last');
        $active.removeClass('active');
        $makeactive.addClass('active');
        var $slideIndex = $makeactive.attr("id");
        $("#curSlide").text($slideIndex);
        
        var $activeHeadline = $('#nextHeadlines span.active');
        var $makeactiveHeadline =  $activeHeadline.prev().length ? $activeHeadline.prev()
            : $('#nextHeadlines span:last');
        $activeHeadline.removeClass('active');
        $makeactiveHeadline.addClass('active');
        
        return false;
    }
})(jQuery);