BearJS/ui_refresh.css

## ui_refresh.css
/*
    ----------------------------------------------------------
    cl5976 | Written by Paul Liu | paul.liu@open.ac.uk
    ----------------------------------------------------------
    The Open University © Copyright 2015. All rights reserved
    ----------------------------------------------------------
    v1.10 Added fork of OU.Widgets Tabs styling
*/
/*----------------------------------------------------------General Styles*/
/*Tabs*/
.cl-tab .background {
    padding: 1em;
    background: #f8f8f8;
}

.cl-tab .panels > div {
    display: none;
    border: 4px solid #e7eff7;
    background: #fff;
    clear: both;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1em;
}

.cl-tab .panels > div.active {
    display: block;
}

.cl-tab .tabs {
    padding-left: .5em;
}

.cl-tab .tabs a {
    margin-top: .5em;
    float: left;
    padding: 1em;
    border: 1px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
}

.cl-tab .tabs a.active {
    background: #e7eff7;
    border: 1px solid #e7eff7;
    border-bottom: 0;
    border-bottom: 0px;
}

@media (max-width: 767px) {
    .cl-tab .tabs {
        padding-left: 0;
    }

    .cl-tab .tabs a {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-color: #e7eff7;
        border-image: none;
        border-style: solid;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-width: 1px 1px 0;
        float: left;
        margin-bottom: 0;
        margin-top: 0;
        /*  padding: 1em; */
        white-space: nowrap;
        width: 100%;
    }

    .cl-tab .tabs a.active {
        background: none repeat scroll 0 0 #e7eff7;
        border-color: #DDDDDD #DDDDDD -moz-use-text-color;
        border-image: none;
        border-style: solid solid none;
        border-width: 1px 1px 0 .5em;
        padding-left: .6em;
    }
}

/*Fluid Iframes*/
.cl-fluidMedia {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.cl-fluidMedia.medium {
    padding-bottom: 34.25%;
}

.cl-fluidMedia.small {
    padding-bottom: 24.25%;
}

.cl-fluidMedia iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*Input group*/
.cl-inputGroup {
    position: relative;
    display: table;
    border-collapse: separate;
}

.cl-inputGroup-btn {
    border-radius: 4px;
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

.cl-inputGroup > :first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.cl-inputGroup > :last-child > button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: .48em .8em .49em;
}

/*IE hack to get legends to wrap*/
legend {
    white-space: normal;
    width: 100%;
    *margin-left: -7px;
}

legend span {
    display: block;
    width: 100%;
    font-size: 1.4em;
}

legend.h2 {
    margin-bottom: .67em;
    margin-top: .67em;
    font-family: CaratReg, "Book Antiqua", Georgia, serif;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    float: left;
}

.no-margin {
    margin: 0;
}

.no-padding {
    padding: 0;
}

.cl-floatLeft,
.int-floatLeft {
    float: left;
}

.cl-floatRight,
.int-floatRight {
    float: right;
}

label.int-floatRight,
.int-label.int-floatRight {
    float: right;
    text-align: right;
}

.hidden {
    display: none;
}

.hidden.visible {
    display: block;
}

button[disabled],
button:disabled,
button.disabled,
a.int-button.disabled,
input[type="button"][disabled],
input[type="button"]:disabled {
    border-color: #8797b0;
    background-color: #e7eff7;
    color: #8797b0;
    cursor: not-allowed;
}

/*----------------------------------------------------------Input Focus Tooltip*/
.cl-inputFocusTooltipContainer {
    position: relative;
}

.cl-inputFocusTooltip {
    display: none;
    color: #0b55a8;
    background-color: #FFC23D;
    border-radius: 4px;
    padding: .8em;
    position: absolute;
    width: 100%;
}

.interaction .cl-inputFocusTooltip,
.interaction .cl-inputFocusTooltip p,
.cl-inputFocusTooltip p,
.cl-inputFocusTooltip ul,
.cl-inputFocusTooltip li {
    color: #0b55a8;
}

.cl-inputFocusTooltip .p-indent {
    margin-left: .5em;
}

.cl-fullBleedBottomPadding {
    padding-bottom: 3em;
}

/*----------------------------------------------------------Password Check List*/
.cl-passwordCheckListBullet {
    position: absolute;
    left: .2em;
    top: .2em;
}

.generatedcontent .cl-inputFocusTooltip ul li:before {
    /*    content: "\2022";*/
    content: "";
    padding-right: .5em;
    color: #0b55a8;
    font-size: 1.6em;
    position: absolute;
    left: -2px;
    top: 0;
    line-height: .8;
}

.cl-passwordCheckListBullet.int-icon-times-circle {
    color: #A02A1E;
}

.cl-passwordCheckListBullet.int-icon-check-circle {
    color: #00643C;
}

/*----------------------------------------------------------Modal*/
.cl-modal h2,
.cl-modal h3,
.cl-modal h4,
.cl-modal h5,
.cl-modal h6 {
    color: #fff;
}

.cl-modal-close-button {
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    background: #ffc23d;
    width: 30px;
    height: 30px;
    font-size: 17.6px;
    padding: 0;
    margin: 0;
    position: absolute;
    right: .8em;
    top: .8em;
    z-index: inherit;
}

.cl-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background: url(img/overlay-075.png);
    background: rgba(0, 0, 0, .75);
    z-index: 999;
}

.cl-modal-overlay:focus,
.cl-modal:focus {
    outline: 0;
}

.cl-modal-container {
    position: relative;
}

.cl-modal {
    position: absolute;
    padding: 2em;
    background: #0b55a8;
    color: #fff;
    overflow: auto;
    border-radius: 4px;
    z-index: 9999;
    width: 100%;
    margin: 0 auto;
    max-width: 1180px;
    max-height: 100%;
}

.cl-modal.small {
    max-width: 500px;
}

.cl-modal.medium {
    max-width: 900px;
}

@media (min-width: 960px) {
    .cl-floatRight-lg {
        float: right;
    }

    .cl-floatLeft-lg {
        float: left;
    }
}

@media (max-width: 959px) {
    .cl-floatRight-md {
        float: right;
    }

    .cl-floatLeft-md {
        float: left;
    }
}

@media (max-width: 767px) {
    .cl-mobile-hidden,
    .cl-hidden-sm {
        display: none;
    }

    label.int-floatRight,
    .int-label.int-floatRight {
        float: left;
        text-align: left;
    }

    .cl-inputFocusTooltip {
        position: relative;
    }

    .cl-floatRight-sm {
        float: right;
    }

    .cl-floatLeft-sm {
        float: left;
    }
}

## ui_refresh.js
// ----------------------------------------------------------
// ui_refresh | Written by Paul Liu | paul.liu@open.ac.uk
// ----------------------------------------------------------
// The Open University © Copyright 2015. All rights reserved
// ----------------------------------------------------------

