/**
* Function to change the slide in the slideshow.
* This function is called by the menuitems.
*/
function changeSlide(slideNumber) {
    $('#fragments').cycle(slideNumber - 1);
}

/**
* Function handling the change of a slide in the slideshow.
* The function makes sure the menuitem changes accordingly.
*/
function changeActiveCarousselMenuItem(currSlideElement, nextSlideElement) {
    $('#' + currSlideElement.id + '-tab').removeClass("ui-tabs-selected");
    $('#' + currSlideElement.id + '-tab a').removeClass("current");

    $('#' + nextSlideElement.id + '-tab').addClass("ui-tabs-selected");
    $('#' + nextSlideElement.id + '-tab a').addClass("current");
}

/**
* Start the caroussel!
*/
$(function () {
    $(function () {
        $('#fragments').cycle({
            fx: 'fade',
            speed: 300,
            timeout: 5000,
            before: function (currSlideElement, nextSlideElement, options, forwardFlag) {
                changeActiveCarousselMenuItem(currSlideElement, nextSlideElement);
            }
        });
    });
});