$(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="slider_nav2"  class="slider_nav">')
		.cycle({
			fx:     'fade',
			timeout: 6000,
			delay:  -4000,
			pager:  '#slider_nav2',
    		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){
    					$('#slider_nav2').find('#pg'+i).removeClass('slide_nav_on').addClass('slide_nav_off');
    				}
    			}
    		}
		});
});