(function(w,l,d,j){w.WLD={handlers:[],ready:function(fn){WLD.handlers.push(fn);}};
var a=l.createElement(d),m=l.getElementsByTagName(d)[0];
a.async=1,a.src=j,m.parentNode.insertBefore(a,m);})(window,document,"script","https://s.wldcdn.net/api/snippets/js/signup/33619");

(function ($) {

    "use strict";

    var $error = $('<div class="wld-error-overlay"></div>');

    function showError($field, message) {
        var field = $field[0];
        var pos = $field.offset();
        $error.css({
            top: (pos.top + $field.height()) + 'px',
            left: pos.left + 'px'
        })
        $error.text(message || field.validationMessage);
        $(document.body).append($error);
    };

    function hideError() {
        $error.remove();
    };

    function getCaptionForInput($input) {
        return getFieldForElement($input).children('.wld-field__caption');
    };

    function getFieldForElement($el) {
        return $el.closest('.wld-field');
    };

    function getFieldGroupForElement($el) {
        return $el.closest('.wld-fieldgroup');
    };

    function validateGroup($group) {
        var isValid = true;
        var inputs = getInputsForGroup($group);
        hideError();
        inputs.each(function(i, input) {
            if (isValid && !input.validity.valid) {
                input.focus();
                showError($(input));
                isValid = false;
            }
        })
        return isValid;
    };

    function getActiveInput() {
        return $(document.activeElement);
    };

    function getInputsForGroup($group) {
        return $group.find('input,select');
    };

    function MultiStepForm(el) {

        var currentStep = 0;

        function moveToNextField() {
            var $input = getActiveInput();
            var $group = getFieldGroupForElement($input);
            var $inputs = getInputsForGroup($group);
            var index = $inputs.index($input);
            if (index === $inputs.length - 1) {
                return moveToNextGroup();
            } else {
                $inputs[index + 1].focus();
                return true;
            }
        };

        function moveToPreviousField() {
            var $input = getActiveInput();
            var $group = getFieldGroupForElement($input);
            var $inputs = getInputsForGroup($group);
            var index = $inputs.index($input);
            if (index === 0) {
                return moveToPreviousGroup();
            } else {
                $inputs[index - 1].focus();
                return true;
            }
        };

        function moveToNextGroup() {
            var $currentGroup = $groups.eq(currentStep);
            var $nextGroup = $groups.eq(currentStep + 1);

            if (validateGroup($currentGroup)) {
                if ($nextGroup.length) {
                    currentStep++;
                    showGroup();
                    getInputsForGroup($nextGroup)[0].focus();
                    return true;
                } else {
                    submitForm();
                }
                return false;
            }
            return false;
        };

        function submitForm() {
            el.submit();
        };

        function moveToPreviousGroup() {
            var inputs;
            var $previousGroup = $groups.eq(currentStep - 1)
            if (currentStep > 0) {
                currentStep--;
                showGroup();
                inputs = getInputsForGroup($previousGroup);
                inputs[inputs.length - 1].focus();
                return true;
            }
            return false;
        };

        function showGroup() {
            $groups.
                removeClass('wld-fieldgroup--active').
                eq(currentStep).
                addClass('wld-fieldgroup--active');

            if (currentStep === $groups.length - 1) {
                $submit.text('Sign up');
            } else {
                $submit.text('Next');
            }
        };


        var $el = $(el);
        this.$el = $el;
        var $fields = $el.find('.wld-form__fields');
        var $submit = $el.find('.wld-form__actions button');

        // wrap all fields in a field-group
        $el.find('.wld-field').wrap('<div class="wld-fieldgroup"></div>');

        // add terms to the gender field
        var $termsField = getFieldForElement($('[name=termsCheck]'));
        var $genderField = getFieldForElement($('[name=gender]'));
        $termsField.insertAfter($genderField);

        // add t&c's to the gender field
        var $privacyField = getFieldForElement($('[name=privacyCheck]'));
        var $passwordField = getFieldForElement($('[name=password]'));
        $privacyField.insertAfter($passwordField);

        // remove any empty field-groups
        $el.find('.wld-fieldgroup:empty').remove();

        var $groups = $el.find('.wld-fieldgroup');


        // Apply the label as placeholder text
        $groups.each(function(i) {
            var $inputs = getInputsForGroup($groups.eq(i));
            $inputs.each(function(j) {
                var $input = $inputs.eq(j);
                var caption = getCaptionForInput($input).text();
                if ($input.is('.wld-input--select')) {
                    var firstOption = $input[0].options[0];
                    if (firstOption.text.toLowerCase() === 'please select') {
                        firstOption.text = caption;
                    }
                } else {
                    $input.attr('placeholder', caption);
                }
            });
        });

        $('.wld-button').click($.proxy(function(e) {
            e.preventDefault();
            moveToNextGroup();
        }, this));

        $fields.keydown($.proxy(function(e) {
            if (e.keyCode === 9 || e.keyCode === 13) {
                e.preventDefault();
                if (e.shiftKey) {
                    moveToPreviousField();
                } else {
                    moveToNextField();
                }
            }
        }, this));

        $fields.on('focusin click', function(e) {
            hideError();
        });

        $(window).resize(function(e) {
            hideError();
        });

        showGroup();
    };

    $.fn.multiStepForm = function (method) {
        this.each(function (i, el) {
            var form = new MultiStepForm(el);
            form.$el.data("MultiStepForm", form);
        });
        return this;
    };

}(jQuery));

$(document).ready(function() {
    WLD.ready(function() {
        $('.signup__form form').multiStepForm();
    });
});