// HTML Escape helper utility
var TemplaetTagged = (function () {
    // Thanks to Andrea Giammarchi
    var reEscape = /[&<>'"]/g,
        reUnescape = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g,
        oEscape = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            "'": '&#39;',
            '"': '&quot;'
        },
        oUnescape = {
            '&amp;': '&',
            '&#38;': '&',
            '&lt;': '<',
            '&#60;': '<',
            '&gt;': '>',
            '&#62;': '>',
            '&apos;': "'",
            '&#39;': "'",
            '&quot;': '"',
            '&#34;': '"'
        },
        fnEscape = function (m) {
            return oEscape[m];
        },
        fnUnescape = function (m) {
            return oUnescape[m];
        },
        replace = String.prototype.replace;
    return (Object.freeze || Object)({
        escape: function escape(s) {
            return replace.call(s, reEscape, fnEscape);
        },
        unescape: function unescape(s) {
            return replace.call(s, reUnescape, fnUnescape);
        }
    });
}());

var window_opener = null;

var customLocalStorage = (function () {

    let _self = this,
        _isLocalStoreage = false,
        _cDetails = null,
        __uData = null;

    try {
        if (window_opener) {
            _cDetails = window_opener.courseDetail;
        }
    } catch (err) { }

    this.setUserData = function (uData) {
        __uData = uData;

        try {
            if (window_opener) {
                let _uData = JSON.parse(uData);
                _cDetails[_cDetails.cName] = _uData;
                _cDetails['userName'] = _uData.userName
            }
        } catch (err) { }

        let _isDebugging = false;

        try {
            if (!_isLocalStoreage && _user_details) {
                _isDebugging = _user_details['isDebugging'] || false;
                _isLocalStoreage = _isDebugging;
            }
        } catch (err) {

        }

        try {
            if (window.localStorage && _isLocalStoreage) {
                let _uData = JSON.parse(uData);
                localStorage.setItem(_uData['title'], uData);
            }
        } catch (err) { }

    }

    this.setStatus = function (msg) {

    }

    this.getStatus = function () {

    }

    this.quit = function () {

    }

    this.getUserData = function (uTitle) {

        try {
            if (window_opener) {
                _cDetails = window_opener.courseDetail;
                if (_cDetails['userName'] != null) {
                    let _cData = _cDetails[_cDetails.cName]
                    // _cData["userName"] = _cDetails['userName']
                    let _uData = JSON.stringify(_cData);
                    return _uData
                }
                return __uData
            }
        } catch (err) {

        }

        try {
            if (window.localStorage && _isLocalStoreage) {
                let _uData = localStorage.getItem(uTitle);
                _uData = JSON.parse(JSON.stringify(_uData))
                return _uData
            } else {
                return __uData
            }
        } catch (err) { }
    }

    return this;
})

var _simple_timer = null;

