var Slide = window[ 'vue-burger-menu' ][ 'Slide' ];

var nextParamUrl = $('#loadNextParam').val();

function isAllowToAdd(showError = 1) {
    var $list = $(".chosen_params_list");
    if ($list.length) {
        var paramCounter = parseInt($('#paramCounter').val());
        var counter = 0;
        $list.each(function () {
            if (parseInt($(this).val()) > 0) {
                counter = counter + 1;
            }
        });
        if (paramCounter !== counter) {
            if (showError) {
                $('.cart-notification').show();
            }
            return false;
        } else {
            return true;
        }
    } else {
        return true;
    }
}

function hideNext(element) {
    var compare = element+1;
    /* If not last parameter changed then close/hide those below: (+1) */
    $('.parameter_container').each(function() {
        if (parseInt($(this).attr('data-counter')) >= parseInt(compare)) {
            $('.toHide_'+$(this).attr('data-counter')).each(function () {
                $(this).hide();
            });
            $(this).hide();
        }
    });

    /* Set values for chosen parameters in hidden containers */
    $(".chosen_params_list").each(function () {
        if (parseInt($(this).attr('data-sort')) >= parseInt(element)) {
            $(this).val('0');
            var attrId = $(this).attr('id');
            const inputElement = document.querySelector("#"+attrId);
            inputElement.value = 0;
        }
    })

    /* Close notification error */
    $('.cart-notification').hide();
}

function handlerLoadNext(item, thisElement) {
    var id = item.id;
    const next = thisElement + 1;
    $('#next_param_'+next).show();

    const nextElement = document.querySelector('#next_param_'+next);
    if (nextElement) {
    } else {
        $('#ask-button').css("opacity", 1);
    }

    var stop = 0;
    var $list = $(".chosen_params_list");

    $list.each(function() {
        if (parseInt($(this).val()) === 0) {
            if (stop === 0) {
                $(this).val(id);
                var attrId = $(this).attr('id');
                const inputElement = document.querySelector("#"+attrId);
                inputElement.value = id;
                stop = 1;
            }
            return stop;
        }
        return stop;
    });

    if (isAllowToAdd(0)) {
        $('#equipmentContainer').show();
    } else {
        $('#equipmentContainer').hide();
    }

}


