(function ($, jQueryNew) {
    diysdk.epages.epagesBasket.addView('web', {

        basketWrapperJQ: {},
        webMainJQ: {},

        eventBindings: [ ],

        init: function (name, webComponent, mainJQ, data, parentView) {
            this._super(name, webComponent, mainJQ, data, parentView);

            this.webMainJQ = this.getMainJQ('web');

            // if shop not configured, i.e. no products defined, hide the web view of basket
            if (!data.isShopConfigured) {
                this.webMainJQ.hide();
                return false;
            }

            this.addBasketCaptionLanguageText();
            this.initBasket();
            this.addClassNameIfMacDetected();
        },

        /**
         *
         */
        onResize: function () {
            var paddingLeft, paddingRight,
                viewtypeswitchJQ = this.webMainJQ.find('.viewtypeswitch'),
                productListContainerJQ = this.webMainJQ.find('.productlistcontainer'),
                filterContainerJQ = this.webMainJQ.find('.filterContainer'),
                webViewInnerWidth = this.webMainJQ.innerWidth(),
                allElementsWidth = 0;

            if (this.webComponent.isInSidebar) {
                this.webMainJQ.addClass('sidebar');
                this.handleFilterContainerInSidebar(filterContainerJQ);
                this.hideViewtypeswitchContainer(viewtypeswitchJQ);

                return;
            }

            if (filterContainerJQ.length === 0) {
                return;
            }

            if (filterContainerJQ.hasClass('content-small')) {
                filterContainerJQ.removeClass('content-small');
            }

            if (productListContainerJQ.hasClass('content-small')) {
                productListContainerJQ.removeClass('content-small');
            }

            paddingLeft = parseInt(filterContainerJQ.css('padding-left').replace('px', ''));
            paddingRight = parseInt(filterContainerJQ.css('padding-right').replace('px', ''));
            webViewInnerWidth -= (paddingLeft + paddingRight);

            if (typeof this.previousFilterContainerSize === 'undefined') {
                $.each(this.webMainJQ.find('.filterContainer').children(':visible'), function (key, value) {
                    allElementsWidth += $(value).outerWidth(true);
                });

                this.previousFilterContainerSize = allElementsWidth;
            }

            if ((webViewInnerWidth < 320)) {
                filterContainerJQ.addClass('content-small');

                this.handleFilterContainerInSidebar(filterContainerJQ);
                this.hideViewtypeswitchContainer(viewtypeswitchJQ);

                return;

            } else {
                viewtypeswitchJQ.show();
            }

            // size of screen(layout) is too small
            if (webViewInnerWidth <= this.previousFilterContainerSize) {
                filterContainerJQ.addClass('content-small');
                this.hideViewtypeswitchContainer(viewtypeswitchJQ);
                this.updateViewType();
            } else {
                this.resetFilterContainerDefaultStyle(filterContainerJQ);
            }
        },

        /**
         * load language text
         */
        addBasketCaptionLanguageText: function () {
            this.webMainJQ.find('.estore_text').text(this._('epages.basket.web.basket.caption'));
        },

        /**
         * init basket wrapper: stylesheet, event, position
         */
        initBasket: function () {
            var appEstoreWrapperJQ,
                layoutButtonContainerJQ = $('#diywebAppContainer1st'),
                basketWrapperJQ = this.webMainJQ;

            // if layout has basket container
            if (layoutButtonContainerJQ.length !== 0) {
                layoutButtonContainerJQ.append(basketWrapperJQ);
                this.removeCssClassRecuresively(layoutButtonContainerJQ, 'normal');

                appEstoreWrapperJQ = layoutButtonContainerJQ.find('.app_estore_wrapper');
                appEstoreWrapperJQ.removeClass('hidden');
                this.basketWrapperJQ = appEstoreWrapperJQ;
            } else {
                basketWrapperJQ.find('.app_estore_wrapper').removeClass('hidden');
            }

            this.basketWrapperJQ = basketWrapperJQ;

            this.basketWrapperJQ.click($.proxy(function () {
                this.openBasket(this.basketWrapperJQ);
            }, this));
        },

        /**
         * add a new class name "macOS", if mac version browser detected
         */
        addClassNameIfMacDetected: function () {
            if (this.webComponent.platformDetector.isMac()) {
                this.basketWrapperJQ.find('span.productCount').addClass('macOS');
            }
        },

        /**
         *
         * @param {object} targetJQ
         * @param {string} CssClass
         */
        removeCssClassRecuresively: function (targetJQ, CssClass) {
            var that = this;
            $(targetJQ).removeClass(CssClass);
            $(targetJQ).children().each(
                function () {
                    $(this).removeClass(CssClass);
                    that.removeCssClassRecuresively($(this), CssClass);
                });
        },

        /**
         * event handler: open the basekt in fancybox
         */
        openBasket: function (basketWrapperJQ) {
            this.webComponent.loadView('cart', {
                data: {},
                targetJQ: function (newJQ) {
                    jQueryNew.fancybox({
                        content: newJQ,
                        type: 'html',
                        afterShow: function () {
                            productCountJQ = basketWrapperJQ.find('.productCount');
                            items = newJQ.find('.item');
                            productCountJQ.text(items.length);

                            if (items.length === 0) {
                                estoreContentJQ = basketWrapperJQ.find('.estore_content');
                                estoreContentJQ.removeClass('filled');
                            }
                        }
                    });
                }
            });
        },

        /**
         * remove the cart item from cart
         *
         * @param {object} targetJQ
         * @param {string} productId
         * @param {object} element
         */
        removeItem: function (targetJQ, productId, element) {
            this.webComponent.loadData({
                dataPath: 'item/' + productId,
                type: 'DELETE',
                success: $.proxy(function (data) {
                    this.updateTotalPriceText(data, element);

                    // hide product-line if product is removed
                    targetJQ.find('.item[data-itemid="' + productId + '"]').fadeOut();

                    if (targetJQ.find('.item:visible').length === 1) {
                        targetJQ.find('.item-list').fadeOut('fast', function () {
                            targetJQ.find('.noresults').removeClass('hidden');
                        });
                    }

                    this.updateBasketProductCounter(data, targetJQ);

                }, this)
            });
        },

        /**
         * @param {string} itemId
         * @param {object} element
         */
        changeProductAmount: function (itemId, element) {
            var selectedValue = $(element).val(),
                priceBox = $(element).parents('.item').find('.itemTotalPrice');

            this.webComponent.saveData({
                dataPath: 'item/' + itemId,
                data: $.toJSON({
                    quantity: selectedValue
                }),
                reloadView: false,
                success: $.proxy(function (data) {
                    this.updateCurrentItemPriceBoxText(data, priceBox);
                    this.updateTotalPriceText(data, element);
                    this.updateBasketProductCounter(data);
                    this.handleItemsLackInDepot(itemId, selectedValue, this.getAllowedQuantityFromResponse(data));
                }, this)
            });
        },

        /**
         *
         */
        handleItemsLackInDepot: function (itemId, selectedAmount, allowedQuantity) {
            var cartMainJQ = this.webComponent.views.cart.cartMainJQ,
                selectAmountJQ = cartMainJQ.find('[data-itemid="'+itemId+'"] .select-amount'),
                defaultQuantity = cartMainJQ.find('[data-itemid="'+itemId+'"]').attr('data-quantity'),
                warningMsgJQ = cartMainJQ.find('.warningMessage');


            if (selectedAmount > allowedQuantity) {
                var correctedQuantity = (allowedQuantity == 0) ? defaultQuantity : allowedQuantity;
                warningMsgJQ.fadeIn();
                selectAmountJQ.val(correctedQuantity);

                setTimeout(function () {
                    warningMsgJQ.fadeOut();
                }, 10000);

            } else {
                warningMsgJQ.fadeOut();
            }
        },

        /**
         * Retrieves allowed quantity (current product stock level) extracted from retrieved ePages cart API
         *
         * Note that if response is empty 0 will be returned
         *
         * @param data
         *
         * @returns {*}
         */
        getAllowedQuantityFromResponse: function (data) {
            return (data.quantity === undefined) ? 0 : data.quantity;
        },

        /**
         * update the total amount of the product items in basket
         */
        updateBasketProductCounter: function (data, targetJQ) {
            var estoreContentJQ;

            if (data.basketLineitemsTotalAmount !== 'undefined') {
                this.basketWrapperJQ.find('.estore_productCount span').text(data.basketLineitemsTotalAmount);
                if (data.basketLineitemsTotalAmount === 0) {
                    estoreContentJQ = this.basketWrapperJQ.find('.estore_content');
                    if (estoreContentJQ.hasClass('filled')) {
                        estoreContentJQ.removeClass('filled');
                    }

                    targetJQ.find('.checkout-box').remove();
                    $('<div>', {class: 'splitter'}).appendTo(targetJQ.find('.noresults'));
                }
            }
        },

        /**
         * update the current item price text
         *
         * @param data
         * @param element
         */
        updateCurrentItemPriceBoxText: function (data, element) {
            if (data.currentItemTotalPrice !== undefined) {
                if (data.currentItemTotalPrice.formatted !== undefined) {
                    element.fadeOut(function () {
                        element.text(data.currentItemTotalPrice.formatted);
                        element.fadeIn();
                    });
                }
            }
        },

        /**
         * update the total sum of current order
         *
         * @param data
         * @param element
         */
        updateTotalPriceText: function (data, element) {
            if (data.formatted !== undefined) {
                var overallPrice = $(element).parents('.item-list').find('.overallPrice');

                overallPrice.fadeOut(function () {
                    overallPrice.text(data.formatted);
                    overallPrice.fadeIn();
                });
            }
        }

    });
}(jQuery, jQueryNew));