var Utils = (function () {

    let _self = this,

        _preloader = $("#preloader"),
        _shell_wrapper = $("#shell_wrapper"),
        _hideIntervalPreloader = null,
        _isJumpTileCalled = false,
        _left_sideNav = null,
        _utilsData = null,
        _simple_next_day_video = null;


    String.prototype.toTitleCase = function () {
        return this.replace(/\w\S*/g, function (txt) {
            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
        });
    };

    this.isPageChanged = false;
    this.toTitleCase = function (str) {
        return str.replace(
            /\w\S*/g,
            function (txt) {
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            }
        );
    }



    this.addEventsForTabIndex = function (tabElements) {
        _self.removeTabIndex()
        try {
            $("#fti_elem").remove();
            $("#lti_elem").remove();
        } catch (err) {

        }
        var _isTabIndexing = true;

        if (_isTabIndexing) {

            var _elements = tabElements['elements'] || [];
            var _sIndex = parseInt(tabElements['sIndex']) || 0;
            var __sIndex = parseInt(tabElements['sIndex']) || 0;
            var _nIndex = parseInt(tabElements['nIndex']) || 0;
            let _selectors = []

            $.each(_elements, function (i, item) {
                var _selector = $(item['selector']);
                _selector.attr('tabindex', _sIndex)

                _selectors.push(_selector);

                $.each(item, function (key, val) {
                    if (key != "selector") {
                        _selector.attr(key, val)
                    }
                });

                // var _title = item['title'];
                // _selector.attr({
                //     'tabindex': _sIndex
                // });

                _self.addKeyEvent(_selector)
                _self.focusHandler(_selector)

                _sIndex = _sIndex + _nIndex;
            });

            setTimeout(function () {
                // _self.addKeyEvent(_selectors)
                addTowNewElement(_selectors, __sIndex, _sIndex)
            }, 100)

        }
    }

    this.addEventsForTabIndex2 = function (tabElements) {

        try {
            $("#fti_elem").remove();
            $("#lti_elem").remove();
        } catch (err) {

        }
        _self.removeTabIndex();

        var _isTabIndexing = true;

        if (_isTabIndexing) {

            var _elements = tabElements['elements'] || [];
            var _sIndex = parseInt(tabElements['sIndex']) || 0;
            var __sIndex = parseInt(tabElements['sIndex']) || 0;
            var _nIndex = parseInt(tabElements['nIndex']) || 0;

            //    console.log("addEventsForTabIndex:  ", _elements)

            let _selectors = []

            $.each(_elements, function (i, item) {
                var _selector = $(item['selector']);
                // if(!_selector.hasClass('disabled')){

                _selector.attr('tabindex', _sIndex)

                _selectors.push(_selector);

                $.each(item, function (key, val) {
                    if (key != "selector") {
                        _selector.attr(key, val)
                    }
                });

                // var _title = item['title'];
                // _selector.attr({
                //     'tabindex': _sIndex
                // });

                _self.addKeyEvent(_selector)
                _self.focusHandler(_selector)

                _sIndex = _sIndex + _nIndex;
                // }
            });

            setTimeout(function () {
                // _self.addKeyEvent(_selectors)
                //addTowNewElement(_selectors, __sIndex, _sIndex)
            }, 100)

        }
    }

    var addTowNewElement = function (elems, sIndex, nIndex) {

        var _elems = $(elems)

        let _length = _elems.length

        if (_length <= 1) return;


        let _sIndex = sIndex || 1
        let _nIndex = nIndex || _length

        var _elem_1 = _elems[0];
        var _elem_l = _elems[_elems.length - 1];

        // console.log("addTowNewElement", _elem_1.hasClass('iGPopup'))

        // let _btns = ['btn_transcript.active', 'btn_pause', 'btn_play', 'btn_replay', 'btn_resources', 'btn_help', 'menuListIcon', 'menu_list .active', 'btn_resources', 'left_sideNav_holder li.btn.active', 'btn_exit']

        if (!_elem_1.hasClass('iGPopup')) {

            let _btns = ['left_sideNav_holder .btn.active', 'btn_transcript', 'transcript_popup', 'transcript_popup .close', 'btn_unmute', 'btn_mute', 'btn_pause', 'btn_play', 'btn_replay', 'btn_resources', 'btn_help', 'menuListIcon', 'menu_list .active', 'btn_exit']

            $.each(_btns, function (i, item) {
                //   console.log(i, item)
                let __nIndex = _nIndex // + (i + 2)
                $("#" + item).attr('tabIndex', __nIndex);
            })

            $("#btn_transcript.disabled").removeAttr('tabindex')
            _nIndex = _nIndex + _btns.length;
        }


        try {


            $("#fti_elem").remove();
            $("#lti_elem").remove();

            let _fti_elem = $("<div class = 'sr-only' id ='fti_elem' tabIndex='" + _sIndex + "'></div>")
            let _lti_elem = $("<div class = 'sr-only' id ='lti_elem' tabIndex='" + _nIndex +
                "'></div>")

            let _holder = $(_elem_1).parent()

            _holder.prepend(_fti_elem)
            _holder.append(_lti_elem)


            _fti_elem.focus(function () {
                _elem_l.focus()
            })

            _lti_elem.focus(function () {
                _elem_1.focus()
            })

        } catch (err) {

        }
    }



    this.focusOnPageLevel = function () {

        $("#fti_elem_1").remove();
        $("#lti_elem_1").remove();

        var _max = 0;
        var _min = 0;
        var __max = 0;

        let _hoder = $("#global_wrapper")

        let _elem_l = $('#skip_toMaincontent');
        let _elem_1 = $('#skip_toMaincontent');

        $('#global_wrapper [tabindex]').attr('tabindex', function (a, b) {
            _max = Math.max(_max, +b);
            if (_max > __max) {
                _elem_l = $(this)
                __max = _max
            }
            // console.log(_max, __max)
        });


        let _sIndex = parseInt(1)
        let _nIndex = parseInt(_max + 100)

        let _fti_elem = $("<div class = 'sr-only' id ='fti_elem_1' tabIndex='" + _sIndex + "'></div>")
        let _lti_elem = $("<div class = 'sr-only' id ='lti_elem_1' tabIndex='" + _nIndex +
            "'></div>")

        _hoder.prepend(_fti_elem)
        _hoder.append(_lti_elem)


        _fti_elem.focus(function () {
            _elem_l.focus()
        })

        _lti_elem.focus(function () {
            _elem_1.focus()
        })
    }

    this.addTabindex = function () {
        _self.addTabIndex()
    };

    this.addTabIndex = function () {


        try {
            $(".menuListIcon").removeClass("isOn");
            $(".settingIcon").removeClass("isOn");
            $("#fti_elem").remove()
            $("#lti_elem").remove()
        } catch (err) { }

        $("*[tabindex]").each(function () {
            let _self = $(this)
            let _data_tab = _self.attr("data-tab")
            if (!_data_tab) {
                _self.attr("data-tab", _self.attr("tabindex"));
            } else {
                _self.attr("tabindex", _data_tab);
            }
        });

        setTimeout(function () {
            // $("#skip_toMaincontent").focus();
            $("#templateHolder").focus()
        }, 300)
    };

    this.removeTabindex = function () {
        _self.removeTabIndex()
    }

    this.removeTabIndex = function () {

        try {
            $("#fti_elem").remove()
            $("#lti_elem").remove()
        } catch (err) {

        }
        $("*[tabindex]").each(function () {
            let _self = $(this)
            let _data_tab = _self.attr("data-tab")
            if (!_data_tab) {
                _self.attr("data-tab", _self.attr("tabindex"));
            }
            _self.attr('tabindex', -1);
        })

        // $("button").attr('tabindex', -1);
        // $("a").attr('tabindex', -1);
    };

    this.addKeyEvent = function (selector) {

        let _selector = $(selector)

        try {

            let _tagName = (_selector[0].tagName).toLowerCase();

            if ((_selector.attr('role') === "button") || (_selector.attr('role') === "radio") || (_selector.hasClass('iEle')) || (_selector.hasClass('submit_btn')) || (_selector.hasClass('optionIcons')) || (_selector.hasClass('optn_outer')) || (_selector.hasClass('btn')) || (_tagName === "a") || (_tagName === "span") || (_tagName === "li")) {

                if (_selector.attr('type') == "text" || _tagName == "input") {
                    // console.log(_selector.attr('type'))
                } else {

                    _selector.off("keypress").on("keypress", function (e) {

                        e.preventDefault();
                        e.stopPropagation();

                        var key = e && e.which ? e.which : 0;

                        var elem = $(this);

                        if (key == 13 || key == 32) {
                            let __elem = elem
                            try {

                                let _radio = elem.find("input") || elem.find(".radio") || null;

                                let _checkBox = elem.find(".checkBox") || elem.find(".cb") || null

                                __elem = (_radio.length >= 1) ? _radio : (_checkBox.length >= 1) ? _checkBox : elem;
                            } catch (err) {

                            }

                            if (!__elem.hasClass('disabled') || __elem.hasClass('active')) {
                                __elem.trigger("click");
                                // __elem.focus();
                            }

                            return false;
                        }
                    });
                }
            }
        } catch (err) {

        }


        // }
    }

    this._addKeyEvent = function (_selector) {

        let ___selector = _selector

        //  console.log("addKeyEvent ", ___selector)

        $(_selector).off("keypress").on("keypress", function (e) {
            var key = e && e.which ? e.which : 0;
            var elem = $(this);
            //  console.log("keypress:  ", key, elem)
            if (key == 13 || key == 32) {
                if (!elem.hasClass('disabled')) {
                    elem.trigger("click");
                }
                return false;
            } else if (key == 9) {

                var elems = $(___selector)
                if (elems.length <= 1) return;

                var elem_1 = $(elems[0]);
                var elem_l = $(elems[elems.length - 1]);

                if (e.shiftKey) {
                    /* shift + tab */
                    if (document.activeElement === elem_1) {
                        elem_l.focus();
                        e.preventDefault();
                    }
                } else {
                    /* tab */
                    if (document.activeElement === elem_l) {
                        elem_1.focus();
                        e.preventDefault();
                    }
                }
                return false;
            }
        });
    }

    this.focusHandler = function (_selector) {
        $(_selector).off("focus blur").on("focus blur", function (e) {
            e.stopPropagation();
            var elem = $(this);
            if (!elem.hasClass('disabled')) {
                setTimeout(function () {
                    elem.toggleClass("focused", elem.is(":focus"));
                }, 0);
            }
        });
    }

    this.trapFocus = function (_selector) {

        // var focusableEls = element.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');

        e.stopPropagation();

        var focusableEls = $(_selector)
        if (focusableEls.length <= 1) return;
        var firstFocusableEl = focusableEls[0];
        var lastFocusableEl = focusableEls[focusableEls.length - 1];

        var KEYCODE_TAB = 9;

        $(_selector).off("keyup").on("keyup", function (e) {

            var isTabPressed = (e.key === 'Tab' || e.keyCode === KEYCODE_TAB);

            if (!isTabPressed) {
                return;
            }
            //  console.log("this.trapFocus    ", isTabPressed)

            if (e.shiftKey) /* shift + tab */ {
                if (document.activeElement === firstFocusableEl) {
                    lastFocusableEl.focus();
                    e.preventDefault();
                }
            } else /* tab */ {
                if (document.activeElement === lastFocusableEl) {
                    firstFocusableEl.focus();
                    e.preventDefault();
                }
            }
        });



        var key = e && e.which ? e.which : 0;

        if (key == 13 || key == 32) {
            var elem = $(this);
            //  console.log("keypress:  ", key, elem)

            if (!elem.hasClass('disabled')) {
                elem.trigger("click");
            }
            return false;
        }
    }


    this.vidsc2Vals = []
    this.addZero = function (no) {
        try {
            var _no = no.toString();
            if (_no.length < 2) {
                _no = '0' + _no
            }
            return _no;
        } catch (err) {
            _self.error("addZero: " + err.toString())
        }
    }
    this.log = function (logMsg) {
        // console.log('Utils:', logMsg);
    }

    this.error = function (err) {
        console.error('Utils: ' + err.toString());
    }

    this.clear = function () {
        //console.clear();
    }

    this.SecondsToHHMMSS = function (totalSeconds) {

        try {
            var hours = Math.floor(totalSeconds / 3600);
            var minutes = Math.floor((totalSeconds - (hours * 3600)) / 60);
            var seconds = totalSeconds - (hours * 3600) - (minutes * 60);
            // round seconds
            seconds = Math.round(seconds * 100) / 100;

            hours = (hours < 10 ? "0" + hours : hours);
            minutes = (minutes < 10 ? "0" + minutes : minutes);
            seconds = (seconds < 10 ? "0" + seconds : seconds);

            var _result = hours + ":" + minutes + ":" + seconds
            var _time = {
                'result': _result,
                'h': hours,
                'm': minutes,
                's': seconds,
            }
            return _time;
        } catch (err) {

        }
    }

    this.convertedToSeconds = function (strTime) {
        try {
            var _strTime = strTime || "00:00:00:00:00:00:00";
            _strTime = _strTime.split(':').map(Number);
            var _len = _strTime.length;
            var _mLen = 7;
            if (_len < _mLen) {
                for (var i = _len; i < _mLen; i++) {
                    _strTime.unshift(0);
                }
            }
            var _seconds = $.countdown.periodsToSeconds(_strTime) || 0;
            return _seconds;
        } catch (err) {

        }
    }

    this.templateTaggedToHtml = function (pieces) {
        var result = pieces[0];
        var substitutions = [].slice.call(arguments, 1);
        for (var i = 0; i < substitutions.length; ++i) {
            result += TemplaetTagged.escape(substitutions[i]) + pieces[i + 1];
        }
        _self.log(result);
        return result;
    }

    this.parseJson = function (path, callback) {
        _self.log('parseJson: ' + path);
        try {
            $.ajax({
                type: 'GET',
                url: path,
                async: false,
                dataType: 'json',
                success: function (data) {
                    let _data = JSON.stringify(data['data'])
                    _self.log('Utils: ' + _data);
                    if (callback) {
                        callback(_data);
                    }
                    return _data;
                },
                error: function (err) {
                    Utils.error('Utils: parseJson:     ERROR: ' + err);
                }
            });

        } catch (err) {
            Utils.error('Utils: parseJson:' + err)
        }

    }

    this.enabledDisabled = function (btn, isActive) {
        try {
            if (isActive) {
                $(btn).addClass('active').removeClass('disabled');
                $(btn).attr('aria-disabled', false).removeAttr('disabled');
            } else {
                $(btn).addClass('disabled').removeClass('active');
                $(btn).attr('aria-disabled', true).attr('disabled', true);
            }
        } catch (err) {
            _self.error("enabledDisabled: " + err)
        }
    }



    this.loadTemplate = function (dom, dataTile, callback) {
        try {

            // _self.showPreloader();

            _self.removeAllEvents(dom);

            var _holder = $(dom)
            var _page_src = "./templates/" + dataTile + "/" + dataTile + ".html";
            //  console.log('Utils: ' + _page_src);

            _holder.empty();
            _holder.hide();

            var _callback = callback || function () {

            }

            _holder.load(_page_src, function (responseTxt, statusTxt, jqXHR) {
                if (statusTxt == "success") {
                    _callback();
                    _holder.fadeIn();
                    //  console.log("Utils: New content loaded successfully!");
                    try {
                        _self.updateAvatar()
                    } catch (err) {
                        _self.error(": " + err)
                    }
                }
                if (statusTxt == "error") {
                    Utils.error("Utils: loadTemplate:  ERROR: " + jqXHR.status + " " + jqXHR.statusText);
                }
            });
        } catch (err) {
            _self.error("loadTemplate: " + err)
        }
    }

    this.loadGlobalTemplate = function (dom, dataTile, callback) {

        try {
            _self.showPreloader();
            var _holder = $(dom)
            var _page_src = "./global/" + dataTile + "/" + dataTile + ".html";
            //  console.log('Utils: ' + _page_src);
            _holder.empty();
            var _callback = callback || function () { }

            _holder.load(_page_src, function (responseTxt, statusTxt, jqXHR) {
                if (statusTxt == "success") {


                    if (_callback) {
                        callback();
                    }
                    _self.hidePreloader();
                    _self.log("Utils: New content loaded successfully! ");

                }
                if (statusTxt == "error") {
                    _self.error("Utils: loadTemplate:  ERROR: " + jqXHR.status + " " + jqXHR.statusText);
                }
            });
        } catch (err) {
            _self.error("loadGlobalTemplate: " + err)
        }
    }


    this.hidePreloader = function () {
        if (_hideIntervalPreloader) {
            try {
                clearTimeout(_hideIntervalPreloader);
            } catch (err) {
                _self.error("hidePreloader: " + err)
            }
        }
        _hideIntervalPreloader = setTimeout(function () {
            _preloader = _preloader || $("#preloader")
            _self.visibleElement(_preloader, false)
        }, 300)

    }

    this.showPreloader = function () {

        if (_hideIntervalPreloader) {
            try {
                clearTimeout(_hideIntervalPreloader);
            } catch (err) {

            }
        }
        _preloader = _preloader || $("#preloader")
        _self.visibleElement(_preloader, true)
    }


    this.visibleElement = function (dom, isVisible) {
        if (isVisible) {
            dom.fadeIn();
        } else {
            dom.fadeOut();

        }
    }

    this.enabledDisable = function (btn, isActive) {
        try {
            if (isActive) {
                $(btn).addClass('active').removeClass("disabled");
                $(btn).parent().addClass("active").removeClass('disabled')
                $(btn).removeAttr('disabled');
                $(btn).parent().removeAttr('disabled');
                $(btn).attr('aria-hidden', false);
            } else {
                $(btn).removeClass('active').addClass("disabled");
                $(btn).parent().removeClass("active").addClass('disabled');
                $(btn).attr('disabled', true);
                $(btn).parent().attr('disabled', true);
                $(btn).attr('aria-hidden', true);
            }
        } catch (err) {
            _self.error("enabledDisable: " + err)
        }
    }

    this.JumpTile = function (label) {
        _self.pageCompleted();
        setTimeout(function () {
            _self.gotoTilePage(label)
        }, 300)

    }


    this.pageLoaded = function () {
        try {
            _shell_wrapper.trigger("pageLoaded");
        } catch (err) {
            _self.error("pageLoaded: :  " + err)
        }
    }

    this.pageCompleted = function () {

        _self.removeTimer();

        var _shell_wrapper = $('#shell_wrapper');
        try {
            _shell_wrapper.trigger("pageCompleted");
        } catch (err) {
            _self.error("pageCompleted: :  " + err)
        }

    }

    this.gotoNextModule = function () {

        //  $("#pTiles #next_btn").trigger('click');
        var _shell_wrapper = $('#shell_wrapper')
        try {
            _shell_wrapper.trigger("jumpToBack")
        } catch (err) {
            _self.error("loadNextModule: :  " + err)
        }

    }

    this.gotoNextPage = function () {

        //  $("#pTiles #next_btn").trigger('click');
        var _shell_wrapper = $('#shell_wrapper')
        try {
            _shell_wrapper.trigger("jumpToNext")
        } catch (err) {
            _self.error("loadNextModule: :  " + err)
        }

    }

    this.gotoPreviousPage = function () {

        //  $("#pTiles #next_btn").trigger('click');
        var _shell_wrapper = $('#shell_wrapper')
        try {
            _shell_wrapper.trigger("jumpToBack")
        } catch (err) {
            _self.error("jumpToBack: :  " + err)
        }

    }

    this.loadPopup = function (data, callback) {
        Utils.removeTabIndex()
        Utils.loadTemplate('#popupLoader', 'popup', function () {
            let _popupLoader = $("#popupLoader")
            let _shellPopup = new ShellPopup();
            _shellPopup.init(data, function () {
                if (callback) {
                    Utils.addTabIndex()
                    _popupLoader.empty().removeClass().addClass("h-100 page-section").hide()
                    callback();
                }
            });
            _popupLoader.focus();
        })
    }

    this.loadPDfPopup = function (data, callback) {
        Utils.removeTabIndex()
        Utils.loadTemplate('#pdfPopupLoader', 'pdf_popup', function () {
            let _popupLoader = $("#popupLoader")
            let _shellPopup = new ShellPDFPopup();
            _shellPopup.init(data, function () {
                if (callback) {
                    Utils.addTabIndex()
                    _popupLoader.empty().removeClass().addClass("h-100 page-section").hide()
                    callback();
                }
            });
            _popupLoader.focus();
        })
    }

    this.download_xlsx = function (data) {

        let _name = data['name'],
            _path = data["basePath"] + _name,
            _callback = data['callback'],
            _win = window.open(_path, _name);

        _win.focus();
        if (_callback) {
            _callback()
        }

    }

    this.download_pdfx = function (data) {
        let _pdf = data['pdf'],
            _path = data["basePath"] + _pdf,
            _callback = data['callback'],
            _win = window.open(_path, _pdf);

        _win.focus();
        if (_callback) {
            _callback()
        }

    }

    this.download_pdf = function (data) {

        let _pdf = data['pdf'],
            _path = data["basePath"] + _pdf,
            _callback = data['callback'],
            _data = {
                "popup_data": [{
                    "popupTitle": _pdf,
                    "popupBody": "<div class='pop_bg pdfwrapper'>  <iframe src='" + _path + "' class = 'pdf_holder scrollbar-2' /> <div aria-label='PDF popup close' class='pdf_close_icon'  > </div> </div> </div>"
                }]
            }

        // https://usefulangle.com/post/20/pdfjs-tutorial-1-preview-pdf-during-upload-wih-next-prev-buttons

        // <iframe src='"+pdf+"' class = 'pdf_holder scrollbar-2'> 
        // </div> <iframe src='"+pdf+"' class = 'pdf_holder'> 

        // <object data='"+pdf+"' type='application/pdf' class ='pdf_holder'>

        _self.loadPDfPopup(_data, function () {
            if (_callback) {
                _callback()
            }
        });



        //  let _win = window.open(_path,_pdf);
        //  _win.focus();

        //  if (_callback) {
        //      _callback()
        //  }




    }

    this.gotoTilePage = function (label) {

        if (_isJumpTileCalled) return;

        setTimeout(function () {
            _isJumpTileCalled = false;
        }, 600);

        _isJumpTileCalled = true;

        try {
            var _cPTile = $("#pTiles .pTile.cTile");
            var _tempArr = _cPTile.attr('id').split('_');
            //pTile_1_3 = pTile 1 3
            var _mNo = parseInt(_tempArr[1]);
            var _pNo = parseInt(_tempArr[2]);
            var _nPNo = '';
            if (label == 'next_tile') {
                _nPNo = parseInt(_pNo + 1);
            } else if (label == 'prev_tile') {
                _nPNo = parseInt(_pNo - 1);
            }
        } catch (err) {
            _self.error("JumpTile: 02:  " + err)
        }

        try {
            var _pTile = _mNo + "_" + _nPNo;
            var _nTile = $("#pTile_" + _pTile);
            _self.enabledDisable(_nTile, true);
            _nTile.trigger("click");
        } catch (err) {
            _self.error("JumpTile: 03:  " + err)
        }

    }

    this.addIdsOnTable = function (table) {
        try {
            var _table = $(table)
            var _id = _table.attr('id')
            //  var _tNo = _id.split('table_')[1];
            var _trs = _table.find('tr')
            $.each(_trs, function (trNo) {
                var _tr = $(this);
                var _trNo = _id + "_" + parseInt(trNo + 1)
                _tr.attr({
                    id: _trNo
                })
                var _tds = _tr.find('td')
                $.each(_tds, function (tdNo) {
                    var _td = $(this);
                    var _tdNo = parseInt(tdNo) + 1
                    _td.attr({
                        id: _trNo + "_" + _tdNo,
                    }).addClass('cell disabled')
                })
            })
        } catch (err) {
            _self.error("addIdsOnTable: " + err)
        }
    }

    this.addEventsOnCell = function (table) {
        try {
            var _cells = table.find('.cell');
            $.each(_cells, function (cellNo) {
                var _item = $(this);
                _item.off('click').on('click', function () {
                    var _cell = $(this)
                    if (_cell.hasClass('active') && !_cell.hasClass('clicked')) {
                        //   console.log(_cell.attr('id'))
                        _cells.removeClass('clicked');
                        _cells.find('input').removeClass('clicked');
                        table.trigger('cellSelected', _cell);
                    }
                })
            }).addClass('active').removeClass('disabled');
        } catch (err) {
            _self.error("addEventsOnCell: " + err)
        }
    }

    this.preloadImgs = function (imgs, callback) {

        var _imgs = $(imgs);
        _imgs.hide();

        var _tImgNo = _imgs.length;
        var _cImgNo = 0;

        var _callback = callback || function () { };

        var loadImg = function () {
            try {
                var _img = $(_imgs[_cImgNo])
                var _src = _img.attr('src');
                _img.attr("src", _src).load(function () {
                    _img.fadeIn();
                    loadNextImg(_callback)
                });
            } catch (err) {
                _self.error("preloadImgs: " + err)
                loadNextImg(_callback);
            }
        }

        var loadNextImg = function (callback) {
            try {
                _cImgNo++;
                if (_cImgNo >= _tImgNo) {
                    allImgLoaded(callback)
                } else {
                    loadImg();
                }
            } catch (err) {
                _self.error("loadNextImg: " + err)
            }
        }

        var allImgLoaded = function (callback) {
            // now all images are loaded.          
            try {
                _self.log("PreloadImgs: all images are loaded.")
                if (callback) {
                    callback();
                }
            } catch (err) { }

        }

        if (_tImgNo > 0) {
            loadImg(_callback);
        } else {
            allImgLoaded(_callback)
        }

    }

    this.preLoadImgs_1 = function (imgs, callback) {

        let _imgs = imgs;
        let _tImgNo = _imgs.length;
        let _cImgNo = 0;
        let _callback = callback || function () { };
        _self.isPageChanged = false;

        let loadImg = function () {
            try {
                console.log('Utils: preLoadImgs_1: loadImg: ' + _cImgNo, _tImgNo);
                let _img = $('<img>');
                _img.attr("src", _imgs[_cImgNo]).load(function () {
                    loadNextImg(_callback);
                });

            } catch (err) {
                _self.error("preloadImgs: " + err)
                loadNextImg(_callback);
            }
        }

        let loadNextImg = function (callback) {

            if (_self.isPageChanged) {
                allImgLoaded(callback);
            } else {

                try {
                    _cImgNo++;
                    if (_cImgNo >= _tImgNo) {
                        allImgLoaded(callback)
                    } else {
                        loadImg();
                    }
                } catch (err) {
                    _self.error("loadNextImg: " + err)
                }
            }
        }

        let allImgLoaded = function (callback) {
            // now all images are loaded.          
            try {
                // console.log("PreloadImgs: all images are loaded.")
                if (callback) {
                    callback();
                }
            } catch (err) { }

        }

        if (_tImgNo > 0) {
            loadImg(_callback);
        } else {
            allImgLoaded(_callback)
        }

    }

    this.getEvents = function (element) {
        try {
            if (element) {
                var elemEvents = $._data(element, "events");
                var allDocEvnts = $._data(document, "events");

                for (var evntType in allDocEvnts) {
                    if (allDocEvnts.hasOwnProperty(evntType)) {
                        var evts = allDocEvnts[evntType];
                        for (var i = 0; i < evts.length; i++) {
                            if ($(element).is(evts[i].selector)) {
                                if (elemEvents == null) {
                                    elemEvents = {};
                                }
                                if (!elemEvents.hasOwnProperty(evntType)) {
                                    elemEvents[evntType] = [];
                                }
                                elemEvents[evntType].push(evts[i]);
                            }
                        }
                    }
                }

                // console.log(elemEvents)
                return elemEvents;
            }
        } catch (err) {
            _self.error("getEvents: " + err)
        }
    }

    this.removeAllEvents = function (selector) {
        try {
            if (selector) {
                var _selector = $(selector)[0]
                var _events = Utils.getEvents(_selector)
                $.each(_events, function (key, val) {
                    $(selector).off(key)
                });
            }
        } catch (err) {
            _self.error("removeAllEvents: " + err)
        }
    }


    this.jsLoader = function (arr, callback) {

        var _jsArr = arr || []
        var _cNo = 0;
        var _tNo = _jsArr.length

        var _loadJs = function () {
            var _jsName = _jsArr[_cNo];
            //  console.log("jsLoader:	", _cNo, "	::	", _tNo, "	::	", _jsName)
            try {
                $.getScript(_jsName, function () {
                    _cNo++
                    if (_cNo >= _tNo) {
                        completed();
                    } else {
                        _loadJs()
                    }
                })
            } catch (err) {
                _self.error("_loadJs: " + err)
            }
        }

        var completed = function () {
            //    console.log("completed:	", _cNo, "	::	", _tNo)
            if (callback) {
                callback()
            }
        }

        if (_tNo > 0) {
            _loadJs();
        } else {
            completed()
        }

    }

    this.htmlLoader = function (arr, callback) {

        var _htmlArr = arr || []
        var _jsArr = arr
        var _cNo = 0;
        var _tNo = _htmlArr.length

        var _loadHtml = function () {

            var _ele = $(_htmlArr[_cNo]['holder']);
            var _path = _htmlArr[_cNo]['path'];

            // console.log("htmlLoader:	", _cNo, "	::	", _tNo, "	::	", _path)

            try {
                _ele.hide().empty();
                _ele.load(_path, function () {
                    _ele.fadeIn();
                    _cNo++
                    if (_cNo >= _tNo) {
                        completed();
                    } else {
                        _loadHtml()
                    }
                })
            } catch (err) {
                _self.error("htmlLoader: " + err)
            }
        }

        var completed = function () {
            // console.log("completed:	", _cNo, "	::	", _tNo)
            if (callback) {
                callback()
            }
        }

        if (_tNo > 0) {
            _loadHtml();
        } else {
            completed()
        }

    }

    this.getCurrentDateAndTime = function (skipWeekday) {
        var date = new Date(),
            year = date.getFullYear(),
            month = date.getMonth(),
            day = date.getDate(),
            weekDay = date.getDay(),
            hours = date.getHours(),
            minutes = date.getMinutes(),
            weekDays = [
                "Sunday",
                "Monday",
                "Tuesday",
                "Wednesday",
                "Thursday",
                "Friday",
                "Saturday"
            ],
            Months = [
                "January",
                "February",
                "March",
                "April",
                "May",
                "June",
                "July",
                "August",
                "September",
                "October",
                "November",
                "December"
            ];
        var dateStr = (skipWeekday ? '' : weekDays[weekDay] + ", ") + Months[month] + " " + day + ", " + year;
        var ampm = hours >= 12 ? 'PM' : 'AM';
        hours = hours % 12;
        hours = hours ? hours : 12; // the hour '0' should be '12'
        minutes = minutes < 10 ? '0' + minutes : minutes;
        var timeStr = hours + ':' + minutes + ' ' + ampm;
        return {
            dateStr: dateStr,
            timeStr: timeStr
        };

    }

    this.openPopupWindow = function (url, isSkipParams) {
        var winW = 1280,
            winH = 1024,
            newWin = null,
            winLeft = window.screenLeft ? window.screenLeft : window.screenX,
            winTop = window.screenTop ? window.screenTop : window.screenY,
            scrollbars = 1,
            winTitle = "Employbridge Resources",
            params = "";

        if (window.screen.width && window.screen.height) {
            winW = window.screen.width;
            winH = window.screen.height;
        }

        params = winTitle + "";
        params += ', width=' + (winW * 2 / 3 - 10);
        params += ', height=' + (winH - 100);
        params += ', top=' + (winTop) + ', left=' + ((winLeft - 10) + winW / 3);
        params += ', resizable=yes';
        params += ', toolbar=0';
        params += ', scrollbars=' + scrollbars;
        params += ', status=0';
        params += ', menuBar=0';

        if (isSkipParams) {
            newWin = window.open(url, '_blank');
        } else {
            newWin = window.open(url, '_blank', params);
        }
        newWin.focus();
        return newWin;
    }

    this.downloadDocument = function (url, docName) {
        var link = document.createElement('a');
        link.href = url;
        link.download = docName;
        link.dispatchEvent(new MouseEvent('click'));
    }

    this.addClass = function (dom, className) {
        $(dom).addClass(className)
    }

    this.updateTimeLapsedVideo = function (data, cb) {

        let _preloader = $("#preloader");
        _preloader.show()

        $("#simple_next_day_video .vjs-big-play-button").show();

        _simple_next_day_video['callback'] = cb;
        let _url = data['url'] || "./shell/video/its_next_day.mp4"
        _simple_next_day_video.src(_url)

        playLapsedAnimation(0);

    }

    this.showNextDay = function (data, callback) {

        clearTimeout(_timerInstance);

        if (data.isShow || data) {

            updateTimeLapsedVideo(data, function () {
                callback()
            })

            let _nextDay_block = $("#nextDay_block");
            _nextDay_block.removeClass("hide");


        }
    }

    var playLapsedAnimation = function (time) {

        let _preloader = $("#preloader");
        _preloader.hide()

        if (_simple_next_day_video) {
            $("#simple_next_day_video .vjs-big-play-button").hide();
            _simple_next_day_video.play(time)
        }
    }

    var pauseLapsedAnimation = function (time) {
        if (_simple_next_day_video) {
            _simple_next_day_video.pause(time)
        }
    }

    this.togglePopup = function (popup) {
        var _popup = $(popup);
        if (_popup.hasClass("settingHide") || _popup.hasClass("settingHide")) {
            _popup.removeClass("settingHide").addClass("settingShow")
        } else {
            _self.hidePopup(popup);
        }
    }

    this.hidePopup = function (popup) {
        var _popup = $(popup);
        _popup.removeClass("slideInDown").addClass("slideOutUp")
        setTimeout(function () {
            _popup.removeClass("settingShow");
            _popup.addClass("settingHide");
        }, 300)
        _shell_wrapper.trigger("checkTranscriptOnOff")
    }



    var getToday = function () {
        let today = new Date(),
            dd = String(today.getDate()),
            mm = String(today.getMonth() + 1),
            //January is 0!
            yyyy = today.getFullYear();
        today = mm + '/' + dd + '/' + yyyy;
        return today
    }

    this.getUserDetails = function () {

        _user_details = _utilsData['shellModel'].user_details;

        try {

            //  _user_details['title'] = getToday() + ":Employbridge";

            let _uData = _utilsData['LS'].getUserData(_user_details['title']);

            // console.log("getUserDetails:    ", _uData);

            if ((_uData !== "") && (_uData !== null)) {
                if (window_opener) {
                    _user_details["cName"] = _uData.cName
                    if (_uData.userName != null) {
                        _user_details = _uData
                    }
                    return _user_details || null
                }
                _user_details = JSON.parse(_uData)
            }

            // console.log("getUserDetails:    ",_user_details)

        } catch (err) {
            console.error('getUserDetails:  ', err.toString())
        }
        return _user_details || null
    }

    this.updateUtilsData = function (data) {
        _utilsData = data;
        _simple_next_day_video = videojs('#simple_next_day_video')
        // _simple_next_day_video.pause();
        addEventsOnNextDayVideo();
    }

    let addEventsOnNextDayVideo = function () {
        _simple_next_day_video.on("ready", function () {
            _player = this;
            _player.tech_.off('dblclick')
            _simple_next_day_video.play();
        })


        _simple_next_day_video.on("ended", function () {
            let _nextDay_block = $("#nextDay_block");
            _nextDay_block.addClass("hide");
            if (_simple_next_day_video['callback']) {
                _simple_next_day_video['callback']();
            }
        })
    }

    this.loadSimpleVideo = function (vData, callback) {
        _self.loadTemplate("#simple_video_holder", "simple_video", function () {
            _self.log('loadSimpleVideo: ')
            let _vData = vData;
            _vData['callback'] = vData['callback'] || function () { }
            _simple_video = new Simple_Video();
            _simple_video.init(_vData);
            if (callback) {
                callback()
            }
            return _simple_video
        });
    }

    this.loadPannelVideo = function (vData, callback) {
        _self.loadTemplate("#pannel_video_holder", "pannel_video", function () {
            _self.log('loadPannelVideo: ')
            let _vData = vData;
            _vData['callback'] = vData['callback'] || function () { }
            _pannel_video = new Pannel_video();
            _pannel_video.init(_vData);
            if (callback) {
                callback()
            }
            return _pannel_video
        });
    }

    this.loadSimpleAudio = function (aData, callback) {
        _self.loadTemplate("#simple_audio_holder", "simple_audio", function () {
            _self.log('loadSimpleAudio: ')
            let _aData = aData;
            _aData['callback'] = aData['callback'] || function () { }
            _simple_audio = new Simple_Audio();
            _simple_audio.init(_aData);
            if (callback) {
                callback()
            }
            return _simple_audio
        });
    }

    this.updateAvatar = function () {
        try {
            let _avatar = './global/avatar/' + _user_details.userName['aid'] + ".png"
            $(".video_you_avatar").attr('src', _avatar);
        } catch (err) {

        }
        try {
            $(".uName").html(_user_details.userName['firstName']);
            $("#uName").html(_user_details.userName['firstName']);
        } catch (err) {

        }
    }

    this.loadLeftSideNav = function (uData, callback) {

        _self.loadTemplate('#left_sideNav_holder', 'left_sideNav', function () {

            let _data = {
                'uData': uData,
                'isShow': false,
                'mNo': 1,
                'pNo': 0,
                'btn_ref': {
                    'btn_home': 'Employbridge_m01_l01_p01',
                    'btn_chat': 'Employbridge_m01_l01_p02',
                    'btn_mail': 'Employbridge_Interface_Tour',
                    'btn_connect': 'Employbridge_m01_l01_p04'
                }
            }
            if (_left_sideNav == null) {
                _left_sideNav = new LeftSideNav();
            }

            _left_sideNav.init(_data, function () {
                // initialPageLoadAction();
                if (callback) {
                    callback()
                }
            });
        });
    }

    this.updateLeftNavRef = function (data) {
        if (_left_sideNav != null) {
            _left_sideNav.updateLeftNavRef(data)
        }
    }

    this.updateLeftSideNav = function (data, callback) {
        if (_left_sideNav != null) {
            _left_sideNav.updateData(data);
            if (callback) {
                callback()
            }
        }
    }

    this.getLeftSideNav = function () {
        return _left_sideNav
    }

    this.addLeftNavNotification = function (btnName, callback, target) {
        if (target == undefined) {
            target = "";
        }
        // console.log("addNotification - ", btnName)
        if (_left_sideNav != null) {
            _left_sideNav.addNotification("#btn_" + btnName, function () {
                if (callback) {
                    callback()
                }
            }, target);
        }
    }

    this.removeNotification = function (btn, callback) {
        //   console.log("removeNotification - ", btn)
        if (_left_sideNav != null) {
            _left_sideNav.removeNotification(btn, function () {
                if (callback) {
                    callback()
                }
            });
        }
    }


    this.addPodCast = function (dom) {
        $("#popupLoader").append(dom).show();
        /*  setTimeout(function () {
            Utils.addTabIndexOnPodCast()
         }, 600) */
    }

    this.removePodCast = function () {
        $("#popupLoader").empty().hide();
    }


    this.addTabIndexOnPodCast = function () {
        var _tabElements = {
            'elements': [
                {
                    'selector': "#popupLoader #inner_main",
                    'aria-label': ' '
                },
                {
                    'selector': "#popupLoader #simple_video_holder button",
                    'role': 'button'
                },
                {
                    'selector': "#popupLoader #simple_video_holder .vjs-volume-panel [tabindex]"
                },
                {
                    'selector': "#popupLoader #simple_video_holder .vjs-progress-control [tabindex]"
                },
                {
                    'selector': "#close_video",
                    'aria-label': "Close",
                    "role": "button"
                }
            ],
            'sIndex': 500
        };
        _self.addEventsForTabIndex(_tabElements);

        setTimeout(function () {

            let btn = $("#popupLoader #close_video");
            btn.addClass('disabled').removeClass("d-hide");

            try {
                if (podCastData && podCastData['sts'] == 2) {
                    addCloseEventOnPodCast(function () {

                    });
                }
            } catch (err) {

            }
            $("#popupLoader #inner_main").focus();
        }, 600)

    }



    let _blankAudio = {
        'url': "./shell/audio/blank.mp3",
        'autoplay': true,
        'timeline': [{}],
        'transcript': ""
    }

    let addCloseEventOnPodCast = function (callback) {
        let _callback = callback || function () { }
        let btn = $("#popupLoader #close_video");
        btn.removeClass('disabled').removeClass("d-hide");

        btn.off("click").on("click", function () {
            // btn.off("click");  
            if ($(this).hasClass('active')) {
                podCastData = null;
                $("#popupLoader").empty();
                $("#popupLoader").hide()
                _self.updateAudio(_blankAudio, function () {

                });
                if (_callback) {
                    _callback();
                }
                // _self.pageCompleted(); 
                // _self.gotoNextPage();
            }

        }).addClass("active");

          let _btn = $(".vjs-subs-caps-button button");

         _btn.off().on("click", function () {
             $("#ccText_popup_video").toggleClass("d-hide");
          })

        let _vjs_menu = $(".vjs-menu");
        _vjs_menu.remove()
    }

    this.addPopupVideo = function (vData, callback) {
        let _callback = callback || function () { }
        let _div = `<div id = "inner_main" class='inner_main iGPopup'>
                <div id = 'simple_video_holder' class = 'simple_video_holder'></div>
            </div>`

        $(".main_cont, .midContentArea").append(_div);

        podCastData = vData;
        // _self.updateAudio(_blankAudio, function () {
        _self.loadSimpleVideo(vData, function () {
            $("#simple_video_holder").addClass('d-show');
            updateVideo_1(vData, function () {
                _callback();
                let btn = $("#popupLoader #close_video");
                btn.trigger("click");
            });
            addCloseEventOnPodCast(function () {
                _callback();
            });
        })
        // });
    }


    let updateVideo_1 = function (vData, callback) {

        let _vData = vData;
        _vData['callback'] = function () {
            callback();
        }
        if (_simple_video) {
            _simple_video.gotoAndPlay(0);
        }

        Utils.addPodCast($("#inner_main"));
    }


    this.simple_tab5_addPopupVideo = function (vData, callback) {
        let _div = `<div id = "inner_main" class='inner_main iGPopup'>
                <div id = 'simple_video_holder' class = 'simple_video_holder'></div>
            </div>`

        $(".main_cont, .midContentArea").append(_div);

        podCastData = vData;
        // _self.updateAudio(_blankAudio, function () {
        _self.loadSimpleVideo(vData, function () {
            $("#simple_video_holder").addClass('d-show');
            updateVideo_1(vData, function () {
                callback();
                let btn = $("#popupLoader #close_video");
                btn.trigger("click");
            });
            simple_tab5_CloseEventOnPodCast();
        })
        // });
    }

    let simple_tab5_CloseEventOnPodCast = function () {

        let btn = $("#popupLoader #close_video");
        btn.removeClass('disabled').removeClass("d-hide");
        btn.off("click").on("click", function () {
            // btn.off("click"); 
            if ($(this).hasClass('active')) {
                podCastData = null;
                $("#popupLoader").empty().hide();
                _self.updateAudio(_blankAudio, function () {

                });
                // _self.pageCompleted();
                // _self.gotoNextPage();
            }

        }).addClass("active");

        let _btn = $(".vjs-subs-caps-button button");

         _btn.off().on("click", function () {
             $("#ccText_popup_video").toggleClass("d-hide");
         })

        let _vjs_menu = $(".vjs-menu");
        _vjs_menu.remove()
    }





    this.addTimer = function (_data) {

        _self.removeTimer();

        _self.loadTemplate('#timerHolder', 'simple_timer', function () {
            //  console.log('addTimer');
            _simple_timer = new Simple_Timer();
            _simple_timer.init(_data.timer);
            _self.startTimer();
            setTimeout(function () {
                _self.pauseTimer();
            }, 400)
        });
    }

    this.removeTimer = function () {
        if (_simple_timer) {
            // console.log('removeTimer');
            _simple_timer.pause();
            _simple_timer.remove();
            _simple_timer = null;
        }
    }

    this.startTimer = function () {
        if (_simple_timer) {
            //   console.log('startTimer');
            _simple_timer.start();
        }
    }


    this.pauseTimer = function () {
        if (_simple_timer) {
            //   console.log('pauseTimer');
            _simple_timer.pause();
        }
    }

    this.resumeTimer = function () {

        if (_simple_timer) {
            // console.log('resumeTimer');
            _simple_timer.resume();
        }
    }

    this.updateAudio = function (aData, callback) {
        aData['callback'] = aData['callback'] || callback || function () { };
        if (_simple_audio) {
            _simple_audio.changeAudio(aData);
        }
    }

    return this;

})();

