Mini Kabibi Habibi

/* CheckList UI */
(function (wa, $) {
    var ui = wa.UI = wa.UI || {};

    ui.closeDelayTimer;
    ui.CheckList = function (options) {
        var el = {
            $checkListWrapper: $("#wa-checklist-wrapper"),
            $checkList: $("#wa-checklist"),
            $messageWrapper: $("#wa-message-wrapper"),
            $message: $("#wa-message"),
            $messageImage: $("#wa-message-img"),
            $closeWrapper: $("#wa-column-four"),
            $close: $("#wa-close"),
            $logo: $("#wa-column-one"),
            $state: $("#wa-column-three")
        },
            checkDomLoadedInterval,
            animateDurationInMs = 400,
            self = this,

            setState = function (options) {
                el.$state
                    .html(options.state.template)
                    .addClass(options.state.css);
            },

            setMessage = function (options) {
                el.$message
                    .html(options.message.text)
                el.$messageImage
                    .html("»")
            },

            setBorder = function () {
                el.$checkList.css({
                    borderBottomColor: el.$state.css('backgroundColor')
                });
            },

            setViewMode = function () {
                var maxIterations = 20;
                checkDomLoadedInterval = setInterval(function () {
                    if (maxIterations === 0) {
                        clearInterval(checkDomLoadedInterval);
                        return;
                    }

                    if ($(window).outerWidth() === options.windowWidth) {
                        var windowWidth = $(window).outerWidth(),
                            checkListOuterWidth = el.$checkList.outerWidth();

                        if (checkListOuterWidth > windowWidth) {
                            el.$logo.hide();

                            var minMessageWidth = 150,
                                logoWidth = el.$logo.outerWidth(),
                                stateWidth = el.$state.outerWidth(),
                                closeWidth = el.$closeWrapper.outerWidth(),
                                checkListWidth = logoWidth + minMessageWidth + stateWidth + closeWidth,
                                messageWidth = $(window).outerWidth() - checkListWidth;

                            if (messageWidth <= minMessageWidth) {
                                el.$messageWrapper.hide();
                            } else {
                                el.$message.width(messageWidth);
                            }
                        }

                        clearInterval(checkDomLoadedInterval);
                    }

                    maxIterations--;
                }, 50);
            },

            clearMouseMoveEvents = function () {
                el.$checkList.on({
                    mouseover: function () { return false; },
                    mouseout: function () { return false; }
                });
            },

            setMouseMoveEvents = function () {
                el.$checkList.on({
                    mouseover: function () { clearCloseDelayTimer(); },
                    mouseout: function () { initCloseDelayTimer(options.showTimeMouseout); }
                });
            },

            clearCloseDelayTimer = function () {
                clearTimeout(ui.closeDelayTimer);
            },

            setCloseDelayTimer = function () {
                initCloseDelayTimer(options.showTime);
            },

            initCloseDelayTimer = function (showTimeInMs) {
                var totalShowTimeInMs = showTimeInMs + animateDurationInMs;
                ui.closeDelayTimer = setTimeout(function () {
                    el.$checkList.trigger("closeTimeoutExpire", self);
                }, totalShowTimeInMs);
            },

            onEvent = function (name, callback) {
                el.$checkList.one(name, function (event, sender) {
                    callback(event, sender)
                });
            },

            initialize = function () {
                if (options) {
                    setState(options);
                    setBorder(options);
                    setMessage(options);

                    if (options.autoClose) {
                        setMouseMoveEvents();
                        setCloseDelayTimer();
                    }

                    el.$logo.html(options.title);
                    el.$close.attr("src", options.closeImage);

                    if (options.disableClose) {
                        el.$closeWrapper
                            .css("cursor", "default")
                            .children()
                            .hide();
                    } else {
                        el.$closeWrapper.click(function () {
                            el.$checkList.trigger("closeClick", self);

                            if (options.autoClose &&
                                ui.closeDelayTimer) {
                                clearMouseMoveEvents();
                                clearCloseDelayTimer();
                            }
                        });
                    }

                    setViewMode();
                }
            }();

        this.close = function (callback) {
            el.$checkListWrapper
                .animate({
                    bottom: 75
                }, {
                    duration: animateDurationInMs,
                    complete: function () {
                        el.$checkList.trigger("closeComplete", self);
                        el.$checkList.unbind();

                        if (callback && typeof callback === "function") {
                            callback();
                            return;
                        }
                    }
                });
            return this;
        };

        this.open = function (callback) {
            el.$checkListWrapper
                .show()
                .stop()
                .animate({
                    bottom: 0
                }, {
                    duration: animateDurationInMs,
                    complete: function () {
                        if (callback && typeof callback === "function") {
                            callback();
                            return;
                        }
                    }
                });
            return this;
        };

        this.closeClick = function (callback) {
            onEvent("closeClick", callback);
            return this;
        };

        this.closeTimeOutExpire = function (callback) {
            onEvent("closeTimeoutExpire", callback);
            return this;
        };

        this.closeComplete = function (callback) {
            onEvent("closeComplete", callback);
            return this;
        };
    };

    ui.WebAdvisorCheckList = function (opt) {
        var options = opt || {},
            settings = wa.Utils.Settings,
           webAdvisor = wa.Core.WebAdvisor,
            _window = wa.Core.Window;

        return new ui.CheckList({
            showTime: options.showTime || settings.get("*ChecklistShowTime"),
            showTimeMouseout: options.showTimeMouseout || settings.get("showTimeMouseout"),
            title: options.title || webAdvisor.getProductLogoHtml(),            
            close: options.close || _window.close,
            closeImage: options.closeImage || "wacore:mfw\\packages\\builtin\\main_close.png",
            windowWidth: _window.getWidth(),
            state: options.state,
            message: options.message,
            autoClose: options.autoClose || false,
            disableClose: options.disableClose || false,
        });
    };

    ui.CheckList.templates = {
        defaultState: function (options, key, state) {
            var template = ["<div id='wa-state' key='{0}' state='{1}'>".format(key, state),
                               "<img id='wa-state-img' class='{imageCss}' src='{image}' />",
                                "<div id='wa-state-text-wrapper'>",
                                    "<div id='wa-state-text'>{text}</div>",
                                "</div>",
                            "</div>"].join("\n");
            return this.bindTemplate({
                text: options.text,
                image: options.image,
                imageCss: options.imageCss
            }, template);
        },

        textState: function (options, key, state) {
            var template = ["<div id='wa-state' key='{0}' state='{1}'>".format(key, state),
                                "<div id='wa-state-text-wrapper'>",
                                   "<div id='wa-state-text'>{text}</div>",
                                "</div>",
                            "</div>"].join("\n");
            return this.bindTemplate({
                text: options.text
            }, template);
        },

        bindTemplate: function (keys, template) {
            for (var key in keys) {
                template = template.replace("{" + key + "}", keys[key]);
            }
            return template;
        }
    };
}(window.WebAdvisor = window.WebAdvisor || {}, jQuery));
//7327933798676B40393E27B0F235884EFF1620854958CD83C61791CAC62F18D2EF13117C81D3EF37569DD19B408E3BB2F4F429F9095F741F4FC80EE0C7493806++