$(document).ready(function () {

    var template = `

      <link href="//fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
      <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

      <div id="overlay" class="rufus-container">
        <div class="header-ruf">
          <a href="#" class="btn-expand-rufus">
            <i class="material-icons">fullscreen</i>
          </a>
          <a class="btn-close-rufus" href="#">
            <i class="material-icons">close</i>
          </a>
        </div>

        <div class="chat">

                <div id="chat-log" class="chat-log inner">
                </div>

        </div>

        <div class="footer-ruf">
          <div class="chat-input">
            <form action="#" class="input-form">
                <textarea id="input-box" class="input-box" name="input-box" rows="1" cols="27" placeholder="Type something..."></textarea>
                <button type="submit" name="submit" class="ruf-but"><i class="material-icons">arrow_upward</i></button>
            </form>
          </div>
        </div>

        <div class="powered-by" style="display: none">
          <a href="//atomicx.ai">
            <p>Powered by</p>
            <img src="//cdn.atomicx1.com/images/embedlogo.png">
          </a>
        </div>

        <a href="#" class="btn-open-rufus">
            <span class="message-count">1</span>
            <img src="//cdn.atomicx1.com/images/icon-closed-chat.png" alt="Open Rufus Button">
        </a>



      </div>
`;
    $('body').append(template);

    //document.querySelector(".ad-area-mobile").addEventListener("click", function(event) {
    //         event.preventDefault();
    //}, false);


    try {

        var socket = io.connect( "https:" + socketEndpoint, {
            'reconnection': true,
            'reconnectionDelay': 500,
            'reconnectionAttempts': 10
        });

        var name;
        getSessionId();
        var status = true;
        var autoClose = false;

        $(".rufus-container").mouseover(function () {
            autoClose = false;
        });

        socket.on('bot close', function (msg) {

            setTimeout(() => {
                if (autoClose && !rufuslanding) {
                    $(".btn-open-rufus").addClass("active");
                    $(".rufus-container").removeClass("expand-rufus");
                    $(".rufus-container").addClass("close-rufus");
                    // $(".message-count").css("display", "flex");
                }
            }, 3500);

        });

        $(window).on('beforeunload', () => {

            socket.emit('user unload', {
                sessionid: Cookies.get('sessionID'),
                key: rufuskey
            });
        });

        // Receive Message From User and displays it
        socket.on('user send', function (msg) {

            console.log("user send")
            var random = Math.floor(Math.random() * (10000000 - 1)) + 1;

            var message = `
      <div class="message client-msg" id="${random}" style="opacity:0">
        <div class="text">
        </div>
        <div class="icon icon-user">
            <i class="material-icons">person</i>
        </div>
      </div>
   `;

            $('.chat-log').append(message);
            scrollChatBottom("fast");

            $("#" + random).velocity(
                {
                    opacity: 1
                }, {
                    duration: 500,
                    begin: function (elements) {
                        $("#" + random).find('.text').html("<p style='opacity:0'>" + msg.msg + "</p>");
                        $("#" + random).find('.text p').velocity({
                            opacity: 1
                        }, {
                                duration: 800,
                                easing: "easeOutCubic",
                                complete: function (elements) {

                                    if (status) {
                                        scrollChatBottom("fast");
                                        socket.emit('bot send', msg);
                                    }
                                }
                            })

                    }
                });
        });

        socket.on('bot send', function (msg) {

            sendMessage(msg.payload, msg.delay);
        });

        socket.on('bot send text', function (msg) {
            sendMessage(msg.payload, msg.delay);
        });

        socket.on('bot send end', function (msg) {

            sendMessage(msg.payload, msg.delay);
        });

        socket.on('bot send button', function (msg) {

            sendbutton(msg.payload);
        });

        socket.on('bot send buttons', function (msg) {

            sendbutton(msg.payload);
        });

        socket.on('bot send contact form', function (msg) {

            sendContactForm();
        });

        socket.on('bot send calendar', function (msg) {

            sendCalendar();
        });

        socket.on('bot send time', function (msg) {

            sendTime();
        });

        socket.on('bot send dropdown', function (msg) {

            sendDropdown(msg.payload);
        });


        socket.on('bot send keyboard', function (msg) {

            setTimeout(function () {
                showTextInput()
            }, 600);
        });
        socket.on('send redirect', function (msg) {

            setTimeout(function () {
                window.location = msg.payload
            }, 1500);
        });

        function sendMessage(value, delayTime) {

            let msgWait = delayTime;
            var random = Math.floor(Math.random() * (10000000 - 1)) + 1;

            var message = `
     <div class="message bot-msg" id="${random}" style="opacity:0">
       <div class="icon icon-bot">
         <img src="//cdn.atomicx1.com/images/rufus-logo.svg" />
       </div>
       <div class="text">

             <div class="message-loading inside">
               <span></span>
               <span></span>
               <span></span>
             </div>
       </div>
     </div>
   `;

            $('.chat-log').append(message);
            scrollChatBottom("fast");

            $("#" + random).velocity(
                {
                    opacity: 1
                }, {
                    duration: msgWait / 2,
                    complete: function (elements) {
                        $(".message-loading").velocity("fadeOut", {
                            duration: (msgWait / 2) - 300,
                            easing: "easeInExpo",
                            complete: function (elements) {
                                scrollChatBottom("fast");
                                $("#" + random).find('.text').html("<p style='opacity:0'>" + value + "</p>");
                                $("#" + random).find('.text p').velocity({
                                    opacity: 1,
                                    display: "inline-block"
                                }, {
                                        duration: 800,
                                        easing: "easeOutCubic",
                                        complete: function (elements) {
                                            $("#" + random).find('.text p').velocity({
                                                opacity: 1
                                            }, {
                                                    duration: 500,
                                                    easing: "easeOutCubic",
                                                });
                                                scrollChatBottom("fast");
                                        }
                                    })
                            }
                        });
                    }
                });

            scrollChatBottom("fast");
        }

        function showTextInput() {

            $(".footer-ruf").velocity({
                opacity: 0,
            }, {
                    duration: 1,
                    display: "flex",
                    complete: function (elements) {
                        scrollChatBottom("fast");
                        $(".footer-ruf").velocity({
                            opacity: 1,
                        }, {
                                duration: 500,
                                complete: function (elements) {
                                    $(".input-box").focus();
                                }
                            });

                    },
                });
        }

        function sendTextInput() {

            var random = Math.floor(Math.random() * (10000000 - 1)) + 1;

            var message = `
    <div class="message bot-msg textinput" id="${random}">
      <div class="icon icon-bot">
        <img src="//cdn.atomicx1.com/images/rufus-logo.svg" />
      </div>
      <div class="text">
      </div>
    </div>
  `;

            $('.chat-log').append(message);
            scrollChatBottom("fast");

            let btnString = ``;
            btnString += `<div class="chat-input"><form action="#" class="input-form"><textarea id="input-box" class="input-box" name="input-box" rows="1" cols="27"></textarea><input class="ruf-but" type="submit"></form></div>`

            $("#" + random).velocity(
                {
                    opacity: 1
                }, {
                    duration: 500,
                    complete: function (elements) {
                        scrollChatBottom("fast");
                        $("#" + random).find('.text').html("<p style='opacity:0'>" + btnString + "</p>");
                        $("#" + random).find('.text p').velocity({
                            opacity: 1
                        }, {
                                duration: 800,
                                easing: "easeOutCubic",
                                complete: function (elements) {
                                    scrollChatBottom("fast");
                                }
                            })
                    }
                });
        }

        function sendbutton(buttonJson) {

            var random = Math.floor(Math.random() * (10000000 - 1)) + 1;

            var message = `
      <div class="message bot-msg buttons" id="${random}">
        <div class="icon icon-bot">
            <img src="//cdn.atomicx1.com/images/rufus-logo.svg" />
        </div>
        <div class="text">
        </div>
      </div>
    `;

            $('.chat-log').append(message);
            scrollChatBottom("fast");

            let btnString = ``;
            JSON.parse(buttonJson).forEach(function (button) {
                btnString += `<input class="ruf-button" type="button" name="${button.response}" returnval="${button.response}" value="${button.text}"/>`;
            });

            $("#" + random).velocity(
                {
                    opacity: 1
                }, {
                    duration: 1000,
                    complete: function (elements) {
                        scrollChatBottom("fast");
                        $("#" + random).find('.text').html("<p style='opacity:0'>" + btnString + "</p>");
                        $("#" + random).find('.text p').velocity({
                            opacity: 1
                        }, {
                                duration: 800,
                                easing: "easeOutCubic",
                                complete: function (elements) {
                                    scrollChatBottom("fast");
                                }
                            })
                    }
                });
        }

        function sendDropdown(buttonJson) {

            var random = Math.floor(Math.random() * (10000000 - 1)) + 1;

            var message = `
      <div class="message bot-msg drop-down" id="${random}">
        <div class="icon icon-bot" style="opacity: 0;">
          <img src="cdn.atomicx1.com/images/rufus-logo.svg" />
        </div>
        <div class="text">
        </div>
      </div>
    `;

            $('.chat-log').append(message);
            scrollChatBottom("fast");

            let selectString = `<div class="select-container"><select class="ruf-select date-select">`;
            JSON.parse(buttonJson).forEach(function (button) {
                selectString += `<option class="ruf-option" name="${button.response}" returnval="${button.response}">${button.text}</option>`;
            });
            selectString += `</select><i class="material-icons dropdown"> expand_more </i></div>`;
            selectString += `<div class="btn-submit-dropdown"><input class="dropdown-button" type="submit" value="Submit"></div>`

            $("#" + random).velocity(
                {
                    opacity: 1
                }, {
                    duration: 500,
                    complete: function (elements) {
                        scrollChatBottom("fast");
                        $("#" + random).find('.text').html("<p style='opacity:0'>" + selectString + "</p>");
                        $("#" + random).find('select').formSelect();
                        $("#" + random).find('.text p').velocity({
                            opacity: 1
                        }, {
                                duration: 800,
                                easing: "easeOutCubic",
                                complete: function (elements) {
                                    scrollChatBottom("fast");
                                }
                            })
                    }
                });
        }

        function sendCalendar() {

            var random = Math.floor(Math.random() * (10000000 - 1)) + 1;

            var message = `
    <div class="message bot-msg textinput" id="${random}">
      <div class="icon icon-bot" style="opacity: 0;">
        <img src="//cdn.atomicx1.com/images/rufus-logo.svg" />
      </div>
      <div class="text text-select-date">
      </div>
    </div>
  `;

            $('.chat-log').append(message);
            scrollChatBottom("fast");


            let btnString = ``;

            btnString += `<div class="chat-input chat-calendar-preference"><form action="#" class="pick-a-date"><div class="pick-date-input"><input type="text" class="datepicker" name="input-date-picker" id="input-date-picker" value="Choose a Date" />
      <i class="material-icons"> expand_more </i></div>`
            btnString += `<div class="btn-submit-date"><input class="date-button" type="submit" value="Submit"></form></div></div>`

            $("#" + random).velocity(
                {
                    opacity: 1
                }, {
                    duration: 500,
                    complete: function (elements) {
                        scrollChatBottom("fast");
                        $("#" + random).find('.text').html("<p style='opacity:0'>" + btnString + "</p>");
                        $("#" + random).find('.text p').velocity({
                            opacity: 1
                        }, {
                                duration: 800,
                                easing: "easeOutCubic",
                                complete: function (elements) {
                                    scrollChatBottom("fast");

                                    console.log($("#" + random).find('.datepicker'))

                                    $("#" + random + " .datepicker").datepicker({
                                        defaultDate: new Date(),
                                        minDate: new Date(),
                                    });
                                }
                            })
                    }
                });
        }
        function sendTime() {

            var random = Math.floor(Math.random() * (10000000 - 1)) + 1;

            var message = `
    <div class="message bot-msg textinput" id="${random}">
      <div class="icon icon-bot" style="opacity: 0;">
        <img src="//cdn.atomicx1.com/images/rufus-logo.svg" />
      </div>
      <div class="text text-select-date">
      </div>
    </div>
  `;

            $('.chat-log').append(message);
            scrollChatBottom("fast");


            let btnString = ``;

            btnString += `<div class="chat-input chat-time-preference"><form action="#" class="pick-a-time"><div class="pick-date-input"><input type="text" class="timepicker" name="input-time-picker" id="input-time-picker" value="Choose a Time" /><i class="material-icons"> expand_more </i></div>`
            btnString += `<div class="btn-submit-time"><input class="time-button" type="submit" value="Submit"></form></div></div>`

            $("#" + random).velocity(
                {
                    opacity: 1
                }, {
                    duration: 500,
                    complete: function (elements) {
                        scrollChatBottom("fast");
                        $("#" + random).find('.text').html("<p style='opacity:0'>" + btnString + "</p>");
                        $("#" + random).find('.text p').velocity({
                            opacity: 1
                        }, {
                                duration: 800,
                                easing: "easeOutCubic",
                                complete: function (elements) {
                                    scrollChatBottom("fast");
                                    $("#" + random).find('.timepicker').timepicker({
                                    });
                                }
                            })
                    }
                });
        }

        function sendContactForm() {

            var random = Math.floor(Math.random() * (10000000 - 1)) + 1;

            var message = `
    <div class="message bot-msg textinput" id="${random}">
      <div class="icon icon-bot" style="opacity: 0;">
        <img src="//cdn.atomicx1.com/images/rufus-logo.svg" />
      </div>
      <div class="text">
      </div>
    </div>
  `;

            $('.chat-log').append(message);
            scrollChatBottom("fast");

            let btnString = ``;
            btnString += `
      <div class="chat-contact-preference">
        <form action="#" class="form-contact-preference">

          <div class="input-field input-preference">
            <input placeholder="" id="name-contact-preference" name="name-contact-preference" type="text" class="validate">
            <label for="name-contact-preference">Name</label>
          </div>

          <div class="input-field input-preference">
            <input placeholder="" id="email-contact-preference" name="email-contact-preference" type="text" class="validate">
            <label for="email-contact-preference">Email</label>
          </div>

          <div class="input-field input-preference">
            <input placeholder="" class="phone-contact-preference" id="phone-contact-preference" name="phone-contact-preference" type="text" class="validate">
            <label for="phone-contact-preference" maxlength="12">Phone</label>
          </div>

          <div class="options-preference">


          <input class="btn-submit-preference" type="submit" value="Save">

        </form>
      </div>`

            $("#" + random).velocity(
                {
                    opacity: 1
                }, {
                    duration: 500,
                    complete: function (elements) {
                        scrollChatBottom("fast");
                        $("#" + random).find('.text').html("<p style='opacity:0'>" + btnString + "</p>");
                        $("#" + random).find('.text p').velocity({
                            opacity: 1
                        }, {
                                duration: 800,
                                easing: "easeOutCubic",
                                complete: function (elements) {
                                    scrollChatBottom("fast");

                                    $('.phone-contact-preference').keydown(function (e) {
                                        var key = e.charCode || e.keyCode || 0;
                                        $text = $(this);
                                        if (key !== 8 && key !== 9) {
                                            if ($text.val().length === 3) {
                                                $text.val($text.val() + '-');
                                            }
                                            if ($text.val().length === 7) {
                                                $text.val($text.val() + '-');
                                            }
                                        }
                                        if ($text.val().length >= 12) {
                                            return (key == 8 || key == 9);
                                        }
                                        else {
                                            return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
                                        }
                                    });

                                }
                            })
                    }
                });

        }

        $(document).on("click", ".ruf-button", function () {

            $(this).css("background-color", "#22A3FD");
            $(this).css("color", "#FFF");
            $(this).addClass("active");
            let returnVal = $(this).attr("returnval");

            $(this).parents(".bot-msg.buttons .text").append("<div class='fill-div'></div>");

            if (Cookies.get('sessionID') === undefined || Cookies.get('sessionID') === null) {
                getSessionId();

                if (status) {

                    socket.emit('user send', {
                        sessionid: Cookies.get('sessionID'),
                        msg: returnVal,
                        user: 'user',
                        key: rufuskey
                    });
                }

                return false;
            } else {

                if (status) {
                    socket.emit('user send', {
                        sessionid: Cookies.get("sessionID"),
                        msg: returnVal,
                        user: 'user',
                        key: rufuskey
                    });
                }

                return false;
            }
        });

        $(document).on("click", ".dropdown-button", function () {


            $(this).css("background-color", "#22A3FD");
            $(this).css("color", "#FFF");
            $(this).addClass("active");

            let parent = $(this).parents(".bot-msg");

            let selected = $('.ruf-select', parent);
            let returnVal = selected[0].value;

            $(this).parents(".bot-msg.drop-down .text").append("<div class='fill-div'></div>");

            if (Cookies.get('sessionID') === undefined || Cookies.get('sessionID') === null) {
                getSessionId();

                if (status) {

                    socket.emit('user send', {
                        sessionid: Cookies.get('sessionID'),
                        msg: returnVal,
                        user: 'user',
                        key: rufuskey
                    });
                }

                return false;
            } else {

                if (status) {
                    socket.emit('user send', {
                        sessionid: Cookies.get("sessionID"),
                        msg: returnVal,
                        user: 'user',
                        key: rufuskey
                    });
                }

                return false;
            }


        });

        $(document).on("click", ".date-button", function () {

            $(this).css("background-color", "#22A3FD");
            $(this).css("color", "#FFF");
            $(this).addClass("active");
            let returnVal = "";
            let payload = {
                "time": {}
            };

            let parent = $(this).parents(".chat-calendar-preference");

            let date = $('input[name=input-date-picker]', parent).val();
            returnVal += (date.length > 0 ? date : "No Selection")
            payload.time.date = returnVal

            $(this).parents(".text").append("<div class='fill-div'></div>");

            if (Cookies.get('sessionID') === undefined || Cookies.get('sessionID') === null) {
                getSessionId();

                if (status) {

                    socket.emit('user send', {
                        sessionid: Cookies.get('sessionID'),
                        msg: returnVal,
                        user: 'user',
                        key: rufuskey
                    });
                }

                return false;
            } else {

                if (status) {
                    socket.emit('user send', {
                        sessionid: Cookies.get("sessionID"),
                        msg: returnVal,
                        user: 'user',
                        key: rufuskey
                    });
                }

                return false;
            }
        });
        $(document).on("click", ".time-button", function () {

            $(this).css("background-color", "#22A3FD");
            $(this).css("color", "#FFF");
            $(this).addClass("active");
            let returnVal = "";
            let payload = {
                "time": {}
            };

            let parent = $(this).parents(".chat-time-preference");

            let date = $('input[name=input-time-picker]', parent).val();
            returnVal += (date.length > 0 ? date : "No Selection")
            payload.time.date = returnVal

            $(this).parents(".chat-time-preference").velocity(
                "fadeOut", {
                    duration: 100,
                    complete: function (elements) {

                        setTimeout(function () {

                            if (Cookies.get('sessionID') === undefined || Cookies.get('sessionID') === null) {
                                getSessionId();

                                if (status) {

                                    socket.emit('user send', {
                                        sessionid: Cookies.get('sessionID'),
                                        msg: returnVal,
                                        payload: payload,
                                        user: 'user',
                                        key: rufuskey
                                    });
                                }

                                return false;
                            } else {

                                if (status) {
                                    socket.emit('user send', {
                                        sessionid: Cookies.get("sessionID"),
                                        msg: returnVal,
                                        payload: payload,
                                        user: 'user',
                                        key: rufuskey
                                    });
                                }

                                return false;
                            }

                        }, 500);
                    }
                });
        });

        $(document).on("click", ".btn-submit-preference", function () {

            $(this).css("background-color", "#22A3FD");
            $(this).css("color", "#FFF");
            $(this).addClass("active");
            let returnVal = "";
            let payload = {
                "contact": {}
            };

            let parent = $(this).parents(".chat-contact-preference");

            let name = $('input[name=name-contact-preference]', parent).val();
            returnVal += (name.length > 0 ? "Name: " + name + "</br>" : "Name: " + "</br>")
            payload.contact.name = name

            let email = $('input[name=email-contact-preference]', parent).val();
            returnVal += (email.length > 0 ? "Email: " + email + "</br>" : "Email: " + "</br>")
            payload.contact.email = email

            let phone = $('input[name=phone-contact-preference]', parent).val();
            returnVal += (phone.length > 0 ? "Phone: " + phone + "</br>" : "Phone: " + "</br>")
            payload.contact.phone = phone


            $(this).parents(".chat-contact-preference").velocity(
                "fadeOut", {
                    duration: 100,
                    complete: function (elements) {

                        setTimeout(function () {

                            if (Cookies.get('sessionID') === undefined || Cookies.get('sessionID') === null) {
                                getSessionId();

                                if (status) {

                                    socket.emit('user send', {
                                        sessionid: Cookies.get('sessionID'),
                                        msg: returnVal,
                                        payload: payload,
                                        user: 'user',
                                        key: rufuskey
                                    });
                                }

                                return false;
                            } else {

                                if (status) {
                                    socket.emit('user send', {
                                        sessionid: Cookies.get("sessionID"),
                                        msg: returnVal,
                                        payload: payload,
                                        user: 'user',
                                        key: rufuskey
                                    });
                                }

                                return false;
                            }

                        }, 500);
                    }
                });

        });

        // chat submit function
        $(document).on("submit", "form", function (event) {

            event.preventDefault();
            var msg = $('.input-box').val();
            $('.input-box').val('');
            $(".bot-msg.textinput").css('display', 'none')

            if (msg.length <= 0) {
                return;
            }

            if (Cookies.get('sessionID') === undefined || Cookies.get('sessionID') === null) {
                getSessionId();

                if (status) {

                    socket.emit('user send', {
                        sessionid: Cookies.get('sessionID'),
                        msg: msg,
                        user: 'user',
                        key: rufuskey
                    });
                }

                return false;
            } else {

                socket.emit('user send', {
                    sessionid: Cookies.get("sessionID"),
                    msg: msg,
                    user: 'user',
                    key: rufuskey
                });

                return false;
            }
        });

        function getSessionId() {

            var options = {
                type: 'POST',
                url: `https://${socketEndpoint}/chat/session`,
                contentType: 'text/plain',
                success: function (response) {
	                
	                
	                // New interaction with bot -> generate both
                    // Repeat interaction with bot -> restore sessionID from rufuskey cookie
                    if (Cookies.get(rufuskey) === undefined || Cookies.get(rufuskey) === null) {
                        // Have not interacted with this bot before, set new sessionID for this bot
                        Cookies.set('sessionID', response.sessionid, { expires: 1, path: '/' });
                        Cookies.set(rufuskey, response.sessionid, { expires: 1, path: '/' });
                    }
                    else {
                        // Have already interacted with this bot, restore sessionID
                        Cookies.set('sessionID', Cookies.get(rufuskey), { expires: 1, path: '/' });
                    }

                    return false;
                },
                error: function (response) {
                  console.log(response)
                }
            }
            $.ajax(options);
        }

        $(".btn-expand-rufus").on("click", function () {

            $("#overlay").toggleClass("side-bar");
            $("#overlay").toggleClass("menu");
            $("#overlay").toggleClass("landing");

        });

        $(".btn-close-rufus").on("click", function () {
            $(".rufus-container").css('top', "100vh");

            setTimeout(() => {
                $(".btn-open-rufus").addClass("active");
                $(".rufus-container").addClass("close-rufus");
                $(".rufus-container").css('position', "fixed")
                $(".rufus-container").css('top', "100vh");
                //$(".rufus-container").css('bottom', '0px')
                $(".rufus-container").css('left', '')
            }, 300);

            var date = new Date();
            date.setTime(date.getTime() + (30 * 60 * 1000));
            Cookies('open', false, {
                expires: date
            });
            Cookies('firstLoad', false, {
                expires: date
            });

        });

        $(".btn-open-rufus").on("click", function () {

            $(".btn-open-rufus").removeClass("active");
            $(".btn-expand-rufus").removeClass("active");
            $(".rufus-container").removeClass("close-rufus");
            $(".message-count").css("display", "none");
            $(".rufus-container").css('top', "100vh");

            setTimeout(() => {
                $(".rufus-container").css('right', "0px")
                $(".rufus-container").css('top', "0vh");
            }, 50);

            var date = new Date();
            date.setTime(date.getTime() + (30 * 60 * 1000));

            scrollChatBottom("fast");

            if (Cookies.get('open') === undefined || Cookies.get('open') === null) {

                window.setTimeout(introMessage, 0);

            } else if (Cookies.get('firstLoad') === 'true') {

                window.setTimeout(introMessage, 0);

                Cookies('firstLoad', false, {
                    expires: date
                });
             }

            Cookies('open', true, {
                expires: date
            });
        });

        function firstLoad(){

            var date = new Date();
            date.setTime(date.getTime() + (30 * 60 * 1000));

            Cookies('firstLoad', true, {
                expires: date
            });
        }
        window.setTimeout(firstLoad, 0);

        function showChat() {

            $(".powered-by").css("display", "flex");
            $(".rufus-container").css("display", "flex");
            $(".rufus-container").fadeTo("slow", 1, function () {
                $('#logopath').css("fill", "#e5f5fd");
                var winHeight = window.innerHeight;
            });
            if (rufuslanding === true) {
                $(".rufus-container").toggleClass("expand-rufus");
                $(".rufus-container").toggleClass("landing");

                $(".btn-close-rufus").css('display', 'none')

                $(".btn-expand-rufus").css('display', 'none')
                $('body').css("overflow", "hidden");
                $('bot').css('display', 'flex');
                $('.message-loading').css('opacity', '0');
                $('.message-loading').prependTo(".chat");
                $('.btn-open-rufus').css("display", "none !important");

                $("body").toggleClass("fixed");
                var fixed = document.getElementsByClassName("fixed");
                fixed[0].addEventListener('touchmove', function (e) {
                    if (e.target.className == "footer-ruf") {
                        e.preventDefault();
                    }
                }, false);
            } else {

                // $(".btn-expand-rufus").css('display', 'none')
                $(".rufus-container").toggleClass("side-bar");
                $(".powered-by").css('display', 'none')
            }
        };

        function introMessage() {

            var options = {
                method: 'POST',
                url: `https:${socketEndpoint}/chat/key`,
                data: {
                    key: rufuskey,
                },
                success: function (response) {

                    if (Cookies.get('referrer') == undefined) {

                        if (document.referrer.length > 1) {
                            Cookies.set('referrer', document.referrer, { expires: 1, path: '/' });
                        }
                        else {
                            Cookies.set('referrer', "Direct Link", { expires: 1, path: '/' });
                        }
                        console.log(Cookies.get('referrer'));
                    }
                    else {
                        console.log(Cookies.get('referrer'));
                    }

                    if (response.validKey == true) {
                        socket.emit('new userroom', {
                            sessionid: Cookies.get('sessionID'),
                            key: rufuskey,
                            referrer: Cookies.get('referrer'),
                        });
                    } else {
                        throw 'Invalid Rufus Key';
                    }
                }
            }
            $.ajax(options);
        };

        if (/Mobi/.test(navigator.userAgent) && !rufuslanding) {

            $(".btn-open-rufus").addClass("active");
            $(".rufus-container").removeClass("expand-rufus");
            $(".rufus-container").addClass("close-rufus");
            window.setTimeout(showChat, 1000);
        } else if( rufuslanding ){

            console.log("landing - show")
            window.setTimeout(showChat, 0);
            window.setTimeout(introMessage, 1000);
        } else {

            if (Cookies.get('open') === undefined || Cookies.get('open') === null) {

                console.log("open cookie - undefined")

                $(".btn-open-rufus").addClass("active");
                $(".rufus-container").removeClass("expand-rufus");
                $(".rufus-container").addClass("close-rufus");
                $(".message-count").css("display", "block");
                window.setTimeout(showChat, 1000);

            } else {

                if (Cookies.get('open') === 'true') {


                    console.log("open cookie - true")

                    $(".btn-open-rufus").removeClass("active");
                    $(".btn-expand-rufus").removeClass("active");
                    $(".rufus-container").removeClass("close-rufus");
                    $(".message-count").css("display", "none");
                    window.setTimeout(showChat, 0);
                    window.setTimeout(introMessage, 500);

                } else {


                    console.log("open cookie - false")

                    $(".btn-open-rufus").addClass("active");
                    $(".rufus-container").removeClass("expand-rufus");
                    $(".rufus-container").addClass("close-rufus");
                    $(".message-count").css("display", "block");
                    window.setTimeout(showChat, 1000);
                }
            }

            scrollChatBottom("slow");

        }
        $(document).on("keypress", "#input-box", function (e) {
            //$("").keypress(function(e) {
            if (e.which == 13) {
                e.preventDefault();
                $('.input-form').submit();
            }
        });

    } catch (err) {
        console.log(err);
    }

    function check() {
        if (document.hasFocus() == lastFocusStatus) return;

        lastFocusStatus = !lastFocusStatus;
        status = lastFocusStatus ? true : false;
        console.log(status);
    }

    window.lastFocusStatus = document.hasFocus();
    check();
    setInterval(check, 200);

    function scrollChatBottom(speed) {

        $("#chat-log").animate({ scrollTop: $('#chat-log').prop("scrollHeight")}, 1);
    }
});

setTimeout(() => {
    (function () {
        var _overlay = document.getElementById('chat-log');
        var _clientY = null; // remember Y position on touch start


        function disableRubberBand(event) {
            var clientY = event.targetTouches[0].clientY - _clientY;

            if (_overlay.scrollTop === 0 && clientY > 0) {
                // element is at the top of its scroll
                event.preventDefault();
            }

            if (isOverlayTotallyScrolled() && clientY < 0) {
                //element is at the top of its scroll
                event.preventDefault();
            }
        }

        function isOverlayTotallyScrolled() {
            return _overlay.scrollHeight - _overlay.scrollTop <= _overlay.clientHeight;
        }
    }())
}, 50);