Vue.component( 'product-params', {

    props: {
        initialitems: Array,
        element: 0
    },
    
    data() {
        return {
            // for first dropdown
            isOpen1: false,
            selectedItem1: 0,
            items1: this.initialitems,

            // for second dropdown
            isOpen2: false,
            showcheck2: 0,
            showcheck3: 0,
            showcheck4: 0,

            secondVisible: false,
            selectedItem2: 0,
            selectedImg2: 0,
            // TODO: jako mock, powinno być []
            items2: [
                {
                    id         : 0,
                    name       : '-- wybierz --',
                    surcharge  : '',
                    description: '',
                    images     : [
                        {
                            id  : 0,
                            src : '',
                            desc: '',
                        }
                    ],
                }
            ],

            // for third dropdown
            isOpen3: false,
            thirdVisible: false,
            selectedItem3: 0,
            selectedImg3: 0,
            // TODO: jako mock, powinno być []
            items3: [
                {
                    id         : 0,
                    name       : '-- wybierz --',
                    surcharge  : '',
                    description: '',
                    images     : [
                        {
                            id  : 0,
                            src : '',
                            desc: '',
                        }
                    ],
                }
            ],

            // for fourth dropdown
            isOpen4: false,
            fourthVisible: false,
            selectedItem4: 0,
            selectedImg4: 0,
            // TODO: jako mock, powinno być []
            items4: [
                {
                    id         : 0,
                    name       : '-- wybierz --',
                    surcharge  : '',
                    description: '',
                    images     : [
                        {
                            id  : 0,
                            src : '',
                            desc: '',
                        }
                    ],
                }
            ],

        }
    },

    // TODO: lifecycle hook
    mounted() {
        // TODO: ajax get for items1, initial data
        // bind initial data to items1 here
    },

    methods: {

        toggleDropdown1: function () {
            this.isOpen1 = !this.isOpen1;
        },

        selectItem1: function ( index, item ) {
            //console.log('selectItem1');
            this.selectedItem1 = index;
            hideNext(1);
            handlerLoadNext(item, 1);

            //console.log('item1', item);

            const inputElement = document.querySelector("#variant");
            inputElement.value = item.variant;

            const priceContainer = document.querySelector('#productPriceContainer');
            const nettoPrice = document.querySelector('#netto-price');
            var vat = parseFloat(document.querySelector('#vat').value);

            var currencyElement = document.querySelector('#currencySign');
            var currency = currencyElement.value;

            var isComma = item.currencySeparator.includes(',');

            if (document.querySelector('.equipmentCheckbox') !== null) {
                if (document.querySelector('.equipmentCheckbox').checked) {
                    const elem = document.querySelector('.equipmentCheckbox');
                    const equipmentPrice = parseFloat(elem.getAttribute('data-price'));
                    var finalPrice = parseFloat(item.surcharge) + equipmentPrice;

                    priceContainer.innerHTML = finalPrice+' '+currency;

                    if (isComma) {
                        nettoPrice.innerHTML = ((finalPrice / vat).toFixed(2)+ ' '+currency).replace(/\./g, ",");
                    } else {
                        nettoPrice.innerHTML = (finalPrice / vat).toFixed(2)+ ' '+currency;
                    }
                } else {
                    priceContainer.innerHTML = item.surcharge;
                    if (isComma) {
                        nettoPrice.innerHTML = ((item.net).toFixed(2)+ ' '+currency).replace(/\./g, ",");
                    } else {
                        nettoPrice.innerHTML = (item.net).toFixed(2)+ ' '+currency;
                    }
                }
            } else {
                priceContainer.innerHTML = item.surcharge;
                if (isComma) {
                    nettoPrice.innerHTML = ((item.net).toFixed(2)+ ' '+currency).replace(/\./g, ",");
                } else {
                    nettoPrice.innerHTML = (item.net).toFixed(2)+ ' '+currency;
                }
            }
        },

        toggleDropdown2: function () {
            this.isOpen2 = !this.isOpen2;
        },

        selectItem2: function ( itemIndex, imgIndex, img, item ) {
            //console.log('selectItem2');
            this.selectedItem2 = itemIndex;
            this.selectedImg2  = imgIndex;
            if (imgIndex == 0) {

            }
            this.showcheck2 = 0;
            //console.log(itemIndex);
            //console.log(imgIndex);

            hideNext(2);
            handlerLoadNext(img, 2);

            //console.log('img2', img);
            //console.log('item2', item);

            const inputElement = document.querySelector("#variant");
            inputElement.value = img.variant;

            const priceContainer = document.querySelector('#productPriceContainer');
            const nettoPrice = document.querySelector('#netto-price');
            var vat = parseFloat(document.querySelector('#vat').value);

            var currencyElement = document.querySelector('#currencySign');
            var currency = currencyElement.value;

            var isComma = item.currencySeparator.includes(',');

            if (document.querySelector('.equipmentCheckbox') !== null) {
                if (document.querySelector('.equipmentCheckbox').checked) {
                    const elem = document.querySelector('.equipmentCheckbox');
                    const equipmentPrice = parseFloat(elem.getAttribute('data-price'));
                    var finalPrice = parseFloat(item.surcharge) + equipmentPrice;

                    priceContainer.innerHTML = finalPrice+' '+currency;

                    if (isComma) {
                        nettoPrice.innerHTML = ((finalPrice / vat).toFixed(2)+ ' '+currency).replace(/\./g, ",");
                    } else {
                        nettoPrice.innerHTML = (finalPrice / vat).toFixed(2)+ ' '+currency;
                    }
                } else {
                    priceContainer.innerHTML = item.surcharge;
                    if (isComma) {
                        nettoPrice.innerHTML = ((item.net).toFixed(2)+ ' '+currency).replace(/\./g, ",");
                    } else {
                        nettoPrice.innerHTML = (item.net).toFixed(2)+ ' '+currency;
                    }
                }
            } else {
                priceContainer.innerHTML = item.surcharge;
                if (isComma) {
                    nettoPrice.innerHTML = ((item.net).toFixed(2)+ ' '+currency).replace(/\./g, ",");
                } else {
                    nettoPrice.innerHTML = (item.net).toFixed(2)+ ' '+currency;
                }
            }
        },

        toggleDropdown3: function () {
            this.isOpen3 = !this.isOpen3;
        },

        selectItem3: function ( itemIndex, imgIndex, img, item ) {
            //console.log('selectItem3');
            this.selectedItem3 = itemIndex;
            this.selectedImg3  = imgIndex;

            hideNext(3);
            handlerLoadNext(img, 3);

            //console.log('img3', img);

            const inputElement = document.querySelector("#variant");
            inputElement.value = img.variant;

            const priceContainer = document.querySelector('#productPriceContainer');

            const nettoPrice = document.querySelector('#netto-price');
            var vat = parseFloat(document.querySelector('#vat').value);

            var currencyElement = document.querySelector('#currencySign');
            var currency = currencyElement.value;

            var isComma = item.currencySeparator.includes(',');

            if (document.querySelector('.equipmentCheckbox') !== null) {
                if (document.querySelector('.equipmentCheckbox').checked) {
                    const elem = document.querySelector('.equipmentCheckbox');
                    const equipmentPrice = parseFloat(elem.getAttribute('data-price'));
                    var finalPrice = parseFloat(item.surcharge) + equipmentPrice;

                    priceContainer.innerHTML = finalPrice+' '+currency;

                    if (isComma) {
                        nettoPrice.innerHTML = ((finalPrice / vat).toFixed(2)+ ' '+currency).replace(/\./g, ",");
                    } else {
                        nettoPrice.innerHTML = (finalPrice / vat).toFixed(2)+ ' '+currency;
                    }
                } else {
                    priceContainer.innerHTML = item.surcharge;
                    if (isComma) {
                        nettoPrice.innerHTML = ((item.net).toFixed(2)+ ' '+currency).replace(/\./g, ",");
                    } else {
                        nettoPrice.innerHTML = (item.net).toFixed(2)+ ' '+currency;
                    }
                }
            } else {
                priceContainer.innerHTML = item.surcharge;
                if (isComma) {
                    nettoPrice.innerHTML = ((item.net).toFixed(2)+ ' '+currency).replace(/\./g, ",");
                } else {
                    nettoPrice.innerHTML = (item.net).toFixed(2)+ ' '+currency;
                }
            }
        },

        toggleDropdown4: function () {
            this.isOpen4 = !this.isOpen4;
        },

        selectItem4: function ( itemIndex, imgIndex, img, item ) {
            //console.log('selectItem4');
            $('.dropdown4').removeClass('is-active');
            this.selectedItem4 = itemIndex;
            this.selectedImg4  = imgIndex;

            hideNext(4);
            handlerLoadNext(img, 4);

            const inputElement = document.querySelector("#variant");
            inputElement.value = img.variant;

            const priceContainer = document.querySelector('#productPriceContainer');
            const nettoPrice = document.querySelector('#netto-price');
            var vat = parseFloat(document.querySelector('#vat').value);

            var currencyElement = document.querySelector('#currencySign');
            var currency = currencyElement.value;

            var isComma = item.currencySeparator.includes(',');

            if (document.querySelector('.equipmentCheckbox') !== null) {
                if (document.querySelector('.equipmentCheckbox').checked) {
                    const elem = document.querySelector('.equipmentCheckbox');
                    const equipmentPrice = parseFloat(elem.getAttribute('data-price'));
                    var finalPrice = parseFloat(item.surcharge) + equipmentPrice;

                    priceContainer.innerHTML = finalPrice+' '+currency;

                    if (isComma) {
                        nettoPrice.innerHTML = ((finalPrice / vat).toFixed(2)+ ' '+currency).replace(/\./g, ",");
                    } else {
                        nettoPrice.innerHTML = (finalPrice / vat).toFixed(2)+ ' '+currency;
                    }
                } else {
                    priceContainer.innerHTML = item.surcharge;
                    if (isComma) {
                        nettoPrice.innerHTML = ((item.net).toFixed(2)+ ' '+currency).replace(/\./g, ",");
                    } else {
                        nettoPrice.innerHTML = (item.net).toFixed(2)+ ' '+currency;
                    }
                }
            } else {
                priceContainer.innerHTML = item.surcharge;
                if (isComma) {
                    nettoPrice.innerHTML = ((item.net).toFixed(2)+ ' '+currency).replace(/\./g, ",");
                } else {
                    nettoPrice.innerHTML = (item.net).toFixed(2)+ ' '+currency;
                }
            }
            this.showcheck4 = 1;
        },
    },

    computed: {

        dropdown1Classes: function () {
            return {
                'dropdown-trigger': true,
                'is-active'       : this.isOpen1,
            }
        },

        dropdown2Classes: function () {
            return {
                'dropdown-trigger': true,
                'is-active'       : this.isOpen2,
            }
        },

        dropdown3Classes: function () {
            return {
                'dropdown-trigger': true,
                'is-active'       : this.isOpen3,
            }
        },

        dropdown4Classes: function () {
            return {
                'dropdown-trigger': true,
                'is-active'       : this.isOpen4,
            }
        },

    },

    watch: {
        selectedItem1: function (newValue, oldValue) {
            //console.log('selectedItem1');
            $('.dropdown1').removeClass('is-active');
            if ( newValue != oldValue ) {
                // zerowanie
                this.secondVisible = false;
                 this.items2        = [
                     {
                         id         : 0,
                         name       : '-- wybierz --',
                         surcharge  : '',
                         description: '',
                         images     : [
                             {
                                 id  : 0,
                                 src : '',
                                 desc: '',
                             }
                         ],
                     }
                 ];
                this.selectedItem2 = 0;
                this.selectedImg2  = 0;

                this.thirdVisible  = false;
                 this.items3 = [
                     {
                         id         : 0,
                         name       : '-- wybierz --',
                         surcharge  : '',
                         description: '',
                         images     : [
                             {
                                 id  : 0,
                                 src : '',
                                 desc: '',
                             }
                         ],
                     }
                 ];
                this.selectedItem3 = 0;
                this.selectedImg3  = 0;

                this.fourthVisible = false;
                 this.items4 = [
                     {
                         id         : 0,
                         name       : '-- wybierz --',
                         surcharge  : '',
                         description: '',
                         images     : [
                             {
                                 id  : 0,
                                 src : '',
                                 desc: '',
                             }
                         ],
                     }
                 ];
                this.selectedItem4 = 0;
                this.selectedImg4  = 0;

                // TODO: Promis pobierz dane dla 2. dropdown
                // .then

                // TODO: Promis pobierz dane dla 2. dropdown

                var chosen = [];
                var $list = $(".chosen_params_list");
                $list.each(function() {
                    chosen.push({'param':$(this).attr('data-id'), 'value':$(this).val()});
                });

                var that = this;

                $.ajax({
                    url : nextParamUrl,
                    type: 'post',
                    data : {'params':chosen},
                    success: function(data) {
                        //console.log(data);
                        that.items2 = data;
                    }
                });

                this.secondVisible = true;
                this.showcheck2 = 0;
                this.showcheck3 = 0;
                this.showcheck4 = 0;
                // TODO: ustaw selectedItemX i selectedImgX
            }
        },

        selectedItem2: function (newValue, oldValue) {
            //console.log('selectedItem2');
            $('.dropdown2').removeClass('is-active');
            // TODO: potencjalny problem, nie robię AJAX
            // przez to ustawiam wartość zero, która występuje.
            // możesz przy zerowaniu użyć innej wartości ( -1 )
            // potem po AJAX success ustawić na 0 czy inną.
            if ( newValue == 0 ) { return };
            //if ( newValue != oldValue ) {
                this.thirdVisible  = false;
                this.items3 = [
                    {
                        id         : 0,
                        name       : '-- wybierzaaas --',
                        surcharge  : '',
                        description: '',
                        images     : [
                            {
                                id  : 0,
                                src : '',
                                desc: '',
                            }
                        ],
                    }
                ];
                this.selectedItem3 = 0;
                this.selectedImg3  = 0;

                this.fourthVisible = false;
                this.items4 = [
                    {
                        id         : 0,
                        name       : '-- wybierz --',
                        surcharge  : '',
                        description: '',
                        images     : [
                            {
                                id  : 0,
                                src : '',
                                desc: '',
                            }
                        ],
                    }
                ];
                this.selectedItem4 = 0;
                this.selectedImg4  = 0;

                // Promis pobierz dane dla 3. dropdown
                // .then

                this.showcheck2 = 1;
                this.showcheck3 = 0;
                this.showcheck4 = 0;
                this.thirdVisible = true;
            //}
        },

        selectedImg2: function (newValue, oldValue) {
            //console.log('selectedImg2');
            this.showcheck2 = 1;
            //console.log('selectedImg2 newValue', newValue);
            //console.log('selectedImg2 oldValue', oldValue);
            $('.dropdown2').removeClass('is-active');
            //if ( newValue != oldValue ) {
                this.thirdVisible  = false;
                 this.items3 = [
                     {
                         id         : 0,
                         name       : '-- wybierz --',
                         surcharge  : '',
                         description: '',
                         images     : [
                             {
                                 id  : 0,
                                 src : '',
                                 desc: '',
                             }
                         ],
                     }
                 ];
                this.selectedItem3 = 0;
                this.selectedImg3  = 0;

                this.fourthVisible = false;
                this.items4 = [
                    {
                        id         : 0,
                        name       : '-- wybierz --',
                        surcharge  : '',
                        description: '',
                        images     : [
                            {
                                id  : 0,
                                src : '',
                                desc: '',
                            }
                        ],
                    }
                ];
                this.selectedItem4 = 0;
                this.selectedImg4  = 0;

                // Promis pobierz dane dla 3. dropdown
                // .then

                var chosen = [];
                var $list = $(".chosen_params_list");
                $list.each(function() {
                    chosen.push({'param':$(this).attr('data-id'), 'value':$(this).val()});
                });

                var that2 = this;

                //console.log('chosen params', chosen);

                $.ajax({
                    url : nextParamUrl,
                    type: 'post',
                    data : {'params':chosen},
                    success: function(data) {
                        that2.items3 = data;
                    }
                });

                this.thirdVisible = true;
                this.showcheck2 = 1;
                this.showcheck3 = 0;
                this.showcheck4 = 0;
            //}
        },

        selectedItem3: function (newValue, oldValue) {
            //console.log('selectedItem3');
            if ( newValue == 0 ) { return };
            if ( newValue != oldValue ) {
                this.fourthVisible = false;
                // this.items4 = [];
                this.selectedItem4 = 0;
                this.selectedImg4  = 0;

                // Promis pobierz dane dla 4. dropdown
                // .then
                this.fourthVisible = true;
            }
        },

        selectedImg3: function (newValue, oldValue) {
            //console.log('selectedImg3');
            $('.dropdown3').removeClass('is-active');
            if ( newValue == 0 ) { return };
            //if ( newValue != oldValue ) {
                this.fourthVisible = false;
                 this.items4 = [
                     {
                         id         : 0,
                         name       : '-- wybierz --',
                         surcharge  : '',
                         description: '',
                         images     : [
                             {
                                 id  : 0,
                                 src : '',
                                 desc: '',
                             }
                         ],
                     }
                 ];
                this.selectedItem4 = 0;
                this.selectedImg4  = 0;

                // Promis pobierz dane dla 4. dropdown
                // .then

                var chosen = [];
                var $list = $(".chosen_params_list");
                $list.each(function() {
                    chosen.push({'param':$(this).attr('data-id'), 'value':$(this).val()});
                });

                var that3 = this;

                $.ajax({
                    url : nextParamUrl,
                    type: 'post',
                    data : {'params':chosen},
                    success: function(data) {
                        that3.items4 = data;
                    }
                });

                this.fourthVisible = true;
                this.showcheck3 = 1;
                this.showcheck4 = 0;
            //}
        },
    },

});

