/*!
 * Dashcore - HTML Startup Template, v1.1.8
 * Stripe menu.
 * Copyright © 2019 5Studios.net
 * https://5studios.net
 */

"use strict";

(function($, global, $scope) {
    $scope.Util = {
        queryArray: function(e, p) {
            p || (p = document.body);

            return Array.prototype.slice.call(p.querySelectorAll(e));
        },
        touch: {
            isSupported: "ontouchstart" in global || navigator.maxTouchPoints,
            isDragging: false
        }
    };

    function StripeMenu(menuElement) {
        var menu = this;

        /**
         * Main events used to enable interaction with menu
         **/
        var events = global.PointerEvent ? {
            end: "pointerup",
            enter: "pointerenter",
            leave: "pointerleave"
        } : {
            end: "touchend",
            enter: "mouseenter",
            leave: "mouseleave"
        };
        
        /**
         * The main navigation element.
         **/
        this.container = document.querySelector(menuElement);
        this.container.classList.add("no-dropdown-transition");

        /**
         * Element holding the menu options, not the dropdown
         **/
        this.root = this.container.querySelector(".st-nav-menu");

        /**
         * Those elements used to show the dropdown animation and transitioning
         **/
        this.dropdownBackground = this.container.querySelector(".st-dropdown-bg");
        this.dropdownBackgroundAlt = this.container.querySelector(".st-alt-bg");
        this.dropdownContainer = this.container.querySelector(".st-dropdown-container");
        this.dropdownArrow = this.container.querySelector(".st-dropdown-arrow");

        /**
         * Elements which will have the dropdown content to be shown
         **/
        this.hasDropdownLinks = $scope.Util.queryArray(".st-has-dropdown", this.root);

        /**
         * Each dropdown section to be displayed on mouse interactions
         **/
        this.dropdownSections = $scope.Util.queryArray(".st-dropdown-section", this.container).map(function(el) {
            return {
                el: el,
                name: el.getAttribute("data-dropdown"),
                content: el.querySelector(".st-dropdown-content"),
                width: el.querySelector(".st-dropdown-content").offsetWidth
            }
        });

        /**
         * Menu link interaction
         **/
        this.hasDropdownLinks.forEach(function(el) {
            el.addEventListener(events.enter, function(evt) {
                if (evt.pointerType === "touch") return;
                menu.stopCloseTimeout();
                menu.openDropdown(el);
            });

            el.addEventListener(events.leave, function(evt) {
                if (evt.pointerType === "touch") return;
                menu.startCloseTimeout();
            });

            el.addEventListener(events.end, function(evt) {
                evt.preventDefault();
                evt.stopPropagation();
                menu.toggleDropdown(el);
            });
        });

        /**
         * Menu container interaction with content
         **/
        this.dropdownContainer.addEventListener(events.enter, function(evt) {
            if (evt.pointerType === "touch") return;
            menu.stopCloseTimeout();
        });

        this.dropdownContainer.addEventListener(events.leave, function(evt) {
            if (evt.pointerType === "touch") return;
            menu.startCloseTimeout();
        });

        this.dropdownContainer.addEventListener(events.end, function(evt) {
            evt.stopPropagation();
        });

        document.body.addEventListener(events.end, function(e) {
            $scope.Util.touch.isDragging || menu.closeDropdown();
        });
    }

    function StripeMenuPopup(element) {
        var popupMenu = this;
        var eventTrigger = $scope.Util.touch.isSupported ? "touchend" : "click";
        
        this.root = document.querySelector(element);
        this.activeClass = "st-popup-active";
        this.link = this.root.querySelector(".st-root-link");
        this.popup = this.root.querySelector(".st-popup");
        this.closeButton = this.root.querySelector(".st-popup-close-button");

        this.link.addEventListener(eventTrigger, function(evt) {
            evt.stopPropagation();
            popupMenu.togglePopup();
        });

        this.popup.addEventListener(eventTrigger, function(evt) {
            evt.stopPropagation()
        });

        this.closeButton && this.closeButton.addEventListener(eventTrigger, function(evt) {
            popupMenu.closeAllPopups()
        });

        document.body.addEventListener(eventTrigger, function(evt) {
            $scope.Util.touch.isDragging || popupMenu.closeAllPopups();
        }, false);
    }

    StripeMenu.prototype.openDropdown = function(hasDropDownLink) {
        var stripeMenu = this;
        if (this.activeDropdown === hasDropDownLink) return;

        this.activeDropdown = hasDropDownLink;

        this.container.classList.add("overlay-active");
        this.container.classList.add("dropdown-active");

        /**
         * Setting the default menu active equals to this link
         **/
        this.hasDropdownLinks.forEach(function(link) {
            link.classList.remove("active")
        });
        hasDropDownLink.classList.add("active");

        /**
         * Next section to show
         **/
        var nextSection = hasDropDownLink.getAttribute("data-dropdown"),
            position = "left";

        var dropdown = {
            width: 0,
            height: 0,
            content: null
        };

        this.dropdownSections.forEach(function(dropDownSection) {
            dropDownSection.el.classList.remove("active");
            dropDownSection.el.classList.remove("left");
            dropDownSection.el.classList.remove("right");

            if (dropDownSection.name === nextSection) {
                dropDownSection.el.classList.add("active");
                position = "right";

                dropdown = {
                    width: dropDownSection.content.offsetWidth,
                    height: dropDownSection.content.offsetHeight,
                    content: dropDownSection.content
                }
            } else {
                dropDownSection.el.classList.add(position);
            }
        });

        var u = 520,
            a = 400,
            scaleX = dropdown.width / u,
            scaleY = dropdown.height / a,
            ddCr = hasDropDownLink.getBoundingClientRect(),
            translateX = ddCr.left + ddCr.width / 2 - dropdown.width / 2;

        translateX = Math.round(Math.max(translateX, 10));

        clearTimeout(this.disableTransitionTimeout);
        this.enableTransitionTimeout = setTimeout(function() {
            stripeMenu.container.classList.remove("no-dropdown-transition")
        }, 50);

        this.dropdownBackground.style.transform = "translateX(" + translateX + "px) scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
        this.dropdownContainer.style.transform = "translateX(" + translateX + "px)";

        this.dropdownContainer.style.width = dropdown.width + "px";
        this.dropdownContainer.style.height = dropdown.height + "px";

        var arrowPosX = Math.round(ddCr.left + ddCr.width / 2);
        this.dropdownArrow.style.transform = "translateX(" + arrowPosX + "px) rotate(45deg)";

        var d = dropdown.content.children[0].offsetHeight / scaleY;
        this.dropdownBackgroundAlt.style.transform = "translateY(" + d + "px)"
    };

    StripeMenu.prototype.closeDropdown = function() {
        var stripeMenu = this;
        if (!this.activeDropdown) return;

        this.hasDropdownLinks.forEach(function(link, t) {
            link.classList.remove("active")
        });

        clearTimeout(this.enableTransitionTimeout);

        this.disableTransitionTimeout = setTimeout(function() {
            stripeMenu.container.classList.add("no-dropdown-transition")
        }, 50);

        this.container.classList.remove("overlay-active");
        this.container.classList.remove("dropdown-active");
        this.activeDropdown = undefined;
    };

    StripeMenu.prototype.toggleDropdown = function(e) {
        this.activeDropdown === e ? this.closeDropdown() : this.openDropdown(e)
    };

    StripeMenu.prototype.startCloseTimeout = function() {
        var e = this;
        e.closeDropdownTimeout = setTimeout(function() {
            e.closeDropdown()
        }, 50)
    };

    StripeMenu.prototype.stopCloseTimeout = function() {
        var e = this;
        clearTimeout(e.closeDropdownTimeout)
    };

    StripeMenuPopup.prototype.togglePopup = function() {
        var isActive = this.root.classList.contains(this.activeClass);

        this.closeAllPopups(true);
        isActive || this.root.classList.add(this.activeClass);
    };

    StripeMenuPopup.prototype.closeAllPopups = function(e) {
        var activeLinks = document.getElementsByClassName(this.activeClass);

        for (var i = 0; i < activeLinks.length; i++)
            activeLinks[i].classList.remove(this.activeClass)
    };
    
    $(function() {
        new StripeMenu(".st-nav");
        new StripeMenuPopup(".st-nav .st-nav-section.st-nav-mobile");
    });
}(jQuery, this, {}));