function NutzerApp() {
  var self = this;
  var vorlagen;
  var userid;
  var loc;

  this.init = function () {
    self.vorlagen = new Vorlagen();
    var dlg = document.querySelector(".dialog");
    dlg.style.flexBasis = '0em';
    document.querySelector('#top-neu-btn').addEventListener('click', self.nutzer_neu_dialog_zeigen);
    document.querySelector('.west').style.flexBasis = '0em';
    document.querySelector('.ost').style.flexBasis = '0em';
    self.get_login();
    self.get_user_list();
    self.loc = window.location.protocol + '//' + window.location.host;
  };

  /* Nutzerverwaltung */
  
  this.nutzer_neu_dialog_zeigen = function () {
    self.dialog_zeigen('data/tpl/dlg-nutzer-neu.tpl', '', function(){
      var btn = document.getElementById('nutzer-speichern-btn');
      if(btn !== null) {
        btn.addEventListener('click', self.nutzer_speichern);                         
      }                      
    });
  };

  this.nutzerliste_klick = function(event) {
    var target = event.target;
    var gewaehlterNutzer = document.querySelector(".nutzer-gewaehlt");
    if(gewaehlterNutzer !== null) {
      gewaehlterNutzer.classList.remove("nutzer-gewaehlt");
    }
    target.classList.add("nutzer-gewaehlt");
    var nutzerId = target.innerHTML;
    self.rollen_zeigen(nutzerId);
  };
  
  this.nutzer_speichern = function() {
    var user = self.nutzer_dialog_lesen();
    var kww = document.getElementById('nutzer-wkw').value;
    if(user.pw !== kww) {
      self.meldung_mit_timeout("Kennworte stimmen nicht ueberein.", 1500);
    } else {
      self.neuen_nutzer_speichern('p=' + self.serialisieren(user));
    }
  };
  
  this.nutzer_dialog_lesen = function() {
    var id = document.getElementById('nutzer-id').value;
    var vname = document.getElementById('nutzer-vorname').value;
    var nname = document.getElementById('nutzer-name').value;
    var email = document.getElementById('nutzer-email').value;
    var kw = document.getElementById('nutzer-kw').value;
    var user = new User(id, kw, vname, nname, email);
    return user;
  };

  /* Rollen erteilen und entziehen */
  
  this.rollen_zeigen = function(nutzerId) {
    var topBtn = document.querySelector('#top-neu-btn');
    topBtn.removeEventListener('click', self.nutzer_neu_dialog_zeigen);
    topBtn.addEventListener('click', self.rolle_neu_dialog_zeigen);
    topBtn.title = "Neue Rolle";
    
    var m = 'getUserRoleNames';
    var u = '../svc/' + m + '?p=' + nutzerId;
    self.http_get(u, function (antwort) {
      var jsonAntwort = JSON.parse(antwort);
      var rollen = jsonAntwort.List[0];
      if(typeof rollen === 'object') {
        rollen = jsonAntwort;
      } else {
        rollen = 'keine';
      }
      self.vorlagen.html_erzeugen(
        'data/tpl/nutzer-rollen-dlg.tpl',
        rollen,
        function (html) {
          document.querySelector("#nutzer").innerHTML = html;
          document.querySelector("#nutzer-id").textContent = nutzerId;          
          self.addEvtListener('.granted-role-btn', 'click', self.revoke_role_klick);
          self.alle_rollen_zeigen();
        });
    });
    document.querySelector('.zurueck-btn').style.color = 'black';
  };
  
  this.alle_rollen_zeigen = function() {
    var m = 'getRoleNamesGranted';
    var u = '../svc/' + m;
    self.http_get(u, function (antwort2) {
      self.vorlagen.html_erzeugen(
        'data/tpl/alle-rollen.tpl',
        JSON.parse(antwort2),
        function (html) {
          document.querySelector(".alle-rollen-behaelter").innerHTML = html;
          document.querySelector('.zurueck-btn').addEventListener('click', function (e) {
            self.get_user_list();
          });
          self.addEvtListener('.avl-role-btn', 'click', self.grant_role_klick);
        });
    });
  };
  
  this.grant_role_klick = function(event) {
    self.alter_role(event, 'grantRole', function(roleId) {
      self.add_role_to_user_roles(roleId);
    });
  };
  
  this.add_role_to_user_roles = function(roleId) {
    var btn = document.createElement("button");
    btn.type = "button";
    btn.classList.add("granted-role-btn");
    btn.id = roleId;
    btn.textContent = roleId;
    document.querySelector('.rollen-behaelter').appendChild(btn);
  };
  
  this.revoke_role_klick = function(event) {
    self.alter_role(event, 'revokeRole', function(roleId) {
      var btn = document.querySelector("#" + roleId);
      btn.parentNode.removeChild(btn);
    });
  };
  
  this.alter_role = function(event, method, updateCallback) {
    var target = event.target;
    var nutzerId = document.querySelector("#nutzer-id").textContent;
    var roleId = target.textContent;
    self.alter_role_call(method, nutzerId, roleId, updateCallback);
  };
  
  this.rolle_neu_dialog_zeigen = function () {
    self.dialog_zeigen('data/tpl/dlg-rolle-neu.tpl', '', function(){
      var btn = document.getElementById('rolle-speichern-btn');
      if(btn !== null) {
        btn.addEventListener('click', function() {
          var nutzerId = document.querySelector("#nutzer-id").textContent;
          var rolle = document.getElementById('rollen-id').value;
          self.alter_role_call('grantRole', nutzerId, rolle, function(roleId) {
            self.add_role_to_user_roles(roleId);
            self.dialog_schliessen();
          });
        });                         
      }                      
    });
  };

  /* Funktionen aus App-Vorlage */

  this.login_zeigen = function() {
    self.meldung_mit_timeout("Benutzer: " + self.userid, 1500);
  };
  
  
  this.info_dialog_zeigen = function () {
    self.dialog_zeigen('data/tpl/dlg-info.tpl', '');
  };

  this.seitenleiste_umschalten = function () {
    var ostDiv = document.querySelector('.ost');
    if (ostDiv.classList.contains('ost-open')) {
      ostDiv.classList.remove('ost-open');
      ostDiv.style.flexBasis = '0em';
    } else {
      ostDiv.classList.add('ost-open');
      ostDiv.style.flexBasis = '6em';
    }
  };

  this.fusszeile_umschalten = function () {
    var suedDiv = document.querySelector('.sued');
    if (suedDiv.classList.contains('sued-open')) {
      suedDiv.classList.remove('sued-open');
      suedDiv.style.height = '0';
    } else {
      suedDiv.classList.add('sued-open');
      suedDiv.style.height = '1.5em';
    }
  };

  this.meldung_mit_timeout = function (meldung, timeout) {
    var s = document.querySelector('.sued');
    s.textContent = meldung;
    if (!s.classList.contains('sued-open')) {
      s.classList.add('sued-open');
      s.style.height = '1.5em';
    }
    setTimeout(function () {
      s.textContent = 'Bereit.';
      setTimeout(function () {
        var suedDiv = document.querySelector('.sued');
        if (suedDiv.classList.contains('sued-open')) {
          suedDiv.classList.remove('sued-open');
          suedDiv.style.height = '0';
        }
      }, 500);
    }, timeout);
  };

  /* Dialog-Funktionen */

  /*
   * Einen Dialog erzeugen
   * 
   * Die Vorlage, auf die im Parameter vurl verwiesen wird, wird geladen, 
   * wenn sie noch nicht benutzt wurde
   * 
   * @param {String} vurl - der URL mit der Dialogvorlage
   * @param {JSON-Objekt} inhalt - was im Dialog an dynamischem Inhalt angezeigt werden soll
   * @param {function} renderCallback - 
   *     Funktion, die aufgerufen wird nachdem der Dialog gerendert wurde 
   * @returns {undefined}
   */
  this.dialog_zeigen = function (vurl, inhalt, renderCallback) {
    var dlg = document.querySelector(".dialog");
    self.vorlagen.html_erzeugen(
            vurl,
            inhalt,
            function (html) {
              dlg.style.flexBasis = '14em';
              setTimeout(function () {
                dlg.innerHTML = html;
                document.querySelector('.close-btn').addEventListener(
                        'click', self.dialog_schliessen);
                if(renderCallback !== undefined) {
                  renderCallback();
                }
              }, 300);
            });
  };

  this.dialog_schliessen = function () {
    document.querySelector('.close-btn').removeEventListener(
            'click', self.dialog_schliessen);
    var dlg = document.querySelector('.dialog');
    dlg.innerHTML = '';
    dlg.style.flexBasis = '0em';
  };

  /* API functions */
  
  this.get_user_list = function() {
    var m = 'getUserNameList';
    var u = '../svc/' + m;
    self.http_get(u, function (antwort) {
      self.vorlagen.html_erzeugen(
        'data/tpl/inhalt.tpl',
        JSON.parse(antwort),
        function (h) {
          var elem = document.getElementById('nutzer');
          elem.innerHTML = h;
          self.addEvtListener('p.nutzer-liste-eintrag', 'click', self.nutzerliste_klick);
          document.querySelector('.zurueck-btn').style.color = '#eee';
          self.removeAllListeners('top-neu-btn'); 
          var topBtn = document.querySelector('#top-neu-btn');
          topBtn.title = "Neuer Benutzer";
          topBtn.addEventListener('click', self.nutzer_neu_dialog_zeigen);
        });
      });
  };
  
  this.neuen_nutzer_speichern = function(u) {
    var url = '../svc/createUser';
    self.http_post(url, u, function (antwort) {
      self.get_user_list();
      document.getElementById('nutzer-speichern-btn').removeEventListener(
        'click', self.nutzer_speichern);
      self.dialog_schliessen();
    });
  };

  this.alter_role_call = function(method, nutzerId, roleId, updateCallback) {
    var u = '../svc/' + method;
    var data = "p=" + self.serialisieren(new UserRole(nutzerId, roleId));
    self.http_post(u, data, function (antwort) {  
      updateCallback(roleId);
    });            
  };
  
  /* -------- An- und Abmelden ------------- */

  this.get_login = function() {
    var m = '?c=de.uhilger.um.pub.SessionManager&m=getSessionUser';
    var u = '../pub' + m;
    self.http_get(u, function (resp) {
      self.userid = resp;
      self.login_zeigen();
      //document.querySelector("#userMenu").textContent = resp;
    });
  };

  this.um_logout = function() {
    var m = '?c=de.uhilger.um.pub.SessionManager&m=expireSession';
    var u = '../pub' + m;
    self.http_get(u, function (resp) {
      //$('#userMenu').text('nicht angemeldet');
      window.location.href = '../logout.html';
    });
  };

  /* -------- ajax helper functions ----------- */

  this.http_get = function (u, scallback) {    
    var xmlhttp = new XMLHttpRequest();
    var url = u;
    xmlhttp.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
        scallback(this.responseText);
      }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
  };
  
  this.http_post = function (url, data, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
        callback(this.responseText);
      }
    };
    xhr.open("POST", url, true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send(data);
  };
  