Vue.component('burger-menu', {

    components: {
        Slide,
    },

    data() {

        if (this.$attrs['activesub'] === '1') {
            showSub = true;
        } else {
            showSub = false;
        }

        return {
            open             : false,
            menuWidth        : '0',
            unfoldFirstTab   : showSub,
            unfoldSecondTab  : false,
            unfoldThirdTab   : false,
        }
    },

    mounted() {
        this.handleWindowResize();
        window.addEventListener( 'resize', this.handleWindowResize );
    },

    beforeDestroy: function () {
        window.removeEventListener( 'resize', this.handleWindowResize );
    },

    methods: {
        toggleBurgerMenu: function () {
            this.open = !this.open;
        },

        handleWindowResize: function ( event ) {
            var windowWidth = window.innerWidth;

            this.menuWidth = ( windowWidth > 769 && windowWidth <= 1023 )
                ? String( windowWidth / 2 )
                : String( windowWidth * 0.9 );
        },

        toggleFirstTab: function () {
            this.unfoldFirstTab = !this.unfoldFirstTab;
        },

        toggleSecondTab: function () {
            this.unfoldSecondTab = !this.unfoldSecondTab;
        },

        toggleThirdTab: function () {
            this.unfoldThirdTab = !this.unfoldThirdTab;
        },
    },

});

