$(function () {
    CoreForms.init();
    randomPills.init();
});

var CoreForms = (function () {

    let functions = {};
    let selectors = {
        input: '.form-control',
        container: '.form-group'
    };
    let classes = {
        active: 'is-active',
        focus: 'is-focus'
    };

    functions.init = function () {

        functions.initInputs();
        functions.watchFocus();
        functions.watchChanges();
        console.log('> CoreForms initialized <');

    };

    functions.watchFocus = function () {
        $(document).on('focus focusout', selectors.input, function (e) {
            switch (e.type) {
                case 'focusin':
                    $(e.target).closest(selectors.container).addClass(classes.focus);
                    break;
                case 'focusout':
                    $(e.target).closest(selectors.container).removeClass(classes.focus);
                    break;
            }
        })
    };

    functions.watchChanges = function () {
        $(document).on('change keyup focus', selectors.input, function (e) {
            if (e.target.value.length != 0 || (e.placeholder && e.placeholder.length != 0)) {
                $(e.target).closest(selectors.container).addClass(classes.active);
            } else {
                $(e.target).closest(selectors.container).removeClass(classes.active);
            }
        });
    }

    functions.initInputs = function () {
        $(selectors.input).each(function (i, e) {
            if (e.value.length != 0 || (e.placeholder && e.placeholder.length != 0)) {
                $(e).closest(selectors.container).addClass(classes.active);
            } else {
                $(e).closest(selectors.container).removeClass(classes.active);
            }
        });
    };

    return functions;

})();


var randomPills = (function () {

    let functions = {};
    let selectors = {
        pills: ".pill"
    };
    let colorArray = ["#00A4AA", "#D200DC", "#FF961E", "#6EC81E", "#F03232"];

    functions.init = function () {

        functions.randomColor();
        console.log('> randomPills initialized <');

    };

    functions.randomColor = function () {

        let colorArrayTemp = colorArray;

        $(selectors.pills).each(function (index, element) {


            var number = Math.floor(Math.random() * colorArrayTemp.length);

            $(element).css('background-color', colorArrayTemp[number]);

            colorArrayTemp.splice(number, 1);


        });
    };
    return functions;

})();


// Toggle class
function toggleClassTarget(e, element) {
    $(e).toggleClass("activeTarget");
    if (element) {
        var $element = $(element);
        if ($element.data('alt-text')) {
            var currentText = $element.text();
            $element.text($element.data("alt-text"));
            $element.data("alt-text", currentText);
        }
    }
}

$(function () {
    if ($(window).width() <= 575.98) {
        $(".downloadSection").on("click", function () {
            $(this).toggleClass("active");
        })
    }
})

$(function () {
    $(".toggleMenu").on("click", function () {
        $(".MyAccountMenu").toggleClass("active");
    })
})

//Rellax
$(function () {
    if ($('.rellax').length > 0) {
        var rellax = new Rellax('.rellax', {
            // center: true
            callback: function (position) {
                // callback every position change
                //console.log(position);
            }
        });
    }
})


$(function () {

    $(".custom-range").each(function (i, e) {

        let sliderValue = $(this).data('slide-range');
        let handle = $(this).find('.ui-slider-handle');

        $(this).slider({
            min: 0,
            max: sliderValue.length - 1,
            range: "min",
            create: function () {
                handle.text($(this).slider("value"));
            },
            slide: function (event, ui) {
                handle.text(sliderValue[ui.value]);
            } 
        })

    })
});

