$(document).ready(function(){
        $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
            $(pager).find('#pg'+currSlideIndex).removeClass('slide_nav_off')
                .filter('#pg'+currSlideIndex).addClass('slide_nav_on');
        };

        $('.slider')
        .after('<div id="sliderBtns"  class="sliderBtns"></div><br clear="all" />')
        .cycle({
            fx:     'scrollLeft',
            timeout: 6000,
            delay:  -2000,
            pager:  '#sliderBtns',
            pagerAnchorBuilder: function(idx, slide) {                
                return '<div class="slide_nav_off" align="left" id="pg'+idx+'"><a href="#">'+textArray[idx]+'</a></div>';
            },
            before:  function(idx){
                //remove all old selections
                for(i=0;i<5;i++){
                    if(i!=idx){
                        $('#sliderBtns').find('#pg'+i).removeClass('slide_nav_on').addClass('slide_nav_off');
                    }
                }
            }
        });
});