Vue.component('product-tabs', {

    components: {
        agile: VueAgile
    },

    props: {
        slidesCount: {
            required: false,
            default : 4,
        }
    },

    data() {
        return {
            tab: 1,
            sliderOptions: {
                slidesToShow: $('#slide_counter').val(),
                centerMode: true,
                infinite: true,
                dots: false,
                navButtons: true,
                autoplay: true,
                autoplaySpeed: 4000,
                pauseOnHover: true,
                timing: 'ease-in-out',
            }
        }
    },

    methods: {

        clicked: function ( tab ) {
            var toReload;
            this.tab = tab;
            toReload = tab == 1 ? 1 : 2;
            this.$nextTick(function() {
                this.$refs[ 'carousel_' + toReload ].reload();
            });
        },

    },

});

Vue.component('filters-list', {

    data() {
        return {
            unfold: false,
            showMore: false,
        }
    },

    methods: {

        toggleFiltersList() {
            this.unfold = !this.unfold;
        },

        toggleMore() {
            this.showMore = !this.showMore;
        },

    },

});

Vue.component('sb-accordion', {

    data() {

        if (this.$attrs['active'] === '1') {
            unfoldParam = true;
        } else {
            unfoldParam = false;
        }
        return {
            unfold: unfoldParam,
            showMore: false,
        }
    },

    methods: {

        toggleAccordion() {
            this.unfold = !this.unfold;
        },

        toggleMore() {
            this.showMore = !this.showMore;
        },

    },

});

