(function () {

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

    let _btn_next = $(".btn_next");
    let _btn_prev = $(".btn_prev");

    _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();

            }
        }

        enabledDisable(_btn_next, false);
        enabledDisable(_btn_prev, false);

        _shell_wrapper.trigger('pageLoaded', _initData);

    }

    var stepStart = function () {
        enabledDisable($(".btn_next"), false);
        Utils.updateAudio(_data.audio[0], lastStep)
    }

    var lastStep = function () {
        let _data = {
            mNo: 1,
            pNo: 3
        }
        enabledDisable(_btn_next, false);
        
        let btn = $(".closebgtn");
        btn.off("click").on("click", function () {
            btn.off("click");
            _shell_wrapper.trigger("gotoModule", _data)
        }).addClass("active");

        Utils.pageCompleted();
        setTimeout(function(){
            enabledDisable($(".btn_next"), false);
        },200)
        

    }


    var getData = function (_userDetails) {
        var _data = [{
            section: `
                <h2 class="pagetitle subPageTitle">The Limitation of Liabilities Room</h2>
                <div class = 'sub-sections blueBox' id = 'sub-sections-1'>
                    <span class="iconMark"> </span>
                    <div class='midDesc'>
                        <h5 class='secTitle'>Important Points to Remember:</h5>
                        <ul class="setBox">
                            <li class='animate item_1'>
                                <p class="titleBox">01</p>
                                <p class="desc">Clients have more visibility and control over the source of risk, so managing that risk is vital.​</p>
                            </li>
                            <li class='animate item_2'>
                                <p class="titleBox">02</p>
                                <p class="desc">Our relationship is a partnership where both parties share responsibility for ensuring success.</p>
                            </li>
                            <li class='animate item_3'>
                                <p class="titleBox">03</p>
                                <p class="desc">Mutual indemnification fairly splits responsibility, protecting each party from the other's mistakes.​</p>
                            </li>
                            <li class='animate item_4'>
                                <p class="titleBox">04</p>
                                <p class="desc">Clients directly assess results of a Talent's tasks, as they are best positioned to do so.​</p>
                            </li>
                            <li class='animate item_5'>
                                <p class="titleBox">05</p>
                                <p class="desc">Since clients oversee task outcomes, it’s not appropriate for Employbridge to indemnify against all potential risks.</p>
                            </li>
                        </ul>       
                    </div>
                    <div class='closebgtn'>Close</div>
                </div>
                `,
            id: 'm01_l02_p03_02',
            triggered_by: '',
            triggers: '',
            userDataRef: {
                currentPageNo: 3
            },
            audio: [{
                id: "1",
                autoplay: true,
                url: './views/m01_l02_p03_02/m01_l02_p03_02.mp3',
                 timeline: [ {
                        'element': ".blueBox",
                        'sTime': 0.2,
                        'eTime': '',
                        'classIn': 'blueUp',
                        'classOut': ''
                    },{
                        'element': "#sub-sections-1 .item_1",
                        'sTime': 2.5,
                        'eTime': '',
                        'classIn': 'd-show fadeInDown',
                        'classOut': ''
                    },
                    {
                        'element': "#sub-sections-1 .item_2",
                        'sTime': 9,
                        'eTime': '',
                        'classIn': 'd-show fadeInDown',
                        'classOut': ''
                    },
                    {
                        'element': "#sub-sections-1 .item_3",
                        'sTime': 18,
                        'eTime': '',
                        'classIn': 'd-show fadeInDown',
                        'classOut': ''
                    },
                    {
                        'element': "#sub-sections-1 .item_4",
                        'sTime': 29,
                        'eTime': '',
                        'classIn': 'd-show fadeInDown',
                        'classOut': ''
                    },
                    {
                        'element': "#sub-sections-1 .item_5",
                        'sTime': 44,
                        'eTime': '',
                        'classIn': 'd-show fadeInDown',
                        'classOut': ''
                    }
                ],
                transcript: '<p><b>Here are some important points that you should remember:​</b></p> <ul> <li>It\'s vital for us to manage our risk where clients have more visibility and control over the source of the risk.</li> <li>We consider this relationship a partnership between the client and Employbridge, where we both play roles in making sure that things work the way they should.</li> <li>Our mutual indemnification provision ensures that each of us gets protection when the other causes a bad situation—that seems a fair split of responsibility.</li> <li>We give clients the right to direct our Talent\'s tasks--and the accompanying responsibility for assigning and assessing the work results … because clients know their business best and are in the best position to provide direction and assessments.</li> <li>Because clients have more visibility and control over the ultimate results of the assigned tasks, it\'s not appropriate to ask Employbridge to indemnify against all potential risks.</li> </ul>'
            }]
        }];
        return _data;
    };

    var _shell_wrapper = $('#shell_wrapper');


    _shell_wrapper.trigger("initPage");

})();