// initialize scrollable together with the navigator plugin
$(document).ready(function () {

    $("#chained").scrollable({ circular: true }).navigator().autoscroll({
        interval: 4000
    });

    api = $('#chained').scrollable();

    api.onBeforeSeek(function (event, index) {
        /* Use a recursive* function approach here, if the image is faded out
        * we will allow advancing to the next slide, which will trigger the
        * onSeek event to fade the slides back in */
        var element = jQuery("#chained");
        if (element.css('opacity') == .01) {
            return true;
        }

        /* The slide has not yet started fading out, so we will fade the item
        * out */
        element.fadeTo(0, .01, function () {
            /* Once the fade is complete we will call api.seekTo() to trigger
            * the onBeforeSeek event again, which will now advance the slide
            * because we will be returning true instead of false */
            api.seekTo(index);
        });

        // Prevent advancing the slide on the first call to onBeforeSeek
        return false;

    }).onSeek(function () {

        // Fade the item back in
        jQuery("#chained").fadeTo('fast', 1);
    });

    // use the event "onSeek", which fires every time you scroll an item
    api.onSeek(function () {

        for (var i = 0; i < this.getSize(); i++) {
            if (this.getIndex() != i)
                $('#cat_' + i).fadeTo('fast', 0.4);
        }
        //$('.img').fadeTo('fast', 0.6);
        $('#cat_' + this.getIndex()).fadeTo('fast', 1);
    });
});