function NutzerProfilApp() {
  var self = this;
  this.cache = {}; // mustache template cache

  this.init = function () {
    document.querySelector('#top-logout-btn').addEventListener('click', self.logout);
    var dlg = document.querySelector(".dialog");
    dlg.style.flexBasis = '0em';
    document.querySelector('.west').style.flexBasis = '0em';
    document.querySelector('.ost').style.flexBasis = '0em';
    self.get_user_data();
    
    var suedDiv = document.querySelector('.sued');
    suedDiv.classList.remove('sued-open');
    suedDiv.style.height = '0';
    document.querySelector('.zurueck-btn').style.color = '#eee';
  };
  
  /*
      {"UserData":{"id":"test","firstName":"Testvorname","lastName":"Testnachname","email":"-"}}
   */
  this.profil_zeigen = function(profil) {
    self.html_erzeugen('profil-form.html', profil, function(html) {
      document.querySelector('.zentraler-inhalt').innerHTML = html;
      document.querySelector('.user-save-btn').addEventListener('click', self.kennwort_speichern);
    });
  };

  this.kennwort_speichern = function() {
    var userId = document.querySelector('#anmeldename').textContent;
    var aktKw = document.querySelector('#kennwort').value;
    var neuKw = document.querySelector('#kennwortNeu').value;
    var wKw = document.querySelector('#kennwortw').value;
    if(neuKw === wKw) {
      var m = '?c=de.uhilger.um.api.Profil&m=setUserPw&p=' + userId + '&p=' + aktKw + '&p=' + neuKw;
      var u = '../prf' + m;
      self.http_get(u, function(antwort) {
        self.meldung(antwort, 1500);
      });
    } else {
      // Kennworte unterschiedlich
      self.meldung('Kennworte stimmen nicht überein', 1500);
    }
  };
  
  this.meldung = function(text, dauer) {
    var suedDiv = document.querySelector('.sued');
    suedDiv.textContent = text;
    suedDiv.classList.add('sued-open');
    suedDiv.style.height = '1.5em';
    setTimeout(function () {
      var suedDiv = document.querySelector('.sued');
      if (suedDiv.classList.contains('sued-open')) {
        suedDiv.classList.remove('sued-open');
        suedDiv.style.height = '0';
      }
    }, 1500);    
  };
  
  this.get_user_data = function() {
    var m = '?c=de.uhilger.um.pub.SessionManager&m=getSessionUser';
    var u = '../pub' + m;
    self.http_get(u, function (antwort) {
      self.profil_zeigen(JSON.parse(antwort));
    });
  };

  this.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.jsp';
    });
  };

  /* -------- ajax helper functions ----------- */
  
  this.http_get = function(u, cb)  {
    self.http_call('GET', u, null, cb);
  };
  
  this.http_post = function(u, data, cb) {
    self.http_call('POST', u, data, cb);
  };

  this.http_call = function (method, u, data, scallback) {    
    var xhr = new XMLHttpRequest();
    var url = u;
    xhr.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
        scallback(this.responseText);
      }
    };
    xhr.open(method, url);
    if(method === 'GET')  {
      xhr.send();
    } else if(method === 'POST' || method === 'PUT') {
      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);
  }; // https://stackoverflow.com/questions/19469881/remove-all-event-listeners-of-specific-type

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

  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));
  };

  this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) {
    app.http_get(vurl, function(antwort) {
      self.cache[vurl] = antwort;
      self.vorlage_fuellen(vurl, inhalt, cb);
    });
  };
}