/(function($){

    Drupal.behaviors.home_carousel = {
        attach: function (context, settings) {

            var sync1 = $("#sync1");
            var sync2 = $("#sync2");
            var nbre  = $('#sync2 .item').length;
            if (nbre<4){
                nbre = 4
            };
            if (nbre>10){
                nbre = 10
            };

            sync1.owlCarousel({
                singleItem: true,
                slideSpeed: 1000,
                transitionStyle : "fade",
                navigation: false,
                pagination: false,
                touchDrag: false,
                mouseDrag: false,
                afterAction: syncPosition,
                responsiveRefreshRate: 200,
            });

            sync2.owlCarousel({
                items: nbre,
                itemsDesktop: [1199, 10],
                itemsDesktopSmall: [979, 10],
                itemsTablet: [768, 8],
                itemsMobile: [479, 4],
                pagination: false,
                navigation: true,
                navigationText: [
                    "<i class='fa fa-angle-double-left'></i>",
                    "<i class='fa fa-angle-double-right'></i>"
                ],
                responsiveRefreshRate: 100,
                afterInit: function (el) {
                    
                    var counter = 0;
                    var today;
                    $(".item").each(function() {
                        
                        if($(this).attr("class") == "item active today") {
                            today = counter;
                        }
                        counter ++;
                    });
                    if(typeof today !== 'undefined') {
                        el.trigger("owl.jumpTo", today);
                        // center(el, today);
                        el.find(".owl-item").eq(today).addClass("synced");    
                    }
                }
            });

            function syncPosition(el) {
                var current = this.currentItem;
                $("#sync2")
                    .find(".owl-item")
                    .removeClass("synced")
                    .eq(current)
                    .addClass("synced")
                if ($("#sync2").data("owlCarousel") !== undefined) {
                    // center(current);
                }
            }


            $("#sync2").on("click", ".owl-item", function (e) {
                e.preventDefault();
                var number = $(this).data("owlItem");
                sync1.trigger("owl.goTo", number);
            });

            function center(number) {
                var sync2visible = $("#sync2").data("owlCarousel").owl.visibleItems;
                var num = number;
                var found = false;
                for (var i in sync2visible) {
                    if (num === sync2visible[i]) {
                        var found = true;
                    }
                }

                if (found === false) {
                    if (num > sync2visible[sync2visible.length - 1]) {
                        sync2.trigger("owl.goTo", num - sync2visible.length + 2)
                    } else {
                        if (num - 1 === -1) {
                            num = 0;
                        }
                        sync2.trigger("owl.goTo", num);
                    }
                } else if (num === sync2visible[sync2visible.length - 1]) {
                    sync2.trigger("owl.goTo", sync2visible[1])
                } else if (num === sync2visible[0]) {
                    sync2.trigger("owl.goTo", num - 1)
                }

            }
        }
};
})(jQuery);