(function (win, doc, VK_X) {
    'use strict';

    VK_X.init = function () {
        var _this = this;

        _this.breakpoints = {
            tablet: 1024
        };

        _this.classNames = {
            fadeAnimation: 'js-setFadeAnimation',
            isShow: 'is-show',
            isHide: 'is-hide'
        };

        _this.idNames = {
            scrollGuide: 'js-scrollGuide'
        };

        _this.elements = {
            fadeAnimation: doc.querySelectorAll('.' + _this.classNames.fadeAnimation),
            scrollGuide: doc.getElementById(_this.idNames.scrollGuide)
        };

        _this.setFadeAnimation();
        _this.scrollGuide();
    };

    VK_X.setFadeAnimation = function () {
        var _this = this;
        var fn = {};

        if (!_this.elements.fadeAnimation.length) {
            return;
        }

        fn.init = function () {
            fn.addShowClass();
            fn.scrollWindow();
        };

        fn.addShowClass = function () {
            var target = doc.querySelectorAll('.' + _this.classNames.fadeAnimation);
            var targetHeight;
            var targetTopPosition;
            var targetBottomPosition;
            var i;
            var windowHeight = win.innerHeight;

            if (!target.length) {
                return;
            }

            for (i = 0; i < target.length; i++) {
                targetHeight = target[i].offsetHeight;
                targetTopPosition = target[i].getBoundingClientRect().top;
                targetBottomPosition = targetTopPosition - windowHeight;

                if (-windowHeight <= (targetBottomPosition + targetHeight) && targetBottomPosition < -100) {
                    target[i].classList.add(_this.classNames.isShow);
                }
            }
        };

        fn.scrollWindow = function () {
            win.addEventListener('scroll', function () {
                fn.addShowClass();
            });
        };

        fn.init();
    };

    VK_X.scrollGuide = function () {
        var _this = this;
        var fn = {};

        fn.init = function () {
            win.onload = fn.onChangeMedia;
            win.addEventListener('resize', fn.onChangeMedia);
        };

        fn.hideScrollGuide = function () {
            if (_this.elements.scrollGuide) {
                _this.elements.scrollGuide.classList.add(_this.classNames.isHide);
            }
        };

        fn.showScrollGuide = function () {
            if (_this.elements.scrollGuide) {
                _this.elements.scrollGuide.classList.remove(_this.classNames.isHide);
            }
        };

        fn.bindOnWindowScroll = function () {
            win.addEventListener('scroll', fn.toggleScrollGuideByScrollPos, false);
        };

        fn.removeOnWindowScroll = function () {
            win.removeEventListener('scroll', fn.toggleScrollGuideByScrollPos, false);
        };

        fn.isScrollEnd = function () {
            if ((win.innerHeight + doc.documentElement.scrollTop + 30) >= doc.body.offsetHeight) {
                return true;
            }

            return false;
        };

        fn.toggleScrollGuideByScrollPos = function () {
            if (fn.isScrollEnd()) {
                fn.hideScrollGuide();
            } else {
                fn.showScrollGuide();
            }
        };

        fn.onChangeMedia = function () {
            if (win.matchMedia('(min-width: ' + _this.breakpoints.tablet + 'px)').matches) {
                fn.bindOnWindowScroll();
            } else {
                fn.removeOnWindowScroll();
            }
        };

        fn.init();
    };

    doc.addEventListener('DOMContentLoaded', function () {
        VK_X.init();
    }, false);
}(window, window.document, window.VK_X = window.VK_X || {}));