(function () {

    var _shell_wrapper = null,
        _data = null,
        _userDetails = null,
        _shell_wrapper = $('#shell_wrapper');

    _shell_wrapper.off("initPage").on("initPage", function (e) {
        _shell_wrapper.off("initPage");
        _shell_wrapper.off("takePageDetails").on("takePageDetails", function (e, pageData) {
            e.stopPropagation();
            updateDom();
        });

        _shell_wrapper.off("sentUserDetails").on("sentUserDetails", function (e, userData) {
            e.stopPropagation();
            _userDetails = userData;
            _data = getData(_userDetails)[0];
            _shell_wrapper.trigger('getPageDetails', _data.userDataRef.currentPageNo);
        });

        _shell_wrapper.trigger('getUserDetails');

    });

    var updateDom = function () {
        _shell_wrapper.off("componentDidMount").on("componentDidMount", function (e) {
            e.stopPropagation();
            pageInit();
        });

        Utils.loadTemplate('#templateHolder', 'simple_start', function () {
            var _simple_start = new Simple_Start();
            _simple_start.init(getData(_userDetails));
        });
    }


    var pageInit = function () {

        //    console.log("pageInit")
        $(".fadeInUpPage").addClass("pageAnim");

        let _initData = {
            'callback': function () {
                clearTimeout(_timerInstance);
                _shell_wrapper.off("clearAlertTimerInstance").on("clearAlertTimerInstance", function (e) {
                    clearTimeout(_timerInstance);
                    _shell_wrapper.off("clearAlertTimerInstance");
                });

                stepStart();

            }
        }

        _shell_wrapper.trigger('pageLoaded', _initData);

    }

    var stepStart = function () {
        Utils.updateAudio(_data.audio[0], lastStep)
    }

    var lastStep = function () {
        let btn = $("#continue-btn");
        btn.addClass("d-show")
        btn.off("click").on("click", function () {
            btn.off("click");
            _shell_wrapper.trigger('jumpToNext');
        }).addClass("active");
        Utils.pageCompleted();
    }


    var getData = function (_userDetails) {
        var _data = [{
            section: `
                <h2 class='pagetitle'>Learning Objectives</h2>
                <div class = 'obj_wrapper' id = 'sub-sections-1'>
                    <div class='obj_flex_left animate'>
                        <p class='top_para'>By the end of this microlearning unit, you will be able to:</p>    
                        <div class='obj_flex_main'>
                            <div class='obj_flex_cont item-1'>
                                <div class='obj_flex_inner'>
                                    <img src='./views/m01_l05_p01/obj1.svg' class='img-fluid'>
                                    <div class='obj_flex_data'>Define liability insurance.</div>
                                </div>
                            </div>
                            <div class='obj_flex_cont item-2'>
                                <div class='obj_flex_inner'>
                                    <img src='./views/m01_l05_p01/obj2.svg' class='img-fluid'>
                                    <div class='obj_flex_data'>Identify the key ideas of liability insurance at Employbridge.</div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    <div class='obj_flex_right animate'>
                         <img src='./views/m01_l05_p01/rightImg.png' class='img-fluid'>
                    </div>    
                </div>
                `,
            id: 'm01_l05_p01',
            triggered_by: '',
            triggers: '',
            userDataRef: {
                currentPageNo: 1
            },
            audio: [{
                id: "1",
                autoplay: true,
                url: './views/m01_l05_p01/m01_l05_p01.mp3',
                timeline: [{
                    'element': "#sub-sections-1.obj_wrapper",
                    'sTime': 0.1,
                    'eTime': '',
                    'classIn': 'd-show',
                    'classOut': ''
                },{
                    'element': "#sub-sections-1 .top_para",
                    'sTime': 0.5,
                    'eTime': '',
                    'classIn': 'd-show',
                    'classOut': ''
                },{
                    'element': "#sub-sections-1 .obj_flex_left",
                    'sTime': 0.5,
                    'eTime': '',
                    'classIn': 'fadeInLeft',
                    'classOut': ''
                },{
                    'element': "#sub-sections-1 .obj_flex_right",
                    'sTime': 1,
                    'eTime': '',
                    'classIn': 'fadeInRight',
                    'classOut': ''
                },{
                    'element': "#sub-sections-1 .item-1",
                    'sTime': 1.5,
                    'eTime': '',
                    'classIn': 'd-show',
                    'classOut': ''
                },
                {
                    'element': "#sub-sections-1 .item-2",
                    'sTime': 1.8,
                    'eTime': '',
                    'classIn': 'd-show',
                    'classOut': ''
                }
                ],
                transcript: '<p>Welcome to the Insurance unit. By the end of this microlearning unit, you will be able to:</p> <ul> <li>Define liability insurance.</li> <li>Identify the key ideas of liability insurance at Employbridge.</li>   </ul>'
            }]
        }];
        return _data;
    };

    var _shell_wrapper = $('#shell_wrapper');


    _shell_wrapper.trigger("initPage");

})();