Vue.component('sb-accordion-group', {

    data() {

        if (this.$attrs['activesub'] === '1') {
            showSub = true;
        } else {
            showSub = false;
        }

        return {
            showSubcategories: showSub,
        }
    },

    methods: {

        toggleSubcategories() {
            this.showSubcategories = !this.showSubcategories;
        }
    }
});

Vue.component('chair-card', {
    data() {
        let compareValue = false;
        if (this.comparechecked) {

            compareValue = true;
        } else {
            compareValue = false;
        }
        return {
            compare: compareValue,
        }
    },


    methods: {
        compareactive() {

        }
    },

    props: {
        comparechecked: {
            required: false,
            type    : Boolean,
            default : false,
        },
        delivery24: {
            required: false,
            type    : Boolean,
            default : false,
        },
        promotion: {
            required: false,
            type    : Boolean,
            default : false,
        }
    },

});

Vue.component('hdr-cmp', {

    data() {
        return {
            showSearchBar   : false,
            hoverAllProducts: false,
            hover24h        : false,
            hoverSales      : false,
            openAll         : false,
            open24h         : false,
            openSales       : false,
        }
    },

    methods: {

        closeAll() {
            this.openAll   = false;
            this.open24h   = false;
            this.openSales = false;
        },

        isBelowMenu( event ) {
            var menuHeight   = event.target.offsetHeight + event.target.offsetTop;

            if ( menuHeight < event.clientY ) {
                this.closeAll();
            }
        },

        leaveAll ( event ) {
            this.hoverAllProducts = false;
            this.isBelowMenu( event );
        },

        leave24h ( event ) {
            this.hover24h = false;
            this.isBelowMenu( event );
        },

        leaveSales( event ) {
            this.hoverSales = false;
            this.isBelowMenu( event );
        },

        toggleSearchBar() {
            this.showSearchBar = !this.showSearchBar;
        },

        toggleAll() {
            this.openAll   = !this.openAll;
            this.open24h   = false;
            this.openSales = false;
        },

        toggle24h() {
            this.openAll   = false;
            this.open24h   = !this.open24h;
            this.openSales = false;
        },

        toggleSales() {
            this.openAll   = false;
            this.open24h   = false;
            this.openSales = !this.openSales;
        },

        overAll() {
            if ( this.isAnyTabOpen && this.openAll == false ) { this.toggleAll() }
        },

        over24h() {
            if ( this.isAnyTabOpen && this.open24h == false ) { this.toggle24h() }
        },

        overSales() {
            if ( this.isAnyTabOpen && this.openSales == false ) { this.toggleSales() }
        }
    },

    computed: {

        isAnyTabOpen() {
            return this.openAll || this.open24h || this.openSales;
        },

    },

});

