// Jquery Handling für die Zentrale Einstellungen für die KuferTools

if (typeof KuferTools == 'undefined' ) KuferTools = {};
if (typeof KuferTools.ZentraleEinstellungen == 'undefined' ) KuferTools.ZentraleEinstellungen = {};

/*
 * Aendert die Anzeige der Checkboxen für die Versendeart der Emails
 * aendert die Attribute disabled, checked;  Versendeart kann Text oder HTML Mail sein
 *  param string inputName4Infomail
 */
function changeAttributes4InputTextHTML(inputName4Infomail) {
  //Input kann die Werte infoMailTextContent oder infoMailMultipleContent haben
  var $input4infoMailContent = $('input[name=' + inputName4Infomail + ']');
  if (inputName4Infomail == 'infoMailMultipleContent')
    var $input4change = $('input[name=infoMailTextContent]');
  else //Input ist: infoMailTextContent
    var $input4change = $('input[name=infoMailMultipleContent]');
  // Jetzt das konträre Input element disablen
  if ($input4infoMailContent.prop('checked') == true) {
    $input4change.prop('disabled',true);
    $input4change.prop('checked',false);
  }
  else
    $input4change.prop('disabled',false);
}

/*
 * Aendert die Anzeige der Checkboxen für das Versenden der Emails
 * aendert die Attribute disabled, checked;  und Versendeart kann als Text oder HTML Mail sein
 *  param string inputName4SendMail
 */
function changeAttributes4SendEmail(inputName4SendMail) {
  //mgl. Inputs:  bccAnmeldebestaetigungeMail oder suppressInfoMail
  var $thisInput = $('input[name=' + inputName4SendMail + ']');
  var $inputAnmBestEmailAdr = $('input[name=bccAnmeldebestaetigungeMailAdresse]');
  //Falls keine Kopie gesendet wird, wird auch die eingabe für die EMailadr. ausgegaut
  if (inputName4SendMail == 'bccAnmeldebestaetigungeMail') {
	  if ($thisInput.prop('checked')) {
	    $inputAnmBestEmailAdr.prop('disabled',false);
	  }
	  else
	    $inputAnmBestEmailAdr.prop('disabled',true);
  }
  //Falls Haken für Suppress gesetzt ist, darf keine Anmeldebestätigung und auch keine Kopie gesendet werden
  else if (inputName4SendMail == 'suppressInfoMail') {
    var $inputAnmBestEmail = $('input[name=bccAnmeldebestaetigungeMail]');
    if ($thisInput.prop('checked')) {
      $inputAnmBestEmail.prop('disabled',true);
      $inputAnmBestEmail.prop('checked',false);
      $inputAnmBestEmailAdr.prop('disabled',true);
    }
    else {
      $inputAnmBestEmail.prop('disabled',false);
      $inputAnmBestEmailAdr.prop('disabled',false);
    }
  }
} //end changeAttributes4SendEmail(..)


/*
*  Reloaded die Checkboxeinstellungen für die Anmeldebestätigungssetting
*  wird bei Reload bzw. Speichern ausgeführt für Tool0 (Anmeldeformular)
*/
function reloadAnmBestaetingungSettings() {
  if ($('input[name=infoMailMultipleContent]').prop('checked') == true)
    changeAttributes4InputTextHTML('infoMailMultipleContent');
  else if($('input[name=infoMailTextContent]').prop('checked') == true)
    changeAttributes4InputTextHTML('infoMailTextContent');
  
  changeAttributes4SendEmail('bccAnmeldebestaetigungeMail');
  if ($('input[name=suppressInfoMail]').prop('checked') == true)
    changeAttributes4SendEmail('suppressInfoMail');
} //end reloadAnmBestaetingungSettings(

/**
 * Passt die Breiten und Abstände an die Buttonbreite an.
 * @param int $pButtonWidth in Pixel
 */
function menuBarSettings_CalulateSize($pButtonWidth)
{
  //Leider geht das nicht mir reinem css, dass die Einstellungen an die Buttonbreite angepasst wird.
  var buttonWidth = ($pButtonWidth < 150)?150:$pButtonWidth;
  //Auch die Breite des Bilder selbst setzen, damit diese live geändert werden können
  $('.leftmenu_button_settings .lbs_btn img, .leftmenu_button_settings .lbs_btn span.text_left_menu').css('width',buttonWidth+'px');
  $('.leftmenu_button_settings .lbs_btn').css('width',(2+1*buttonWidth)+'px');
  $('.leftmenu_button_settings .lbs_pfeil_rechts').css('margin-left',(27+1*buttonWidth)+'px');
  $('.leftmenu_button_settings .lbs_beschreibung').css('margin-left',(65+1*buttonWidth)+'px');
  $('.leftmenu_button_settings .lbs_pfeil_links').css('margin-left',(290+1*buttonWidth)+'px');
  $('.leftmenu_button_settings .lbs_hotkey').css('margin-left',(322+1*buttonWidth)+'px');
  
  $('div.menuBarSettings .menuaddandremove').css('margin-left',(500+1*buttonWidth)+'px');
  //Die Listenelemente, überschrift usw.
  $('li.leftmenu_button_settings').css('width',(397 + 1*buttonWidth)+'px');
  $('div.menuSettings, div.menuaddandremove .leftmenu_buttonlist_settings').css('width',(407 + 1*buttonWidth)+'px');
  $('');
  $('div.menuBarSettings .menuRemoveItemList, div.menuBarSettings .menuRemoveItemList li').css('width', (407 + 1*buttonWidth)+'px');
  $('div.menuBarSettings li.leftmenu_button_settings.menu_item_space img.menu_tren').css('width',  (103 + 0.5*buttonWidth)+'px');
  $('div.menuBarSettings img.menu_loeschen').css('left',  (192 + 0.5*buttonWidth)+'px');
}

