// assume jquery is already loaded

var chatBot_autoOpen = true;

var chatBot_n = #N#;

var chatBot_interval = 1000;

var chatBot_nInitial = chatBot_n;

var chatBot_showActions = false;

var chatBot_language = "";

var chatBot_started = false;

var chatBot_cookie = localStorage.getItem('chatbot-cookie');

const urlParams = new URLSearchParams(window.location.search);

const botEnable = urlParams.get('bot');

if (#BOT_ON# || botEnable == "1") {

console.log("cookie 1: " + chatBot_cookie);

if (!chatBot_cookie) {

  chatBot_cookie = Math.random().toString(36).substr(2, 9);

  localStorage.setItem('chatbot-cookie', chatBot_cookie);

  console.log("cookie 2: " + chatBot_cookie);

}

// workaround to get $ from wordpress version of jQuery

jQuery(document).ready(function ($) {

  console.log("loading 2");

  // bot styles (#1025978)

  $('head').append('<link rel="stylesheet" type="text/css" href="https://botcompany.de/1014036/raw/1025978?contentType=text/css">');

  // bootstrap

  function dynamicallyLoadScript(url) {

    var script = document.createElement("script");

    script.src = url;

    document.head.appendChild(script);

  }

  // bootstrap js

  dynamicallyLoadScript('https://botcompany.de/1014036/raw/1025981?contentType=text/javascript');

  // scripts for bot

  function chatBot_open() {

    console.log("Opening chat bot");

    $('#qnimate').addClass('popup-box-on');

    $("#scrollme").scrollTop(1E10);

    $('#status_message').focus();

    if (!chatBot_started) {

      chatBot_started = true;

      try {

        if (GTranslateGetCurrentLang)

          chatBot_language = GTranslateGetCurrentLang();

        console.log("lang: " + chatBot_language);

      } catch (err) {

        console.log(err);

      }

      chatBot_start();

    }

  }

  $(function(){

    $(".chatOpenAction").click(function () {

      chatBot_open();

      return false;

    });

    $("#removeClass").click(function () {

      $('#qnimate').removeClass('popup-box-on');

      return false;

    });

  });

  function chatBot_showAction(action) {

    if (chatBot_showActions) {

      $("#actionMsg").html(action);

      $("#actionMsg").show();

    }

    console.log(action);

  }

  window.chatBot_appendAction = function(action) {

    if (chatBot_showActions) {

      $("#actionMsg").append(" | " + action);

      $("#actionMsg").show();

    }

  };

  window.chatBot_hideAction = function() {

    $("#actionMsg").hide();

    $("#actionMsg").html("");

  };

  window.chatBot_start = function() {

    url = "#INCREMENTALURL#";

    if (url != '' && url != ("#INC" + "REMENTALURL#")) {

      url += chatBot_n + "&cookie=" + chatBot_cookie;

      if (chatBot_language) url += "&language_default=" + chatBot_language;

      chatBot_showAction("Loading " + url);

      $.get(url, function(src) {

        chatBot_showAction("Loaded");

        var match = src.match(/\d+/);

        if (match != null) {

          var newN = parseInt(match[0]);

          if (src.match(/NEW DIALOG -->/))

            $(".direct-chat-messages").html(src);

          else {

            // hide old buttons

            $(".direct-chat-msg:has(.direct-chat-buttons)").hide();

            $(".chatbot-choice-button, .chat-button-span").hide();

            $(".direct-chat-messages").append(src);

          }

          chatBot_n = newN;

          $("#scrollme").scrollTop(1E10);

          chatBot_showAction("Appended " + src.length);

          console.log(src);

        } else

          chatBot_showAction("chatBot_n=" + chatBot_n + " (initial=" + chatBot_nInitial + ")");

        chatBot_appendAction("Rescheduling");

        setTimeout(chatBot_start, chatBot_interval);

        chatBot_appendAction("Rescheduled");

      }, 'text')

        .fail(function() {

          chatBot_showAction("Rescheduling after fail");

          setTimeout(chatBot_start, chatBot_interval);

        });

    }

  };

  // also focuses input field  

  window.chatBot_setInput = function(text, placeholder) {

    if (placeholder == '') placeholder = "Type a message...";

    $('#status_message').attr('placeholder', placeholder)

      .val(text)

      .select()

      .focus();

  };

  window.submitAMsg = function(msg) {

    status_message.value = msg;

    submitMsg();

  };

  window.submitMsg = function() {

    /*if (status_message.value == 'new dialog')

      document.forms['msgform'].submit();

    else*/ {

      url = '#MSGURL#' + encodeURIComponent(status_message.value) + "&cookie=" + chatBot_cookie;

      if (chatBot_language) url += "&language_default=" + chatBot_language;

      chatBot_showAction('Submitting ' + url);

      $.get(url);

      status_message.value = '';

    }

  };

  $('body').append(`

  <div id="actionMsg"></div> <!-- debug div -->

  <!-- chat bot opener div -->

<div class="opener-box notranslate">

  <div class="opener-head">

    <div class="popup-head-left pull-left chatOpenAction"><!--<img src="#BOTIMG#" alt="Bot Image">--> $HEADING</div>

    <div class="popup-head-right pull-right">

    <button data-widget="remove" class="chat-header-button pull-right chatOpenAction" type="button"><i class="glyphicon glyphicon-off"></i></button>

    </div>

  </div>

</div>

<!-- chat bot main form/div -->

<form name="msgform">

<div class="popup-box chat-popup notranslate" id="qnimate">

          <div class="popup-head">

        <div onClick="$('#qnimate').removeClass('popup-box-on')" class="popup-head-left pull-left"><!--<img src="#BOTIMG#" alt="Bot Image">--> $HEADING</div>

            <div class="popup-head-right pull-right">

            <!--

            <div class="btn-group">

                      <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">

                     <i class="glyphicon glyphicon-cog"></i> </button>

                    <ul role="menu" class="dropdown-menu pull-right">

                    <li><a href="#">Media</a></li>

                    <li><a href="#">Block</a></li>

                    <li><a href="#">Clear Chat</a></li>

                    <li><a href="#">Email Chat</a></li>

                    </ul>

            </div>

            -->

            <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>

                      </div>

        </div>

      <div id="scrollme" class="popup-messages">

      <div class="direct-chat-messages">

      <!-- MSGS HERE -->

      </div>

      <div class="popup-messages-footer">

      <div class="popup-messages-send" onClick="submitMsg(); return false;" title="Send message">

                <svg width="57px" height="54px" viewBox="1496 193 57 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 18px; height: 18px;">

                  <g id="Group-9-Copy-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(1523.000000, 220.000000) rotate(-270.000000) translate(-1523.000000, -220.000000) translate(1499.000000, 193.000000)">

                    <path d="M5.42994667,44.5306122 L16.5955554,44.5306122 L21.049938,20.423658 C21.6518463,17.1661523 26.3121212,17.1441362 26.9447801,20.3958097 L31.6405465,44.5306122 L42.5313185,44.5306122 L23.9806326,7.0871633 L5.42994667,44.5306122 Z M22.0420732,48.0757124 C21.779222,49.4982538 20.5386331,50.5306122 19.0920112,50.5306122 L1.59009899,50.5306122 C-1.20169244,50.5306122 -2.87079654,47.7697069 -1.64625638,45.2980459 L20.8461928,-0.101616237 C22.1967178,-2.8275701 25.7710778,-2.81438868 27.1150723,-0.101616237 L49.6075215,45.2980459 C50.8414042,47.7885641 49.1422456,50.5306122 46.3613062,50.5306122 L29.1679835,50.5306122 C27.7320366,50.5306122 26.4974445,49.5130766 26.2232033,48.1035608 L24.0760553,37.0678766 L22.0420732,48.0757124 Z" id="sendicon" fill="#96AAB4" fill-rule="nonzero"></path>

                  </g>

                </svg>

              </div>

      <textarea id="status_message" placeholder="Type a message..." rows="10" cols="30" name="message" onkeydown="if (event.keyCode == 13) { submitMsg(); return false; }"></textarea>

      <div class="btn-footer">

      <!--

      <button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button>

      <button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button>

            <button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button>

      -->

      <!--

      <button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button>

      -->

      </div>

      </div>

    </div>

</form>

<!-- end of chat bot form/div -->

  `);

  // onLoad

  if (chatBot_autoOpen)

    window.addEventListener('DOMContentLoaded', chatBot_open, false);

  // end of bot scripts

});

} // if botEnable