/**
 * @package admin
 * @copyright (c) Kufer Software GmbH, Loisachstrasse 4, D-84453 Mühldorf
 */

/**
 * Beinhaltet alle Handler und Funktionen, die für den Reiter KuferTools im Admin benötigt werden. Dieser Reiter beinhaltet
 * die Untermenüs Einstellungen, Felderanordnung responsive und Sichten responsive.
 * Beim Laden der Seite wird die Funktion preparePage aufgerufen, die alle benötigten Funktionen und Handler bereitstellt
 * Großteil der Datei Kopiert. Vergleichen, welche der JS in eine einheitliche JS-Datei ausgelagert werden kann.
 * @param {HTMLElement} contentInlay
 */
function preparePage(contentInlay) {
  import('./tools_rechte.js')
    .then(module => {
      module.preparePage(contentInlay);
    });

  /*****************************************************************************
   * Save Sights
   *
   * Schreibt den Inhalt des Frames beim Speichern zurück in den Textarea
   *****************************************************************************
   */
  /* Tabs für die Anzeige der Sichten */

  jQuery(function ($) {
    jQuery('#tabs').tabs({
      activate: function (event, ui) {
        ui['newPanel'].find('textarea.highlight').each(function (k, v) {
          eval('document.active_editor = document.editor_' + $(v).prop('name'));
          document.active_editor.refresh();
          document.active_editor.focus();
        });
      }
    });

    var mixedMode = {
      name: "htmlmixed",
      scriptTypes: [{
        matches: /\/x-handlebars-template|\/x-mustache/i,
        mode: null
      }]
    };

    jQuery('textarea.highlight').each(function () {
      var cmd = 'var editor_' + jQuery(this).prop('name') + ' = CodeMirror.fromTextArea(document.getElementById("' + jQuery(this).prop('id') + '"), { ' +
        'tabSize:2, lineNumbers: true ';

      if (jQuery(this).hasClass('html')) {
        cmd = cmd + ", mode: mixedMode";
      } else if (jQuery(this).hasClass('js')) {
        cmd = cmd + ", mode: 'javascript'";
      } else {
        cmd = cmd + ", mode: 'css'";
      }

      cmd = cmd + ',extraKeys: {"F11": function(cm) {setFullScreen(cm, !isFullScreen(cm));},"Esc": function(cm) {if (isFullScreen(cm)) setFullScreen(cm, false);},"Ctrl-S": function(cm){setFullScreen(cm, false);$("input[name=savesight]").trigger("click");}} }); document.editor_' + jQuery(this).prop('name') + ' = editor_' + jQuery(this).prop('name') + ';' + 'editor_' + jQuery(this).prop('name') + '.addKeyMap({Tab: function(cm) {var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");cm.replaceSelection(spaces, "end", "+input");}});';

      eval(cmd);
    });

    var activeArea = $('#tabs div.ui-tabs-panel:not(.ui-tabs-hide)').find('textarea');
    if (activeArea.length > 0) {
      cmd = 'document.active_editor = document.editor_' + activeArea.prop('name') + ';';
      eval(cmd);
      document.active_editor.focus();
      console.log(activeArea);
    }

    jQuery('input.savesight').off('click');
    jQuery('input.savesight').on('click', saveAndSubmit);
  });

  /** Full-Sreen Functions Start**/
  function isFullScreen(cm) {
    return /\bCodeMirror-fullscreen\b/.test(cm.getWrapperElement().className);
  }

  function winHeight() {
    return window.innerHeight || (document.documentElement || document.body).clientHeight;
  }

  function setFullScreen(cm, full) {
    var wrap = cm.getWrapperElement();
    if (full) {
      wrap.className += " CodeMirror-fullscreen";
      wrap.style.height = winHeight() + "px";
      document.documentElement.style.overflow = "hidden";
    } else {
      wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
      wrap.style.height = "";
      document.documentElement.style.overflow = "";
    }
    cm.refresh();
    cm.focus();
  }

  CodeMirror.on(window, "resize", function () {
    //var showingOld = document.body.getElementsByClassName("CodeMirror-fullscreen")[0];
    //BUG-Fix für den I.E.: der I.E. unterstützt Methode getElementsByClassName(..) nicht
    //Achtung: document.body.getElementsByClassName("CodeMirror-fullscreen") enthält ein Array bzw. eine 
    // HTMLCollection [ <div.CodeMirror.cm-s-default.CodeMirror-fullscreen> ]; jQuery('.CodeMirror-fullscreen') dagegen
    // ein Object der Form {0: <div.CodeMirror.cm-s-default.CodeMirror-fullscreen>; length:1; context: HTMLDocument ? index.php; ....}
    // Über den Selektor 0 greifen beide Objekte dann auf dasselbe HTML Element zu, obwohl sie verschieden sind
    var showing = jQuery('.CodeMirror-fullscreen')[0];
    if (!showing) return;
    showing.CodeMirror.getWrapperElement().style.height = winHeight() + "px";
  });

  /** Full-Sreen Functions END **/

  function saveAndSubmit(event) {
    saveSight();
    ajaxPost.apply($('input.savesight')[0], [event]);
  }

  function saveSight(event) {
    jQuery('textarea.highlight').each(function () {
      var cmd = 'document.editor_' + jQuery(this).prop('name') + '.save()';
      eval(cmd);
    });
  }

  /*****************************************************************************
   * Variablenliste
   *
   * Beim Klick auf einen Input-Button (Seite Sichten), öffnet sich ein Dialog,
   * mit dem man Variablen in das gerade aktive Fenster einfügen kann. Mit einem
   * Filter kann nach Variablen gesucht werden. Die Liste mit Variablen wird
   * dabei über AJAX - Requests aktualisiert.
   *****************************************************************************
   */
  const typeWatchOptions = {
    callback: function () {
      loadVarlist();
    },
    wait: 750,
    highlight: true,
    captureLength: 0
  }

  function openVarlist(event) {
    event.preventDefault();
    linkWithEditor();
    jQuery('.variablelist').dialog('open');
  }

  /* Da die Seiten nur durch Ajax gewechselt werden, kann der Dialog der vorigen Seite noch vorhanden sein.
   * Dieser wird hier entfernt.*/
  if (jQuery('.variablelist').length > 1) {
    jQuery('.variablelist').first().remove();
  }
  jQuery('.variablelist').dialog({
    autoOpen: false,
    width: 500,
    height: 400,
    closeText: ''
  });

  jQuery('.variablelist input.filter').typeWatch(typeWatchOptions);

  jQuery('.variablelist select.filter').on('change', function (event) {
    loadVarlist();
  });

  function loadVarlist() {
    const list = document.body.querySelector('.variablelist div.list');
    list.classList.add('loading');

    const filter = jQuery('.variablelist input.filter').val();
    const category = jQuery('.variablelist select.filter').val();
    const urlVariablelist = new URL(window.location.origin + window.location.pathname);
    urlVariablelist.searchParams.set('ajax', 'variablelist');
    urlVariablelist.searchParams.set('filter', filter);
    urlVariablelist.searchParams.set('category', category);
    urlVariablelist.searchParams.set('limit', '50');
    fetch(urlVariablelist, {
      headers: new Headers({
        'X-Requested-With': 'XMLHttpRequest'
      })
    })
      .then(resp => resp.text())
      .then(data => {
        list.innerHTML = data;
        linkWithEditor();
      })
      .finally(() => {
        list.classList.remove('loading');
      });
  }

  function linkWithEditor() {
    jQuery('.variablelist div.list a').each(function () {
      jQuery(this).off('click');
      jQuery(this).on('click', function (event) {
        event.preventDefault();
        document.active_editor.replaceSelection(jQuery(this).text());
        jQuery('.variablelist').dialog('close');
      });
    });
  }

  jQuery('div.sight input.varlist').on('click', function (event) {
    event.preventDefault();
    jQuery('div.sight input.varlist').off('click');
    jQuery('div.sight input.varlist').on('click', openVarlist);
    loadVarlist('sys_');
    openVarlist(event);
  });

  jQuery('div.sight div.maximize').on('click', function (event) {
    event.preventDefault();
    setFullScreen(document.active_editor, !isFullScreen(document.active_editor));
  });

  /*****************************************************************************
   * Formular per AJAX abspeichern
   *****************************************************************************
   */

  jQuery('input.ajaxpost').on('click', ajaxPost);

  /*****************************************************************************
   * Nachladen der Seiteninhalte per Ajax
   *****************************************************************************
   */

  handleAjaxLinks();

  /*****************************************************************************
   * Fokus für das Sucheingabefeld
   *****************************************************************************
   */
  jQuery('#searchword').trigger('focus');

  var columnSign = $(".honoraranzeigeEinstell, .kursvorschlag, .newsuebersicht, #colortnstatus").parent().contents().filter(function () {
    if (this.nodeValue == ":")
      return this.nodeType === 3;
  });
  columnSign.detach();

  jQuery('.HasIncrDecr, [name^="vorKursende"], [name^="nachKursende"], [name^="vorKursbeginn"], [name^="nachKursbeginn"], [name="BelegschwelleZahl"]').each(function () {
    jQuery(this).parent().children().last()
      .after('<div class="count-buttons" style="position:absolute;"><img class="count" src="layout/images/plus.png" alt="+1" title="Wert um 1 erh&ouml;hen" /><img class="count" src="layout/images/minus.png" alt="-1" title="Wert um 1 vermindern" /></div>')
      .parent().children('div.count-buttons').children('img.count').on('click', function () {

      var $input = jQuery(this).parent().parent().children('input');
      var maxLength = ($input.prop('maxlength')) ? (parseInt($input.prop('maxlength'))) : 4;
      if ($input.val() == '') {
        $input.val(0);
      }
      var isDisabled = $input.prop('disabled');

      var val = parseInt($input.val()) + parseInt(jQuery(this).prop('alt'));
      if ($input.hasClass('nurPlus') && val < 0) {
        val = 0; // bei nurPlus sind nur positive Zahlen (und Null) erlaubt
      }
      if (isDisabled !== 'disabled' && val.toString().length <= maxLength || maxLength == -1) {
        $input.val(val);
      }
    });
  });
  $(".hasDatePicker").datepicker({dateFormat: 'dd.mm.yy'});
  //Nachdem der Datepicker hinzugefügt wurde, wurde ein leeres div als kleiner Balken ausgegeben. => ausblenden
  $('#ui-datepicker-div').css('display', 'none');
  $('.hasTimePicker').timepicker();

  /****
   * Einstellungen fuer Drucklisten:  speziell Aktionen und Klickhandler für die Kursstammblatt und Lehrplan Liste
   **/

  if ($('#kursstammblaetter #option1').length > 0 && !$('#kursstammblaetter #option1')[0].checked) {
    $('#kursstammblaetter #option2').prop('disabled', true);
  }
  $('#kursstammblaetter #option1').on('click', function () {
    $('#kursstammblaetter #option2').prop('disabled', !this.checked);
  });

  $('#lehrplanliste #option3').on('click', function () {
    var checked = !this.checked && $('#lehrplanliste input[name="portrait"]:checked').val() === '1'; //1 = Hochformat
    $('#lehrplanliste #option6').prop('disabled', checked);
  });

  $('#lehrplanliste input[name="portrait"]').on('click', function () {
    var disabled = $('#lehrplanliste #option3:checked').length === 0 && $(this).val() === '1'; //1 = Hochformat
    $('#lehrplanliste #option6').prop('disabled', disabled);
  });

  //Option 6 darf nur an sein, wenn auch Option 7 an ist
  $(document).on('click', '#kursstammblaetter #option6', function () {
    if (this.checked) {
      $('#kursstammblaetter #option7')[0].checked = true;
    }
  });
  $(document).on('click', '#kursstammblaetter #option7', function () {
    if (!this.checked) {
      $('#kursstammblaetter #option6')[0].checked = false;
    }
  });

  $('#kursstammblaetter #option26').on('click', function () {

    if ($(this).prop("checked") == true) {
      for (let i = 1; i <= 25; i++) {
        document.getElementById("option" + i).checked = true;
        document.getElementById("option" + i).disabled = true;
      }
      for (let i = 27; i <= 28; i++) {
        document.getElementById("option" + i).checked = true;
        document.getElementById("option" + i).disabled = true;
      }
    } else {
      var alleOptionen = $(this).siblings('input:checkbox');
      alleOptionen.prop('disabled', false);
    }
  });

  var disabled = $('#lehrplanliste #option3:checked').length === 0 && $('#lehrplanliste input[name="portrait"]:checked').val() === '1'; //1 = Hochformat
  $('#lehrplanliste #option6').prop('disabled', disabled);

  // Einstellungen für den Dokumentenupload


  var blackListRadio = $('input[name=dokuUploadAllowByExclude][value=1]');

  if ($("input[name='bccAnmeldebestaetigungeMail']").prop('checked')) {
    $("input[name='bccAnmeldebestaetigungeMailAdresse']").prop('disabled', false);
  } else
    $("input[name='bccAnmeldebestaetigungeMailAdresse']").prop('disabled', true);

  $("input[name='bccAnmeldebestaetigungeMail']").on('click', function () {
    $("input[name='bccAnmeldebestaetigungeMailAdresse']").prop('disabled', !this.checked);
  });

  if (blackListRadio.prop('checked')) {
    $("input[name='uploadWhitelist4Ext']").prop('disabled', true);
  } else {
    $("input[name='uploadBlacklist4Ext']").prop('disabled', true);
  }

  // E-Mails an Schulungseinrichtung ------Anfang & // E-Mails an den planenden Mitarbeiter-------Anfang
  // Vorbelegung der Checkboxen
  if (!EMailAnMitKuferSQLEintrag()) {
    EMailAnOhneKuferSQLEintrag();
  }

  function EMailAnOhneKuferSQLEintrag() {
    const $checkboxMailEnrichtung = $("input[name='kursplanungMailAnEinrichtung']");
    const $checkboxMailMitarbeiterPlanend = $("input[name='kursplanungMailPlanendenMA']");
    const $checkboxMailMitarbeiterVerwaltend = $("input[name='kursplanungMailVerwaltendenMA']");
    const $checkboxMailMitarbeiterVerantwortend = $("input[name='kursplanungMailVerantwortendenMA']");
    const $checkboxInfoEinrichtung = $("input[name='infoMailAnEinrichtung']");
    const $checkboxInfoMitarbeiterPlanend = $("input[name='InfoMailAnPlanendenMA']");
    const $checkboxInfoMitarbeiterVerwaltend = $("input[name='infoMailAnVerwaltendenMA']");
    const $checkboxInfoMitarbeiterVerantwortend = $("input[name='infoMailAnVerantwortendenMA']");
    const $checkboxInfoAddContent = $("input[name='sendKursplanungMailInsteadOfInfoMail']");

    if ($checkboxMailEnrichtung.prop('checked')
      || $checkboxMailMitarbeiterPlanend.prop('checked')
      || $checkboxMailMitarbeiterVerwaltend.prop('checked')
      || $checkboxMailMitarbeiterVerantwortend.prop('checked')) {
      $checkboxInfoEinrichtung.prop('checked', false);
      $checkboxInfoEinrichtung.prop('disabled', true);
      $checkboxInfoMitarbeiterPlanend.prop('checked', false);
      $checkboxInfoMitarbeiterPlanend.prop('disabled', true);
      $checkboxInfoMitarbeiterVerwaltend.prop('checked', false);
      $checkboxInfoMitarbeiterVerwaltend.prop('disabled', true);
      $checkboxInfoMitarbeiterVerantwortend.prop('checked', false);
      $checkboxInfoMitarbeiterVerantwortend.prop('disabled', true);
      $checkboxInfoAddContent.prop('checked', false);
      $checkboxInfoAddContent.prop('disabled', true);

      return true;
    } else {
      $checkboxInfoEinrichtung.prop('disabled', false);
      $checkboxInfoMitarbeiterPlanend.prop('disabled', false);
      $checkboxInfoMitarbeiterVerwaltend.prop('disabled', false);
      $checkboxInfoMitarbeiterVerantwortend.prop('disabled', false);
      $checkboxInfoAddContent.prop('disabled', false);

      return false;
    }
  }

  function clickEMailAnEventOhneKuferSQLEintrag() {
    EMailAnOhneKuferSQLEintrag();
  }

  function EMailAnMitKuferSQLEintrag() {
    const $checkboxInfoEinrichtung = $("input[name='infoMailAnEinrichtung']");
    const $checkboxInfoMitarbeiterPlanend = $("input[name='InfoMailAnPlanendenMA']");
    const $checkboxInfoMitarbeiterVerwaltend = $("input[name='infoMailAnVerwaltendenMA']");
    const $checkboxInfoMitarbeiterVerantwortend = $("input[name='infoMailAnVerantwortendenMA']");
    const $checkboxMailEnrichtung = $("input[name='kursplanungMailAnEinrichtung']");
    const $checkboxMailMitarbeiterPlanend = $("input[name='kursplanungMailPlanendenMA']");
    const $checkboxMailMitarbeiterVerwaltend = $("input[name='kursplanungMailVerwaltendenMA']");
    const $checkboxMailMitarbeiterVerantwortend = $("input[name='kursplanungMailVerantwortendenMA']");
    if ($checkboxInfoEinrichtung.prop('checked')
      || $checkboxInfoMitarbeiterPlanend.prop('checked')
      || $checkboxInfoMitarbeiterVerwaltend.prop('checked')
      || $checkboxInfoMitarbeiterVerantwortend.prop('checked')) {
      $checkboxMailEnrichtung.prop('checked', false);
      $checkboxMailEnrichtung.prop('disabled', true);
      $checkboxMailMitarbeiterPlanend.prop('checked', false);
      $checkboxMailMitarbeiterPlanend.prop('disabled', true);
      $checkboxMailMitarbeiterVerwaltend.prop('checked', false);
      $checkboxMailMitarbeiterVerwaltend.prop('disabled', true);
      $checkboxMailMitarbeiterVerantwortend.prop('checked', false);
      $checkboxMailMitarbeiterVerantwortend.prop('disabled', true);

      return true;
    } else {
      $checkboxMailEnrichtung.prop('disabled', false);
      $checkboxMailMitarbeiterPlanend.prop('disabled', false);
      $checkboxMailMitarbeiterVerwaltend.prop('disabled', false);
      $checkboxMailMitarbeiterVerantwortend.prop('disabled', false);

      return false;
    }
  }

  function clickEMailAnEventMitKuferSQLEintrag() {
    EMailAnMitKuferSQLEintrag();
  }

  // Events

  $("input[name='kursplanungMailAnEinrichtung'], " +
    "input[name='kursplanungMailPlanendenMA'], " +
    "input[name='kursplanungMailVerwaltendenMA'], " +
    "input[name='kursplanungMailVerantwortendenMA']").on('click',
    clickEMailAnEventOhneKuferSQLEintrag);

  $("input[name='infoMailAnEinrichtung'], " +
    "input[name='InfoMailAnPlanendenMA'], " +
    "input[name='infoMailAnVerwaltendenMA'], " +
    "input[name='infoMailAnVerantwortendenMA']").on('click',
    clickEMailAnEventMitKuferSQLEintrag);

  //E-Mails an die Mitarbeiter ------Ende & //E-Mails an die Schulungseinrichtung ------Ende

  //allgemeine Semestereinstellungen/Vorbelegung Kursfilter: Ein-/Ausblenden von Checkboxen/Input-Feldern
  if ($('#KursefolgenderSemesterinKuferTools').length > 0) {
    if ($("[name='kursFilterVorbelegen-item0']").prop('checked')) {
      $(".knr_filter").prop('disabled', false);
    } else
      $(".knr_filter").prop('disabled', true);

    $("[name='kursFilterVorbelegen-item0']").on('click', function () {
      $(".knr_filter").prop('disabled', !this.checked);
    });

    if ($('input[name="kursFilterKursbeginnVorbelegen-item0"]').is(':checked') === false) {
      $('.kursbeg_filter').prop('disabled', true);
    } else {
      $('input[name="kursFilterKursbeginnVorbelegen-item1"]').prop('disabled', true);
    }
    if ($('input[name="kursFilterKursbeginnVorbelegen-item1"]').is(':checked') === false) {
      $('.kursbegMonat_filter').prop('disabled', true);
    } else {
      $('input[name="kursFilterKursbeginnVorbelegen-item0"]').prop('disabled', true);
    }

    $("[name='kursFilterKursbeginnVorbelegen-item0']").on('click', function () {
      $("[name='kursFilterKursbeginnVorbelegen-item1']").prop('disabled', this.checked);
      $(".kursbeg_filter").prop('disabled', !this.checked);
    });
    $("[name='kursFilterKursbeginnVorbelegen-item1']").on('click', function () {
      $("[name='kursFilterKursbeginnVorbelegen-item0']").prop('disabled', this.checked);
      $(".kursbegMonat_filter").prop('disabled', !this.checked);
    });
  }

  //abweichende Semestereinstellungen / Vorbelegung Kursfilter: Ein-/Ausblenden von Checkboxen/Input-Feldern
  var $abwSemlist = $("input[name='useAbweichendeSemester']");
  var $abwSemlistKursKopie = $("input[name='kurskopie_useAbweichendeSemester']");
  if ($abwSemlist.length > 0 || $abwSemlistKursKopie.length > 0) {
    var kurskopie = '';

    if ($abwSemlistKursKopie.length > 0) {
      kurskopie = 'kurskopie_';
    }
    var checked = $("input[name='" + kurskopie + "kursFilterVorbelegen-item0']").is(':checked');

    $(".knr_filter").prop('disabled', !checked);

    $("input[name='" + kurskopie + "kursFilterVorbelegen-item0']").on('click', function () {
      $(".knr_filter").prop('disabled', !this.checked);
    });

    $("input[name='" + kurskopie + "kursFilterKursbeginnVorbelegen-item0']").on('change', function () {
      var checked = $(this).is(':checked');
      $(".kursbeg_filter").prop('disabled', !checked);
      $("input[name='" + kurskopie + "kursFilterKursbeginnVorbelegen-item1']").prop('disabled', checked);
    });

    $("input[name='" + kurskopie + "kursFilterKursbeginnVorbelegen-item1']").on('change', function () {
      var checked = $(this).is(':checked');
      $(".kursbegMonat_filter").prop('disabled', !checked);
      $("input[name='" + kurskopie + "kursFilterKursbeginnVorbelegen-item0']").prop('disabled', checked);
    });

    if ($abwSemlist.length > 0 && $abwSemlist.is(':checked') === false ||
      $abwSemlistKursKopie.length > 0 && $abwSemlistKursKopie.is(':checked') == false) {

      if ($abwSemlistKursKopie.length > 0) {
        $('#kurskopie_semester .inputmultiselect input[type="checkbox"]').prop('disabled', true);
      } else {
        $('#semlist .inputmultiselect input[type="checkbox"]').prop('disabled', true);
        $("input[name=keineAusgefallenenKurse]").prop('disabled', true);
        $("input[name=keineAbgeschlossenenKurse]").prop('disabled', true);
        $("input[name=keineHauptkurse]").prop('disabled', true);
      }

      $(".knr_filter").prop('disabled', true);
      $("[id=" + kurskopie + "kursFilterVorbelegen-item0]").prop('disabled', true);
      $(".kursbegMonat_filter").prop('disabled', true);
      $(".kursbeg_filter").prop('disabled', true);
      $("input[name='" + kurskopie + "kursFilterKursbeginnVorbelegen-item1']").prop('disabled', true);
      $("input[name='" + kurskopie + "kursFilterKursbeginnVorbelegen-item0']").prop('disabled', true);

      //Ignorieren der Kursnummerneinstellungen des users via Filterdialog
      $('input[name="' + kurskopie + 'ignoreKursBereichFromUser"]').prop('disabled', true);
    } //end if ($abwSemlist.length > 0 && $abwSemlist.is(':checked') === false || ...)
    else {
      if ($("input[name='" + kurskopie + "kursFilterKursbeginnVorbelegen-item1']").prop('checked')) {
        $("input[name='" + kurskopie + "kursFilterKursbeginnVorbelegen-item0']").prop('disabled', true);
        $(".kursbeg_filter").prop('disabled', true);
      } else {
        $("input[name='" + kurskopie + "kursFilterKursbeginnVorbelegen-item0']").prop('disabled', false);
        $(".kursbeg_filter").prop('disabled', false);
      }

      if ($("input[name='" + kurskopie + "kursFilterKursbeginnVorbelegen-item0']").prop('checked')) {
        $("input[name='" + kurskopie + "kursFilterKursbeginnVorbelegen-item1']").prop('disabled', true);
        $(".kursbegMonat_filter").prop('disabled', true);
      } else {
        $("input[name='" + kurskopie + "kursFilterKursbeginnVorbelegen-item1']").prop('disabled', false);
        $(".kursbegMonat_filter").prop('disabled', false);
      }

      if ($("input[name='" + kurskopie + "kursFilterKursbeginnVorbelegen-item0']").is(':checked') === false) {
        $('.kursbeg_filter').prop('disabled', true);
      }
      if ($("input[name='" + kurskopie + "kursFilterKursbeginnVorbelegen-item1']").is(':checked') === false) {
        $('.kursbegMonat_filter').prop('disabled', true);
      }
    } //end else

    //Changehandler zum Input f. abw.Semester
    $('input[name=' + kurskopie + 'useAbweichendeSemester]').on('click', function () {
      if ($(this).is(':checked')) {
        if ($abwSemlist.length > 0) {
          $('#semlist .inputmultiselect input[type="checkbox"]').prop('disabled', false);
          $('input[name="keineAusgefallenenKurse"]').prop('disabled', false);
          $('input[name="keineAbgeschlossenenKurse"]').prop('disabled', false);
          $('input[name="keineHauptkurse"]').prop('disabled', false);

          //Added: begin
          $('input[name="' + kurskopie + 'kursFilterVorbelegen-item0"]').prop('disabled', false);
          $('input[name="' + kurskopie + 'kursFilterKursbeginnVorbelegen-item0"]').prop('disabled', false);
          $('input[name="' + kurskopie + 'kursFilterKursbeginnVorbelegen-item1"]').prop('disabled', false);
          //Added: End
          //zum Ignorieren der Kursnummerneinstellungen des users via Filterdialog
          $('input[name="' + kurskopie + 'ignoreKursBereichFromUser"]').prop('disabled', false);
        } else {
          $('#kurskopie_semester .inputmultiselect input[type="checkbox"]').prop('disabled', false);
        }

        $("input[name=maAussenstKurseZuerstAnzeigen]").prop('disabled', false);
        //kursFilterVorbelegen:
        if ($('input[name="' + kurskopie + 'kursFilterVorbelegen-item0"]').is(':checked')) {
          $('.knr_filter').prop('disabled', false);
        }

      } //end if($(this).is(':checked'))
      else {
        if ($abwSemlist.length > 0) {
          $('#semlist .inputmultiselect input').prop('disabled', true);
          $('input[name="keineAusgefallenenKurse"]').prop('disabled', true);
          $('input[name="keineAbgeschlossenenKurse"]').prop('disabled', true);
          $('input[name="keineHauptkurse"]').prop('disabled', true);
          $('input[name="' + kurskopie + 'kursFilterVorbelegen-item0"]').prop('disabled', true);

          //added: beginn
          $('input[name="' + kurskopie + 'kursFilterVorbelegen-item0"]').prop('disabled', true);
          if ($('input[name="' + kurskopie + 'kursFilterVorbelegen-item0"]')) {
            $('.knr_filter').prop('disabled', true);
          }
          $('input[name="' + kurskopie + 'kursFilterKursbeginnVorbelegen-item0"]').prop('disabled', true);
          if ($('input[name="' + kurskopie + 'kursFilterKursbeginnVorbelegen-item0"]')) {
            $('.kursbeg_filter').prop('disabled', true);
          }
          $('input[name="' + kurskopie + 'kursFilterKursbeginnVorbelegen-item1"]').prop('disabled', true);
          if ($('input[name="' + kurskopie + 'kursFilterKursbeginnVorbelegen-item1"]')) {
            $('.kursbegMonat_filter').prop('disabled', true);
          }
          // added: end
          //zum Ignorieren der Kursnummernbereichseinstellungen des Users via Filterdialog
          $('input[name="' + kurskopie + 'ignoreKursBereichFromUser"]').prop('disabled', true);
        } else {
          $('#kurskopie_semester .inputmultiselect input').prop('disabled', true);
        }
        $("input[name=maAussenstKurseZuerstAnzeigen]").prop('disabled', true);
      } //end else
    }); //end Changehandler zum Input f. abw.Semester

  } //end if ($abwSemlist.length > 0)


  // Optionen zur Sortierung der Medienübersicht im Tool Raumbelegung für Hausmeister anpassen
  // ggf. Optionen für weitere Sortierkriterien ausgrauen etc.

  //if ($('#sortmedien .setting-inputradio')[0].checked) {
  $medienZusatzKrit = $('#sortmedienzusatz .setting-inputradio');

  if ($($('#sortmedien .setting-inputradio')[0]).is(':checked')) {
    $($medienZusatzKrit[0]).prop('disabled', true);
    $($medienZusatzKrit[1]).prop('checked', true);
  } else if ($($('#sortmedien .setting-inputradio')[1]).is(':checked')) {
    $($medienZusatzKrit[1]).prop('disabled', true);
    $($medienZusatzKrit[0]).prop('checked', true);
  }

  // Klickhandler für Radiobuttons zum Sortieren der Medieneinträge; für das 2te Sortierkriterium,
  //muss ein anderer Radiobutton gesetzt werden als für das erste
  $('#sortmedien .setting-inputradio').on('click', function () {
    // 2tes Sortierkriterium   
    $medienZusatzKrit = $('#sortmedienzusatz .setting-inputradio'); //ist ein Array   
    if ($(this).val() == 'datumZeit') {
      $($medienZusatzKrit[0]).prop('disabled', true);
      //Raumbezeichnung im 2ten Sortierkriterium setzen
      $($medienZusatzKrit[1]).prop('checked', true);
      $($medienZusatzKrit[1]).prop('disabled', false);
    } else { // $(this).val() == 'ko.mktext')
      $($medienZusatzKrit[1]).prop('disabled', true);
      //Datum im 2ten Sortierkriterium setzen
      $($medienZusatzKrit[0]).prop('checked', true);
      $($medienZusatzKrit[0]).prop('disabled', false);
    }
  })

  //Methode zum Bereitstellen von Stundenplanuhrzeiten und Events dazu
  function loadJSHandling4Stundenplanuhrzeit() {
    /** Via Stundenplanuhrzeitcontainer werden die Events und Funktionen zur Bearbeitung von Stundenplanuhrzeiten bereitgestellt */
    /**************************************************************************************************/
    var container = new StundenplanuhrzeitContainer();
    container.initReadyhandling();
  }


  //Radiobuttons zu Semestereinstellungen von Tool 22 (Mitarbeiter Firma); Bei Auswahl von "Semestereinstellungen
  // aus Tool 21 Kurse für Firmen übernehmen" werden die folgenden Semestereinstellungen ausgeblendet (via display: none);
  // bei Auswahl von "abweichende Semester setzen" werden sie wieder eingeblendet

  $('input[name$=useTool21Semester]').on('change', function () {
    // if ($(this).prop('value') == 'true')
    if ($(this).val() == 'true') {
      $('#useabweichendesemester').hide();
      $('#semlist').hide();
      $('#keineausgefallenenkurse').hide();
      $('#keineabgeschlossenenkurse').hide();
      $('#keinehauptkurse').hide();
      $('#maAussenstKurseZuerstAnzeigen').hide();
    } else {
      // alert('einblenden');
      $('#useabweichendesemester').show();
      $('#semlist').show();
      $('#keineausgefallenenkurse').show();
      $('#keineabgeschlossenenkurse').show();
      $('#keinehauptkurse').show();
      $('#maAussenstKurseZuerstAnzeigen').show();
    }
  });

  $('input[name=dokuUploadAllowByExclude]').on('click', function () {

    if ($(this).val() === '1') {
      if ($("input[name='uploadBlacklist4Ext']").prop('disabled'))
        $("input[name='uploadBlacklist4Ext']").prop('disabled', false);
      $("input[name='uploadWhitelist4Ext']").prop('disabled', true);
    } else { //whitelist
      $("input[name='uploadBlacklist4Ext']").prop('disabled', true);
      if ($("input[name='uploadWhitelist4Ext']").prop('disabled'))
        $("input[name='uploadWhitelist4Ext']").prop('disabled', false);
    }
  });

  if ($("[name='useZeitraumVorbelegung-item0']").prop('checked')) {
    $(".zeitraumVorbelegung").prop('disabled', false);
  } else
    $(".zeitraumVorbelegung").prop('disabled', true);

  $("[name='useZeitraumVorbelegung-item0']").on('click', function () {
    $(".zeitraumVorbelegung").prop('disabled', !this.checked);
  });

  // Triggert den Changehandler sofort beim Laden; 
  $('select.hasBgColor').on('change', function () {
      // var color = $('option:selected',this).css('background-color'); Bugfix: not supported by Firefox, IE, Edge, only supported by Chrome
      var style = $(this).find('option:selected').attr('style');
      $(this).attr('style', style);
    }
  ).trigger('change');

  var $abweichendeKtStatus4Tool19 = $("[name='abweichendeKtStatus']");

  if ($abweichendeKtStatus4Tool19.length > 0) {
    if (!$abweichendeKtStatus4Tool19.is(':checked')) {
      $("#ktstatus :input, #colorktstatus :input").attr("disabled", true);
    }
    $abweichendeKtStatus4Tool19.on('click', function () {
      $("#ktstatus :input, #colorktstatus :input").attr("disabled", !this.checked);
    });
  }

  //Einstellungen für die BLAK Punkteschwellen

  if (typeof (KuferTools.ToolSettings) == "undefined") {
    KuferTools.ToolSettings = '';
  }
  $("#blakSchwelleSlider").slider({
    range: true,
    min: 0,
    max: 100,
    values: [KuferTools.ToolSettings.BlakUntereSchwelle, KuferTools.ToolSettings.BlakObereSchwelle],
    slide: function (event, ui) {
      $("#blakSchwelle").val(ui.values[0] + "-" + ui.values[1]);
      $("#blakUntereSchwelle").html(ui.values[0]);
      $("#blakObereSchwelle").html(ui.values[1]);
    }
  });

  // Kurstag-Einstellungen in den Grafik-PDF-Listen (Kurstageübersicht)
  const ktStatusPdfListeGrafikUseParent = document.querySelector('[name=ktStatusPdfListeGrafikUseParent]');
  if (ktStatusPdfListeGrafikUseParent) {
    console.log("1");

    function triggerKtStatusPdfListeGrafikUseParent() {
      console.log("2");
      const disabled = ktStatusPdfListeGrafikUseParent.checked;
      const ktStatusCheckboxes = document.querySelectorAll('[name^=ktStatusPdfListeGrafik-]');
      ktStatusCheckboxes.forEach(function (value) {
        value.disabled = disabled;
      });
    }

    triggerKtStatusPdfListeGrafikUseParent();
    ktStatusPdfListeGrafikUseParent.addEventListener('click', triggerKtStatusPdfListeGrafikUseParent);
  }

  /*****************************************************************************
   * zentrale Einstellungen der Menüleiste
   *****************************************************************************
   */

  // Es wird nur die Menüleiste einer Benutzergruppe auf einmal angezeigt, der Rest eingeklappt.
  $('.menuSettings h3, .menuSettings .menu_group_toggle').on('click', function () {
    var $menuSettingsDiv = $(this).parent().find('div').not('.menuGruppe_unterpunkte');
    var $menuSettingsToggle = $(this).parent().find('.menu_group_toggle');


    $('.menuSettings .menu_group_toggle.fa-chevron-circle-right').each(function () {
      $(this).parent().find('div').not('.menuGruppe_unterpunkte').hide();
    });

    if ($menuSettingsToggle.hasClass('fa-chevron-circle-down')) {
      return;
    }

    $('.menuSettings .menu_group_toggle.fa-chevron-circle-down').each(function () {
      $(this).parent().find('div').not('.menuGruppe_unterpunkte').toggle('show');
      $(this).addClass('fa-chevron-circle-right').removeClass('fa-chevron-circle-down');
    });
    $menuSettingsToggle.removeClass('fa-chevron-circle-right').addClass('fa-chevron-circle-down');
    $menuSettingsDiv.toggle('show');

    if ($(this).parent().hasClass('menuSettings_LOGIN')) {
      $('.divAddAbleItemLists4LoginPage').show();
    } else {
      $('.divAddAbleItemLists4LoginPage').hide();
    }

    $('div.menuBarSettings img.menu_trennlinie').height($('div.menuBarSettings').height()); //höhe der Trennlinie
  });


  $(document).off("click.menuGruppe").on('click.menuGruppe',
    '.menuGruppePanel:not(".menuAddableOberpunkt h4, .menuGruppeHeader, .leftmenu_buttonlist_settings .backgroundButton"), .menuGruppe img.menu_group_unterpunkt_toggle', function (e) {


      var gdgg = $(this).next('.menuGruppe_unterpunkte');

      $(this).next('.menuGruppe_unterpunkte').toggle(('show'));

      $(this).find('.menu_group_unterpunkt_toggle').toggleClass("fa-chevron-circle-right fa-chevron-circle-down");

      // $('.menuGruppe .menu_group_unterpunkt_toggle').removeClass('fa-chevron-circle-down').addClass('fa-chevron-circle-right');
      // $(this).parent().find('.menu_group_toggle').removeClass('fa-chevron-circle-right').addClass('fa-chevron-circle-down');

      if ($(this).parent().hasClass('menuSettings_LOGIN')) {
        $('.divAddAbleItemLists4LoginPage').show();
      } else {
        $('.divAddAbleItemLists4LoginPage').hide();
      }

      $('div.menuBarSettings img.menu_trennlinie').height($('div.menuBarSettings').height()); //höhe der Trennlinie

      e.stopPropagation();
    });

  $('.menuSettings h3').first().trigger('click');

  // Die Reihenfolge der Listen können mit sortable per Drag&Dropt geändert werden.
  //Macht die Listen der Menüpunkte sortierbar
  $('.leftmenu_buttonlist_settings').sortable({
    connectWith: ".leftmenu_buttonlist, .menuRemoveItemList", //Damit die Listenelemente aufs Löschenfeld gezogen werden können
    dropOnEmpty: true,
    start: function (event, ui) {
      $(ui.item).find('span.text_left_menu .buttonEdit').trigger('focusout');
    },
    stop: function (event, ui) { /* Fix für Opera, welche nach dem Verschieben noch top und left hinzufügt.*/
      $(ui.item).css('top', 0).css('left', 0);
    },
    receive: function (event, ui) {
      if ($(ui.item).find('.notEditable')) {
        $(ui.item).find('.notEditable').removeClass("notEditable");
      }
    }
  });

  $('.leftmenu_gruppenlist_settings').sortable({
    connectWith: ".leftmenu_gruppenlist_settings, .leftmenu_buttonlist_settings", //Damit die Listenelemente aufs Löschenfeld gezogen werden können
    start: function (event, ui) {
      $(ui.item).find('span.text_left_menu .buttonEdit').trigger('focusout');
    },
    stop: function (event, ui) { /* Fix für Opera, welche nach dem Verschieben noch top und left hinzufügt.*/
      $(ui.item).css('top', 0).css('left', 0);
    },
    receive: function (event, ui) {
      if ($(ui.item).hasClass('leftmenu_gruppe_settings')) {
        $(ui.sender).sortable('cancel');
      }
      if ($(this).hasClass('notEditable')) {
        $(ui.sender).sortable('cancel');
      }
    }
  });

  //Die Zusatzmenüpunkte, welche in die Menülisten eingefügt werden können
  $('.menuAddableItemList, .menuAddableOberpunkt').sortable({
    //Damit können die Listenelemente in die Menülisten gezogen werden können.
    connectWith: ".benutzerMenuBar ul.leftmenu_buttonlist_settings",
    dropOnEmpty: true,
    remove: function (event, ui) {
      $(this).html($(ui.item).clone());
    },
    start: function (event, ui) {
      //$(ui.item).find('span.text_left_menu .buttonEdit').trigger('focusout');
    },
    stop: function (event, ui) { /* Fix für Opera, welche nach dem Verschieben noch top und left hinzufügt.*/
      $(ui.item).css('top', 0).css('left', 0);
      //   $(ui.item).find('.notEditable').removeClass("notEditable");

      // $(this).appendTo('leftmenu_buttonlist_settings')
      var receiver = $(ui.item).find('.leftmenu_gruppenlist_settings');
      receiver.sortable({
        connectWith: ".leftmenu_gruppenlist_settings, .leftmenu_buttonlist_settings", //Damit die Listenelemente aufs Löschenfeld gezogen werden können
        start: function (event, ui) {
          $(ui.item).find('span.text_left_menu .buttonEdit').trigger('focusout');
        },
        stop: function (event, ui) { /* Fix für Opera, welche nach dem Verschieben noch top und left hinzufügt.*/
          $(ui.item).css('top', 0).css('left', 0);
        },
        receive: function (event, ui) {
          if ($(ui.item).hasClass('leftmenu_gruppe_settings')) {
            $(ui.sender).sortable('cancel');
          }
          if ($(this).hasClass('notEditable')) {
            $(ui.sender).sortable('cancel');
          }
        }
      });

    },
    receive: function (event, ui) {
      $(ui.sender).sortable('cancel');
    }
  });

  //Die Menüpunkte für die Loginseite dürfen nur in das Menü für Login verschoben werden.
  $('.menuAddableItemList4LoginPage').sortable('option', 'connectWith', '.leftmenu_buttonlist_settings.LOGIN:not(.menuAddableItemList)');

  //Das Feld zum Löschen der Menüpunkte
  $('.menuRemoveItemList').sortable({
    dropOnEmpty: true,
    //Löscht die Elemente, welche hierhin gezogen werden, oder macht den Vorgang bei
    //nicht löschbaren Elementen rückgängig.
    receive: function (event, ui) {
      if ($(ui.item).hasClass('notRemoveable')) {
        $(ui.sender).sortable('cancel');
      } else if ($(ui.item).find('.notRemoveable').length !== 0) {
        $(ui.sender).sortable('cancel');
      }
      $(this).html('<li class="hidden"></li><li class="hidden"></li><li class="hidden"></li>');
    }
  }).disableSelection();

  //InlineEdit genügt nicht den Anforderungen, deshalb eingenständig gelöst
  $(document).on('click',
    '.leftmenu_buttonlist_settings li span.text_left_menu, .leftmenu_buttonlist_settings li img, .leftmenu_buttonlist_settings .backgroundButton', function () {
      if ($(this).parent().find('span.text_left_menu:has(:text), .backgroundButton:has(:text)').length)
        return;
      var $span = $(this).parent().find('span.text_left_menu, .backgroundButton');
      var $input = $('<input type="text" class="buttonEdit" style="width: 230px; height: 20px; font-size: 1.2em;" value="' + $span.text() + '">');
      $span.html($input);
      $input.trigger('focus');
      //Trick, damit der Cursor am Ende des Textfeldes steht.
      $initialVal = $input.val();
      $input.val($initialVal + ' ');
      $input.val($initialVal);
    });

  //InlineEdit genügt nicht den Anforderungen, deshalb eingenständig gelöst
  $(document).on('click',
    '.menuGruppeHeader', function (e) {
      $(this).trigger('focus');
      var $input = $('<input type="text" class="buttonEdit" style="width: auto; height: 25px; font-size: 1.1em;" value="' + $(this).text() + '">');
      $(this).html($input);
      $input.trigger('focus');
      //Trick, damit der Cursor am Ende des Textfeldes steht.
      $initialVal = $input.val();
      $input.val($initialVal + ' ');
      $input.val($initialVal);
      //  $(this).attr('contenteditable','true' );
      e.stopPropagation();
    });

  //Übernimmt den Buttontext aus dem editierten Eingabefeld.
  $(document).on('focusout', '.leftmenu_buttonlist_settings li .buttonEdit, .menuGruppe .menuSettingsHeader', function () {
    $(this).parent().html($(this).val());
  });
  $(document).on('keydown', '.leftmenu_buttonlist_settings li input', function (event) {
    //Verhindert, dass beim Bestätigen mittels der Enter-Taste nicht das Formular abgesendet wird.
    if (event.which == 13) {
      event.preventDefault();
      $(this).trigger('focusout');
    }
  });

  KuferTools.generateHiddenString4Post = function () {

    /**
     * Wandelt Sonderzeichen in die HTML-Repräsentation um.
     *
     * Achtung: 1. Nicht vollständig, kann aber jederzeit um die benötigten Zeichen erweitert werden.
     *          2. Falls zukünftig Anführungszeichen konvertiert werden, sollte in einem Parameter abgefragt werden,
     *             ob diese mitkonvertiert werden sollen oder nicht.
     */
    var HTMLEncode = function (pString) {
      var result = pString;
      result = result.replace(/ä/g, '&auml;');
      result = result.replace(/ü/g, '&uuml;');
      result = result.replace(/ö/g, '&ouml;');
      result = result.replace(/Ä/g, '&Auml;');
      result = result.replace(/Ü/g, '&Uuml;');
      result = result.replace(/Ö/g, '&Ouml;');
      result = result.replace(/ß/g, '&szlig;');
      return result;
    }
    var $listen = $('ul.leftmenu_buttonlist_settings:not(.menuAddableItemList, ul.leftmenu_gruppenlist_settings)');
    var $gruppenlisten = $('ul.leftmenu_gruppenlist_settings:not(.menuAddableItemList)');

    if ($listen.length) {
      //Um eventuelle Fehler zu Vermeiden, bei allen Buttonbeschriftung-Bearbeiten-Eingabefeldern
      //den focusout triggern (siehe funktion darüber)
      $('.leftmenu_buttonlist_settings li span.text_left_menu .buttonEdit').trigger('focusout');

      var keyArray = new Array('DOZ', 'MA', 'TN', 'FA', 'ADR', 'VA', 'LOGIN');
      var menuAry = {}; //für die Verwendung von assizioative Arrays nicht new Array verwenden.
      // Erst den Typ rausfinden
      for (i = 0; i < keyArray.length; i++) {

        menuAry[keyArray[i]] = {}; //Wirklich immer anlegen, oder nur, wenn es elemente dazu gibt?
        //Die <ul> der jeweiligen benutzergruppe
        var $list = $listen.filter('.' + keyArray[i]);
        //Die Listenelemente/Menüpunkte
        var $listElements = $list.children();
        for (j = 0; j < $listElements.length; j++) {
          var buttonType = $($listElements[j]).children('input:hidden[name="type"]').val();
          menuAry[keyArray[i]][j] = {};
          menuAry[keyArray[i]][j]['type'] = buttonType;
          //Es werden " aus den Eingaben entfernt, da diese 1. nicht nötig sind, und 2. zu problemen führen

          if (buttonType == 'tool' || buttonType == 'link' || buttonType == 'login' || buttonType == 'password') {

            var beschriftung = $($listElements[j]).find('.lbs_btn .backgroundButton:not(:has(:text))').text();
            var accesskey = ''; // $($listElements[j]).find('span.lbs_hotkey input').val(); TODO
            beschriftung = beschriftung.replace(/"/g, '');
            accesskey = accesskey.replace(/"/g, '');
            menuAry[keyArray[i]][j]['beschriftung'] = HTMLEncode(beschriftung);
            menuAry[keyArray[i]][j]['accesskey'] = HTMLEncode(accesskey);
            menuAry[keyArray[i]][j]['isToolKursvorschlag'] = $($listElements[j]).find('input:hidden[name="kursvorschlag_tool_3"]').val();

            if (buttonType == 'tool') {
              menuAry[keyArray[i]][j]['toolid'] = $($listElements[j]).find('input:hidden[name="tool_id"]').val();
            } else if (buttonType == 'link') {
              var link = HTMLEncode($($listElements[j]).find('input[name="link"]').val());

              link = link.replace(/"/g, '');
              menuAry[keyArray[i]][j]['link'] = link;
            }
          } else if (buttonType == 'menuGruppe') {

            var beschriftung = $($listElements[j]).find('.menuGruppeHeader').text();

            if (beschriftung == '') {
              KuferTools.showMessage({
                meldung: "Die Beschreibung des oberen Men&uuml;punktes sollte nicht leer sein.",
                title: "Fehlende Beschriftung"
              })
              return false;
            }
            beschriftung = beschriftung.replace(/"/g, '');
            menuAry[keyArray[i]][j]['beschriftung'] = HTMLEncode(beschriftung);

            var $unterpunktlist = $($listElements[j]).find('ul.leftmenu_gruppenlist_settings:not(.menuAddableItemList)');
            var $unterpunktlistElements = $unterpunktlist.children();

            for (var x = 0; x < $unterpunktlistElements.length; x++) {
              var unterpunktButtonType = $($unterpunktlistElements[x]).children('input:hidden[name="type"]').val();
              menuAry[keyArray[i]][j][x] = {};
              menuAry[keyArray[i]][j][x]['type'] = unterpunktButtonType;

              if (unterpunktButtonType == 'tool' || unterpunktButtonType == 'link' || unterpunktButtonType == 'login' || unterpunktButtonType == 'password') {
                var unterpunktBeschriftung = $($unterpunktlistElements[x]).find('.lbs_btn .backgroundButton:not(:has(:text))').text();
                var unterpunktAccesskey = ''; // $($listElements[j]).find('span.lbs_hotkey input').val(); TODO
                unterpunktBeschriftung = unterpunktBeschriftung.replace(/"/g, '');
                unterpunktAccesskey = unterpunktAccesskey.replace(/"/g, '');
                menuAry[keyArray[i]][j][x]['beschriftung'] = HTMLEncode(unterpunktBeschriftung.trim());
                menuAry[keyArray[i]][j][x]['accesskey'] = HTMLEncode(unterpunktAccesskey);

                if (unterpunktButtonType == 'tool') {
                  menuAry[keyArray[i]][j][x]['toolid'] = $($unterpunktlistElements[x]).find('input:hidden[name="tool_id"]').val();
                  if ($($unterpunktlistElements[x]).find('input:hidden[name="kursvorschlag_tool_3"]')) {
                    menuAry[keyArray[i]][j][x]['isToolKursvorschlag'] = $($unterpunktlistElements[x]).find('input:hidden[name="kursvorschlag_tool_3"]').val();
                  }

                } else if (unterpunktButtonType == 'link') {
                  var unterpunktLink = HTMLEncode($($unterpunktlistElements[x]).find('input[name="link"]').val());

                  unterpunktLink = unterpunktLink.replace(/"/g, '');
                  menuAry[keyArray[i]][j][x]['link'] = unterpunktLink;
                }
              }
            }
          }
        }
      }

      var jsonValue = JSON.stringify(menuAry);
      var value = jsonValue.replaceAll(/"/g, '[DBQUOTE]');
      var hiddenInputForMenu = $('<input type="hidden" name="menuBarJSON" value="' + value + '">');
      var form = $('#settingsform');
      form.append(hiddenInputForMenu);
    }
  };

  prepareWss(contentInlay); // Bereitet die Ausgabe und Handler für das Untermenü "eingestellte Felder responsive" vor

  // Anzeige weitere Einstellungen wenn abweichende Semester bei der Einstellung "Mitarbeiter des Vorgesetzten mit Kursen folgender Semester anzeigen" auswählt werden soll. 
  $('input[name="useTool20Semester"]').on('change', function () {
    if ($(this).val() === 'useSem20') {
      $('#useabweichendesemester').hide();
      $('#semlist').hide();
      $('#keineausgefallenenkurse').hide();
      $('#keineabgeschlossenenkurse').hide();
      $('#keinehauptkurse').hide();
    } else {
      $('#useabweichendesemester').show();
      $('#semlist').show();
      $('#keineausgefallenenkurse').show();
      $('#keineabgeschlossenenkurse').show();
      $('#keinehauptkurse').show();
    }
  });

  $('input[name="useTool20Semester"]:checked').trigger('change');

  function doAuffuellartDisable() {
    var auffuellen = $('input[name=auffuellen]').prop('checked');

    $('#padding_0').prop('disabled', !auffuellen);
    $('#padding_1').prop('disabled', !auffuellen);

    // Erste Auffüllart auswählen, wenn keines der beiden ausgewählt sind
    if (auffuellen && !$('#padding_0').prop('checked') && !$('#padding_1').prop('checked')) {
      $('#padding_0').prop('checked', true);
    }
  }

  doAuffuellartDisable();

  $(document).on('change', 'input[name=auffuellen]', doAuffuellartDisable);

  function checkAutoLoginBlockLoginBenutzergruppen() {
    $('input[name^=blockLoginAnf-item]').prop('disabled', $('input[name=tnAutoLogin], input[name=dozAutoLogin]').any(function () {
      return $(this).prop('checked');
    }));
  }

  checkAutoLoginBlockLoginBenutzergruppen();
  $(document).on('change', 'input[name=tnAutoLogin], input[name=dozAutoLogin]', checkAutoLoginBlockLoginBenutzergruppen);

  function checkAktuelleSemester() {
    var values = $('input.setting-inputmultiselect[name^=semlist-item]:checked').map(function () {
      return $(this).val();
    }).toArray();
    values.push('');

    $('input.setting-inputradio[name=aktuelles_semester]')
      .each(function () {
        var shouldDisable = !values.includes($(this).val());
        $(this).prop('disabled', shouldDisable);
        if (shouldDisable) {
          $(this).prop('checked', false);
        }
      });
  }

  checkAktuelleSemester();
  $(document).on('change', 'input.setting-inputmultiselect[name^=semlist-item]', checkAktuelleSemester);

  function checkDokumenteFuerFirmenFreigeben() {
    $('input.setting-inputcheckbox[name=dokumenteAllowForFirmenDefault]').prop('disabled', !$('input.setting-inputcheckbox[name=dokumenteAllowForFirmenSetting]').prop('checked'));
  }

  checkDokumenteFuerFirmenFreigeben();
  $(document).on('input.setting-inputcheckbox[name=dokumenteAllowForFirmenSetting]', checkDokumenteFuerFirmenFreigeben);

  function checkDokumenteFuerTeilnehmerFreigeben() {
    $('input.setting-inputcheckbox[name=dokumenteAllowForTeilnehmerDefault]').prop('disabled', !$('input.setting-inputcheckbox[name=dokumenteAllowForTeilnehmerSetting]').prop('checked'));
  }

  checkDokumenteFuerTeilnehmerFreigeben();
  $(document).on('input.setting-inputcheckbox[name=dokumenteAllowForTeilnehmerSetting]', checkDokumenteFuerTeilnehmerFreigeben);

  function checkAnwesenheitenUEModifiedEMail() {
    var enabled = $('input.setting-inputcheckbox[name=anwUeModifiedEMail]').prop('checked');
    if (typeof enabled !== 'undefined') {
      $('input.setting-inputcheckbox[name=anwUeModifiedEMailToPlanenderMitarbeiter], input.setting-inputcheckbox[name=anwUeModifiedEMailToVerwaltenderMitarbeiter], input.setting-inputcheckbox[name=anwUeModifiedEMailToVerantwortenderMitarbeiter], input.setting-inputnormal[name=anwUeModifiedEmailAnEinrichtungCustom]').prop('disabled', !enabled);
    }
  }

  checkAnwesenheitenUEModifiedEMail();
  $(document).on('input.setting-inputcheckbox[name=anwUeModifiedEMail]', checkAnwesenheitenUEModifiedEMail);

  function checkMitarbeiterInAusbildungBeiAusbildungsschablone() {
    const mitarbeiterAnhandBeziehung = document.body.querySelector('input.setting-inputcheckbox[name=mitarbeiterAnhandBeziehung]');
    if (mitarbeiterAnhandBeziehung) {
      const inAusbildungBeiAusbildungsschablone = document.body.querySelector('input.setting-inputcheckbox[name=inAusbildungBeiAusbildungsschablone]');
      const mitarbeiterAnhandBeziehungIgnoreBegin = document.body.querySelector('input.setting-inputcheckbox[name=mitarbeiterAnhandBeziehungIgnoreBegin]');
      if (inAusbildungBeiAusbildungsschablone) {
        inAusbildungBeiAusbildungsschablone.disabled = !mitarbeiterAnhandBeziehung.checked;
      }
      if (mitarbeiterAnhandBeziehungIgnoreBegin) {
        mitarbeiterAnhandBeziehungIgnoreBegin.disabled = !mitarbeiterAnhandBeziehung.checked;
      }
    }
  }

  checkMitarbeiterInAusbildungBeiAusbildungsschablone();
  $(document).on('change', 'input.setting-inputcheckbox[name=mitarbeiterAnhandBeziehung]', checkMitarbeiterInAusbildungBeiAusbildungsschablone);

  function checkKursInPlanungOrKursBearbeiten() {
    const kursstatusKursIstBearbeitbar
      = document.body.querySelectorAll('[id^="kursstatusKursIstBearbeitbar-item"].setting-inputmultiselect');
    const kursstatusKursIstNichtBearbeitbar
      = document.body.querySelectorAll('[id^="kursstatusKursIstNichtBearbeitbar-item"].setting-inputmultiselect');
    const hasKursstatusKursIstBearbeitbar = Array.from(kursstatusKursIstBearbeitbar).some(element => element.checked);
    const hasKursstatusKursIstNichtBearbeitbar = Array.from(kursstatusKursIstNichtBearbeitbar).some(element => element.checked);

    kursstatusKursIstBearbeitbar.forEach(
      element => element.disabled = !hasKursstatusKursIstBearbeitbar && hasKursstatusKursIstNichtBearbeitbar
    );
    kursstatusKursIstNichtBearbeitbar.forEach(
      element => element.disabled = hasKursstatusKursIstBearbeitbar
    );
  }

  checkKursInPlanungOrKursBearbeiten();
  $(document).on(
    'change',
    '[id^="kursstatusKursIstBearbeitbar-item"].setting-inputmultiselect, [id^="kursstatusKursIstNichtBearbeitbar-item"].setting-inputmultiselect',
    checkKursInPlanungOrKursBearbeiten
  );
} //end preparePage()

/**
 * Bereitet die Ausgabe der Felder und das Handling beim Absenden des Formulars mit den eingestellten Feldern vor
 * @param {HTMLElement} contentInlay
 */
function prepareWss(contentInlay) {
  const openWssListButton = contentInlay.querySelector('.wssBarSettings.wssSubmit input.openwsslist') ?? undefined;
  if (!openWssListButton) {
    // Wenn es sich nicht um die Wss-Feld Seite handelt => nicht weitermachen
    return;
  }

  const sightId = openWssListButton.id;


  /**
   * @returns {HTMLElement}
   */
  function removeSettingsDialog() {
    const wsfSettingsDialog = document.querySelector('#wsf_settings_dialog');
    wsfSettingsDialog.remove();

    return wsfSettingsDialog;
  }

  const wsfSettingDialog = removeSettingsDialog();

  if (document.querySelectorAll('.eingestellteFelder').length > 0) {
    //Ausgabe der Felder mit Werten aus den Einstellungen
    renderWss();
  }

  var indexStart;
  jQuery('.eingestellteFelder').sortable({
    start: function (event, ui) {
      indexStart = ui.item.index();
    },
    stop: function (event, ui) {
      var indexStop = ui.item.index();
      // Die Positionen sind aus irgendenen Grund in Left und nicht in Top gespeichert
      wssAry = changeArrayPositions(wssAry, indexStart, indexStop);
      renderWss();
    }
  });

  function changeArrayPositions(array, key1, key2) {
    // Nicht einfach nur austauschen, sondern an neuer Stelle einfügen
    const tmp = array[key1];
    array.splice(key1, 1);
    array.splice(key2, 0, tmp);
    return array;
  }

  /**
   *  Submit Handler für das Abschicken des Formulars mit den Feldeinstellungen
   *
   *  wird beim Klick auf Button "Übernehmen" ausgeführt; dann werden die Feldinhalte im Post abgeschickt
   */

  contentInlay.querySelector('.wssSubmit').addEventListener('submit', event => {
    event.preventDefault();

    // Daten die im Post versendet werden
    const jsonFelder = JSON.stringify(wssAry);

    for (const e of contentInlay.querySelectorAll('input[name=felder]')) {
      e.remove();
    }

    const inputFeld = document.createElement('input');
    inputFeld.type = 'hidden';
    inputFeld.name = 'felder';
    inputFeld.value = jsonFelder;
    event.currentTarget.insertAdjacentElement('beforeend', inputFeld);

    ajaxPost.apply(contentInlay.querySelector('input.wsslistsubmit'), [event]);
  });

  /**
   * Gibt die Felder mit den aktuell gespeicherten DB Settings auf der Seite aus
   * Die Feldinhalte stammen aus Tabelle web_sights_fields; die Felder mit den entspr. Inhalten werden im DOM Baum eingehängt
   */
  function renderWss() {
    const eingestellteFelder = contentInlay.querySelector('.eingestellteFelder');
    eingestellteFelder.innerHTML = '';

    //Hängt die Felder mit den Werten aus den DB Einstellungen in den DOM Baum ein
    for (const index in wssAry) {
      const wss = wssAry[index];
      const row = getWssRow(wss.wsfId, wss.name, wss.label, wss.bold, wss.textfarbe, wss.fontsize, wss.ausrichtung, wss.mandatory, wss.wenn_leer, wss.head, wss.tail)
      /** @type {HTMLElement|undefined} */
      const wsfSetting = row.querySelector('.wsf_setting:not(.wsf_off)') ?? undefined;
      wsfSetting?.addEventListener('click', () => {
        const $dialog = jQuery(wsfSettingDialog.cloneNode(true));

        // Einstellungen vorbelegen
        $dialog.find('#wsf_setting_beschriftung').val(wss.label);
        $dialog.find('#wsf_setting_head').val(wss.head);
        $dialog.find('#wsf_setting_tail').val(wss.tail);

        let textfarbe = '#000000';
        if (typeof (wss.textfarbe) != "undefined" && (wss.textfarbe.trim()) != "") {
          textfarbe = wss.textfarbe;
        }

        $dialog.find('.setting_setColor').css('background-color', textfarbe);
        $dialog.find('.setting_setColor .hidden_color').val(textfarbe);

        if (wss.bold == 1) {
          $dialog.find('#wsf_setting_fett').addClass('wsf_checked');
        }

        if (wss.mandatory == 1) {
          $dialog.find('#wsf_setting_mandatory').prop('checked', true);
        }

        if (wss.maxlength != '' && wss.maxlength != 0) {
          $dialog.find('#wsf_setting_maxlength').val(wss.maxlength);
        }

        if (wss.fontsize != '') {
          $dialog.find('#wsf_setting_fontsize').val(wss.fontsize);
        }

        if (wss.wenn_leer == '[HIDE]') {
          $dialog.find('.wenn_leer_hide').prop('checked', true);
        } else if (wss.wenn_leer.substring(0, 6) == '[TEXT]') {
          $dialog.find('.wenn_leer_alternativtext').prop('checked', true);
          $dialog.find('.alternativtext').val(wss.wenn_leer.substring(6));
        } else {
          $dialog.find('.wenn_leer_normal').prop('checked', true);
        }


        const ausrichtung = wss.ausrichtung;
        $dialog.find('.wsf_align').removeClass('alignHighlight');
        switch (wss.ausrichtung) {
          case 'R':
            $dialog.find('#align_right').addClass('alignHighlight');
            break;
          case 'C':
            $dialog.find('#align_center').addClass('alignHighlight');
            break;
          case 'J':
            $dialog.find('#align_justify').addClass('alignHighlight');
            break;
          default:
            $dialog.find('#align_left').addClass('alignHighlight');
            break;
        }

        $dialog.dialog({
          modal: true,
          title: row.querySelector('.wsf_beschreibung').textContent,
          closeText: "",
          width: '300px',
          close: function () {
            $dialog.remove();
          },
          buttons: {
            "Setzen": function () {
              // Einstellungen speichern
              wss.label = $dialog.find('#wsf_setting_beschriftung').val();
              wss.head = $dialog.find('#wsf_setting_head').val();
              wss.tail = $dialog.find('#wsf_setting_tail').val();
              wss.textfarbe = $dialog.find('.hidden_color').val();

              if ($dialog.find('#wsf_setting_fett.wsf_checked').length > 0) {
                wss.bold = 1;
              } else {
                wss.bold = 0;
              }

              if ($dialog.find('#wsf_setting_mandatory:checked').length > 0) {
                wss.mandatory = 1;
              } else {
                wss.mandatory = 0;
              }

              if ($dialog.find('.wenn_leer_hide:checked').length > 0) {
                wss.wenn_leer = '[HIDE]';
              } else if ($dialog.find('.wenn_leer_alternativtext:checked').length > 0) {
                wss.wenn_leer = '[TEXT]' + $dialog.find('.alternativtext').val();
              } else {
                wss.wenn_leer = '';
              }

              const alignId = $dialog.find('.wsf_align.alignHighlight').prop('id');
              if (alignId == 'align_right') {
                wss.ausrichtung = 'R';
              } else if (alignId == 'align_center') {
                wss.ausrichtung = 'C';
              } else if (alignId == 'align_justify') {
                wss.ausrichtung = 'J';
              } else {
                wss.ausrichtung = 'L';
              }

              let maxLength = trim($dialog.find('#wsf_setting_maxlength').val());
              if (/\D/g.test(maxLength)) {
                // Filter Nicht- Ziffern werte vom Eingabefeld
                maxLength = maxLength.replace(/\D/g, '');
              }
              wss.maxlength = maxLength;

              const fontSize = trim($dialog.find('#wsf_setting_fontsize').val());
              const validFontSize = fontSize.replace(/[^\d.,]/g, '');
              const fontSizeFloat = parseFloat(validFontSize.replace(',', '.'));
              wss.fontsize = (fontSizeFloat) ? fontSizeFloat : 100;

              renderWss();
              jQuery(this).dialog('close');
            },
            Abbrechen: function () {
              jQuery(this).dialog('close');
            }
          }
        });

        $dialog.find('#setting_setColor_icon').on('click', function () {
          $dialog.find('.setting_setColor').trigger('click');
        });

        $dialog.find('.setting_setColor').ColorPicker({
          color: 'transparent',
          onChange: function (hsb, hex, rgb) {
            var $target = $(this).data('target');
            $target.find('.hidden_color').val('#' + hex);
            $dialog.find('.setting_setColor').css('background-color', '#' + hex);
          },
          onShow: function (picker) {
            $(this).ColorPickerSetColor($(this).find('.hidden_color').val());
            $(picker).data('target', $(this));
          }
        });

        $dialog.find('.wsf_align').on('click', function () {
          $('.wsf_align').removeClass('alignHighlight');
          $(this).addClass('alignHighlight');
        });

        $dialog.find('.wsf_mark_checkbox').on('click', function () {
          $(this).toggleClass('wsf_checked');
        });

        $dialog.find('#wsf_setting_beschriftung').focus();
      });

      row.addEventListener('dblclick', event => {
        if (event.target.closest('.wsf_setting, .wsf_entfernen')) {
          return;
        }

        wsfSetting?.click();
      });

      row.querySelector('.wsf_entfernen:not(.wsf_off)')?.addEventListener('click', () => {
        const id = row.id;
        document.querySelector('#wsf_' + id + '.inBenutzung')?.classList?.remove('inBenutzung');

        wssAry.splice(parseInt(index + ''), 1);
        renderWss();
      });

      eingestellteFelder.appendChild(row);
    }
  }

  /**
   * Liefert den Inhalt eines einzelnen Feldes für zu den Feldeinstellungen als HTML Element
   * Liefert ein <li> Element, das die Inhalte aus den web_sights_Fields enthält wie z.B. die Felder
   * Zeitraum, Ort etc. in der Kursübersicht für Dozenten
   *
   * @param {number} wsfId
   * @param {string} beschreibung
   * @param {string} label
   * @param {boolean} bold
   * @param {string} textfarbe
   * @param {string} fontsize
   * @param {string} ausrichtung
   * @param {boolean} mandatory
   * @param {string} wenn_leer
   * @returns {HTMLElement}
   */
  function getWssRow(wsfId, beschreibung, label, bold, textfarbe, fontsize, ausrichtung, mandatory, wenn_leer, head, tail) {
    /** @type {HTMLElement} */
    const tmp = contentInlay.querySelector('.wsf_prototype li').cloneNode(true);
    tmp.id = '' + wsfId;
    tmp.querySelector('.wsf_label').textContent = label;
    tmp.querySelector('.wsf_beschreibung').textContent = beschreibung;
    const wsfHead = tmp.querySelector('.wsf_head') ?? undefined;
    if (wsfHead) {
      wsfHead.textContent = head;
    }
    const wsfTail = tmp.querySelector('.wsf_tail') ?? undefined;
    if (wsfTail) {
      wsfTail.textContent = tail;
    }

    if (bold == true) { // wtf: wenn ich das == true weglasse fällt der zu oft rein!
      tmp.querySelector('.wsf_beschreibung').style.fontWeight = 'bold';
    }

    if (fontsize != '' && fontsize != 100) {
      tmp.querySelector('.wsf_beschreibung').style.fontSize = fontsize + '%';
    }

    if (mandatory == true) {
      tmp.style.border = '1px solid red';
    }

    if ((textfarbe.trim()) != '') {
      tmp.querySelector('.wsf_beschreibung').style.color = textfarbe.trim();
    }

    switch (ausrichtung) {
      case 'R':
        tmp.querySelector('.wsf_beschreibung').style.textAlign = 'right';
        break;
      case 'C':
        tmp.querySelector('.wsf_beschreibung').style.textAlign = 'center';
        break;
      case 'J':
        tmp.querySelector('.wsf_beschreibung').style.textAlign = 'justify';
        break;
      default:
        tmp.querySelector('.wsf_beschreibung').style.textAlign = 'left';
        break;
    }

    tmp.querySelector('.wsf_wenn_leer').value = wenn_leer;
    return tmp;
  }

  /*****************************************************************************
   * WSS-Liste
   *****************************************************************************
   */

  loadWsslist(sightId);
  openWssListButton.addEventListener('click', openWsslist);

  function openWsslist(event) {
    event.preventDefault();
    linkWithWssEditor();

    // Problem: Die variablenliste wird geöffnet, offen gelassen und die Seite gewechselt!
    jQuery('.wsslist').dialog('open');
  }

  /**
   * @param {HTMLElement} verfuegbareZeile
   * @param {NodeListOf<HTMLElement>} felderInBenutzung
   * @return {boolean}
   */
  function istFeldInBenutzung(verfuegbareZeile, felderInBenutzung) {
    const id = verfuegbareZeile.id;
    const wsfId = id.split('_')[1];
    return Array.from(felderInBenutzung).some(element => element.id === wsfId);
  }

  function linkWithWssEditor() {
    document.querySelectorAll('.wsslist div.wssContent a').forEach(element => {
      jQuery(element).off('click');
      jQuery(element).on('click', function (event) {
        event.preventDefault();
        document.active_editor.replaceSelection(jQuery(element).text());
        jQuery('.wsslist').dialog('close');
      });
    });
  }

  function loadWsslist(sightId) {
    const list = document.querySelector('.wsslist div.wssContent');
    list.classList.add('loading');
    const urlWsslist = new URL(window.location.origin + window.location.pathname);
    urlWsslist.searchParams.set('ajax', 'wsslist');
    urlWsslist.searchParams.set('sightId', sightId);
    fetch(urlWsslist, {
      headers: new Headers({
        'X-Requested-With': 'XMLHttpRequest'
      })
    })
      .then(resp => resp.text())
      .then(data => {
        list.innerHTML = data;
        linkWithWssEditor();

        const felderInBenutzung = document.querySelectorAll('ul.eingestellteFelder li.wsf');
        document.querySelectorAll('ul.verfuegbareFelder_gruppe li.wsf').forEach(element => {
          if (istFeldInBenutzung(element, felderInBenutzung)) {
            element.classList.add('inBenutzung');
          } else {
            element.classList.remove('inBenutzung');

            element.addEventListener('click', event => {
              const wss = {
                wsfId: element.id.split('_')[1],
                name: element.querySelector('.wsf_beschreibung').textContent.trim(),
                label: element.querySelector('.wsf_beschreibung').textContent.trim(),
                bold: 0,
                textfarbe: '',
                ausrichtung: '',
                mandatory: 0,
                wenn_leer: '',
                maxlength: '',
                fontsize: '',
                head: '',
                tail: ''
              };

              element.classList.add('inBenutzung');
              wssAry[wssAry.length] = wss;
              renderWss();
            });
          }
        });
      })
      .finally(() => {
        list.classList.remove('loading');
      });
  }

  /* Da die Seiten nur durch Ajax gewechselt werden, kann der Dialog der vorigen Seite noch vorhanden sein.
   * Dieser wird hier entfernt.*/

  const wssList = document.querySelectorAll('.wsslist');
  if (wssList.length > 1) {
    // Bereits initialisierte Dialoge werden ans Ende vom Body gehängt,
    // daher das letzte Element entfernen, und nicht das erste.
    const wssListElement = Array.from(wssList).pop();
    $(wssListElement).dialog('close');
    wssListElement.remove();
  }

  jQuery('.wsslist').dialog({
    autoOpen: false,
    modal: true,
    width: 500,
    height: 400,
    closeText: ''
  });
}

function forwardToKuferTools() {
  window.open('../kufertools/index.php?tool_id=-4', '_blank');
}

$(function () {
  preparePage(document.body.querySelector('#content_inlay'));
});