var BrowserChecker = (function () {

    let _self = this;

    var browserList = [{
        name: "Firefox",
        value: "Firefox"
    },
    {
        name: "Opera",
        value: "OPR"
    },
    {
        name: "Edge",
        value: "Edg"
    },
    {
        name: "Chrome",
        value: "Chrome"
    },
    {
        name: "Safari",
        value: "Safari"
    },
    ];

    var osList = [{
        name: "Android",
        value: "Android"
    },
    {
        name: "iPhone",
        value: "iPhone"
    },
    {
        name: "iPad",
        value: "Mac"
    },
    {
        name: "Macintosh",
        value: "Mac"
    },
    {
        name: "Linux",
        value: "Linux"
    },
    {
        name: "Windows",
        value: "Win"
    },
    ];

    let userAgent = navigator.userAgent;
    // console.log("userAgent - ", userAgent);

    let _fixFrame = $("#fixFrame");

    let getBrowserDetail = function () {
        //  let browserDetail = $("#browser-detail");
        let detail = "unknown";
        for (let i in browserList) {
            if (userAgent.includes(browserList[i].value)) {
                detail = (browserList[i].name).toLocaleLowerCase() || "unknown";
                break;
            }
        }
        //   console.log("getBrowserDetail   ", detail);
        //  browserDetail.html = detail;
        _fixFrame.addClass('browser-detail--' + detail)
        return detail;
    }

    let getOsDetails = function () {
        // let osDetails = $("#os-detail");
        let detail = "unknown";
        for (let i in osList) {
            if (userAgent.includes(osList[i].value)) {
                detail = (osList[i].name).toLocaleLowerCase();
                break;
            }
        }
        //  console.log("getOsDetails   ", detail);
        _fixFrame.addClass('os-detail--' + detail)
        // osDetails.html = detail;        
        return detail
    };

    let getResolution = function () {
        // let osDetails = $("#os-detail");
        let detail = "unknown";
        detail = (window.screen.width * window.devicePixelRatio + "x" + window.screen.height * window.devicePixelRatio);

        //  console.log("getResolution   ", detail);
        _fixFrame.addClass('resolution--' + detail)
        // osDetails.html = detail;        
        return detail
    };


    let getBrowserZoomLevel = function () {
        let detail = Math.round(window.devicePixelRatio * 100) / 100;
        //let detail = window.visualViewport.scale;
        //  console.log("browser-zoom-level    ", detail);
        // let detail = ((window.outerWidth - 10) / window.innerWidth) * 100;
        //  console.log("browser-zoom-level    ", detail);
        _fixFrame.addClass('browser-zoom-level--' + detail);
    }

    getBrowserDetail();
    getOsDetails();
    getResolution();
    getBrowserZoomLevel();

    return this;

})()