/* ----- Hilfsfunktionen ----- */

  this.serialisieren = function(obj) {
    return '{"' + obj.constructor.name + '":' + JSON.stringify(obj) + '}';
  };
  
  this.addEvtListener = function(selector, eventName, func) {
    var elems = document.querySelectorAll(selector);
    var index;
    for (index = 0; index < elems.length; index++) {
      elems[index].addEventListener(eventName, func);
    }
  };
  
  this.removeAllListeners = function(elementId) {
    var el = document.getElementById(elementId);
    elClone = el.cloneNode(true);
    el.parentNode.replaceChild(elClone, el);
  };

}

/* ----- Vorlagen ----- */

function Vorlagen() {
  var self = this;
  this.cache = {}; // mustache templates

  /*
    Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt
    gefüllt wird

    Das Füllen erfolgt asynchron, d.h. der Programmlauf geht nach dem
    Aufruf weiter ohne auf das Laden und Füllen der Vorlage zu warten.
    Das fertige HTML wird der Callback-Funktion übergeben
    sobald die Vorlage geladen und gefüllt ist, unabhängig davon, wo der
    Programmlauf zu diesem Zeitpunkt mittlerweile ist.

    vurl - URL zur Vorlagendatei
    inhalt - die JSON-Struktur, deren Inhalt in die
              Vorlage gefüllt werden soll
    cb - Callback-Funktion, die gerufen wird, wenn die Vorlage gefüllt ist.
          Dieser Callback-Funktion wird das fertige HTML übergeben
  */
  this.html_erzeugen = function(vurl, inhalt, cb) {
    var vorlage = self.cache[vurl];
    if(vorlage === undefined) {
      self.vorlage_laden_und_fuellen(vurl, inhalt, cb);
    } else {
      self.vorlage_fuellen(vurl, inhalt, cb);
    }
  };

  this.vorlage_fuellen = function(vurl, inhalt, cb) {
    cb(Mustache.render(self.cache[vurl], inhalt));
  };

  /*
    Eine Vorlage vom Server in den lokalen Speicher laden
    vurl - der URL unter dem die Vorlage zu finden ist
    inhalt - die JSON-Struktur, deren Inhalt in die
              Vorlage gefüllt werden soll
    cb - callback: Diese Funktion wird gerufen, wenn die Vorlage mit dem
            Inhalt gefüllt ist
  */
  this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        self.cache[vurl] = this.responseText;
        self.vorlage_fuellen(vurl, inhalt, cb);
      }
    };
    xmlhttp.open("GET", vurl, true);
    xmlhttp.send();
  };

}


/* ----- Objekte ----- */

function User(i, p, fn, ln, em) {
  this.id = i;
  this.pw = p;
  this.firstName = fn;
  this.lastName = ln;
  this.email = em;
}

function UserRole(u, r) {
  this.userId = u;
  this.role = r;
}