$(document).ready(function () {
    $('#s1')
					.before('<div id="slidenav">')
					.cycle({
					    fx: 'scrollHorz',
					    speed: '700',
					    timeout: '4000',
					    pager: '#slidenav'
					});


    $('#s2').cycle({
        fx: 'scrollHorz',
        speed: '700',
        timeout: '4500',
        next: '#next2',
        prev: '#prev2',
        before: function (currSlideElement, nextSlideElement, options, forwardFlag) {
            totalUpdate($(nextSlideElement), 's2');
        }
    });


    $('#s3').cycle({
        fx: 'scrollHorz',
        speed: '700',
        timeout: '5000',
        next: '#next3',
        prev: '#prev3',
        before: function (currSlideElement, nextSlideElement, options, forwardFlag) {
            totalUpdate($(nextSlideElement), 's3');
        }
    });
});

function totalUpdate(current, container) {
    var bc = $('#' + container);
    var total = bc.children("li").size();
    bc.children("li").attr("class", "listitem");
    $(current).attr("class", "current");
    var currentIndex = $('#' + container).children("li").index($('#' + container).children("li.current")) + 1;
    bc.parent().children(".actions").children("span").html(currentIndex + " / " + total);
}