//Readyhandler für die JQUERY Events
$(document).ready(function(){
  
      $( ".eingestellteFelder" ).sortable({
      connectWith: '.verfuegbareFelder',
      revert: true,
      cancel: '.fieldgroup'
    });
    
    $( ".verfuegbareFelder" ).sortable({
      connectWith: '.eingestellteFelder',
      revert: true,
      cancel: '.fieldgroup'
    });
    
    $('form').submit(function() {
      
      var $wssSettings = $('.eingestellteFelder');
      
      if($wssSettings.length > 0) {
        var spaltenArray = [];
        
        
        $wssSettings.find('.wsf').each(function(){
          var spalte = {};
          spalte.text = $(this).find('.wsf_label').html();
          var id = $(this).prop('id');
          spalte.wsfId = id.split('_')[1];
          spaltenArray[spaltenArray.length] = spalte;
        });
        
        var spaltenJson = KuferTools.Utils.getJsonFromObjectBase64(spaltenArray);
        $(this).append('<input type="hidden" name="felder" value="'+spaltenJson+'">');
      }
    });
    
    $(document).on('click', '.wsf_label', function() {
     
      if($(this).find('.wsf_label_edit').length === 0) {
        
        var text = $(this).html();
        var $input = $('<input type="text" class="wsf_label_edit" style="" value="'+text+'">');
        $(this).html($input);
        $input.focus();
        
        //Trick, damit der Cursor am Ende des Textfeldes steht.
        $initialVal = $input.val();
        $input.val($initialVal + ' ');
        $input.val($initialVal);
      } else {
        $(this).find('.wsf_label_edit').focus();
      }
    });
  
  //Übernimmt den Buttontext aus dem editierten Eingabefeld.
  $(document).on('focusout', '.wsf_label_edit', function(){
    $(this).parent().html($(this).val());
  });
  $(document).on('keydown', '.wsf_label_edit input', function(event){
    //Verhindert, dass beim Bestätigen mittels der Enter-Taste nicht das Formular abgesendet wird.
    if (event.which == 13) {
      event.preventDefault();
      $(this).focusout();
    }
  });
    
    /*
    $( ".verfuegbareFelder li" ).draggable({
      connectToSortable: ".eingestellteFelder",
      revert: "invalid"
    });*/
  
  
  //Für die zentrale Einstellungen der Menüleiste
  if(KuferTools.ZentraleEinstellungen.ToolId == 0) {
  
  jQuery('.AbsendereinstellungenTabelle').dataTable({
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false,
    "bJQueryUI": true
  });
  
  // Die Breite falst aller Elemente wird an die verwendete Buttonbreite angepasst
  menuBarSettings_CalulateSize($('.lbs_btn img').width());
  $('.buttonWidth').change( function(){
    menuBarSettings_CalulateSize($(this).val());
  });
  
  // Es wird nur die Menüleiste einer Benutzergruppe auf einmal angezeigt, der Rest eingeklappt.
  $('.menuSettings h2, .menuSettings img.menu_group_toggle').click( function() {
    $('.menuSettings div').hide();
    $('.menuSettings img.menu_group_toggle').prop('src','images/btn_close.gif');
    $(this).parent().find('div').show();
    $(this).parent().find('img.menu_group_toggle').prop('src','images/btn_open.gif');
    
    if( $(this).parent().hasClass('menuSettings_LOGIN') ) {
      $('.divAddAbleItemLists4LoginPage').show();
    } else {
      $('.divAddAbleItemLists4LoginPage').hide();
    }
    
    $('div.menuBarSettings img.menu_trennlinie').height($('div.menuBarSettings').height()); //höhe der Trennlinie
  });
  $('.menuSettings h2').first().click();
  //Zum Vermeiden eines Darstellungsfehlers im IE 8 wird die Klappfunktion verzögert nocheinmal aufgerufen
  window.setTimeout(function(){$('.menuSettings h2').first().click();}, 1000);
  
  // Die Reihenfolge der Listen können mit sortable per Drag&Dropt geändert werden.
  /********************
   * DOKU zu Sortable: http://jqueryui.com/demos/sortable/
   *******************/
  
  //Macht die Listen der Menüpunkte sortierbar
  $('.leftmenu_buttonlist_settings').sortable({
    connectWith: ".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').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);
    }
  });
  
  //Die Zusatzmenüpunkte, welche in die Menülisten eingefügt werden können
  $('.menuAddableItemList').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').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);
    }
  });
  
  //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');
      }
      $(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', function() {
    if($(this).parent().find('span.text_left_menu:has(:text)').length)return;
    var $span = $(this).parent().find('span.text_left_menu');
    var $input = $('<input type="text" class="buttonEdit" style="width: '+($('.leftmenu_button_settings .lbs_btn img').width()-8)+'px;" value="'+$span.text()+'">');
    $span.html($input);
    $input.focus();
    //Trick, damit der Cursor am Ende des Textfeldes steht.
    $initialVal = $input.val();
    $input.val($initialVal + ' ');
    $input.val($initialVal);
  });
  
  //Übernimmt den Buttontext aus dem editierten Eingabefeld.
  $(document).on('focusout', '.leftmenu_buttonlist_settings li span.text_left_menu .buttonEdit', 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).focusout();
    }
  });
  
  $('.menuForm').submit(function(){
    var $listen = $('ul.leftmenu_buttonlist_settings:not(.menuAddableItemList)');
    //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').focusout();
    
    var keyArray = new Array('DOZ', 'MA', 'TN', 'FA', 'ADR', '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]).find('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 span.text_left_menu:not(:has(:text))').text();
            var accesskey = $($listElements[j]).find('span.lbs_hotkey input').val();
            beschriftung = beschriftung.replace(/"/g, '');
            accesskey = accesskey.replace(/"/g, '');
            menuAry[keyArray[i]][j]['beschriftung'] = KuferTools.Utils.String.HTMLEncode(beschriftung);
            menuAry[keyArray[i]][j]['accesskey'] = KuferTools.Utils.String.HTMLEncode(accesskey);
            
            if(buttonType == 'tool') {
              menuAry[keyArray[i]][j]['toolid'] = $($listElements[j]).find('input:hidden[name="tool_id"]').val();
            }
            else if(buttonType == 'link') {
              var link = KuferTools.Utils.String.HTMLEncode($($listElements[j]).find('input[name="link"]').val());
              
              link = link.replace(/"/g, '');
              menuAry[keyArray[i]][j]['link'] = link;
            }
          }
        }
      }
      
      var value = JSON.stringify(menuAry).replace(/"/g, '[DBQUOTE]');
      var hiddenInputForMenu = $('<input type="hidden" name="menuBarJSON" value="'+value+'">');
      
      $(this).append(hiddenInputForMenu);
    });
  //}
  //if (KuferTools.ZentraleEinstellungen.ToolId == 0) {
    reloadAnmBestaetingungSettings();
  } // end if KuferTools.ZentraleEinstellungen.ToolId == 0

  
  //++++++ Tool 1 Kursübersicht (Dozent hat Liste gedruckt) ++++++
  var $pdf_gedruckt = $('#pdf_gedruckt_anzeigen');
  if( $pdf_gedruckt.length > 0 ) {
    
	    $('#pdf_gedruckt_anzeigen').change( function() {
	        if( $(this).is(':checked') ) {
	          $('.setting_pdf_gedruckt_button').animate( { height: '120px' }, 500 );
	        } else {
	          $('.setting_pdf_gedruckt_button').animate( { height: '0px' }, 500 );
	        }
	      });
      
    $pdf_gedruckt.change();
  }
	  
  //++++++ Semesterangaben ++++++
  
  //Wechselt beim Klick auf die Checkbox useAbweichendeSemester die angezeigte 
  //Semesterauswahl. Einfaches Hide und Show wird hier vermieden, da sonst die
  //Semesterauswahl doppelt vorhanden ist, auch wenn die disableten checkboxen nicht
  //übertragen werden sollten.
  
  
  $('input.kursFilterKursbeginnVorbelegen:checkbox').change(function(){
    if($(this).is(':checked') == true) {
      $('.kurs_beginnMonat  :input').prop('disabled', true);
      $(".kurs_beginnMonat .count-buttons").css("pointer-events", "none");
    } else {
      $('.kurs_beginnMonat :input').prop('disabled', false);
      $(".kurs_beginnMonat .count-buttons").css("pointer-events", "auto");
    }
  });

  $('input.kursFilterKursbeginnVorbelegen2:checkbox').change(function(){
    if($(this).is(':checked') == true) {
      $('.kurs_beginnDatum  :input').prop('disabled', true);
      $(".kurs_beginnDatum .count-buttons").css("pointer-events", "none");
    } else {
      $('.kurs_beginnDatum :input').prop('disabled', false);
      $(".kurs_beginnDatum .count-buttons").css("pointer-events", "auto");
    }  
  });

  if($('input.kursFilterKursbeginnVorbelegen2:checkbox').is(':checked') == true) {
    $('.kurs_beginnDatum  :input').prop('disabled', true);
    $(".kurs_beginnDatum .count-buttons").css("pointer-events", "none");
  } else {
    $('.kurs_beginnDatum :input').prop('disabled', false);
    $(".kurs_beginnDatum .count-buttons").css("pointer-events", "auto");
  } 
    
  if($('input.kursFilterKursbeginnVorbelegen:checkbox').is(':checked') == true) {
    $('.kurs_beginnMonat  :input').prop('disabled', true);
    $(".kurs_beginnMonat .count-buttons").css("pointer-events", "none");
  } else {
    $('.kurs_beginnMonat :input').prop('disabled', false);
    $(".kurs_beginnMonat .count-buttons").css("pointer-events", "auto");
  }


  
  var $allgsem = $('div.semesterauswahl div.semlist.allgsem').detach();
  var $toolsem = $('div.semesterauswahl div.semlist.toolsem').detach();
  $allgsem.find( 'input:checkbox' ).prop('disabled', true);
  $allgsem.find('input:text').prop('disabled', true);
  $('div.semesterauswahl').data('allgsem', $allgsem).data('toolsem', $toolsem);
  $('input.useAbweichedeSemester:checkbox').change(function(){
    if($(this).is(':checked') == true) {
      //in manchen Fällen wird auch hier die Breite für die Ausgabe des Hinweises zum Kursbeginn verkleinert
      $('div.semesterauswahl').html($('div.semesterauswahl').data('toolsem'));
    } else {
      // Beim ersten Aufruf dieser Funktion gibt es toolsem nicht.
      if( $('div.semesterauswahl div.semlist.toolsem').length != 0 ) {
        $('div.semesterauswahl').data('toolsem', $('div.semesterauswahl div.semlist.toolsem'));
       
      }
        //Korrektur: Breite für die Ausgabe des Hinweises zum Kursbeginn vergrößern. Sonst wird nämlich die 
        // Zeile mit diesem Text umgebrochen wird, da das übergeordnete  Div Element f. die Semesterauswahl 
        // mit den Werten aus den Allgemeinen Settings besetzt wird
        // Hier wird zunächst  die schmälere Breite aus den Allgemeinen Settings übernommen
        $('div.semesterauswahl').html($('div.semesterauswahl').data('allgsem'));
        
    }
    // und hier wieder auf den breiteren Wert aus den speziellen Toolsettings (bei Tools >0) zurückgesetzt, der
    // weiter unten hier gesetzt wird. 
    $divKursBegTitel = $('div.semesterauswahl').find('.kurs_begTitel');
    $divKursBegTitel.css('width','500px');
  });
  $('input.useAbweichedeSemester:checkbox').change();
  
  //Macht das Div mit der Auflistung der Semester immer so hoch wie das Elternelement,
  //damit das float-left korrekt angezeigt wird. Ist schwer nur in CSS zu erreichen
  $('div.tool0semlist').height($('div.tool0semlist').parent().height());
  $('div.toolsMitAbwSem').css('margin-left', ($('div.tool0semlist').width() + 10) + 'px');
  //Nur im Tool 0 (Schulungseinrichtung in Z.E.) bleibt die Beschreibung zum Kursbeginn schmäler (bei 400px) und damit 2 zeilig, da es hier 
  //nach rechts nicht mehr Platz gibt
  if (KuferTools.ZentraleEinstellungen.ToolId > 0)
    $('div.kurs_begTitel').css('width','500px');
  
// Handling für die speziellen Checkboxen un den Zentrale Einstellungen für das Anmeldeformular (Tool 0)

	$('input[name=infoMailMultipleContent]').click(function(event) {
	  changeAttributes4InputTextHTML('infoMailMultipleContent');
	  
	});
	
	$('input[name=infoMailTextContent]').click(function(event) {
	  changeAttributes4InputTextHTML('infoMailTextContent');
	});
	
	$('input[name=bccAnmeldebestaetigungeMail]').click(function(event) {
	  changeAttributes4SendEmail('bccAnmeldebestaetigungeMail');
	});
	
	$('input[name=suppressInfoMail]').click(function(event) {
	  changeAttributes4SendEmail('suppressInfoMail');
	});

  $('#hinweis4BestKopie').click(function(event) {
    showMessage('Kann nur aktiviert werden, falls der Teilnehmer eine Best&auml;tigung erh&auml;lt. Ist das Feld für die E-Mail-Adresse leer, ' +
            'wird die Nachricht an die E-Mail-Adresse gesendet, die unter "Allgemein / Schulungseinrichtung / Ziel für E-Mails aus den KuferTools ' +
            'an die Schulungseinrichtung" angegeben ist.','Hinweis');
  });
  $('#hinweis4TextContent').click(function(event) {
    showMessage('Damit diese Option ausgewertet wird, darf die Option: Die Bestätigungs-E-Mail(s) mit Text und HTML Inhalt versenden nicht gew&auml;hlt werden.','Hinweis');
  });
  $('#hinweis4MultipleContent').click(function(event) {
    showMessage('Falls keine der beiden Optionen für den Content-Type der Bestätigungs-E-Mail(s) gesetzt ist, wird (werden) die Bestätigungs-E-Mail(s) NUR mit HTML Inhalt versendet.','Hinweis');
    return true;
  });
  
  
  
  /*
   * Ab hier die Skripte für die dynamischen Sichten.
   * 
   * Wurde zuvor in SightConfigurator.php mit der Funktion _getJQueryMagic() erzeugt.
   */
  
  //Korrigiert Darstellungsfehler in den Zentralen Einstellungen, wo der
  //weisse Hintergrund endet bevor der SightConfigurator komplett ausgegeben wurde.
  $("#main_menu").height( $(document).height() + 20 );
  
  // .dnr sind die konfigurierbaren Spans und Labels
  $(".dnr").resizable({
    stop: function(event, ui) {
      var fontsize = parseFloat($(this).css("font-size"), 10);
      var width = ui.size.width;
      var height = ui.size.height;
      if(fontsize + 3 > height)
        $(this).css("font-size", height - 3);
      $(this).width(width);
      $(this).height(height);
    },
    //ghost: true, TS* (jQuery 1.9) führt leider in Kombination mit containment zu Fehlern, deshalb weggelassen
    grid: [5,5], // Die Elemente können nur in 5px-Schritten geändert werden.
    containment: "parent", // Das Element darf nicht über das Elternelement hinaus vergrößert werden
    autoHide: true // Die "Ecke" zum Ändern der Größe wird nur bei hover angezeigt.
  }).draggable( {
    grid: [5, 5], // Die Elemente können nur in 5px-Schritten verschoben werden
   // scroll: false,
    appendTo: "body", // Wichtig, sonst wird das Element kurzfristig unsichtbar, wenn das Element vom Varibalen- in den Layout-Bereich geschoben wird
    revert: "invalid", // Kleine Animation, falls das Element in einem ungültigen Bereich abgelegt wird.
    helper: "clone", // Die nächsten drei Zeilen lassen einen halbtransparenten Platzhalten beim Verschieben zurück
    start: function(event, ui) { $(this).css("opacity", 0.25); }, 
    stop: function() { $(this).css("opacity", 1); }
  });
  $(".droppable").droppable({
    accept: ".dnr",//elemente mit der Klasse können hier fallen gelassen werden
 //ui ist der draggable Helper, hat die Position vom Mauszeiger
 //ui.draggable ist das gezogene Objekt
    tolerance: "fit",
    drop: function(event, ui) {
      ui.draggable.detach().appendTo($(this));//beim alten parent aushängen und hier einhängen
      //nötig um die neuen Koordinaten zu berechnen offset ist aufs Dokument oder Window bezogen
      
      // Für das Varaiblen-Feld muss eventuelles Scrollen berücksichtigt sein.
      var itemPosition = ui.offset;
      var target = $(this).offset();
      var scrollTop = $(this).scrollTop();
      var scrollLeft = $(this).scrollLeft();
      var left = itemPosition.left - target.left;
      var top = itemPosition.top - target.top;
      
      //left und top berücksichtigen den Grid anscheinend nicht korrekt
      top = Math.floor( top / 5 ) * 5;
      left = Math.floor( left / 5 ) * 5;
      	
      ui.draggable
      .css("left", left + scrollLeft)
      .css("top", top + scrollTop)
      .css("position", "absolute");
    }
  });
 //Kontextmenü für .configurable Objekte (Label und Eingabeflächen)
 var menu1 = [
   { "Pflichtfeld": function(menuItem,menu,e) {
       $(this).toggleClass("mandatory");
     },
//      "Hinterlegung": function(menuItem, menu, e) {
//        $(this).toggleClass("depositation");
//      }, //kann noch nicht ausgewertet werden
     "Fett": function(menuItem, menu, e) {
       $(this).toggleClass("bold");
     },
     //Hier kann die Ausrichtung des Textes bestimmt werden.
     "Ausrichtung: <img id=\"align_left\" src=\"images/align_left.gif\" alt=\"Linksb&uuml;ndig\" title=\"Linksb&uuml;ndig\"><img id=\"align_center\" src=\"images/align_center.gif\" alt=\"Zentriert\" title=\"Zentriert\"><img id=\"align_right\" src=\"images/align_right.gif\" alt=\"Rechtsb&uuml;ndig\" title=\"Rechtsb&uuml;ndig\"><img id=\"align_justify\" src=\"images/align_justify.gif\" alt=\"Blocksatz\" title=\"Blocksatz\">":
     function(event, ui, e){
        var $t = $(e.target).prop("id");
        switch($t) {
          case "align_left":
            $(this).css("text-align","left");
            break;
          case "align_center":
            $(this).css("text-align","center");
            break;
          case "align_right":
            $(this).css("text-align","right");
            break;
          case "align_justify":
            $(this).css("text-align","justify");
            break;
          default :
            return false;
            break;
        }
      },
      //Hier kann die Schriftfarbe angepasst werden.
      "Schriftfarbe <span id=\"farbauswahl_config\"></span>": function(event, ui, e){
        //Wird über Klickevents gelöst
        //if($(e.target).prop("id") == "ok") {
        //  $(this).css("color",$("#farbauswahl_config").val());
        //}
        //return false;
      },
      "<div class=\"floatleft\">Schriftgröße:</div> <img class=\"fontbigger\" src=\"images/mengeplus.gif\" alt=\"\" /><img class=\"fontsmaller\" src=\"images/mengeminus.gif\" alt=\"\" />": 
      function (event, ui, e) {
        var t = $(e.target);//image, das angeklickt wurde
        
        var fontsize = parseFloat($(this).css("font-size"), 10);
        var newFontSize = fontsize;
        if (t.is(".fontsmaller") && fontsize > 7) {
          newFontSize = fontsize - 1;
        }
        if (t.is(".fontbigger") && fontsize + 3 < $(this).height()) {
          newFontSize = fontsize + 1;
        }

        $(this).css("font-size", newFontSize);

        return false;
      },
      "Schriftgröße an Zellenhöhe anpassen": function(event, ui, e) {
        $(this).css("font-size",$(this).height()-3);
      },
      //Öffnet einen Dialog in dem angegeben werden kann, was angezeigt wird
      //falls der Feldinhalt leer ist.
      "Bei leerem Inhalt soll:": function(event, ui, e) {
        //Vor dem Öffnen des Dialogs wird $(this) als Information an das
        //Dialog-Div gehängt, damit sich der Dialog auf das entsprechende Feld
        //rückbeziehen kann.
        $("#leerer_inhalt").data("target",$(this));
        $("#leerer_inhalt").dialog("open");
      }
    },
  ];
  var menu2 = [
    {  
      "Ursprünglichen Namen wiederherstellen": function(event, ui, e) {
      $(this).find('span.text').text( $(this).prop("name") );
      
        $("#"+$(this).prop("id").split("_")[1]).find('span.text').text( $(this).prop("name") );
      },
      "Fett": function(menuItem, menu, e) {
        $(this).toggleClass("bold");
      },
      //Hier kann die Schriftfarbe angepasst werden.
      "Schriftfarbe <span id=\"farbauswahl_label\"></span>": function(event, ui, e){
        //Wird nun über Klickevents gelöst
        //if($(e.target).prop("id") == "ok") {
        //  $(this).css("color",$("#farbauswahl_label").val());
        //}
        //return false;
      },
      "<div class=\"floatleft\">Schriftgröße:</div><img class=\"fontbigger\" src=\"images/mengeplus.gif\" alt=\"\" /><img class=\"fontsmaller\" src=\"images/mengeminus.gif\" alt=\"\" />":
      function (event, ui, e) {
        var t = $(e.target);//image, das angeklickt wurde
        
        var fontsize = parseFloat($(this).css("font-size"), 10);
        var newFontSize = fontsize;
        if (t.is(".fontsmaller") && fontsize > 7) {
          newFontSize = fontsize - 1;
        }
        if (t.is(".fontbigger") && fontsize + 3 < $(this).height()) {
          newFontSize = fontsize + 1;
        }

        $(this).css("font-size", newFontSize);

        return false;
      },
      "Schriftgröße an Zellenhöhe anpassen": function(event, ui, e) {
        $(this).css("font-size",$(this).height()-3);
      }
    },
  ];
  
  
  $("span.configurable").contextMenu(menu1, { theme:"vista" ,
    beforeShow: function( ) {
      $("#farbauswahl_config").css( 'background-color', $(this.target).css('color') );
      // Hängt das betroffene Feld an das Farbwahl-Feld, damit es später vom Colorpicker ausgelesen werden kann
      $("#farbauswahl_config").data('target', this.target);  }
  });
  $("label.configurable").contextMenu(menu2, { theme:"vista",
    beforeShow: function( ) {
      $("#farbauswahl_label").css( 'background-color', $(this.target).css('color') );
      // Hängt das betroffene Feld an das Farbwahl-Feld, damit es später vom Colorpicker ausgelesen werden kann
      $("#farbauswahl_label").data('target', this.target); }
  });
  
  
  $("label.configurable span.text").inlineEdit({
    hover: "",
    buttons: "",
    saveOnBlur: true
  });
  $("label.configurable span.text").change(function(){
    $("#"+$(this).parents('label.configurable').prop("id").split("_")[1]).find('span.text').text( $(this).children().prop("value") );
  });
  
  $("#save").click(function() {
    // Verzögerung eingebaut, wenn ein Labeltext noch in Bearbeitung ist.
    // Inlineedit speichert den Test sonst nicht schnell genug, deshalb muss die Verzögerung
    // auch relativ lang sein (200ms sind z. B. zu kurz)
    var tmOut = 0;
    if ($('#config label input').length > 0) {
      tmOut = 1000;
    }
    window.setTimeout(function() {
      var data = new Array();
      $("#config").children(".dnr").each(function(index) {
        var obj = new Object();
        obj.label = $(this).is("label");
        obj.id = obj.label ? $(this).prop("id").substr(6) : $(this).prop("id");
        //Math.round ist hier nötig um Rundungs- und Genauigkeitsfehler zu korrigieren.
        obj.left = Math.round($(this).position().left);
        obj.top = Math.round($(this).position().top);
        obj.width = Math.round($(this).width());
        obj.height = Math.round($(this).height());
        obj.title = obj.label ? $(this).find('span.text').text() : "";
        obj.mandatory = $(this).is(".mandatory") ? 1 : 0;
        obj.fontsize = $(this).css("font-size");
        obj.bold = $(this).is(".bold") ? 1 : 0;
        obj.depositation = $(this).is(".depositation") ? 1 : 0;
        obj.ausrichtung = $(this).css("text-align");
        obj.textfarbe = $(this).css("color");
        obj.wenn_leer = $(this).data("wenn_leer");
        //TODO head&tail müssen hier hinzugefügt werden, sobald diese implementiert wurden.
        
        data[index] = (obj.label ? "1" : "0") + "|" + obj.id + "|" + obj.left
                + "|" + obj.top + "|" + obj.width + "|" + obj.height + "|" + obj.title
                + "|" + obj.mandatory + "|" + obj.fontsize + "|" + obj.depositation
                + "|" + obj.bold + "|" + obj.ausrichtung + "|" + obj.textfarbe + "|" + obj.wenn_leer;
      });
      //&ajaxanticach=1 ist nötig, da der IE die Abfrage sonst cachbedingt nicht absendet.
      $.post(document.location + "&ajaxanticach=1", {"elements[]": data}, function(result) {
        alert("Sicht gespeichert!");
      });
    }, tmOut);
  });
    
  //Zentrale Einstellungen: Colorpicker für Dynamische sichten
  //   $('#farbauswahl_config').ColorPicker({
  //     color: '#000000', 
  //     onChange: function (hsb, hex, rgb) {$('#farbauswahl_config').val('#' + hex);}
  //    }); //ColorPicker für config und label konnten nicht in eine Funktion geschrieben werden, da
          //für onChange kein Argument für das betroffene Element angegeben werden kann.
     $('#farbauswahl_label, #farbauswahl_config').parents('.context-menu-item').ColorPicker({
       color: '#000000', 
       onChange: function (hsb, hex, rgb) {
         // $menuRow: Farbwahlzeile in Menubar
         var $menuRow = $(this).data('target');
         // $menuRowColorBox: Die Box, welche die Farbe anzeigt. An dieser hängt als Data das betroffene Feld
         var $menuRowColorBox = $menuRow.find('#farbauswahl_config, #farbauswahl_label');
         // $field das Betroffene Feld
         var $field = $( $menuRowColorBox.data('target') );
         
         $menuRowColorBox.css('background-color', '#' + hex);
         $field.css('color', '#' + hex);
       },
       onShow: function( picker ) {
           $(picker).data('target', $(this) ); 
           var color = $(this).find('#farbauswahl_config, #farbauswahl_label').css('background-color');
           if( color.indexOf('#') == -1 ) {
             color = KuferTools.Utils.RgbToHex( color );
           }
           $(this).ColorPickerSetColor( color );
         }
      });
  
    /**
     * Colorpicker für die Einstellung, welche die Farben für die Felder "Farbe für Kurs/Kurstag/Belegungsstatus" festlegt
     */
    $('ul.setting_status_farbe li .setting_setColor').ColorPicker({
      color: 'transparent',
      onChange: function(hsb, hex, rgb) { 
        var $target = $(this).data('target');
        $target.css('background-color', '#' + hex); 
        $target.find('.hidden_color').val(hex);
        $target.siblings('input.setting_status_checkbox').prop('checked', true);
      },
      onShow: function( picker ){ $(this).ColorPickerSetColor( $(this).find('.hidden_color').val() ); $(picker).data('target', $(this) ); }
    });
    
    $('ul.setting_status_farbe li .setting_description_input').change( function() {
      $(this).parents('li').find('.setting_status_checkbox').prop('checked', true);
    });
    
  if(KuferTools.ZentraleEinstellungen.ToolId == 35) {
    KuferTools.initTool35Raumreservierung();
  }
    
  // Das sind die beiden Eingabefelder für die Endungen
  $inputWhiteList = $('input[name=uploadWhitelist4Ext]');
  $inputBlackList = $('input[name=uploadBlacklist4Ext]');
  
  //Das ist der selektierte Radiobutton für die Auswahl der erlaubten Dateiendungen zum Upload
  $allowedExtRadioButton = $('input[name=allowedFileExt4Upload]:checked');

  //So werden die Radiobuttons einzeln angesprochen
  if ( $('input#blacklist').is(':checked') === '' && $('input#whitelist').is(':checked') === '' ) {
    //Falls noch kein Radiobutton gesetzt ist, wir zunächst einfach der für die Whitelistauswahl gesetzt
    $('input#whitelist').prop('checked', true);
  }
  
  
  KuferTools.ZentraleEinstellungen.setReadonlyAllowedExt4Upload($allowedExtRadioButton);
  
    //Hier wird einer der beiden Radiobuttons für die Auswahl des Eingabefelds zu den erlaubten Dateiendungen ausgewählt      
      $('input[name=allowedFileExt4Upload]').on('click',function() {
      
      KuferTools.ZentraleEinstellungen.setReadonlyAllowedExt4Upload($(this));
    });
    
});  //end document ready


