$(function(){

    // SLIDESHOWS
    $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
        setTimeout(function () {
            $(pager).find('li').removeClass('active-slide')
            .filter('li:eq('+currSlideIndex+')').addClass('active-slide');
            }, 800 );
    };

    $('#links-slide-630x250')
        .after('<ul id="slide-nav-630x250">')
        .cycle({
            fx: 'fade',
            timeout: 7000,
            speed: 2000,
            delay: -2000,
            height: '250',
            containerResize: 0,
            pause: 1,
            pager: '#slide-nav-630x250',
            pauseOnPagerHover: 1,
            fastOnEvent: 1,
            pagerAnchorBuilder: function(idx, slide) {
                return '<li id="shape-' + (idx + 1) + '"><a href="#"></a></li>';
            },
            alignRight: 1, // align the pager to right of the the contnaire width (require maxLength + itemWidth)
            maxItems: 5, // max pager elements (require itemWidth)
            itemWidth: 26 // px ot the with pager item
    });
    $('#links-slide-630x145')
        .after('<ul id="slide-nav-630x145">')
        .cycle({
            fx: 'fade',
            timeout: 7000,
            speed: 2000,
            delay: -2000,
            height: '145',
            containerResize: 0,
            pause: 1,
            pager: '#slide-nav-630x145',
            pauseOnPagerHover: 1,
            fastOnEvent: 1,
            pagerAnchorBuilder: function(idx, slide) {
                return '<li id="shape-' + (idx + 1) + '"><a href="#"></a></li>';
            },
            alignRight: 1, // align the pager to right of the the contnaire width (require maxLength + itemWidth)
            maxItems: 5, // max pager elements (require itemWidth)
            itemWidth: 26 // px ot the with pager item
    });
});