(function ($, ui) {
    ui.version = 'ui_refresh | Written by Paul Liu | paul.liu@open.ac.uk | v1.25 Added fork of OU.Widgets tabs';
    ui.dependencies = 'jQuery,jQueryUI';

    var $body = $('body');

    //Methods
    ui.maxCharLengthReached = function ($input, maximumCharLength, removeAlertFromDOMDelay) {
        var delay = removeAlertFromDOMDelay || 5000,
            valueLength,
            maxLength = maximumCharLength || $input.attr('maxlength'),
            message = '<p>The maximum character length of ' + maxLength + ' has been reached on this field.</p>';

        $input.keyup(function () {
            valueLength = this.value.length;

            if (valueLength == maxLength) {
                var alert = new aria.Alert({
                    message: message,
                    $alertTargetContainer: $body,
                    destroyDelay: delay
                });
            }
        });
    };
    ui.checkFunction = function (fn, base) {
        if (typeof fn === 'function') {
            fn(base);
        }
    };
    ui.matchChecker = function ($input1, $input2, event) {
        $input2.keyup(function () {
            var value = $(this).val(),
                input1Value = $input1.val();

            if (value === input1Value && input1Value.length > 0) {
                $input2.trigger(event);
            }
        });
    };
    ui.loopObject = function (object, callback) {
        var key;

        for (key in object) {
            if (object.hasOwnProperty(key)) {
                callback(key, object[key])
            }
        }
    };
    ui.preventFormSubmit = function ($input, $button) {
        $input.keydown(function (e) {
            if (e.which === 13) {
                e.preventDefault();
                if ($button.length) {
                    $button.focus().trigger('click');
                }
            }
        });
    };
    ui.obscurePasswordOnBlur = function ($input) {
        $input.on({
            blur: function () {
                $input.attr('type', 'password');
            },
            focus: function () {
                $input.attr('type', 'text');
            }
        });
    };

    //Aria
    var aria = {};
    aria.hidden = function ($el) {
        var isHidden = $el.is(':hidden');

        $el.attr('aria-hidden', isHidden).attr('aria-expanded', !isHidden);
    };

    aria.Alert = function (options) {
        var base = this;

        base.opts = $.extend({}, base.defaults, options);

        if (base.opts.init) {
            base.init(options);
        }
    };
    aria.Alert.prototype = {
        defaults: {
            init: true, //set as false to skip the automatic initialisation. Init manually.
            message: '',
            $alertTargetContainer: null, //Leave as null if you want to manually raise the alert by appending it to the DOM at a later time
            destroyDelay: null, //leave as null to prevent automatic removal of alert from dom. Remember to manually remove when alert not needed anymore.
            classes: 'cl-screenReaderAlert int-hide',
            attributes: {
                'role': 'alert'
            }
        },
        init: function () {
            var base = this,
                opts = base.opts;

            base.buildAlert(opts.message, opts.classes, opts.attributes);
            if (opts.$alertTargetContainer !== null) {
                base.appendAlertToDOM(opts.$alertTargetContainer);
            }
            if (opts.destroyDelay !== null) {
                base.removeAlertFromDOM(opts.destroyDelay);
            }

            return base;
        },
        buildAlert: function (message, classes, attributes) {
            var base = this,
                opts = base.opts;

            //Build alert
            base.$alert = $('<div>' + message + '</div>').addClass(classes);

            //Add attributes
            ui.loopObject(attributes, function (key, value) {
                base.$alert.attr(key.toString(), value.toString());
            });

            return base;
        },
        appendAlertToDOM: function ($container) {
            var base = this;

            $container.append(base.$alert);

            return base;
        },
        removeAlertFromDOM: function (delay) {
            var base = this;

            if (delay) {
                setTimeout(function () {
                    base.$alert.remove();
                }, delay);
            } else {
                base.$alert.remove();
            }

            return base;
        }
    };

    //Prototypes
    ui.EventPreventDefault = function ($el, options) {
        var base = this;

        base.opts = $.extend({}, this.defaults, options);
        base.$formEl = $el;
        base.init();
    };
    ui.EventPreventDefault.prototype = {
        defaults: {
            events: 'paste cut copy',
            ariaAlertsMarkup: {
                'paste': 'Paste prevented on this field. Please retype.',
                'cut': 'Cut prevented on this field.',
                'copy': 'Copy prevented on this field.'
            },
            destroyDelay: 5000
        },
        init: function () {
            return this.setEventHandler();
        },
        setEventHandler: function () {
            var base = this,
                o = base.opts,
                events = o.events,
                eventType;

            base.$formEl.on(events, function (e) {
                e.preventDefault();
                eventType = e.type;

                base.ariaAlert(o.ariaAlertsMarkup[eventType], o.destroyDelay);
            });

            return base;
        },
        ariaAlert: function (message, delay) {
            var alert = new aria.Alert({
                message: message,
                $alertTargetContainer: $body,
                destroyDelay: delay
            });
        }
    };

    ui.Tooltip = function ($input, $tooltipContainer, options) {
        this.opts = $.extend({}, this.defaults, options);
        this.$input = $input;
        this.$tooltipContainer = $tooltipContainer;
        this.$tooltip = $tooltipContainer.find('.cl-inputFocusTooltip').uniqueId();
        this.init(this.opts);
    };
    ui.Tooltip.prototype = {
        defaults: {
            alert: false,
            customTrigger: false,
            customTriggerShowEvent: undefined,
            customTriggerHideEvent: undefined,
            showTooltipCallback: undefined,
            hideTooltipCallback: undefined
        },
        init: function (opts) {
            var base = this;

            if (opts.customTrigger) {
                base.setCustomTriggerHandlers(opts);
            } else {
                base.setInputEventHandlers();
            }
            return base.aria();
        },
        setCustomTriggerHandlers: function (opts) {
            var base = this,
                eventHandlers = {};

            eventHandlers[opts.customTriggerShowEvent] = function () {
                base.showTooltip();
            };
            eventHandlers[opts.customTriggerHideEvent] = function () {
                base.hideTooltip();
            };

            base.$input.on(eventHandlers);

            return base.setEscapeHandler();
        },
        setInputEventHandlers: function () {
            var base = this;

            base.$input.on({
                focus: function () {
                    base.showTooltip();
                },
                blur: function () {
                    base.hideTooltip();
                }
            });

            return base.setEscapeHandler();
        },
        setEscapeHandler: function () {
            var base = this;

            base.$input.on({
                keyup: function (e) {
                    if (e.which == 27) {
                        base.hideTooltip();
                    }
                }
            });

            return base;
        },
        showTooltip: function () {
            var base = this,
                o = base.opts,
                $tooltip = base.$tooltip,
                tooltipIsVisible = $tooltip.is(':visible');

            if (!tooltipIsVisible) {
                $tooltip.show();
                base.setAriaHiddenExpanded();
                ui.checkFunction(o.showTooltipCallback, base);
            }
        },
        hideTooltip: function () {
            var base = this,
                o = base.opts,
                $tooltip = base.$tooltip,
                tooltipIsVisible = $tooltip.is(':visible');

            if (tooltipIsVisible) {
                $tooltip.hide();
                base.setAriaHiddenExpanded();
                ui.checkFunction(o.hideTooltipCallback, base);
            }
        },
        setAriaHiddenExpanded: function () {
            var $tooltip = this.$tooltip;

            $tooltip.attr({
                'aria-hidden': $tooltip.is(':hidden'),
                'aria-expanded': $tooltip.is(':visible')
            });
        },
        aria: function () {
            var base = this,
                o = base.opts,
                tooltipId = base.$tooltip.attr('role', (o.alert ? 'alert' : 'tooltip')).attr('id');

            base.$input.attr({
                'aria-haspopup': true,
                'aria-describedby': tooltipId,
                'aria-controls': tooltipId
            });

            base.setAriaHiddenExpanded();

            return base;
        }
    };

    ui.PasswordCheckList = function ($input, $checkList, options) {
        var base = this;

        base.opts = $.extend({}, this.defaults, options);
        base.$input = $input;
        base.$icons = $checkList.find('.cl-passwordCheckListBullet');
        base.$screenReaderAlertContainer = $('<div id="cl-passwordCheckList-screenReaderAlert" aria-live="assertive"></div>').appendTo('body');
        base.init();
    };
    ui.PasswordCheckList.prototype = {
        defaults: {
            regEx: {
                length: [8, 12],
                number: /[0-9]/,
                upperCase: /[A-Z]/,
                lowerCase: /[a-z]/,
                specialChar: /[!$%^&*\[\]@#\\\?\+\-_]/
            },
            iconsClasses: {
                defaultClass: 'int-icon-circle',
                checkedClass: 'int-icon-check-circle',
                uncheckedClass: 'int-icon-times-circle'
            },
            numberOfConditions: 5,
            alertConditions: [
                'be 8 to 12 characters in length',
                'include a number',
                'include a lower case letter',
                'include an upper case letter',
                'include a special character from the following, exclamation mark, dollar, percentage, caret, ampersand, ' +
                'asterisk, left bracket, right bracket, at sign, number sign, question mark, plus, hyphen, underscore'
            ],
            conditionsMetPrefixMarkup: '<p>The following password conditions have been met, password must: </p>',
            conditionsUnMetPrefixMarkup: '<p>Password conditions that still need to be met are, password must: </p>',
            conditionsAllMetMarkup: '<p>All 5 password conditions have been met.</p>'
        },
        init: function () {
            return this.setInputKeyUpHandler();
        },
        setInputKeyUpHandler: function () {
            var base = this,
                value,
                conditionsArray,
                o = base.opts,
                re = o.regEx,
                $input = base.$input,
                numberOfConditions = o.numberOfConditions;

            $input.keyup(function () {
                value = $input.val();
                conditionsArray = base.checkConditions(value, re);
                base.setIcons(value, numberOfConditions, conditionsArray);

                if ((value.length > 0)) {
                    var alert = new aria.Alert({
                        message: base.getScreenReaderAlertMessage(value, numberOfConditions, conditionsArray),
                        $alertTargetContainer: base.$screenReaderAlertContainer.empty()
                    });
                }
            });

            return base;
        },
        setIcons: function (value, numberOfConditions, conditionsArray) {
            var base = this,
                iconsClasses = base.opts.iconsClasses;

            if (value.length) {
                for (var i = 0; i < numberOfConditions; i++) {
                    base.$icons.eq(i)
                        .removeClass(iconsClasses.defaultClass)
                        .removeClass(iconsClasses.checkedClass)
                        .removeClass(iconsClasses.uncheckedClass)
                        .addClass((conditionsArray[i] ? iconsClasses.checkedClass : iconsClasses.uncheckedClass));
                }
            } else {
                base.$icons
                    .addClass(iconsClasses.defaultClass)
                    .removeClass(iconsClasses.checkedClass)
                    .removeClass(iconsClasses.uncheckedClass);
            }
        },
        checkConditions: function (inputValue, regEx) {
            var valueLength = inputValue.length;

            //8 to 12 characters long
            var reCharLength = (valueLength <= regEx.length[1] && valueLength >= regEx.length[0]);
            //A number
            var reNumber = regEx.number.test(inputValue);
            //An Upper Case
            var reUpperCase = regEx.upperCase.test(inputValue);
            //include one lowercase letter
            var reLowerCase = regEx.lowerCase.test(inputValue);
            //include one special-character from the following: ! $ % ^ & * [ ] @ # ? + - _
            var reSpecialChar = regEx.specialChar.test(inputValue);

            return [reCharLength, reNumber, reLowerCase, reUpperCase, reSpecialChar];
        },
        listItem: function (str) {
            return '<li>' + str + '</li>'
        },
        getScreenReaderConditionsMessage: function (conditionsArray) {
            var numberOfConditions = conditionsArray.length,
                listItems = '',
                base = this;

            if (numberOfConditions === 1) {
                return '<p>' + conditionsArray[0] + '</p>'
            } else {
                for (var i = 0; i < numberOfConditions; i++) {
                    listItems += base.listItem(conditionsArray[i]);
                }

                return '<ul>' + listItems + '</ul>';
            }
        },
        getScreenReaderAlertMessage: function (value, numberOfConditions, conditionsArray) {
            var base = this,
                o = base.opts,
                alertConditions = o.alertConditions,
                conditionsAllMetMarkup = o.conditionsAllMetMarkup,
                message,
                conditions = {
                    met: [],
                    unmet: []
                };

            for (var i = 0; i < numberOfConditions; i++) {
                conditions[(conditionsArray[i] ? 'met' : 'unmet')].push(alertConditions[i]);
            }

            if (conditions.met.length === numberOfConditions) {
                message = conditionsAllMetMarkup;
            } else {
                message =
                    o.conditionsMetPrefixMarkup + base.getScreenReaderConditionsMessage(conditions.met) +
                    o.conditionsUnMetPrefixMarkup + base.getScreenReaderConditionsMessage(conditions.unmet);
            }

            return message;
        }
    };

    ui.Modal = function ($container, options) {
        var base = this, o, s;
        base.$modalContainer = $container;
        base.opts = $.extend({}, base.defaults, options);

        o = base.opts;
        s = base.opts.selectors;

        base.$modal = $(s.modal, $container);
        base.modalId = base.$modal.uniqueId().attr('id');
        base.$overlay = $(s.overlay, $container);
        base.$closeButton = $(s.closeButton, $container);
        base.$background = $('html, body');
        base.$modalOpener = o.$modalOpener;
        base.$window = $(window);
        base.$scrollableElement = $(o.scrollableElementSelector);
        base.scrollPosition = undefined;
        base.init();
    };
    ui.Modal.prototype = {
        defaults: {
            selectors: {
                modal: '.cl-modal',
                overlay: '.cl-modal-overlay',
                closeButton: '.cl-modal-close-button'
            },
            closeModalButtonCallback: undefined,
            hideModalCallback: undefined,
            showModalCallback: undefined,
            $modalOpener: '',
            rememberScrollPosition: true,
            scrollableElementSelector: document,
            init: undefined //Define functions to fire on init;
        },
        init: function () {
            var base = this,
                o = base.opts;

            base.setCloseButtonClickHandler()
                .setModalOpenerClickHandler()
                .aria();

            base.invokeCallback(o.init);

            return base;
        },
        setCloseButtonClickHandler: function () {
            var base = this,
                callback = base.opts.closeModalButtonCallback,
                $modalOpener = base.$modalOpener;

            base.$closeButton.click(function () {
                base.hideModal();
                if ($modalOpener.length) {
                    $modalOpener.focus();
                }
                base.invokeCallback(callback);
            });

            return base;
        },
        invokeCallback: function (callback) {
            var base = this;

            if (typeof callback === 'function') {
                callback(base);
            }
        },
        setWindowsResizeHandler: function (bool) {
            var base = this,
                $window = base.$window;

            if (bool) {
                $window.on('resize.cl-modal', function () {
                    base.positionModal();
                });
            } else {
                $window.off('.cl-modal');
            }

            return base;
        },
        showModal: function () {
            var base = this,
                callback = base.opts.showModalCallback;

            base.$overlay.show(0, function () {
                base.positionModal()
                    .getBackgroundScrollPosition()
                    .setWindowsResizeHandler(true)
                    .setBackgroundScroll(false)
                    .setModalTabbing(true)
                    .setFocusToFirstTabbableElement()
                    .invokeCallback(callback);
            });

            return base;
        },
        hideModal: function () {
            var base = this,
                callback = base.opts.hideModalCallback;

            base.$overlay.hide(0, function () {
                base.setWindowsResizeHandler(false)
                    .setBackgroundScroll(true)
                    .setBackgroundScrollPosition()
                    .setModalTabbing(false)
                    .invokeCallback(callback);
            });

            return base;
        },
        setFocusToFirstTabbableElement: function () {
            var base = this;

            base.$modal.find(':tabbable').filter(':first').focus();

            return base;
        },
        positionModal: function () {
            var base = this;

            base.$modal.position({
                my: "center",
                at: "center",
                of: base.$overlay
            });

            return base;
        },
        setBackgroundScroll: function (bool) {
            var base = this,
                css = (bool ? {
                    'overflow': 'auto',
                    'height': 'auto'
                } : {
                    'overflow': 'hidden',
                    'height': '100%'
                });

            base.$background.css(css);

            return base;
        },
        getBackgroundScrollPosition: function () {
            var base = this,
                o = base.opts;

            if (o.rememberScrollPosition) {
                base.scrollPosition = base.$scrollableElement.scrollTop();
            }

            return base;
        },
        setBackgroundScrollPosition: function () {
            var base = this,
                o = base.opts;

            if (o.rememberScrollPosition) {
                base.$scrollableElement.scrollTop(base.scrollPosition);
            }

            return base;
        },
        aria: function () {
            var base = this;

            base.$modal.attr({
                'tabindex': -1,
                'role': 'dialog'
            });

            base.$overlay.attr({
                'role': 'presentation',
                'tabindex': '-1'
            });

            base.$closeButton.attr({
                'aria-label': 'Close modal'
            });

            return base;
        },
        setModalTabbing: function (bool) {
            var base = this;

            if (bool) {
                base.$modal.on('keydown.cl-modal', function (event) {
                    if (event.keyCode !== 9) {
                        return;
                    }
                    var tabbables = $(':tabbable', this),
                        first = tabbables.filter(':first'),
                        last = tabbables.filter(':last');

                    if (event.target === last[0] && !event.shiftKey) {
                        first.focus(1);
                        return false;
                    } else if (event.target === first[0] && event.shiftKey) {
                        last.focus(1);
                        return false;
                    }
                });
            } else {
                base.$modal.off('.cl-modal');
            }

            return base;
        },
        setModalOpenerClickHandler: function () {
            var base = this,
                $modalOpener = base.$modalOpener;

            if ($modalOpener.length) {
                $modalOpener.click(function (e) {
                    e.preventDefault();
                    base.showModal();
                }).attr('aria-controls', base.modalId);
            }

            return base;
        }
    };

    ui.Tabs = function ($element, options) {
        var base = this;

        base.$element = $element;
        base.$tabsContainer = $element.children('div').eq(0);
        base.$tabs = base.$tabsContainer.find('a');
        base.$tabpanelsContainer = $element.children('div').eq(1);
        base.$tabpanels = base.$tabpanelsContainer.children('div');
        base.options = $.extend({}, base.defaults, options);
        base.$activeTab = undefined;
        base.$activePanel = undefined;
        base.init();
    };
    ui.Tabs.prototype = {
        defaults: {
            activeClass: 'active',
            setHash: true //Set to false to prevent hash added after tab click
        },
        init: function () {
            return this.setActiveInitialActiveTabAndPanel().setTabsClickHandler().aria();
        },
        setHash: function (hash, setHash) {
            if (setHash) {
                if (history.pushState) {
                    history.pushState(null, null, hash);
                }
                else {
                    //Prevents flickering
                    var $panel = $(hash),
                        id = $panel.attr('id');

                    $panel.removeAttr('id'); //Remove id before location is set
                    window.location.hash = hash; //Set the location
                    $panel.attr('id', id); //Add id back in
                }
            }
        },
        setActiveInitialActiveTabAndPanel: function () {
            var base = this,
                active = base.options.activeClass,
                hashes = (function () {
                    var hashes = [];

                    base.$tabs.each(function () {
                        hashes.push($(this).attr('href'));
                    });

                    return hashes;
                })(),
                location = window.location.hash,
                setHash = base.options.setHash;

            //Set active tab from class or hash
            if (location.length && ($.inArray(location, hashes) && setHash)) {
                base.$activeTab = base.$tabs.removeClass(active).filter('[href="' + location + '"]').addClass(active);
            } else {
                base.$activeTab = base.$tabs.filter('.' + active)
            }

            //Set initial active panel
            base.$activePanel = base.$tabpanels.eq(base.$tabsContainer.find('.' + active).index()).addClass(active);

            return base;
        },
        setTabsClickHandler: function () {
            var base = this,
                active = base.options.activeClass,
                setHash = base.options.setHash;

            base.$tabsContainer.on('click', 'a', function (e) {
                e.preventDefault();

                //Remove active class from last active tabs and panels
                base.$activePanel.removeClass(active);
                base.$activeTab.removeClass(active);

                //Add active class to tab and panel
                var $tab = $(this).addClass(active),
                    $panel = base.$tabpanels.eq($tab.index()).addClass(active);

                //Set window location
                base.setHash($tab.attr('href'), setHash);

                base.$activeTab = $tab.trigger({
                    type: "cl-tab-activated",
                    $tab: $tab,
                    $panel: $panel
                });
                base.$activePanel = $panel.trigger({
                    type: "cl-tabpanel-active",
                    $tab: $tab,
                    $panel: $panel
                });
            });

            return base;
        },
        aria: function () {
            var base = this,
                ids = [];

            base.$tabsContainer.attr('role', 'tablist');

            base.$tabpanels
                .uniqueId()
                .attr('role', 'tabpanel')
                .each(function () {
                    ids.push($(this).attr('id'));
                    aria.hidden($(this));
                });

            base.$tabs
                .each(function () {
                    $(this).attr({
                        'aria-controls': ids[$(this).index()],
                        'role': 'tab',
                        'aria-selected': 'false'
                    });
                })
                .filter('.' + this.options.activeClass)
                .attr('aria-selected', 'true');

            //Aria hidden/expanded for tab panels
            base.$tabpanelsContainer.on('cl-tabpanel-active', 'div', function () {
                base.$tabpanels.each(function () {
                    aria.hidden($(this));
                })
            });
            //Aria selected for tabs
            base.$tabsContainer.on('cl-tab-activated', 'a', function () {
                base.$tabs.not('.' + base.options.activeClass).attr('aria-selected', 'false');
                $(this).attr('aria-selected', 'true');
            });

            return base;
        }
    };

    //jQuery Methods
    $.fn.autoFillChecker = function (callback, timeout) {
        var $base = $(this),
            lastValue = $(this).val(),
            currentValue = '',
            autoFillHasOccurred;
        setTimeout(checkInputValueForAutoFill, timeout);

        function checkInputValueForAutoFill() {
            currentValue = $base.val();
            autoFillHasOccurred = currentValue !== lastValue;

            if (autoFillHasOccurred) {
                lastValue = currentValue;
                callback();
            }
            setTimeout(checkInputValueForAutoFill, timeout);
        }

        return $base;
    };

    //Expose aria prototypes to global scope
    ui.aria = aria;

    //Create alias for ui_refresh
    window.cl5976 = ui;
})(jQuery, window.ui_refresh = window.ui_refresh || {});
	/*
	----------------------------------------------------------
	cl5976 \| Written by Paul Liu \| paul.liu@open.ac.uk
	----------------------------------------------------------
	The Open University © Copyright 2015. All rights reserved
	----------------------------------------------------------
	v1.10 Added fork of OU.Widgets Tabs styling
	*/
	/----------------------------------------------------------General Styles/
	/Tabs/
	.cl-tab .background {
	padding: 1em;
	background: #f8f8f8;
	}

	.cl-tab .panels > div {
	display: none;
	border: 4px solid #e7eff7;
	background: #fff;
	clear: both;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	padding: 1em;
	}

	.cl-tab .panels > div.active {
	display: block;
	}

	.cl-tab .tabs {
	padding-left: .5em;
	}

	.cl-tab .tabs a {
	margin-top: .5em;
	float: left;
	padding: 1em;
	border: 1px solid transparent;
	margin-bottom: -2px;
	white-space: nowrap;
	}

	.cl-tab .tabs a.active {
	background: #e7eff7;
	border: 1px solid #e7eff7;
	border-bottom: 0;
	border-bottom: 0px;
	}

	@media (max-width: 767px) {
	.cl-tab .tabs {
	padding-left: 0;
	}

	.cl-tab .tabs a {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-color: #e7eff7;
	border-image: none;
	border-style: solid;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-width: 1px 1px 0;
	float: left;
	margin-bottom: 0;
	margin-top: 0;
	/* padding: 1em; */
	white-space: nowrap;
	width: 100%;
	}

	.cl-tab .tabs a.active {
	background: none repeat scroll 0 0 #e7eff7;
	border-color: #DDDDDD #DDDDDD -moz-use-text-color;
	border-image: none;
	border-style: solid solid none;
	border-width: 1px 1px 0 .5em;
	padding-left: .6em;
	}
	}

	/Fluid Iframes/
	.cl-fluidMedia {
	position: relative;
	padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	}

	.cl-fluidMedia.medium {
	padding-bottom: 34.25%;
	}

	.cl-fluidMedia.small {
	padding-bottom: 24.25%;
	}

	.cl-fluidMedia iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

	/Input group/
	.cl-inputGroup {
	position: relative;
	display: table;
	border-collapse: separate;
	}

	.cl-inputGroup-btn {
	border-radius: 4px;
	display: table-cell;
	width: 1%;
	white-space: nowrap;
	vertical-align: middle;
	}

	.cl-inputGroup > :first-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	}

	.cl-inputGroup > :last-child > button {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding: .48em .8em .49em;
	}

	/IE hack to get legends to wrap/
	legend {
	white-space: normal;
	width: 100%;
	*margin-left: -7px;
	}

	legend span {
	display: block;
	width: 100%;
	font-size: 1.4em;
	}

	legend.h2 {
	margin-bottom: .67em;
	margin-top: .67em;
	font-family: CaratReg, "Book Antiqua", Georgia, serif;
	font-weight: 400;
	font-style: normal;
	color: #fff;
	float: left;
	}

	.no-margin {
	margin: 0;
	}

	.no-padding {
	padding: 0;
	}

	.cl-floatLeft,
	.int-floatLeft {
	float: left;
	}

	.cl-floatRight,
	.int-floatRight {
	float: right;
	}

	label.int-floatRight,
	.int-label.int-floatRight {
	float: right;
	text-align: right;
	}

	.hidden {
	display: none;
	}

	.hidden.visible {
	display: block;
	}

	button[disabled],
	button:disabled,
	button.disabled,
	a.int-button.disabled,
	input[type="button"][disabled],
	input[type="button"]:disabled {
	border-color: #8797b0;
	background-color: #e7eff7;
	color: #8797b0;
	cursor: not-allowed;
	}

	/----------------------------------------------------------Input Focus Tooltip/
	.cl-inputFocusTooltipContainer {
	position: relative;
	}

	.cl-inputFocusTooltip {
	display: none;
	color: #0b55a8;
	background-color: #FFC23D;
	border-radius: 4px;
	padding: .8em;
	position: absolute;
	width: 100%;
	}

	.interaction .cl-inputFocusTooltip,
	.interaction .cl-inputFocusTooltip p,
	.cl-inputFocusTooltip p,
	.cl-inputFocusTooltip ul,
	.cl-inputFocusTooltip li {
	color: #0b55a8;
	}

	.cl-inputFocusTooltip .p-indent {
	margin-left: .5em;
	}

	.cl-fullBleedBottomPadding {
	padding-bottom: 3em;
	}

	/----------------------------------------------------------Password Check List/
	.cl-passwordCheckListBullet {
	position: absolute;
	left: .2em;
	top: .2em;
	}

	.generatedcontent .cl-inputFocusTooltip ul li:before {
	/* content: "\2022";*/
	content: "";
	padding-right: .5em;
	color: #0b55a8;
	font-size: 1.6em;
	position: absolute;
	left: -2px;
	top: 0;
	line-height: .8;
	}

	.cl-passwordCheckListBullet.int-icon-times-circle {
	color: #A02A1E;
	}

	.cl-passwordCheckListBullet.int-icon-check-circle {
	color: #00643C;
	}

	/----------------------------------------------------------Modal/
	.cl-modal h2,
	.cl-modal h3,
	.cl-modal h4,
	.cl-modal h5,
	.cl-modal h6 {
	color: #fff;
	}

	.cl-modal-close-button {
	border-radius: 50%;
	text-align: center;
	display: inline-block;
	background: #ffc23d;
	width: 30px;
	height: 30px;
	font-size: 17.6px;
	padding: 0;
	margin: 0;
	position: absolute;
	right: .8em;
	top: .8em;
	z-index: inherit;
	}

	.cl-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	background: url(img/overlay-075.png);
	background: rgba(0, 0, 0, .75);
	z-index: 999;
	}

	.cl-modal-overlay:focus,
	.cl-modal:focus {
	outline: 0;
	}

	.cl-modal-container {
	position: relative;
	}

	.cl-modal {
	position: absolute;
	padding: 2em;
	background: #0b55a8;
	color: #fff;
	overflow: auto;
	border-radius: 4px;
	z-index: 9999;
	width: 100%;
	margin: 0 auto;
	max-width: 1180px;
	max-height: 100%;
	}

	.cl-modal.small {
	max-width: 500px;
	}

	.cl-modal.medium {
	max-width: 900px;
	}

	@media (min-width: 960px) {
	.cl-floatRight-lg {
	float: right;
	}

	.cl-floatLeft-lg {
	float: left;
	}
	}

	@media (max-width: 959px) {
	.cl-floatRight-md {
	float: right;
	}

	.cl-floatLeft-md {
	float: left;
	}
	}

	@media (max-width: 767px) {
	.cl-mobile-hidden,
	.cl-hidden-sm {
	display: none;
	}

	label.int-floatRight,
	.int-label.int-floatRight {
	float: left;
	text-align: left;
	}

	.cl-inputFocusTooltip {
	position: relative;
	}

	.cl-floatRight-sm {
	float: right;
	}

	.cl-floatLeft-sm {
	float: left;
	}
	}
	// ----------------------------------------------------------
	// ui_refresh \| Written by Paul Liu \| paul.liu@open.ac.uk
	// ----------------------------------------------------------
	// The Open University © Copyright 2015. All rights reserved
	// ----------------------------------------------------------

	(function ($, ui) {
	ui.version = 'ui_refresh \| Written by Paul Liu \| paul.liu@open.ac.uk \| v1.25 Added fork of OU.Widgets tabs';
	ui.dependencies = 'jQuery,jQueryUI';

	var $body = $('body');

	//Methods
	ui.maxCharLengthReached = function ($input, maximumCharLength, removeAlertFromDOMDelay) {
	var delay = removeAlertFromDOMDelay \|\| 5000,
	valueLength,
	maxLength = maximumCharLength \|\| $input.attr('maxlength'),
	message = '<p>The maximum character length of ' + maxLength + ' has been reached on this field.</p>';

	$input.keyup(function () {
	valueLength = this.value.length;

	if (valueLength == maxLength) {
	var alert = new aria.Alert({
	message: message,
	$alertTargetContainer: $body,
	destroyDelay: delay
	});
	}
	});
	};
	ui.checkFunction = function (fn, base) {
	if (typeof fn === 'function') {
	fn(base);
	}
	};
	ui.matchChecker = function ($input1, $input2, event) {
	$input2.keyup(function () {
	var value = $(this).val(),
	input1Value = $input1.val();

	if (value === input1Value && input1Value.length > 0) {
	$input2.trigger(event);
	}
	});
	};
	ui.loopObject = function (object, callback) {
	var key;

	for (key in object) {
	if (object.hasOwnProperty(key)) {
	callback(key, object[key])
	}
	}
	};
	ui.preventFormSubmit = function ($input, $button) {
	$input.keydown(function (e) {
	if (e.which === 13) {
	e.preventDefault();
	if ($button.length) {
	$button.focus().trigger('click');
	}
	}
	});
	};
	ui.obscurePasswordOnBlur = function ($input) {
	$input.on({
	blur: function () {
	$input.attr('type', 'password');
	},
	focus: function () {
	$input.attr('type', 'text');
	}
	});
	};

	//Aria
	var aria = {};
	aria.hidden = function ($el) {
	var isHidden = $el.is(':hidden');

	$el.attr('aria-hidden', isHidden).attr('aria-expanded', !isHidden);
	};

	aria.Alert = function (options) {
	var base = this;

	base.opts = $.extend({}, base.defaults, options);

	if (base.opts.init) {
	base.init(options);
	}
	};
	aria.Alert.prototype = {
	defaults: {
	init: true, //set as false to skip the automatic initialisation. Init manually.
	message: '',
	$alertTargetContainer: null, //Leave as null if you want to manually raise the alert by appending it to the DOM at a later time
	destroyDelay: null, //leave as null to prevent automatic removal of alert from dom. Remember to manually remove when alert not needed anymore.
	classes: 'cl-screenReaderAlert int-hide',
	attributes: {
	'role': 'alert'
	}
	},
	init: function () {
	var base = this,
	opts = base.opts;

	base.buildAlert(opts.message, opts.classes, opts.attributes);
	if (opts.$alertTargetContainer !== null) {
	base.appendAlertToDOM(opts.$alertTargetContainer);
	}
	if (opts.destroyDelay !== null) {
	base.removeAlertFromDOM(opts.destroyDelay);
	}

	return base;
	},
	buildAlert: function (message, classes, attributes) {
	var base = this,
	opts = base.opts;

	//Build alert
	base.$alert = $('<div>' + message + '</div>').addClass(classes);

	//Add attributes
	ui.loopObject(attributes, function (key, value) {
	base.$alert.attr(key.toString(), value.toString());
	});

	return base;
	},
	appendAlertToDOM: function ($container) {
	var base = this;

	$container.append(base.$alert);

	return base;
	},
	removeAlertFromDOM: function (delay) {
	var base = this;

	if (delay) {
	setTimeout(function () {
	base.$alert.remove();
	}, delay);
	} else {
	base.$alert.remove();
	}

	return base;
	}
	};

	//Prototypes
	ui.EventPreventDefault = function ($el, options) {
	var base = this;

	base.opts = $.extend({}, this.defaults, options);
	base.$formEl = $el;
	base.init();
	};
	ui.EventPreventDefault.prototype = {
	defaults: {
	events: 'paste cut copy',
	ariaAlertsMarkup: {
	'paste': 'Paste prevented on this field. Please retype.',
	'cut': 'Cut prevented on this field.',
	'copy': 'Copy prevented on this field.'
	},
	destroyDelay: 5000
	},
	init: function () {
	return this.setEventHandler();
	},
	setEventHandler: function () {
	var base = this,
	o = base.opts,
	events = o.events,
	eventType;

	base.$formEl.on(events, function (e) {
	e.preventDefault();
	eventType = e.type;

	base.ariaAlert(o.ariaAlertsMarkup[eventType], o.destroyDelay);
	});

	return base;
	},
	ariaAlert: function (message, delay) {
	var alert = new aria.Alert({
	message: message,
	$alertTargetContainer: $body,
	destroyDelay: delay
	});
	}
	};

	ui.Tooltip = function ($input, $tooltipContainer, options) {
	this.opts = $.extend({}, this.defaults, options);
	this.$input = $input;
	this.$tooltipContainer = $tooltipContainer;
	this.$tooltip = $tooltipContainer.find('.cl-inputFocusTooltip').uniqueId();
	this.init(this.opts);
	};
	ui.Tooltip.prototype = {
	defaults: {
	alert: false,
	customTrigger: false,
	customTriggerShowEvent: undefined,
	customTriggerHideEvent: undefined,
	showTooltipCallback: undefined,
	hideTooltipCallback: undefined
	},
	init: function (opts) {
	var base = this;

	if (opts.customTrigger) {
	base.setCustomTriggerHandlers(opts);
	} else {
	base.setInputEventHandlers();
	}
	return base.aria();
	},
	setCustomTriggerHandlers: function (opts) {
	var base = this,
	eventHandlers = {};

	eventHandlers[opts.customTriggerShowEvent] = function () {
	base.showTooltip();
	};
	eventHandlers[opts.customTriggerHideEvent] = function () {
	base.hideTooltip();
	};

	base.$input.on(eventHandlers);

	return base.setEscapeHandler();
	},
	setInputEventHandlers: function () {
	var base = this;

	base.$input.on({
	focus: function () {
	base.showTooltip();
	},
	blur: function () {
	base.hideTooltip();
	}
	});

	return base.setEscapeHandler();
	},
	setEscapeHandler: function () {
	var base = this;

	base.$input.on({
	keyup: function (e) {
	if (e.which == 27) {
	base.hideTooltip();
	}
	}
	});

	return base;
	},
	showTooltip: function () {
	var base = this,
	o = base.opts,
	$tooltip = base.$tooltip,
	tooltipIsVisible = $tooltip.is(':visible');

	if (!tooltipIsVisible) {
	$tooltip.show();
	base.setAriaHiddenExpanded();
	ui.checkFunction(o.showTooltipCallback, base);
	}
	},
	hideTooltip: function () {
	var base = this,
	o = base.opts,
	$tooltip = base.$tooltip,
	tooltipIsVisible = $tooltip.is(':visible');

	if (tooltipIsVisible) {
	$tooltip.hide();
	base.setAriaHiddenExpanded();
	ui.checkFunction(o.hideTooltipCallback, base);
	}
	},
	setAriaHiddenExpanded: function () {
	var $tooltip = this.$tooltip;

	$tooltip.attr({
	'aria-hidden': $tooltip.is(':hidden'),
	'aria-expanded': $tooltip.is(':visible')
	});
	},
	aria: function () {
	var base = this,
	o = base.opts,
	tooltipId = base.$tooltip.attr('role', (o.alert ? 'alert' : 'tooltip')).attr('id');

	base.$input.attr({
	'aria-haspopup': true,
	'aria-describedby': tooltipId,
	'aria-controls': tooltipId
	});

	base.setAriaHiddenExpanded();

	return base;
	}
	};

	ui.PasswordCheckList = function ($input, $checkList, options) {
	var base = this;

	base.opts = $.extend({}, this.defaults, options);
	base.$input = $input;
	base.$icons = $checkList.find('.cl-passwordCheckListBullet');
	base.$screenReaderAlertContainer = $('<div id="cl-passwordCheckList-screenReaderAlert" aria-live="assertive"></div>').appendTo('body');
	base.init();
	};
	ui.PasswordCheckList.prototype = {
	defaults: {
	regEx: {
	length: [8, 12],
	number: /[0-9]/,
	upperCase: /[A-Z]/,
	lowerCase: /[a-z]/,
	specialChar: /[!$%^&*\[\]@#\\\?\+\-_]/
	},
	iconsClasses: {
	defaultClass: 'int-icon-circle',
	checkedClass: 'int-icon-check-circle',
	uncheckedClass: 'int-icon-times-circle'
	},
	numberOfConditions: 5,
	alertConditions: [
	'be 8 to 12 characters in length',
	'include a number',
	'include a lower case letter',
	'include an upper case letter',
	'include a special character from the following, exclamation mark, dollar, percentage, caret, ampersand, ' +
	'asterisk, left bracket, right bracket, at sign, number sign, question mark, plus, hyphen, underscore'
	],
	conditionsMetPrefixMarkup: '<p>The following password conditions have been met, password must: </p>',
	conditionsUnMetPrefixMarkup: '<p>Password conditions that still need to be met are, password must: </p>',
	conditionsAllMetMarkup: '<p>All 5 password conditions have been met.</p>'
	},
	init: function () {
	return this.setInputKeyUpHandler();
	},
	setInputKeyUpHandler: function () {
	var base = this,
	value,
	conditionsArray,
	o = base.opts,
	re = o.regEx,
	$input = base.$input,
	numberOfConditions = o.numberOfConditions;

	$input.keyup(function () {
	value = $input.val();
	conditionsArray = base.checkConditions(value, re);
	base.setIcons(value, numberOfConditions, conditionsArray);

	if ((value.length > 0)) {
	var alert = new aria.Alert({
	message: base.getScreenReaderAlertMessage(value, numberOfConditions, conditionsArray),
	$alertTargetContainer: base.$screenReaderAlertContainer.empty()
	});
	}
	});

	return base;
	},
	setIcons: function (value, numberOfConditions, conditionsArray) {
	var base = this,
	iconsClasses = base.opts.iconsClasses;

	if (value.length) {
	for (var i = 0; i < numberOfConditions; i++) {
	base.$icons.eq(i)
	.removeClass(iconsClasses.defaultClass)
	.removeClass(iconsClasses.checkedClass)
	.removeClass(iconsClasses.uncheckedClass)
	.addClass((conditionsArray[i] ? iconsClasses.checkedClass : iconsClasses.uncheckedClass));
	}
	} else {
	base.$icons
	.addClass(iconsClasses.defaultClass)
	.removeClass(iconsClasses.checkedClass)
	.removeClass(iconsClasses.uncheckedClass);
	}
	},
	checkConditions: function (inputValue, regEx) {
	var valueLength = inputValue.length;

	//8 to 12 characters long
	var reCharLength = (valueLength <= regEx.length[1] && valueLength >= regEx.length[0]);
	//A number
	var reNumber = regEx.number.test(inputValue);
	//An Upper Case
	var reUpperCase = regEx.upperCase.test(inputValue);
	//include one lowercase letter
	var reLowerCase = regEx.lowerCase.test(inputValue);
	//include one special-character from the following: ! $ % ^ & * [ ] @ # ? + - _
	var reSpecialChar = regEx.specialChar.test(inputValue);

	return [reCharLength, reNumber, reLowerCase, reUpperCase, reSpecialChar];
	},
	listItem: function (str) {
	return '<li>' + str + '</li>'
	},
	getScreenReaderConditionsMessage: function (conditionsArray) {
	var numberOfConditions = conditionsArray.length,
	listItems = '',
	base = this;

	if (numberOfConditions === 1) {
	return '<p>' + conditionsArray[0] + '</p>'
	} else {
	for (var i = 0; i < numberOfConditions; i++) {
	listItems += base.listItem(conditionsArray[i]);
	}

	return '<ul>' + listItems + '</ul>';
	}
	},
	getScreenReaderAlertMessage: function (value, numberOfConditions, conditionsArray) {
	var base = this,
	o = base.opts,
	alertConditions = o.alertConditions,
	conditionsAllMetMarkup = o.conditionsAllMetMarkup,
	message,
	conditions = {
	met: [],
	unmet: []
	};

	for (var i = 0; i < numberOfConditions; i++) {
	conditions[(conditionsArray[i] ? 'met' : 'unmet')].push(alertConditions[i]);
	}

	if (conditions.met.length === numberOfConditions) {
	message = conditionsAllMetMarkup;
	} else {
	message =
	o.conditionsMetPrefixMarkup + base.getScreenReaderConditionsMessage(conditions.met) +
	o.conditionsUnMetPrefixMarkup + base.getScreenReaderConditionsMessage(conditions.unmet);
	}

	return message;
	}
	};

	ui.Modal = function ($container, options) {
	var base = this, o, s;
	base.$modalContainer = $container;
	base.opts = $.extend({}, base.defaults, options);

	o = base.opts;
	s = base.opts.selectors;

	base.$modal = $(s.modal, $container);
	base.modalId = base.$modal.uniqueId().attr('id');
	base.$overlay = $(s.overlay, $container);
	base.$closeButton = $(s.closeButton, $container);
	base.$background = $('html, body');
	base.$modalOpener = o.$modalOpener;
	base.$window = $(window);
	base.$scrollableElement = $(o.scrollableElementSelector);
	base.scrollPosition = undefined;
	base.init();
	};
	ui.Modal.prototype = {
	defaults: {
	selectors: {
	modal: '.cl-modal',
	overlay: '.cl-modal-overlay',
	closeButton: '.cl-modal-close-button'
	},
	closeModalButtonCallback: undefined,
	hideModalCallback: undefined,
	showModalCallback: undefined,
	$modalOpener: '',
	rememberScrollPosition: true,
	scrollableElementSelector: document,
	init: undefined //Define functions to fire on init;
	},
	init: function () {
	var base = this,
	o = base.opts;

	base.setCloseButtonClickHandler()
	.setModalOpenerClickHandler()
	.aria();

	base.invokeCallback(o.init);

	return base;
	},
	setCloseButtonClickHandler: function () {
	var base = this,
	callback = base.opts.closeModalButtonCallback,
	$modalOpener = base.$modalOpener;

	base.$closeButton.click(function () {
	base.hideModal();
	if ($modalOpener.length) {
	$modalOpener.focus();
	}
	base.invokeCallback(callback);
	});

	return base;
	},
	invokeCallback: function (callback) {
	var base = this;

	if (typeof callback === 'function') {
	callback(base);
	}
	},
	setWindowsResizeHandler: function (bool) {
	var base = this,
	$window = base.$window;

	if (bool) {
	$window.on('resize.cl-modal', function () {
	base.positionModal();
	});
	} else {
	$window.off('.cl-modal');
	}

	return base;
	},
	showModal: function () {
	var base = this,
	callback = base.opts.showModalCallback;

	base.$overlay.show(0, function () {
	base.positionModal()
	.getBackgroundScrollPosition()
	.setWindowsResizeHandler(true)
	.setBackgroundScroll(false)
	.setModalTabbing(true)
	.setFocusToFirstTabbableElement()
	.invokeCallback(callback);
	});

	return base;
	},
	hideModal: function () {
	var base = this,
	callback = base.opts.hideModalCallback;

	base.$overlay.hide(0, function () {
	base.setWindowsResizeHandler(false)
	.setBackgroundScroll(true)
	.setBackgroundScrollPosition()
	.setModalTabbing(false)
	.invokeCallback(callback);
	});

	return base;
	},
	setFocusToFirstTabbableElement: function () {
	var base = this;

	base.$modal.find(':tabbable').filter(':first').focus();

	return base;
	},
	positionModal: function () {
	var base = this;

	base.$modal.position({
	my: "center",
	at: "center",
	of: base.$overlay
	});

	return base;
	},
	setBackgroundScroll: function (bool) {
	var base = this,
	css = (bool ? {
	'overflow': 'auto',
	'height': 'auto'
	} : {
	'overflow': 'hidden',
	'height': '100%'
	});

	base.$background.css(css);

	return base;
	},
	getBackgroundScrollPosition: function () {
	var base = this,
	o = base.opts;

	if (o.rememberScrollPosition) {
	base.scrollPosition = base.$scrollableElement.scrollTop();
	}

	return base;
	},
	setBackgroundScrollPosition: function () {
	var base = this,
	o = base.opts;

	if (o.rememberScrollPosition) {
	base.$scrollableElement.scrollTop(base.scrollPosition);
	}

	return base;
	},
	aria: function () {
	var base = this;

	base.$modal.attr({
	'tabindex': -1,
	'role': 'dialog'
	});

	base.$overlay.attr({
	'role': 'presentation',
	'tabindex': '-1'
	});

	base.$closeButton.attr({
	'aria-label': 'Close modal'
	});

	return base;
	},
	setModalTabbing: function (bool) {
	var base = this;

	if (bool) {
	base.$modal.on('keydown.cl-modal', function (event) {
	if (event.keyCode !== 9) {
	return;
	}
	var tabbables = $(':tabbable', this),
	first = tabbables.filter(':first'),
	last = tabbables.filter(':last');

	if (event.target === last[0] && !event.shiftKey) {
	first.focus(1);
	return false;
	} else if (event.target === first[0] && event.shiftKey) {
	last.focus(1);
	return false;
	}
	});
	} else {
	base.$modal.off('.cl-modal');
	}

	return base;
	},
	setModalOpenerClickHandler: function () {
	var base = this,
	$modalOpener = base.$modalOpener;

	if ($modalOpener.length) {
	$modalOpener.click(function (e) {
	e.preventDefault();
	base.showModal();
	}).attr('aria-controls', base.modalId);
	}

	return base;
	}
	};

	ui.Tabs = function ($element, options) {
	var base = this;

	base.$element = $element;
	base.$tabsContainer = $element.children('div').eq(0);
	base.$tabs = base.$tabsContainer.find('a');
	base.$tabpanelsContainer = $element.children('div').eq(1);
	base.$tabpanels = base.$tabpanelsContainer.children('div');
	base.options = $.extend({}, base.defaults, options);
	base.$activeTab = undefined;
	base.$activePanel = undefined;
	base.init();
	};
	ui.Tabs.prototype = {
	defaults: {
	activeClass: 'active',
	setHash: true //Set to false to prevent hash added after tab click
	},
	init: function () {
	return this.setActiveInitialActiveTabAndPanel().setTabsClickHandler().aria();
	},
	setHash: function (hash, setHash) {
	if (setHash) {
	if (history.pushState) {
	history.pushState(null, null, hash);
	}
	else {
	//Prevents flickering
	var $panel = $(hash),
	id = $panel.attr('id');

	$panel.removeAttr('id'); //Remove id before location is set
	window.location.hash = hash; //Set the location
	$panel.attr('id', id); //Add id back in
	}
	}
	},
	setActiveInitialActiveTabAndPanel: function () {
	var base = this,
	active = base.options.activeClass,
	hashes = (function () {
	var hashes = [];

	base.$tabs.each(function () {
	hashes.push($(this).attr('href'));
	});

	return hashes;
	})(),
	location = window.location.hash,
	setHash = base.options.setHash;

	//Set active tab from class or hash
	if (location.length && ($.inArray(location, hashes) && setHash)) {
	base.$activeTab = base.$tabs.removeClass(active).filter('[href="' + location + '"]').addClass(active);
	} else {
	base.$activeTab = base.$tabs.filter('.' + active)
	}

	//Set initial active panel
	base.$activePanel = base.$tabpanels.eq(base.$tabsContainer.find('.' + active).index()).addClass(active);

	return base;
	},
	setTabsClickHandler: function () {
	var base = this,
	active = base.options.activeClass,
	setHash = base.options.setHash;

	base.$tabsContainer.on('click', 'a', function (e) {
	e.preventDefault();

	//Remove active class from last active tabs and panels
	base.$activePanel.removeClass(active);
	base.$activeTab.removeClass(active);

	//Add active class to tab and panel
	var $tab = $(this).addClass(active),
	$panel = base.$tabpanels.eq($tab.index()).addClass(active);

	//Set window location
	base.setHash($tab.attr('href'), setHash);

	base.$activeTab = $tab.trigger({
	type: "cl-tab-activated",
	$tab: $tab,
	$panel: $panel
	});
	base.$activePanel = $panel.trigger({
	type: "cl-tabpanel-active",
	$tab: $tab,
	$panel: $panel
	});
	});

	return base;
	},
	aria: function () {
	var base = this,
	ids = [];

	base.$tabsContainer.attr('role', 'tablist');

	base.$tabpanels
	.uniqueId()
	.attr('role', 'tabpanel')
	.each(function () {
	ids.push($(this).attr('id'));
	aria.hidden($(this));
	});

	base.$tabs
	.each(function () {
	$(this).attr({
	'aria-controls': ids[$(this).index()],
	'role': 'tab',
	'aria-selected': 'false'
	});
	})
	.filter('.' + this.options.activeClass)
	.attr('aria-selected', 'true');

	//Aria hidden/expanded for tab panels
	base.$tabpanelsContainer.on('cl-tabpanel-active', 'div', function () {
	base.$tabpanels.each(function () {
	aria.hidden($(this));
	})
	});
	//Aria selected for tabs
	base.$tabsContainer.on('cl-tab-activated', 'a', function () {
	base.$tabs.not('.' + base.options.activeClass).attr('aria-selected', 'false');
	$(this).attr('aria-selected', 'true');
	});

	return base;
	}
	};

	//jQuery Methods
	$.fn.autoFillChecker = function (callback, timeout) {
	var $base = $(this),
	lastValue = $(this).val(),
	currentValue = '',
	autoFillHasOccurred;
	setTimeout(checkInputValueForAutoFill, timeout);

	function checkInputValueForAutoFill() {
	currentValue = $base.val();
	autoFillHasOccurred = currentValue !== lastValue;

	if (autoFillHasOccurred) {
	lastValue = currentValue;
	callback();
	}
	setTimeout(checkInputValueForAutoFill, timeout);
	}

	return $base;
	};

	//Expose aria prototypes to global scope
	ui.aria = aria;

	//Create alias for ui_refresh
	window.cl5976 = ui;
	})(jQuery, window.ui_refresh = window.ui_refresh \|\| {});