function onAfter(currSlideElement, nextSlideElement, options, forwardFlag) 
{
    
    var index = options.currSlide;

    $("#slideButton"+index).addClass("activeSlideButton");
}

function onBefore(currSlideElement, nextSlideElement, options, forwardFlag) 
{
    
    var index = options.currSlide;
    $("#slideButton"+index).removeClass("activeSlideButton");
}


$(function() {
    var bc = $('#slidesButtonWrapper');

    var $container = $('#slides').cycle({
        fx: 'fade',
        speed: 900,
        timeout: 6000,
        after: onAfter,
        before: onBefore
    });
    
    $container.cycle(0);

    $container.children().each(function(i) {
        $('<a class="slideButton" id="slideButton'+i+'" value="'+(i+1)+'" >'+(i+1)+'</a>')
            .appendTo(bc).click(function() {
                $container.cycle(i);
                return false;
            });
    });
    
    $("#slideButton0").addClass("activeSlideButton");
});