function bannerInit() {
    $(document).ready(function () {

        var bc = $('#buttonContainer');
        var $container = $('.bannerslide').cycle({ fx: 'fade', timeout: 8000 });

        $container.children().each(function (i) {


            var correspondingNumber = 0;
            var selectedclass = "";

            if (i == 0)
                selectedclass = " selected";

            if ($container.children().size() == (i + 1))
                correspondingNumber = 0;
            else
                correspondingNumber = i + 1;

            $('<input class="banner_input' + selectedclass + '" id="banner_input' + (correspondingNumber) + '" type="button" value="' + (i + 1) + '" />')
            // append it to button container
        .appendTo(bc)
            // bind click handler
        .click(function () {
            // cycle to the corresponding slide
            $container.cycle(i);

            $(".banner_input").each(function () {
                $(this).removeClass("selected");
            });

            $(this).addClass("selected");

            return false;
        });
        });

    });
}

function changeHighlight(itemId) {

    $(".banner_input").each(function () {
        $(this).removeClass("selected");
    });

    $("#banner_input" + itemId).addClass("selected");
}