// Setzt in Abhängigkeit vom angehakten Radiobutton jeweils das nicht zugehörige Input Feld für die erlaubten Dateiendungen auf readonly
//d.h. Feld wird ausgegraut
KuferTools.ZentraleEinstellungen.setReadonlyAllowedExt4Upload = function($param) {
  if ($param.prop('id') === 'blacklist') {
        if ($inputBlackList.prop('readonly'))
          $inputBlackList.prop('readonly', false);
        $inputWhiteList.prop('readonly',true);
      }
      else { //whitelist
        $inputBlackList.prop('readonly',true);
        if ($inputWhiteList.prop('readonly'))
          $inputWhiteList.prop('readonly', false);
      }
}


KuferTools.initTool35Raumreservierung = function()
{
  var _anspreachPartner = [];
  var _anspreachPartnerPrototyp = {name: '', email: '', aussenstellenId: -1, aussenstellenBezeichnung: ''};
  
  if( $('.init_ansprechpartner').length > 0 ) {
    _anspreachPartner = KuferTools.Utils.getObjectFromJsonBase64($('.init_ansprechpartner').val());
    drawTable();
  }
  
  $('.add_ansprechpartner').click( function(){
    var $aussenstelle = $('.new_aussenstelle');
    var $name = $('.new_name');
    var $email = $('.new_email');
    
    if( !($aussenstelle.val() != '-1' && KuferTools.Utils.trimS($name.val()) != '' && KuferTools.Utils.trimS($email.val()) != '')) {
      showMessage('Bitte füllen Sie sowohl Außenstelle, Name und E-Mail-Adresse vor dem Hinzufügen aus.','Das Formular wurde nicht vollständig ausgefüllt.');
    } else if(!KuferTools.Utils.Filter.IsEmail($email.val())) {
      showMessage('Bitte überprüfen Sie das Format der E-Mail-Adresse.','Faschles Format für die E-Mail-Adresse');
    } else {
      var ansprechParterObj = deepObjCopy(_anspreachPartnerPrototyp);
      ansprechParterObj.name = $name.val();
      ansprechParterObj.email = $email.val();
      ansprechParterObj.aussenstellenId = $aussenstelle.val();
      ansprechParterObj.aussenstellenBezeichnung = $aussenstelle.find('option:selected').text();
      _anspreachPartner[_anspreachPartner.length] = ansprechParterObj;
      drawTable();
      // Formularfelder leeren
      $aussenstelle.val(-1);
      $name.val('');
      $email.val('');
    }
  });
  
  $(document).on('click','.remove_ansprechpartner',function(){
    var id = $(this).prop('id');
    var ansprechpartnerKey = id.split('_')[1];
    _anspreachPartner.splice(ansprechpartnerKey, 1);
    drawTable();
  });
  
  function drawTable()
  {
    var tabellenZeilen = '';
    var anzahlAnsprechPartner = _anspreachPartner.length;
    for(var i = 0; i < anzahlAnsprechPartner; i++) {
      tabellenZeilen += '<tr class="ansprechpartner"><td>'+KuferTools.Utils.htmlEncode(_anspreachPartner[i].aussenstellenBezeichnung)+'</td><td>'+KuferTools.Utils.htmlEncode(_anspreachPartner[i].name)+'</td><td>'+KuferTools.Utils.htmlEncode(_anspreachPartner[i].email)+'</td><td><img src="images/mengeminus.gif" alt="Ansprechparter entfernen" title="Ansprechparter entfernen" class="remove_ansprechpartner" id="ansprechparter_' + i + '"></td></tr>';
    }
    $('.ansprechpartner_table tbody .ansprechpartner').remove();
    $('.ansprechpartner_table tbody').append(tabellenZeilen);
  }
  
  $('form.ansprechpartner_submit').submit(function(){
    var ansprechpartnerJson = KuferTools.Utils.getJsonFromObjectBase64(_anspreachPartner);
    $(this).append('<input type="hidden" name="ansprechpartner" value="' + ansprechpartnerJson + '">');
  });
}

