// assume jquery is already loaded

console.log("loading 1");

var chatBot_n = #N#;
var chatBot_interval = 1000;
var chatBot_nInitial = chatBot_n;
var chatBot_showActions = false;

// 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(){
    $("#addClass").click(function () {
      console.log("Opening chat bot");
      $('#qnimate').addClass('popup-box-on');
      $("#scrollme").scrollTop(1E10);
      return false;
    });
      
    $("#removeClass").click(function () {
      $('#qnimate').removeClass('popup-box-on');
      return false;
    });
  });
  
  function chatBot_showAction(action) {
    if (chatBot_showActions) {
      $("#actionMsg").html(action);
      $("#actionMsg").show();
    }
  }
    
  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#")) {
      chatBot_showAction("Loading " + url + chatBot_n);
      $.get(url + chatBot_n, function(src) {
        chatBot_showAction("Loaded");
        var match = src.match(/\d+/);
        if (match != null) {
          chatBot_n = parseInt(match[0]);
          $(".direct-chat-messages").append(src);
          $("#scrollme").scrollTop(1E10);
          chatBot_showAction("Appended " + src.length);
        } 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);
        });
    }
  };
  
  window.submitMsg = function() {
    if (status_message.value == 'new dialog')
      document.forms['msgform'].submit();
    else {
      url = '#MSGURL#' + encodeURIComponent(status_message.value);
      chatBot_showAction('Submitting ' + url);
      $.get(url);
      status_message.value = '';
    }
  };
  
  $('body').append(`
  
  <!-- chat bot opener div -->

<div id="actionMsg"></div>
<div class="chat-opener">
  <div class="round hollow text-center">
    <a href="#" id="addClass"><span class="glyphicon glyphicon-comment"></span> Talk to chat bot</a>
  </div>
</div>

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

<form name="msgform">

<div class="popup-box chat-popup" 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">
      <textarea autofocus 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
  window.addEventListener('DOMContentLoaded', chatBot_start, false);
  
  // end of bot scripts
});