// ------------------------------------------
// Rellax.js
// Buttery smooth parallax library
// Copyright (c) 2016 Moe Amaya (@moeamaya)
// MIT license
//
// Thanks to Paraxify.js and Jaime Cabllero
// for parallax concepts
// ------------------------------------------

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define([], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.Rellax = factory();
    }
}(this, function () {
    var Rellax = function (el, options) {
        "use strict";

        var self = Object.create(Rellax.prototype);

        var posY = 0;
        var screenY = 0;
        var posX = 0;
        var screenX = 0;
        var blocks = [];
        var pause = true;

        // check what requestAnimationFrame to use, and if
        // it's not supported, use the onscroll event
        var loop = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            function (callback) { setTimeout(callback, 1000 / 60); };

        // check which transform property to use
        var transformProp = window.transformProp || (function () {
            var testEl = document.createElement('div');
            if (testEl.style.transform === null) {
                var vendors = ['Webkit', 'Moz', 'ms'];
                for (var vendor in vendors) {
                    if (testEl.style[vendors[vendor] + 'Transform'] !== undefined) {
                        return vendors[vendor] + 'Transform';
                    }
                }
            }
            return 'transform';
        })();

        // Default Settings
        self.options = {
            speed: -2,
            center: false,
            wrapper: null,
            round: true,
            vertical: true,
            horizontal: false,
            callback: function () { },
        };

        // User defined options (might have more in the future)
        if (options) {
            Object.keys(options).forEach(function (key) {
                self.options[key] = options[key];
            });
        }

        // By default, rellax class
        if (!el) {
            el = '.rellax';
        }

        // check if el is a className or a node
        var elements = typeof el === 'string' ? document.querySelectorAll(el) : [el];

        // Now query selector
        if (elements.length > 0) {
            self.elems = elements;
        }

        // The elements don't exist
        else {
            throw new Error("The elements you're trying to select don't exist.");
        }

        // Has a wrapper and it exists
        if (self.options.wrapper) {
            if (!self.options.wrapper.nodeType) {
                var wrapper = document.querySelector(self.options.wrapper);

                if (wrapper) {
                    self.options.wrapper = wrapper;
                } else {
                    throw new Error("The wrapper you're trying to use don't exist.");
                }
            }
        }


        // Get and cache initial position of all elements
        var cacheBlocks = function () {
            for (var i = 0; i < self.elems.length; i++) {
                var block = createBlock(self.elems[i]);
                blocks.push(block);
            }
        };


        // Let's kick this script off
        // Build array for cached element values
        var init = function () {
            for (var i = 0; i < blocks.length; i++) {
                self.elems[i].style.cssText = blocks[i].style;
            }

            blocks = [];

            screenY = window.innerHeight;
            screenX = window.innerWidth;
            setPosition();

            cacheBlocks();

            // If paused, unpause and set listener for window resizing events
            if (pause) {
                window.addEventListener('resize', init);
                pause = false;
            }
            animate();
        };

        // We want to cache the parallax blocks'
        // values: base, top, height, speed
        // el: is dom object, return: el cache values
        var createBlock = function (el) {
            var dataPercentage = el.getAttribute('data-rellax-percentage');
            var dataSpeed = el.getAttribute('data-rellax-speed');
            var dataZindex = el.getAttribute('data-rellax-zindex') || 0;

            // initializing at scrollY = 0 (top of browser), scrollX = 0 (left of browser)
            // ensures elements are positioned based on HTML layout.
            //
            // If the element has the percentage attribute, the posY and posX needs to be
            // the current scroll position's value, so that the elements are still positioned based on HTML layout
            var wrapperPosY = self.options.wrapper ? self.options.wrapper.scrollTop : (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);
            var posY = self.options.vertical ? (dataPercentage || self.options.center ? wrapperPosY : 0) : 0;
            var posX = self.options.horizontal ? (dataPercentage || self.options.center ? (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0) : 0;

            var blockTop = posY + el.getBoundingClientRect().top;
            var blockHeight = el.clientHeight || el.offsetHeight || el.scrollHeight;

            var blockLeft = posX + el.getBoundingClientRect().left;
            var blockWidth = el.clientWidth || el.offsetWidth || el.scrollWidth;

            // apparently parallax equation everyone uses
            var percentageY = dataPercentage ? dataPercentage : (posY - blockTop + screenY) / (blockHeight + screenY);
            var percentageX = dataPercentage ? dataPercentage : (posX - blockLeft + screenX) / (blockWidth + screenX);
            if (self.options.center) { percentageX = 0.5; percentageY = 0.5; }

            // Optional individual block speed as data attr, otherwise global speed
            var speed = dataSpeed ? dataSpeed : self.options.speed;

            var bases = updatePosition(percentageX, percentageY, speed);

            // ~~Store non-translate3d transforms~~
            // Store inline styles and extract transforms
            var style = el.style.cssText;
            var transform = '';

            // Check if there's an inline styled transform
            if (style.indexOf('transform') >= 0) {
                // Get the index of the transform
                var index = style.indexOf('transform');

                // Trim the style to the transform point and get the following semi-colon index
                var trimmedStyle = style.slice(index);
                var delimiter = trimmedStyle.indexOf(';');

                // Remove "transform" string and save the attribute
                if (delimiter) {
                    transform = " " + trimmedStyle.slice(11, delimiter).replace(/\s/g, '');
                } else {
                    transform = " " + trimmedStyle.slice(11).replace(/\s/g, '');
                }
            }

            return {
                baseX: bases.x,
                baseY: bases.y,
                top: blockTop,
                left: blockLeft,
                height: blockHeight,
                width: blockWidth,
                speed: speed,
                style: style,
                transform: transform,
                zindex: dataZindex
            };
        };

        // set scroll position (posY, posX)
        // side effect method is not ideal, but okay for now
        // returns true if the scroll changed, false if nothing happened
        var setPosition = function () {
            var oldY = posY;
            var oldX = posX;

            posY = self.options.wrapper ? self.options.wrapper.scrollTop : (document.documentElement || document.body.parentNode || document.body).scrollTop || window.pageYOffset;
            posX = self.options.wrapper ? self.options.wrapper.scrollLeft : (document.documentElement || document.body.parentNode || document.body).scrollLeft || window.pageXOffset;


            if (oldY != posY && self.options.vertical) {
                // scroll changed, return true
                return true;
            }

            if (oldX != posX && self.options.horizontal) {
                // scroll changed, return true
                return true;
            }

            // scroll did not change
            return false;
        };

        // Ahh a pure function, gets new transform value
        // based on scrollPosition and speed
        // Allow for decimal pixel values
        var updatePosition = function (percentageX, percentageY, speed) {
            var result = {};
            var valueX = (speed * (100 * (1 - percentageX)));
            var valueY = (speed * (100 * (1 - percentageY)));

            result.x = self.options.round ? Math.round(valueX) : Math.round(valueX * 100) / 100;
            result.y = self.options.round ? Math.round(valueY) : Math.round(valueY * 100) / 100;

            return result;
        };

        // Loop
        var update = function () {
            if (setPosition() && pause === false) {
                animate();
            }

            // loop again
            loop(update);
        };

        // Transform3d on parallax element
        var animate = function () {
            var positions;
            for (var i = 0; i < self.elems.length; i++) {
                var percentageY = ((posY - blocks[i].top + screenY) / (blocks[i].height + screenY));
                var percentageX = ((posX - blocks[i].left + screenX) / (blocks[i].width + screenX));

                // Subtracting initialize value, so element stays in same spot as HTML
                positions = updatePosition(percentageX, percentageY, blocks[i].speed);// - blocks[i].baseX;
                var positionY = positions.y - blocks[i].baseY;
                var positionX = positions.x - blocks[i].baseX;

                var zindex = blocks[i].zindex;

                // Move that element
                // (Set the new translation and append initial inline transforms.)
                var translate = 'translate3d(' + (self.options.horizontal ? positionX : '0') + 'px,' + (self.options.vertical ? positionY : '0') + 'px,' + zindex + 'px) ' + blocks[i].transform;
                self.elems[i].style[transformProp] = translate;
            }
            self.options.callback(positions);
        };

        self.destroy = function () {
            for (var i = 0; i < self.elems.length; i++) {
                self.elems[i].style.cssText = blocks[i].style;
            }

            // Remove resize event listener if not pause, and pause
            if (!pause) {
                window.removeEventListener('resize', init);
                pause = true;
            }
        };

        // Init
        init();

        // Start the loop
        update();

        // Allow to recalculate the initial values whenever we want
        self.refresh = init;

        return self;
    };
    return Rellax;
}));