Vue.component( 'section-accordion', {

    data() {
        return {
            isOpen: true,
            isMobile: false,
        }
    },

    props: {
        open: {
            required: false,
            type    : Boolean,
            default: true
        }
    },

    methods: {
        toggleAccordion () {
            if ( this.isMobile ) {
                this.isOpen = !this.isOpen;
            }
        },
        checkIfMobile () {
            this.isMobile = window.matchMedia("(max-width: 1000px)").matches ? true : false;
        },
    },

    created () {
        window.addEventListener( 'resize', this.debounce( this.checkIfMobile, 200 ) );
    },

    mounted () {
        this.checkIfMobile();
        if (this.isMobile) {
            if (this.open) {
                this.isOpen = true;
            } else {
                this.isOpen = false;
            }
        } else {
            this.isOpen = true;
        }
    },

    beforeDestroy () {
        window.removeEventListener( 'resize', this.debounce( this.checkIfMobile, 200 ) );
    },
});

Vue.prototype.debounce = (func, delay) => {
    var debounceTimer;
    return function() {
        var ctx = this;
        var args = arguments;
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(function () { func.apply(ctx, args) }, delay);
    };
}

Vue.component('hdr-popup-menu', {

    data() {
        return {
            showTouchMenu: false,
        }
    },

    methods: {

        toggleMenu() {
            this.showTouchMenu = !this.showTouchMenu;
        },

    },

});

