(function ($) {
    // This is the connector function.
    // It connects one item from the navigation carousel to one item from the
    // stage carousel.
    // The default behaviour is, to connect items with the same index from both
    // carousels. This might _not_ work with circular carousels!
    var connector = function (itemNavigation, carouselStage) {
        return carouselStage.jcarousel('items').eq(itemNavigation.index());
    };

    $(function () {

        $(".connected-carousels").each(function () {
            var carousel = $(this);
            // Setup the carousels. Adjust the options for both carousels here.
            var carouselStage = $('.carousel-stage', carousel).jcarousel();
            var carouselNavigation = $('.carousel-navigation', carousel).jcarousel();
            var $current = $(".corrente", carousel);

            // We loop through the items of the navigation carousel and set it up
            // as a control for an item from the stage carousel.
            carouselNavigation.jcarousel('items').each(function () {
                var item = $(this);

                // This is where we actually connect to items.
                var target = connector(item, carouselStage);

                item
                    .on('jcarouselcontrol:active', function () {
                        carouselNavigation.jcarousel('scrollIntoView', this);
                        item.addClass('active');
                    })
                    .on('jcarouselcontrol:inactive', function () {
                        item.removeClass('active');
                    })
                    .jcarouselControl({
                        target: target,
                        carousel: carouselStage
                    })
                    .click(function () {
                        var index = $(this).index();
                        $current.text(index + 1);
                        _gaq.push(['_trackPageview', document.title]);
                    });
            });

            // Setup controls for the stage carousel
            $('.prev-stage', carousel)
                .on('jcarouselcontrol:inactive', function () {
                    $(this).addClass('inactive');
                })
                .on('jcarouselcontrol:active', function () {
                    $(this).removeClass('inactive');
                })
                .jcarouselControl({
                    target: '-=1'
                })
                .click(function () {
                    var currentValue = $current.text();
                    $current.text(parseInt(currentValue) - 1);
                    _gaq.push(['_trackPageview', document.title]);
                });

            $('.next-stage', carousel)
                .on('jcarouselcontrol:inactive', function () {
                    $(this).addClass('inactive');
                })
                .on('jcarouselcontrol:active', function () {
                    $(this).removeClass('inactive');
                })
                .jcarouselControl({
                    target: '+=1'
                }).click(function () {
                    var currentValue = $current.text();
                    $current.text(parseInt(currentValue) + 1);
                    _gaq.push(['_trackPageview', document.title]);
                });

            // Setup controls for the navigation carousel
            $('.prev-navigation', carousel).mouseenter(function () {
                $(this).click();
            })

            $('.next-navigation', carousel).mouseenter(function () {
                $(this).click();
            })

            $('.prev-navigation', carousel)
                .on('jcarouselcontrol:inactive', function () {
                    $(this).addClass('inactive');
                })
                .on('jcarouselcontrol:active', function () {
                    $(this).removeClass('inactive');
                })
                .jcarouselControl({
                    target: '-=1'
                });

            $('.next-navigation', carousel)
                .on('jcarouselcontrol:inactive', function () {
                    $(this).addClass('inactive');
                })
                .on('jcarouselcontrol:active', function () {
                    $(this).removeClass('inactive');
                })
                .jcarouselControl({
                    target: '+=1'
                });

            $(document).keydown(function (eventObject) {
                if (eventObject.which == 37) {//left arrow
                    $('.prev-stage', carousel).is(":visible") && $('.prev-stage', carousel).click();
                } else if (eventObject.which == 39) {//right arrow
                    $('.next-stage', carousel).is(":visible") && $('.next-stage', carousel).click();
                }
            });

        });
    });
})(jQuery);