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

//DOM loaded
$(function(){
    //cycles
    $('#slideshow').after('<div id="pagerContainer"><ol id="pager">').cycle({
        containerResize: 0,
        pause: 1,
        prev: '.previous',
        next: '.next',
        pauseOnPagerHover: 1,
        pager: '#pager',
        startingSlide: 0,
        timeout: 10000,
        pagerAnchorBuilder: function(idx, slide) { 
//            alert($($(slide).children()[1]).children()[0].src);
            var imageUrl = $($(slide).children()[1]).children()[0].src;
            imageUrl = imageUrl.replace(/(.+)\./, "$1.");
            return '<li><a href="#"><img src="' + imageUrl + '" width="47" height="28" /></a></li>';
          //  return "<li style=\"background-image: url('" + $($(slide).children()[1]).children()[0].src + "'); background-position: center;\"><a href=\"#\"></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);
    });
});