var ShellNavigation = function () {


    var _self = this;

    var _btn_workstation = null;
    var _btn_budget = null;
    var _btn_notes = null;

    var _btn_hub = null;
    var _btn_resources = null;
    var _btn_hint = null;
    var _btn_progress = null;
    var _btn_play_pause_timer = null;

    var _btn_glossary = null;

    var _btn_exit = null;
    var _btn_bookmark = null;

    var _popupoverlay = null;
    var _popupoverlay_1 = null;
    var _timerPopupoverlay = null;

    var _shell_wrapper = null;
    
    var _btn_unmute = null;
    var _btn_mute = null;
    var _btn_play = null;
    var _btn_pause = null;
    var _btn_replay = null;

    var _btn_gear = null;
    var _btn_next = null;
    var _btn_prev = null;
    
    var _btn_transcript = null;
    var _btn_transcript_close = null;
    var _transcript_popup = null;

    var _isTabIndexing = true;

    this.init = function () {
      //  console.log("ShellNavigation:   init...")
        updateVariables();
        addEvents();
    }



    var updateVariables = function () {

      //  console.log("ShellNavigation:   updateVariables...");

        _shell_wrapper = $("#shell_wrapper");
        _popupoverlay = $("#popupoverlay");
        _popupoverlay_1 = $("#popupoverlay_1");
        _timerPopupoverlay = $("#timerPopupoverlay");

        _btn_workstation = $("#btn_workstation");
        _btn_budget = $("#btn_budget");
        _btn_notes = $("#btn_notes");

        _btn_hub = $("#btn_hub");

        _btn_resources = $("#btn_resources");

        _btn_hint = $("#btn_hint");
        _btn_help = $("#btn_help");
        _btn_progress = $("#btn_progress");
        _btn_play_pause_timer = $("#btn_play_pause_timer");

        _btn_glossary = $("#btn_glossary");
        _btn_gear = $("#btn_gear");

        _btn_prev = $("#btn_prev");
        _btn_next = $("#btn_next");
        
        _btn_exit = $("#btn_exit");
        _btn_bookmark = $("#btn_bookmark");

        _btn_unmute = $("#btn_unmute");
        _btn_mute = $("#btn_mute");

        _btn_play = $("#btn_play");
        _btn_pause = $("#btn_pause");
        _btn_replay = $("#btn_replay");

        _btn_transcript = $("#btn_transcript");
        _btn_transcript_close = $("#transcript_popup .close");
        _transcript_popup = $("#transcript_popup");

        _skip_toNavigation = $("#skip_toNavigation");
        _skip_toMaincontent = $("#skip_toMaincontent");

        _skip_toNavigation.off("click").on("click", function (e) {
            e.stopPropagation();
            $("#shell_header").focus()
        })

        _skip_toMaincontent.off("click").on("click", function (e) {
            e.stopPropagation();
            $("#templateHolder").focus()
        })
    }


    var addEventsForTabIndex = function (tabElements) {

        if (_isTabIndexing) {

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

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

            $.each(_elements, function (i, item) {
                var _selector = $(item['selector']);
                _selector.attr('tabindex', _sIndex)
                $.each(item, function (key, val) {
                    if (key != "selector") {
                        _selector.attr(key, val)
                    }
                });
                //var _title = item['title'];
                // _selector.attr({
                //     'tabindex': _sIndex,
                //     'title': _title
                // });
                _selector.off("focus blur").on("focus blur", focusHandler);

                _selector.off("keypress").on("keypress", function (e) {
                    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;
                    }
                });
                _sIndex = _sIndex + _nIndex;
            });
        }
    }

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

    var addEvents = function () {

      //  console.log("ShellNavigation:   addEvents...");

        _shell_wrapper.off("addTabIndexing").on("addTabIndexing", function (e, tabElements) {
            e.stopPropagation();
            if (tabElements) {
                Utils.addEventsForTabIndex(tabElements)
            }
        })

        _btn_workstation.off("click").on("click", function (e) {
            e.stopPropagation();
            //    console.log("ShellNavigation:   _btn_workstation...");
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;

            _shell_wrapper.trigger("moduleLevelWorkstationAction");
            _btn_gear.trigger("click");
        })

        _btn_budget.off("click").on("click", function (e) {
            e.stopPropagation();
            //    console.log("ShellNavigation:   _btn_budget...");
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;
            // budgetPopup();
            var _data = {
                'popupName': 'Budget'
            }
            _shell_wrapper.trigger("openBudgetGlobalPopup", _data);
            _btn_gear.trigger("click");
        })


        _btn_notes.off("click").on("click", function (e) {
            e.stopPropagation();
            //    console.log("ShellNavigation:   _btn_notes...");
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;

            var _data = {
                'popupName': 'Notes'
            }
            _shell_wrapper.trigger("openBudgetGlobalPopup", _data);
            _btn_gear.trigger("click");
        })


        _btn_hub.off("click").on("click", function (e) {
            e.stopPropagation();
            //    console.log("ShellNavigation:   _btn_hub...");
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;

            var _data = {
                'popupName': 'Hub'
            }
            _shell_wrapper.trigger("openHubGlobalPopup", _data);
            _btn_gear.trigger("click");
        })


        _btn_resources.off("click").on("click", function (e) {
            e.stopPropagation();
            //    console.log("ShellNavigation:   _btn_resources...");
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;
            var _data = {
                'popupName': 'Resources'
            }
            _shell_wrapper.trigger("openResourcesGlobalPopup", _data);
            _btn_gear.trigger("click");
            $('.resources_wraper .g_popup_Container').addClass('fadeInUp');
        })

        _btn_help.off("click").on("click", function (e) {
            e.stopPropagation();
         //   console.log("ShellNavigation:   _btn_help...");
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;

            var _data = {
                'popupName': 'Help'
            }

            _shell_wrapper.trigger("openHelpGlobalPopup", _data);

            Utils.hidePopup(".helpAssets");
            Utils.hidePopup(".settingAssets");
            _btn_gear.trigger("click");
            $('.help_wraper .g_popup_Container').addClass('fadeInUp');
        })

        _btn_hint.off("click").on("click", function (e) {
            e.stopPropagation();
            //   console.log("ShellNavigation:   _btn_hint...");
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;

            var _data = {
                'popupName': 'Hint'
            }
            _shell_wrapper.trigger("openHintGlobalPopup", _data);
            _btn_gear.trigger("click");
        })

        _btn_progress.off("click").on("click", function (e) {
            e.stopPropagation();
            //   console.log("ShellNavigation:   _btn_hint...");
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;

            var _data = {
                'popupName': 'Progress'
            }
            _shell_wrapper.trigger("openProgressGlobalPopup", _data);
            _btn_gear.trigger("click");
            $('.progress_wrapper .g_popup_Container').addClass('fadeInUp');
        })

        _btn_play_pause_timer.off("click").on("click", function (e) {
            e.stopPropagation();
            //   console.log("ShellNavigation:   _btn_hint...");
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;

            updatePlayPauseTimerIcon(_btn)
        })


        _btn_exit.off("click").on("click", function (e) {
            e.stopPropagation();
            //   console.log("ShellNavigation:   _btn_exit...");
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;

            var _data = {
                'popupName': 'Exit'
            }
            _shell_wrapper.trigger("openExitGlobalPopup", _data);
            _btn_gear.trigger("click");
        })

        _btn_bookmark.off("click").on("click", function (e) {
            e.stopPropagation();
            //   console.log("ShellNavigation:   _btn_bookmark...");
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;

            var _data = {
                'popupName': 'Bookmark'
            }
            _shell_wrapper.trigger("openBookmarkGlobalPopup", _data);
        })


        _btn_glossary.off("click").on("click", function (e) {
            e.stopPropagation();
            var _btn = $(this);
            if (_btn.hasClass('disabled')) return;

          //  console.log("ShellNavigation:   _btn_glossary...")
            // var _gPDF = "./global/glossary/MHS Glossary of Terms.pdf"
            // openPDF(_gPDF);

            var _data = {
                'popupName': 'Glossary'
            }
            _shell_wrapper.trigger("openGlossaryGlobalPopup", _data);
            _btn_gear.trigger("click");
        });

        _btn_transcript.off("click").on("click", function (e) {
            e.stopPropagation();
            //  console.log("ShellNavigation:   _btn_transcript...");
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;

            var _data = {
                for: 'transcript',
                isbtnClose: true
            }
            _shell_wrapper.trigger("toggleTranscript", _data);
            _btn_gear.trigger("click");

        });

        _btn_transcript_close.off("click").on("click", function (e) {
            e.stopPropagation();
            //   console.log("ShellNavigation:   _btn_transcript_close...");
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;

            var _data = {
                for: 'transcript_close',
            }
            _shell_wrapper.trigger("toggleTranscript", _data);
        });


        _btn_unmute.off("click").on("click", function (e) {
            e.stopPropagation();
          //  console.log("ShellNavigation:   _btn_unmute...");
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;

            var _data = {
                for: 'unmute'
            }
            _shell_wrapper.trigger("unmute", _data);
        });

        _btn_mute.off("click").on("click", function (e) {
            e.stopPropagation();
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;

            var _data = {
                for: 'mute'
            }
            _shell_wrapper.trigger("mute", _data);

        });

        _btn_gear.off("click").on("click", function (e) {
            e.stopPropagation();
            var _btn = $(this)
            _btn.toggleClass("active");
            if (_btn.hasClass('disabled')) return;
            $(".nav_btns").toggleClass("d-hide");
            //$(".nav_btns").children("li").toggleClass("animate");
            
            $(".nav_btns").children("li").each(function(i, el) {
               setTimeout(function() {
                  $(el).toggleClass("animate");
               }, i * 100);
            });

        });

        _btn_prev.off("click").on("click", function (e) {
            e.stopPropagation();
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return; 
             var _data = {
                 for: 'prev'
             }
             _shell_wrapper.trigger("jumpToBack", _data);
        });

         _btn_next.off("click").on("click", function (e) {
           
             e.stopPropagation();
             var _btn = $(this)
             if (_btn.hasClass('disabled')) return;
             var _data = {
                 for: 'next'
             }
             _shell_wrapper.trigger("jumpToNext", _data);
         });

        _btn_play.off("click").on("click", function (e) {
            e.stopPropagation();
            //   console.log("ShellNavigation:   _btn_play...");
            var _btn = $(this)
            if (!_btn.hasClass('active')) return;

            var _data = {
                for: 'play'
            }
            _shell_wrapper.trigger("play", _data);
        });

        _btn_pause.off("click").on("click", function (e) {
            e.stopPropagation();
            //  console.log("ShellNavigation:   _btn_pause...");
            var _btn = $(this)
            if (_btn.hasClass('disabled')) return;

            var _data = {
                for: 'pause'
            }
            _shell_wrapper.trigger("pause", _data);

        });

        _btn_replay.off("click").on("click", function (e) {
            e.stopPropagation();
            //   console.log("ShellNavigation:   _btn_replay...");
            var _btn = $(this)
            
            if (_btn.hasClass('disabled')) return;

            var _data = {
                for: 'replay'
            }
            _shell_wrapper.trigger("replay", _data);

        });

        _transcript_popup.draggable({
            handle: ".transcript_heading",
            containment: "#transcript_restricter",
            cursor: 'move',
            starrt: function (event, ui) {},
            drag: function (event, ui) {},
            stop: function (event, ui) {}
        });

        addEventsForMedia();
        updateMediaNavigation();

        let _isDebugger = false;

        $(document).off("keydown").on("keydown", function (e) {

            // console.log("keydown-", e.altKey, e.shiftKey, e.which);

            if (e.altKey && e.shiftKey && e.which === 68) {
                e.preventDefault();
                _isDebugger = !_isDebugger;
                _shell_wrapper.trigger("updateDebugger", _isDebugger);
            }

        });

    }

    var updatePlayPauseTimerIcon = function (_btn) {
        if (_btn.hasClass('play')) {
            _className = 'pause';
            _btn.removeClass('play')
            _timerPopupoverlay.hide(function () {
                _shell_wrapper.trigger('playAudio');
            });
            if (childWinRef) {
                childWinRef.enableDisableActvity(false);
            }
        } else {
            _className = 'play';
            _btn.removeClass('pause')
            //  _timerPopupoverlay.show();
            _shell_wrapper.trigger('pauseAudio');
            if (childWinRef) {
                childWinRef.enableDisableActvity(true);
            }
        }


        _shell_wrapper.trigger("togglePlayPauseTimer");
        _btn.addClass(_className);
        /* _btn.blur(function () {
            if ($("#popupoverlay").is(":visible") && _btn.hasClass('play'))
                _btn.trigger('focus');
        }); */
    }
    var updateMediaNavigation = function () {

        _shell_wrapper.off("updateMediaNavigation").on("updateMediaNavigation", function (e, data) {
            e.stopPropagation();
            var _isTrue = true;
            if (data['isAudio'] == "false") {
                _isTrue = false;
                $("#transcript_popup").hide();
            }
            Utils.enabledDisable(_btn_play, _isTrue);
            Utils.enabledDisable(_btn_pause, _isTrue);
            Utils.enabledDisable(_btn_replay, _isTrue);
            Utils.enabledDisable(_btn_mute, _isTrue);
            Utils.enabledDisable(_btn_unmute, _isTrue);
            // Utils.enabledDisable(_btn_transcript, _isTrue)

        });
    }

    var addEventsForMedia = function () {

        let _isEnded = false;
        let _isMuted = false;

        _shell_wrapper.off("mediaIsMute").on("mediaIsMute", function (e, data) {
            e.stopPropagation();
            _btn_unmute.hide();
            _btn_mute.show();
            _isMuted = true
        });

        _shell_wrapper.off("mediaIsUnMute").on("mediaIsUnMute", function (e, data) {
            _btn_unmute.show();
            _btn_mute.hide();
        });

        _shell_wrapper.off("mediaIsPlaying").on("mediaIsPlaying", function (e, data) {
            e.stopPropagation();
             _btn_replay.show();
            _btn_pause.show();
            _btn_play.hide();
            if (!_isMuted) {
                _shell_wrapper.trigger("mediaIsUnMute")
            }
            _isEnded = false;
            //  Utils.resumeTimer();
        });

        _shell_wrapper.off("mediaIsPaused").on("mediaIsPaused", function (e, data) {
            _btn_pause.hide();
            _btn_play.show();
            if (_isEnded) {
                _btn_replay.show();
               // _btn_play.hide();
            }
            //  Utils.pauseTimer();
        });

        _shell_wrapper.off("mediaIsEnded").on("mediaIsEnded", function (e, data) {
            _isEnded = true;
            _btn_replay.show();
            _btn_pause.hide();
            _btn_play.show();
        });
    }

    var openPDF = function (url, name) {
        var _pdfWindow = window.open(url, name);
    }

    var openNewWindow = function () {

    }

    return this;
}