Vue.component( 'logo-carousel', {

    components: {
        agile: VueAgile,
    },

    props: {
        logos: {
            required: true,
            type    : Array,
        }
    },

    data() {
        return {
            slides: this.logos,
            logoOptions: {
                slidesToShow: 6,
                infinite: true,
                dots: false,
                navButtons: false,
                autoplay: true,
                autoplaySpeed: 3000,
                pauseOnHover: true,
            },
        }
    }

});

Vue.component( 'carousel-gallery', {

    components: {
        'gallery': VueGallery,
        'agile': VueAgile,
        'zoom-on-hover': zoomOnHover,
    },

    props: {
        smallImgs: {
            required: true,
            type    : Array,
        },
        bigImgs: {
            required: true,
            type    : Array,
        }
    },

    data() {
        return {
            index: null,

            asNavFor1: [],
            asNavFor2: [],
            options1: {
                dots: false,
                fade: true,
                pauseOnHover: true,
                navButtons: false,
                timing: 'ease-in-out',
            },
            options2: {
                centerMode: true,
                dots: false,
                navButtons: true,
                slidesToShow: 3,
                timing: 'ease-in-out',
                responsive: [
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 3
                        }
                    },

                    {
                        breakpoint: 1000,
                        settings: {
                            navButtons: true
                        }
                    }
                ]
            },
        }
    },

    methods: {
        openGallery( index ) {
            this.index = index;
        },
        slideHandler( payload ) {
            var item = this.bigImgs[ payload.index ];

            if ( item[ 'type' ] == 'orbittour' ) {
                payload.slide.innerHTML = "<div id='orbittour-" + item[ "id" ] + "' class='orbittour-container'></div>"
                var sc = document.createElement("script");
                sc.src = item.script;
                document.body.appendChild(sc);
            }
        }
    },

    mounted () {
        this.asNavFor1.push( this.$refs.thumbnails );
        this.asNavFor2.push( this.$refs.main );
    },

});

var app = new Vue({
    el: '#app',
    delimiters: [ '<%',  '%>' ],
});

//Vue.config.devtools      = false;
//Vue.config.productionTip = false;


Vue.config.devtools      = true;
Vue.config.productionTip = true;

Vue.use( window.vueAffix );
Vue.use( window.VueAgile );
Vue.use( window.zoomOnHover );
Vue.use( window.vueScrollactive );
Vue.use( window.VueMatchHeights, { disabled: [ 768 ] });

// document.addEventListener('DOMContentLoaded', function(){
//   var carousels = bulmaCarousel.attach();
// }, false);