/*
 * die nachfolgenden Funktionen steuern das ein- und 
 * ausblenden des menues
 */
function app_menu_init(url_prefix, mdesc, mtpl) {
  document.querySelector( "#nav-toggle" ).addEventListener("click", function() {
    /*
    this.classList.toggle( "active" );
    this.blur();
    app_menu_toggle();
    */
    //app_menu_do_toggle(this);
    app_menu_toggle();
  });   
  document.getElementsByClassName('west')[0].style.flexBasis = "0em";
  $('.ost').hide();
  _app_menu_url_prefix = url_prefix;
  app_menu_template_laden(mtpl);
  
  var menuDiv = $("<div/>");
  $(menuDiv).addClass('app-menu-content');  
  $(menuDiv).css('position', "relative");
  $(menuDiv).css('left', '-300px');
  $(menuDiv).css('right', '0px');
  $('.west').append(menuDiv);
  
  app_menu_laden(mdesc);
}

function app_menu_template_laden(tpl) {
  $.ajax({
    // url: _app_menu_url_prefix + "app-menu.tpl",
    url: tpl,
    type: "GET",
    dataType : "text"
  }).done(function( template ) {
    _app_menu_template = template;  
    Mustache.parse(_app_menu_template);   // optional, speeds up future uses
  });
}

function app_menu_do_toggle(elem) {
  document.querySelector( "#nav-toggle" ).classList.toggle( "active" );
  document.querySelector( "#nav-toggle" ).blur();
  app_menu_toggle();
}

function app_menu_toggle() {
  document.querySelector( "#nav-toggle" ).classList.toggle( "active" );
  document.querySelector( "#nav-toggle" ).blur();
  var westDiv = document.getElementsByClassName('west')[0];
  if(westDiv.classList.contains('app-menu-open')) {
    westDiv.classList.remove('app-menu-open');
    westDiv.style.flexBasis = "0em";
  } else {
    westDiv.classList.add('app-menu-open');
    westDiv.style.flexBasis = "16em";
  }
}

/*
 * ab hier Steuerung des Menueinhalts
 */

var _app_menu_url_prefix = "";
var _app_menu_template;

/*
 * mdesc: der URL einer JSON-Datei mit einer Menuebeschreibung
 */
function app_menu_laden(mdesc, richtung) {
  $.ajax({
    url: _app_menu_url_prefix + mdesc,
    type: "GET",
    dataType : "json"
  }).done(function( json ) {
    app_menu_bauen(json, richtung);
  });
  
}

function app_menu_bauen(menuejs, richtung) {

  // Endposition des bestehenden Menues beim Wechsel herauf
  var linksEndeAlt = "500px";
  var rechtsEndeAlt = "600px";
  // Anfangsposition des neuen Menues beim Wechsel herauf
  var linksAnfangNeu = "-300px";
  var rechtsAnfangNeu = "-1px";
  // Endposition des neuen Menues beim Wechsel herauf
  var linksEndeNeu = "0px";
  var rechtsEndeNeu = "300px";
  
  if(richtung === 'herunter') {
    // Endposition des bestehenden Menues beim Wechsel herunter
    linksEndeAlt = "-300px";
    rechtsEndeAlt = "-1px";
    // Anfangsposition des neuen Menues beim Wechsel herunter
    linksAnfangNeu = "500px";
    rechtsAnfangNeu = "600px";
    // Endposition des neuen Menues beim Wechsel herunter
    linksEndeNeu = "0px";
    rechtsEndeNeu = "300px";
  }
  
  var menuDiv = $("<div/>");
  $(menuDiv).addClass('app-menu-content');

  $(menuDiv).css('position', "relative");
  $(menuDiv).css('left', linksAnfangNeu);
  $(menuDiv).css('right', rechtsAnfangNeu);
  $(menuDiv).html(Mustache.render(_app_menu_template, menuejs));  
  
  $('.app-menu-content').delay(100).animate(
    {left: linksEndeAlt },
    100,
    function() {
      $('.smenu').attr('onclick','').unbind('click');
      $('.bitem').attr('onclick','').unbind('click');
      $('.mitem').attr('onclick','').unbind('click');
      $('.west').empty();

      $('.west').append(menuDiv);
      $('.smenu').on('click', app_menu_klick_herunter);
      $('.bitem').on('click', app_menu_klick_herauf);
      $('.mitem').on('click', app_menu_ausfuehren);

      $('.app-menu-content').delay(100).animate({left: linksEndeNeu });
      $('.app-menu-content').animate({right: rechtsEndeNeu });
    }
  );
  $('.app-menu-content').animate({right: rechtsEndeAlt });
}

function app_menu_klick_herunter() {
  app_menu_laden($(this).attr('data-verweis'), 'herunter');
}

function app_menu_klick_herauf() {
  app_menu_laden($(this).attr('data-verweis'), 'herauf');
}

function app_menu_ausfuehren() {
  var functionName = $(this).attr('data-verweis');
  eval(functionName + "(this)");
}

function app_menu_test() {
  alert("Test");
}

function app_menu_test_2() {
  alert("Test 2");
}