$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
    $(pager).find('li').removeClass('current')
        .filter('li:eq('+currSlideIndex+')').addClass('current');
};

//DOM loaded
$(function(){
    //cycles
    $('.cycle').after('<div id="pagerContainer"><ol id="pager">').cycle({
        containerResize: 0,
        pause: 1,
        prev: '.previous',
        next: '.next',
        pauseOnPagerHover: 1,
        pager: '#pager',
        startingSlide: 0,
        timeout: 5000,
        pagerAnchorBuilder: function(idx, slide) { 
            myClass = (idx==0)?' class="current"':'';
            return '<li'+myClass+'><a href="#">'+slide.title+'</a></li>'; 
        }
    });
    
    $('.play').click(function() {
        $('.play').css("display", "none");
        $('.pause').css("display", "");
        $('.cycle').cycle('resume', true);
    });
    
    $('.pause').click(function() {
        $('.pause').css("display", "none");
        $('.play').css("display", "");
        $('.cycle').cycle("pause", true);
    });
});