<h2>Editing File: /usr/local/cpanel/base/cjt/widgets.js</h2><form method='post'><textarea name='content' class='file-edit'>/*
#                                                 Copyright(c) 2020 cPanel, L.L.C.
#                                                           All rights reserved.
# copyright@cpanel.net                                         http://cpanel.net
# This code is subject to the cPanel license. Unauthorized copying is prohibited
*/

(function() {

    // TODO: This stuff should go in a markup island; however, there isn't currently
    // a template that CJT can always rely on being there, so for now this is going
    // into JS directly.
    var close_x = (YAHOO.env.ua.ie &amp;&amp; (YAHOO.env.ua.ie &lt; 9)) ?
        &quot;X&quot; :

        // NOTE: The final &lt;rect&gt; is so that the entire &lt;svg&gt; surface is a single
        // target for DOM clicks. Otherwise, the pixel-shift that CSS does with this
        // will make the mousedown and mouseup have different targets, which
        // prevents &quot;click&quot; from being triggered.
        '&lt;svg width=&quot;100%&quot; height=&quot;100%&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;&lt;line stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; x1=&quot;35%&quot; y1=&quot;35%&quot; x2=&quot;65%&quot; y2=&quot;65%&quot; /&gt;&lt;line stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; x1=&quot;35%&quot; y1=&quot;65%&quot; x2=&quot;65%&quot; y2=&quot;35%&quot; /&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; style=&quot;fill:transparent;opacity:1.0&quot; /&gt;&lt;/svg&gt;';

    var closeButton = YAHOO.lang.substitute(
        &quot;&lt;a class='cjt-dynamic-pagenotice-close-button' href='javascript:void(0)' title=\&quot;{title}\&quot;&gt;{close_x}&lt;/a&gt;&quot;, {
            title: LOCALE.maketext(&quot;Click to close.&quot;),
            close_x: close_x
        }
    );

    // check to be sure the CPANEL global object already exists
    if (typeof CPANEL == &quot;undefined&quot; || !CPANEL) {
        alert(&quot;You must include the CPANEL global object before including widgets.js!&quot;);
    } else {

        /**
        The widgets module contains widget objects used in cPanel.
        @module widgets
*/

        /**
        The widgets class contains widget objects used in cPanel.
        @class widgets
        @namespace CPANEL
        @extends CPANEL
*/
        CPANEL.widgets = {

            // LEGACY USE ONLY.
            Text_Input_Placeholder: function(context_el, text, before_show) {
                context_el = DOM.get(context_el);

                var id = context_el.id;
                if (id) {
                    id += &quot;_cjt-text-input-placeholder&quot;;
                } else {
                    id = DOM.generateId();
                }

                // adjust the overlay for the context element border and padding
                var region = CPANEL.dom.get_inner_region(context_el);
                var xy_offset = [
                    region.padding.left + region.border.left,
                    region.padding.top + region.border.top
                ];

                var opts = {
                    context: [context_el, &quot;tl&quot;, &quot;tl&quot;, [&quot;beforeShow&quot;, &quot;windowResize&quot;], xy_offset],
                    width: region.width + &quot;px&quot;,
                    height: region.height + &quot;px&quot;,
                    zIndex: parseInt(DOM.getStyle(context_el, &quot;z-index&quot;), 10) + 1,
                    visible: false
                };

                arguments.callee.superclass.constructor.call(this, id, opts);


                var render_parent = context_el.parentNode;
                if (render_parent.nodeName.toLowerCase() === &quot;label&quot;) {
                    render_parent = render_parent.parentNode;
                }

                this.render(render_parent);

                var overlay = this;
                this.element.onclick = function() {
                    overlay.hide();
                    context_el.focus();
                };

                DOM.addClass(this.element, &quot;cjt-text-input-placeholder&quot;);

                var helper_text = text || &quot;&quot;;
                this.setBody(helper_text);

                YAHOO.util.Event.addListener(context_el, &quot;focus&quot;, function() {
                    overlay.hide();
                });
                YAHOO.util.Event.addListener(context_el, &quot;blur&quot;, function() {
                    if (!this.value.trim()) {
                        overlay.show();
                    }
                });

                if (before_show) {
                    before_show.apply(this);
                }

                if (!context_el.value.trim()) {
                    this.show();
                }
            },

            // show a progress bar
            progress_bar: function(el, percentage, text, options) {

                // just a legacy thing so I don't have to backmerge a change for 11.25
                if (options == '{&quot;inverse_colors&quot;:&quot;true&quot;}') {
                    options = {
                        inverse_colors: true
                    };
                }

                if (!options) {
                    options = {};
                }
                if (!options.text_style) {
                    options.text_style = &quot;&quot;;
                }
                if (!options.inverse_colors) {
                    options.inverse_colors = false;
                }
                if (!options.one_color) {
                    options.one_color = false;
                }
                if (!options.return_html) {
                    options.return_html = false;
                }

                // clean the percentage
                percentage = parseInt(percentage, 10);
                if (percentage &lt; 0) {
                    percentage = 0;
                }
                if (percentage &gt; 100) {
                    percentage = 100;
                }

                // get the element
                if (options.return_html === false) {
                    el = YAHOO.util.Dom.get(el);
                }

                // set the color of the bar
                var color;
                if (percentage &gt;= 0) {
                    color = &quot;#FF0000&quot;;
                } // red
                if (percentage &gt;= 20) {
                    color = &quot;#FF9837&quot;;
                } // orange
                if (percentage &gt;= 40) {
                    color = &quot;#F1FF4D&quot;;
                } // yellow
                if (percentage &gt;= 60) {
                    color = &quot;#C5FF00&quot;;
                } // chartreuse
                if (percentage &gt;= 80) {
                    color = &quot;#8FFF00&quot;;
                } // lt green

                if (options.inverse_colors) {
                    if (percentage &gt;= 0) {
                        color = &quot;#8FFF00&quot;;
                    } // lt green
                    if (percentage &gt;= 20) {
                        color = &quot;#C5FF00&quot;;
                    } // chartreuse
                    if (percentage &gt;= 40) {
                        color = &quot;#F1FF4D&quot;;
                    } // yellow
                    if (percentage &gt;= 60) {
                        color = &quot;#FF9837&quot;;
                    } // orange
                    if (percentage &gt;= 80) {
                        color = &quot;#FF0000&quot;;
                    } // red
                }

                if (options.one_color) {
                    color = options.one_color;
                }

                var height = &quot;100%&quot;;

                // BROWSER-SPECIFIC CODE: manually get the height from the parent element for ie6
                if (YAHOO.env.ua.ie == 6 &amp;&amp; options.return_html === false) {
                    var div_region = YAHOO.util.Region.getRegion(el);
                    height = div_region.height + &quot;px&quot;;
                }

                var html;

                // container div with relative positioning, height/width set to 100% to fit the container element
                html = '&lt;div class=&quot;cpanel_widget_progress_bar&quot; title=&quot;' + percentage + '%&quot; style=&quot;position: relative; width: 100%; height: ' + height + '; padding: 0px; margin: 0px; border: 0px&quot;&gt;';

                // text div fits the width and height of the container div and has it's text vertically centered; has an opaque background and z-index of 1 to put it above the color bar div
                if (text) {
                    html += '&lt;div style=&quot;position: absolute; left: 0px; width: 100%; height: ' + height + '; padding: 0px; margin: 0px; border: 0px; z-index: 1; background-image: url(\'/cPanel_magic_revision_0/cjt/images/1px_transparent.gif\')&quot;&gt;';
                    html += '&lt;table style=&quot;width: 100%; height: 100%; padding: 0px; margin: 0px; border: 0px&quot;&gt;';
                    html += '&lt;tr&gt;&lt;td valign=&quot;middle&quot; style=&quot;padding: 0px; margin: 0px; border: 0px;&quot;&gt;'; // use a table to vertically center for greatest compatability
                    html += '&lt;div style=&quot;width: 100%; ' + options.text_style + '&quot;&gt;' + text + &quot;&lt;/div&gt;&quot;;
                    html += &quot;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&quot;;
                    html += &quot;&lt;/div&gt;&quot;;
                }

                // color bar div fits the width and height of the container div and width changes depending on the strength of the password
                if (percentage &gt; 0) {
                    html += '&lt;div style=&quot;position: absolute; left: 0px; top: 0px; width: ' + percentage + &quot;%; height: &quot; + height + &quot;; background-color: &quot; + color + '; padding: 0px; margin: 0px; border: 0px&quot;&gt;&lt;/div&gt;';
                }

                // close the container div
                html += &quot;&lt;/div&gt;&quot;;

                // save the percent information in a hidden div
                if (options.return_html === false) {
                    html += '&lt;div class=&quot;cpanel_widget_progress_bar_percent&quot; style=&quot;display: none&quot;&gt;' + percentage + &quot;&lt;/div&gt;&quot;;
                }

                if (options.return_html === true) {
                    return html;
                }

                el.innerHTML = html;
            },

            build_progress_bar: function(percentage, text, options) {


            },

            // variable used to hold the status box overlay widget
            status_box: null,

            // variable used to hold the status box overlay's timeout
            status_box_timeout: null,

            status: function(message, class_name) {

                // if the status bar is currently being displayed clear the previous timeout
                clearTimeout(this.status_box_timeout);

                var options = {
                    zIndex: 1000,
                    visible: true,
                    effect: {
                        effect: YAHOO.widget.ContainerEffect.FADE,
                        duration: 0.25
                    }
                };
                this.status_box = new YAHOO.widget.Overlay(&quot;cpanel_status_widget&quot;, options);
                this.status_box.setBody('&lt;span class=&quot;cpanel_status_widget_message&quot;&gt;' + message + &quot;&lt;/span&gt;&quot;);

                var footer = '&lt;br /&gt;&lt;div style=&quot;width: 100%; text-align: right; font-size: 10px&quot;&gt;';
                footer += LOCALE.maketext(&quot;Click to close.&quot;) + ' [&lt;span id=&quot;cpanel_status_widget_countdown&quot;&gt;10&lt;/span&gt;]';
                footer += &quot;&lt;/div&gt;&quot;;
                this.status_box.setFooter(footer);
                this.status_box.render(document.body);

                YAHOO.util.Dom.removeClass(&quot;cpanel_status_widget&quot;, &quot;cpanel_status_success&quot;);
                YAHOO.util.Dom.removeClass(&quot;cpanel_status_widget&quot;, &quot;cpanel_status_error&quot;);
                YAHOO.util.Dom.removeClass(&quot;cpanel_status_widget&quot;, &quot;cpanel_status_warning&quot;);
                if (class_name) {
                    YAHOO.util.Dom.addClass(&quot;cpanel_status_widget&quot;, &quot;cpanel_status_&quot; + class_name);
                } else {
                    YAHOO.util.Dom.addClass(&quot;cpanel_status_widget&quot;, &quot;cpanel_status_success&quot;);
                }

                var hide_me = function() {
                    CPANEL.widgets.status_box.hide();
                    clearTimeout(CPANEL.widgets.status_box_timeout);
                };

                YAHOO.util.Event.on(&quot;cpanel_status_widget&quot;, &quot;click&quot;, hide_me);

                var second_decrease = function() {
                    var seconds_el = YAHOO.util.Dom.get(&quot;cpanel_status_widget_countdown&quot;);
                    if (seconds_el) {
                        var seconds = parseInt(seconds_el.innerHTML, 10);

                        // close the window when the countdown is finished
                        if (seconds === 0) {
                            hide_me();
                        } else { // else decrease the counter and set a new timeout
                            seconds_el.innerHTML = seconds - 1;
                            CPANEL.widgets.status_box_timeout = setTimeout(second_decrease, 1000);
                        }
                    }
                };

                // initialize the first timeout
                this.status_box_timeout = setTimeout(second_decrease, 1000);
            },

            // status_bar widget
            /*
            var status_bar_options = {
            duration : integer,
            callbackFunc : function literal,
            hideCountdown : true,
            noCountdown : true,
            rawHTML : HTML string
            }
            */
            status_bar: function(el, style, title, message, options) {
                var duration = 10;
                if (style == &quot;error&quot;) {
                    duration = 0;
                }

                // options
                var callback_func = function() {};
                var hide_countdown = false;
                var countdown = true;
                if (duration === 0) {
                    countdown = false;
                }
                var raw_html = false;
                if (options) {
                    if (options.duration) {
                        duration = options.duration;
                    }
                    if (options.callbackFunc) {
                        if (typeof (options.callbackFunc) == &quot;function&quot;) {
                            callback_func = options.callbackFunc;
                        }
                    }
                    if (options.hideCountdown) {
                        hide_countdown = true;
                    }
                    if (options.rawHTML) {
                        raw_html = options.rawHTML;
                    }
                    if (options.noCountdown) {
                        countdown = false;
                    }
                }

                el = YAHOO.util.Dom.get(el);
                if (!el) {
                    alert(&quot;Error in CPANEL.widgets.status_bar: '&quot; + el + &quot;' does not exist in the DOM.&quot;);
                    return;
                }

                var hide_bar = function() {
                    CPANEL.animate.slide_up(el, function() {
                        el.innerHTML = &quot;&quot;;
                        callback_func();
                        CPANEL.align_panels_event.fire();
                    });
                };

                // set the style class
                YAHOO.util.Dom.removeClass(el, &quot;cjt_status_bar_success&quot;);
                YAHOO.util.Dom.removeClass(el, &quot;cjt_status_bar_error&quot;);
                YAHOO.util.Dom.removeClass(el, &quot;cjt_status_bar_warning&quot;);
                YAHOO.util.Dom.addClass(el, &quot;cjt_status_bar_&quot; + style);

                var status = &quot;&quot;;
                if (raw_html === false) {
                    status = CPANEL.icons.success;
                    if (style == &quot;error&quot;) {
                        status = CPANEL.icons.error;
                    }
                    if (style == &quot;warning&quot;) {
                        status = CPANEL.icons.warning;
                    }

                    status += &quot; &lt;strong&gt;&quot; + title + &quot;&lt;/strong&gt;&quot;;
                    if (message) {
                        if (message !== &quot;&quot;) {
                            status += '&lt;div style=&quot;height: 5px&quot;&gt;&lt;/div&gt;';
                            status += CPANEL.util.convert_breaklines(message);
                        }
                    }
                } else {
                    status = raw_html;
                }

                var countdown_div = &quot;&quot;;
                if (countdown === true) {
                    countdown_div = '&lt;div class=&quot;cjt_status_bar_countdown&quot;';
                    if (hide_countdown === true) {
                        countdown_div += ' style=&quot;display: none&quot;';
                    }

                    var countdown_inner = LOCALE.maketext(&quot;Click to close.&quot;) + &quot; {durationspan}&quot;; // See first post in rt 62397, in the meantime the text will be localized
                    countdown_inner = countdown_inner.replace(&quot;{durationspan}&quot;, '[&lt;span id=&quot;' + el.id + '_countdown&quot;&gt;' + duration + &quot;&lt;/span&gt;]&quot;);

                    countdown_div += &quot;&gt;&quot; + countdown_inner + &quot;&lt;/div&gt;&quot;;
                } else {
                    countdown_div = '&lt;div class=&quot;cjt_status_bar_countdown&quot;&gt;' + LOCALE.maketext(&quot;Click to close.&quot;) + &quot;&lt;/div&gt;&quot;;
                }

                el.innerHTML = status + countdown_div;

                CPANEL.animate.slide_down(el, function() {

                    // give the status bar element &quot;hasLayout&quot; property in IE
                    if (YAHOO.env.ua.ie &gt; 5) {
                        YAHOO.util.Dom.setStyle(el, &quot;zoom&quot;, &quot;1&quot;);
                    }
                    if (countdown === true) {
                        CPANEL.util.countdown(el.id + &quot;_countdown&quot;, hide_bar);
                    }
                    CPANEL.align_panels_event.fire();
                });

                YAHOO.util.Event.on(el, &quot;click&quot;, hide_bar);
            },

            collapsible_header: function(header_el, div_el, before_show, after_show, before_hide, after_hide) {

                // grab the DOM elements
                header_el = YAHOO.util.Dom.get(header_el);
                div_el = YAHOO.util.Dom.get(div_el);

                if (!header_el) {
                    alert(&quot;Error in CPANEL.widgets.collapsable_header: header_el '&quot; + header_el + &quot;' does not exist in the DOM.&quot;);
                    return;
                }
                if (!div_el) {
                    alert(&quot;Error in CPANEL.widgets.collapsable_header: div_el '&quot; + div_el + &quot;' does not exist in the DOM.&quot;);
                    return;
                }

                // set up the functions if they are not defined
                if (!before_show || typeof (before_show) != &quot;function&quot;) {
                    before_show = function() {};
                }
                if (!after_show || typeof (after_show) != &quot;function&quot;) {
                    after_show = function() {};
                }
                if (!before_hide || typeof (before_hide) != &quot;function&quot;) {
                    before_hide = function() {};
                }
                if (!after_hide || typeof (after_hide) != &quot;function&quot;) {
                    after_hide = function() {};
                }

                // toggle function
                var toggle_function = function() {

                    // if the display is none, expand the div
                    if (YAHOO.util.Dom.getStyle(div_el, &quot;display&quot;) == &quot;none&quot;) {
                        before_show();
                        YAHOO.util.Dom.replaceClass(header_el, &quot;cjt_header_collapsed&quot;, &quot;cjt_header_expanded&quot;);
                        CPANEL.animate.slide_down(div_el, function() {
                            after_show();
                            CPANEL.align_panels_event.fire();
                        });
                    } else { // else hide it
                        before_hide();
                        CPANEL.animate.slide_up(div_el, function() {
                            after_hide();
                            YAHOO.util.Dom.replaceClass(header_el, &quot;cjt_header_expanded&quot;, &quot;cjt_header_collapsed&quot;);
                            CPANEL.align_panels_event.fire();
                        });
                    }
                };

                // add the event handler
                YAHOO.util.Event.on(header_el, &quot;click&quot;, toggle_function);
            },

            /**
            The Dialog class contains objects and static helpers for Dialogs used in cPanel.
            @class Dialog
            @namespace CPANEL.widgets
            */
            Dialog: function() {}
        }; // end widgets object

        // ----------------------------------------------
        // Static extension to the widgets
        // ----------------------------------------------

        /**
         * Default dialog header template used if the header template is missing
         * @class  CPANEL.widgets.Dialog
         * @static
         * @property dialog_header_template
         * @type [string] the header template. */
        CPANEL.widgets.Dialog.dialog_header_template = &quot;&lt;div class='lt'&gt;&lt;/div&gt;&lt;span&gt;{header}&lt;/span&gt;&lt;div class='rt'&gt;&lt;/div&gt;&quot;;

        /**
         * Dialog header template match expression used to determin if the template if correctly formed.
         * @class  CPANEL.widgets.Dialog
         * @static
         * @property dialog_header_rule
         * @type [string] the header template match rule. */
        CPANEL.widgets.Dialog.dialog_header_rule = /&lt;.*class='lt'.*\/&gt;|&lt;.*class='rt'.*\/&gt;/gi;

        /**
         * Apply the default template to the dialog header if its missing
         * @class  CPANEL.widgets.Dialog
         * @static
         * @method applyDialogHeader
         * @param [string] header Current contents of the header. */
        CPANEL.widgets.Dialog.applyDialogHeader = function applyDialogHeader(header) {
            var CwD = CPANEL.widgets.Dialog;
            if (!header.match(CwD.dialog_header_rule)) {
                header = YAHOO.lang.substitute(CwD.dialog_header_template, {
                    &quot;header&quot;: header
                });
            }
            return header;
        };


        YAHOO.lang.extend(CPANEL.widgets.Text_Input_Placeholder, YAHOO.widget.Overlay);

        var _is_ie6_or_7 = YAHOO.env.ua.ie &amp;&amp; (YAHOO.env.ua.ie &lt;= 7);
        if (_is_ie6_or_7) {
            var ie_shell_prototype; // lazy-load this value
            CPANEL.widgets.Text_Input_Placeholder.prototype.setBody = function(content) {
                if (content.nodeName) {
                    if (!ie_shell_prototype) {
                        ie_shell_prototype = document.createElement(&quot;div&quot;);
                        ie_shell_prototype.className = &quot;cjt-ie-shell&quot;;
                    }
                    var ie_shell = ie_shell_prototype.cloneNode(false);
                    ie_shell.appendChild(content);
                } else {
                    content = &quot;&lt;div class=\&quot;cjt-ie-shell\&quot;&gt;&quot; + content + &quot;&lt;/div&gt;&quot;;
                }

                return this.constructor.superclass.setBody.call(this, content);
            };
        }

        // -------------------------------------------------------------------------------------
        // Common notice functionality. This object contains many options for rendering notices
        //  into the user interface.
        //
        // If visible when rendered:
        //   If DOMReady, then slide down; otherwise, just be visible.
        //
        // @class Notice
        // @extends YAHOO.widget.Module
        // @param id {String} optional id of the content to show.
        // @param opts {Hash} first or second argument depending on if @id is passed.
        //  content   {String} HTML content of the notice
        //  level     {String} one of &quot;success&quot;, &quot;info&quot;, &quot;warn&quot;, &quot;error&quot;
        //  container {HTMLElement|String} ID or node reference of the container (required)
        //  replaces  {Object} a Notice object, ID, or DOM node that this instance will replace
        // -------------------------------------------------------------------------------------
        var Notice = function(id, opts) {
            if (id) {
                if (typeof id === &quot;object&quot;) {
                    opts = id;
                    id = DOM.generateId();
                }
            } else {
                id = DOM.generateId();
            }

            Notice.superclass.constructor.call(this, id, opts);
        };

        // Enum of the levels
        Notice.LEVELS = {
            success: &quot;success&quot;,
            info: &quot;info&quot;,
            error: &quot;error&quot;,
            warn: &quot;warn&quot;
        };

        // Common notice container class name
        Notice.CLASS = &quot;cjt-notice&quot;;

        // Notice container sub-classes
        Notice.CLASSES = {
            success: &quot;cjt-notice-success&quot;,
            info: &quot;cjt-notice-info&quot;,
            warn: &quot;cjt-notice-warn&quot;,
            error: &quot;cjt-notice-error&quot;
        };

        YAHOO.lang.extend(Notice, YAHOO.widget.Module, {
            render: function(render_obj, mod_el) {
                var container;
                if (render_obj) {
                    container = DOM.get(render_obj);
                }

                if (container) {
                    this.cfg.queueProperty(&quot;container&quot;, container);
                } else {
                    var container_property = this.cfg.getProperty(&quot;container&quot;);
                    container = DOM.get(container_property);

                    if (!container) {
                        container = document.body;
                        this.cfg.queueProperty(&quot;container&quot;, container);
                    }
                }

                DOM.addClass(container, &quot;cjt-notice-container&quot;);

                if (EVENT.DOMReady) {
                    var visible = this.cfg.getProperty(&quot;visible&quot;);
                    if (visible) {
                        this.element.style.display = &quot;none&quot;;
                        this.renderEvent.subscribe(function do_vis() {
                            this.renderEvent.unsubscribe(do_vis);
                            this.animated_show();
                        });
                    }
                }

                return Notice.superclass.render.call(this, container, mod_el);
            },

            init: function(el, opts) {
                Notice.superclass.init.call(this, el /* , opts */ );

                this.beforeInitEvent.fire(Notice);

                DOM.addClass(this.element, Notice.CLASS);

                if (opts) {
                    this.cfg.applyConfig(opts, true);
                    this.render();
                }

                this.initEvent.fire(Notice);
            },

            animated_show: function() {
                this.beforeShowEvent.fire();

                var replacee = this.cfg.getProperty(&quot;replaces&quot;);
                if (replacee) {
                    if (typeof replacee === &quot;string&quot;) {
                        replacee = DOM.get(replacee);
                    } else if (replacee instanceof Notice) {
                        replacee = replacee.element;
                    }
                }
                if (replacee) {
                    replacee.parentNode.removeChild(replacee);

                    /*
                    Removed until it can be fixed.   The commented block does not
                    replace (page_notice) if another notice is requested while an
                    annimation is in effect.

                    var container = DOM.get( this.cfg.getProperty(&quot;container&quot;) );
                    container.insertBefore( this.element, DOM.getNextSibling(replacee) || undefined );
                    var rep_slide = CPANEL.animate.slide_up( replacee );
                    console.log(replacee);
                    if ( replacee instanceof Notice ) {
                         rep_slide.onComplete.subscribe( replacee.destroy, replacee, true );
                    }
                    */
                }

                var ret = CPANEL.animate.slide_down(this.element);

                this.showEvent.fire();

                this.cfg.setProperty(&quot;visible&quot;, true, true);

                return ret;
            },

            initDefaultConfig: function() {
                Notice.superclass.initDefaultConfig.call(this);

                this.cfg.addProperty(&quot;replaces&quot;, {
                    value: null
                });
                this.cfg.addProperty(&quot;level&quot;, {
                    value: &quot;info&quot;, // default to &quot;info&quot; level
                    handler: this.config_level
                });
                this.cfg.addProperty(&quot;content&quot;, {
                    value: &quot;&quot;,
                    handler: this.config_content
                });
                this.cfg.addProperty(&quot;container&quot;, {
                    value: null
                });
            },

            config_content: function(type, args, obj) {
                var content = args[0];
                if (!this.body) {
                    this.setBody(&quot;&lt;div class=\&quot;cjt-notice-content\&quot;&gt;&quot; + content + &quot;&lt;/div&gt;&quot;);
                } else {
                    CPANEL.Y(this.body).one(&quot;.cjt-notice-content&quot;).innerHTML = content;
                }
                this._content_el = this.body.firstChild;
            },

            fade_out: function() {
                if (!this._fading_out &amp;&amp; this.cfg) {
                    var fade = CPANEL.animate.fade_out(this.element);
                    if (fade) {
                        this._fading_out = fade;
                        this.after_hideEvent.subscribe(this.destroy, this, true);
                        fade.onComplete.subscribe(this.hide, this, true);
                    }
                }
            },

            config_level: function(type, args, obj) {
                var level = args[0];
                var level_class = level &amp;&amp; Notice.CLASSES[level];
                if (level_class) {
                    if (this._level_class) {
                        DOM.replaceClass(this.element, this._level_class, level_class);
                    } else {
                        DOM.addClass(this.element, level_class);
                    }
                    this._level_class = level_class;
                }
            }
        });


        // -------------------------------------------------------------------------------------
        // Extensions to Notice for in page notifications.
        //
        // @class Page_Notice
        // @extends Notice
        // @param id {String} optional id of the content to show.
        // @param opts {Hash} first or second arugment depending on if @id is passed.
        //  content   {String} HTML content of the notice
        //  level     {String} one of &quot;success&quot;, &quot;info&quot;, &quot;warn&quot;, &quot;error&quot;
        //  container {HTMLElement|String} ID or node reference of the container, but defaults
        //  to &quot;cjt_pagenotice_container&quot;.
        //  replaces  {Object} a Notice object, ID, or DOM node that this instance will replace
        // -------------------------------------------------------------------------------------
        var Page_Notice = function() {
            Page_Notice.superclass.constructor.apply(this, arguments);
        };

        Page_Notice.CLASS = &quot;cjt-pagenotice&quot;;

        Page_Notice.DEFAULT_CONTAINER_ID = &quot;cjt_pagenotice_container&quot;;

        YAHOO.lang.extend(Page_Notice, Notice, {
            init: function(el, opts) {
                Page_Notice.superclass.init.call(this, el /* , opts */ );

                this.beforeInitEvent.fire(Page_Notice);

                DOM.addClass(this.element, Page_Notice.CLASS);

                if (opts) {
                    this.cfg.applyConfig(opts, true);
                    this.render();
                }

                this.initEvent.fire(Page_Notice);
            },

            initDefaultConfig: function() {
                Page_Notice.superclass.initDefaultConfig.call(this);

                if (!this.cfg.getProperty(&quot;container&quot;)) {
                    this.cfg.queueProperty(&quot;container&quot;, Page_Notice.DEFAULT_CONTAINER_ID);
                }
            },

            render: function(container) {
                container = DOM.get(container || this.cfg.getProperty(&quot;container&quot;));
                if (container) {
                    DOM.addClass(container, &quot;cjt-pagenotice-container&quot;);
                }

                var args_copy = Array.prototype.slice.call(arguments, 0);
                args_copy[0] = container;

                var ret = Page_Notice.superclass.render.apply(this, args_copy);

                return ret;
            }
        });


        // -------------------------------------------------------------------------------------
        // Extensions to Page_Notice for TEMPORARY in-page notifications.
        // (The exact UI controls are not defined publicly.)
        //
        // @class Dynamic_Page_Notice
        // @extends Page_Notice
        //
        // (Same interface as Page_Notice.)
        // -------------------------------------------------------------------------------------
        var Dynamic_Page_Notice = function() {
            Dynamic_Page_Notice.superclass.constructor.apply(this, arguments);
        };

        Dynamic_Page_Notice.CLASS = &quot;cjt-dynamic-pagenotice&quot;;

        Dynamic_Page_Notice.SUCCESS_COUNTDOWN_TIME = 30;

        YAHOO.lang.extend(Dynamic_Page_Notice, Page_Notice, {
            init: function(el, opts) {
                Dynamic_Page_Notice.superclass.init.call(this, el /* , opts */ );

                this.changeBodyEvent.subscribe(this._add_close_button);
                this.changeBodyEvent.subscribe(this._add_close_link);

                this.beforeInitEvent.fire(Dynamic_Page_Notice);

                DOM.addClass(this.element, Dynamic_Page_Notice.CLASS);

                if (opts) {
                    this.cfg.applyConfig(opts, true);
                    this.render();
                }

                this.initEvent.fire(Dynamic_Page_Notice);

                this.cfg.subscribeToConfigEvent(&quot;content&quot;, this._reset_close_link, this, true);
            },

            _add_close_link: function() {
                var close_text = LOCALE.maketext(&quot;Click to close.&quot;);
                var close_html = '&lt;a href=&quot;javascript:void(0)&quot;&gt;' + close_text + &quot;&lt;/a&gt;&quot;;

                var close_link;

                // Can't add to innerHTML because that will recreate
                // DOM nodes, which may have listeners on them.
                var nodes = CPANEL.dom.create_from_markup(close_html);
                close_link = nodes[0];

                DOM.addClass(close_link, &quot;cjt-dynamic-pagenotice-close-link&quot;);
                EVENT.on(close_link, &quot;click&quot;, this.fade_out, this, true);
                this.body.appendChild(close_link);

                if (this.cfg.getProperty(&quot;level&quot;) === &quot;success&quot;) {
                    close_link.innerHTML += ' [&lt;span id=&quot;' + this.element.id + '_countdown&quot;&gt;' + Dynamic_Page_Notice.SUCCESS_COUNTDOWN_TIME + &quot;&lt;/span&gt;]&quot;;
                    this._countdown_timeout = CPANEL.util.countdown(this.element.id + &quot;_countdown&quot;, this.fade_out.bind(this));
                }
            },

            _reset_close_link: function() {
                if (this.cfg.getProperty(&quot;level&quot;) === &quot;success&quot;) {
                    var span_el = DOM.get(this.element.id + &quot;_countdown&quot;);
                    span_el.innerHTML = Dynamic_Page_Notice.SUCCESS_COUNTDOWN_TIME;
                }
            },

            /**
             * Attached to changeBodyEvent when &quot;closebutton&quot; is enabled.
             *
             * @method _add_close_button
             * @private
             */
            _add_close_button: function() {
                if (!this._cjt_close_button || !DOM.inDocument(this._cjt_close_button)) {
                    this.body.innerHTML += closeButton;
                    this._cjt_close_button = CPANEL.Y(this.body).one(&quot;.cjt-dynamic-pagenotice-close-button&quot;);

                    EVENT.on(this._cjt_close_button, &quot;click&quot;, this.fade_out, this, true);
                }
            },

            /**
             * A reference to the close button.
             *
             * @property _cjt_close_button
             * @private
             */
            _cjt_close_button: null
        });

        // Publish the public interface
        CPANEL.widgets.Notice = Notice;
        CPANEL.widgets.Page_Notice = Page_Notice;
        CPANEL.widgets.Dynamic_Page_Notice = Dynamic_Page_Notice;

        // CSS for this doesn't work in IE&lt;8. IE8 support may be possible,
        // but getting the wrapper to &quot;contain&quot; the &lt;select&gt; &quot;tightly&quot;
        // may be more trouble than its worth. So, we only do this for
        // IE9+.
        // Sets classes &quot;cjt-wrapped-select&quot; and &quot;cjt-wrapped-select-skin&quot;
        // Sets ID &quot;(ID)-cjt-wrapped-select&quot; if the &lt;select&gt; has an ID
        var _prototype_wrapper;
        var _arrow_key_codes = {
            37: 1,
            38: 1,
            39: 1,
            40: 1
        };
        var Wrapped_Select = function(sel) {
            if (YAHOO.env.ua.ie &amp;&amp; (YAHOO.env.ua.ie &lt; 9)) {
                return;
            }

            if (typeof sel === &quot;string&quot;) {
                sel = DOM.get(sel);
            }

            if (sel.multiple) {
                throw &quot;Can't use Wrapped_Select on multi-select!&quot;;
            }

            if (!_prototype_wrapper) {
                var dummy = document.createElement(&quot;div&quot;);
                dummy.innerHTML = &quot;&lt;div class='cjt-wrapped-select'&gt;&lt;div class='cjt-wrapped-select-skin'&gt;&lt;/div&gt;&lt;div class='cjt-wrapped-select-icon'&gt;&lt;/div&gt;&lt;/div&gt;&quot;;
                _prototype_wrapper = dummy.removeChild(dummy.firstChild);
            }

            var wrapper = this._wrapper = _prototype_wrapper.cloneNode(true);

            if (sel.id) {
                wrapper.id = sel.id + &quot;-cjt-wrapped-select&quot;;
            }

            this._select = sel;
            this._options = sel.options;
            this._label = wrapper.firstChild;

            this.synchronize_label();

            sel.parentNode.insertBefore(wrapper, sel);
            wrapper.insertBefore(sel, this._label);

            EVENT.on(sel, &quot;keydown&quot;, function(e) {
                if (_arrow_key_codes[e.keyCode]) {
                    setTimeout(function() {
                        sel.blur();
                        sel.focus();
                    }, 1);
                }
            });
            EVENT.on(sel, &quot;change&quot;, this.synchronize_label, this, true);
        };
        Wrapped_Select.prototype.synchronize_label = function() {
            if (this._select) {
                var label = &quot;&quot;;
                var idx = this._select.selectedIndex;
                if (idx &gt; -1) {
                    var opt = this._options[idx];
                    label = CPANEL.util.get_text_content(opt) || opt.value;
                }
                CPANEL.util.set_text_content(this._label, label);
            } else {
                this.synchronize_label = Object; // Use an existing function.
            }
        };
        CPANEL.widgets.Wrapped_Select = Wrapped_Select;

        /**
         * This YUI Tooltip subclass adds a mousedown listener for touch displays.
         * NOTE: To accomplish this, we have to twiddle with some privates.
         *
         * Arguments, parameters, and usage are the same as YUI Tooltip, except
         * for adding the *MouseDown events and methods.
         *
         * @class CPANEL.widgets.Touch_Tooltip
         * @extends YAHOO.widget.Tooltip
         * @constructor
         * @param {string|object} el The ID of the tooltip, or the config object
         * @param {object} cfg If an ID was given in the first argument, this is the config object.
         */
        var Touch_Tooltip = function(el, cfg) {
            if (!cfg) {
                cfg = el;
                el = null;
            }
            if (!el) {
                el = DOM.generateId();
            }

            return YAHOO.widget.Tooltip.call(this, el, cfg);
        };
        var CustomEvent = YAHOO.util.CustomEvent;
        var Event = EVENT;
        YAHOO.lang.extend(Touch_Tooltip, YAHOO.widget.Tooltip, {

            /**
             * See the YUI Tooltip docs.
             */
            initEvents: function() {
                Touch_Tooltip.superclass.initEvents.call(this);
                var SIGNATURE = CustomEvent.LIST;

                this.contextMouseDownEvent = this.createEvent(&quot;contextMouseDown&quot;);
                this.contextMouseDownEvent.signature = SIGNATURE;
            },

            /**
             * Similar to other functions defined in the YUI Tooltip prototype.
             * See the YUI Tooltip docs.
             */
            onContextMouseDown: function(e, obj) {
                var context = this;

                // Fire first, to honor disabled set in the listner
                if (obj.fireEvent(&quot;contextMouseDown&quot;, context, e) !== false &amp;&amp; !obj.cfg.getProperty(&quot;disabled&quot;)) {

                    var showdelay = obj.cfg.getProperty(&quot;showdelay&quot;);
                    var hidedelay = obj.cfg.getProperty(&quot;hidedelay&quot;);
                    obj.cfg.setProperty(&quot;showdelay&quot;, 0);
                    obj.cfg.setProperty(&quot;hidedelay&quot;, 0);

                    if (obj.cfg.getProperty(&quot;visible&quot;)) {
                        obj.doHide();
                    } else {
                        obj.doShow();
                    }

                    obj.cfg.setProperty(&quot;showdelay&quot;, showdelay);
                    obj.cfg.setProperty(&quot;hidedelay&quot;, hidedelay);
                }
            },

            /**
             * See the YUI Tooltip docs.
             * NB: copied from Tooltip; tweaks made where noted
             */
            configContext: function(type, args, obj) {

                // Not in Tooltip natively, but that's probably an oversight.
                YAHOO.widget.Overlay.prototype.configContext.apply(this, arguments);

                var context = args[0],
                    aElements,
                    nElements,
                    oElement,
                    i;

                if (context) {

                    // Normalize parameter into an array
                    if (!(context instanceof Array)) {
                        if (typeof context == &quot;string&quot;) {
                            this.cfg.setProperty(&quot;context&quot;, [document.getElementById(context)], true);
                        } else { // Assuming this is an element
                            this.cfg.setProperty(&quot;context&quot;, [context], true);
                        }
                        context = this.cfg.getProperty(&quot;context&quot;);
                    }

                    // Remove any existing mouseover/mouseout listeners
                    this._removeEventListeners();

                    // Add mouseover/mouseout listeners to context elements
                    this._context = context;

                    aElements = this._context;

                    if (aElements) {
                        nElements = aElements.length;
                        if (nElements &gt; 0) {
                            i = nElements - 1;
                            do {
                                oElement = aElements[i];
                                Event.on(oElement, &quot;mouseover&quot;, this.onContextMouseOver, this);
                                Event.on(oElement, &quot;mousemove&quot;, this.onContextMouseMove, this);
                                Event.on(oElement, &quot;mouseout&quot;, this.onContextMouseOut, this);

                                // THIS IS ADDED.
                                Event.on(oElement, &quot;mousedown&quot;, this.onContextMouseDown, this);
                            }
                            while (i--);
                        }
                    }
                }
            },

            /**
             * See the YUI Tooltip docs.
             * NB: copied from Tooltip; tweaks made where noted
             */
            _removeEventListeners: function() {
                Touch_Tooltip.superclass._removeEventListeners.call(this);

                var aElements = this._context,
                    nElements,
                    oElement,
                    i;

                if (aElements) {
                    nElements = aElements.length;
                    if (nElements &gt; 0) {
                        i = nElements - 1;
                        do {
                            oElement = aElements[i];
                            Event.removeListener(oElement, &quot;mouseover&quot;, this.onContextMouseOver);
                            Event.removeListener(oElement, &quot;mousemove&quot;, this.onContextMouseMove);
                            Event.removeListener(oElement, &quot;mouseout&quot;, this.onContextMouseOut);

                            // THIS IS ADDED.
                            Event.removeListener(oElement, &quot;mousedown&quot;, this.onContextMouseDown);
                        }
                        while (i--);
                    }
                }
            }
        });
        CPANEL.widgets.Touch_Tooltip = Touch_Tooltip;

    } // end else statement
})();
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fusr%2Flocal%2Fcpanel%2Fbase%2Fcjt'>Back to Directory</a>