$(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');
    			}
    		}
    	}
	});
    
});