( function() {
  'use strict';

  var loadToolTip = function(ev) {
    //destroyToolTip(ev);
    if(!ev.target.dataset.url) return;

    var tt = document.createElement('tooltip');
    tt.classList.add('fadeable');
    tt.style.cssText= "position:absolute; top: "+(ev.pageY+10)+"px; left: "+ (ev.pageX+10) +"px;";
    document.body.appendChild(tt);

    var url = ev.target.dataset.url;
    //console.log('URL:',url);
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4) {
        if(this.status == 200) {
          tt.innerHTML = this.responseText;
          tt.classList.add('visible');
        }
      }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
  }

  var destroyToolTip = function(ev) {
    var tts = document.getElementsByTagName('tooltip');
    if(tts[0]) {
      tts[0].classList.remove('visible');
      setTimeout(function() {
        if(tts[0]) tts[0].remove();
      },500);
    }
  }

  //class itooltip
  var elems = document.getElementsByClassName('itooltip');
  for (var i =0;i<elems.length;i++) {
    elems[i].addEventListener('mouseenter',function(ev){
      loadToolTip(ev);
    });
    elems[i].addEventListener('mouseleave',function(ev){
      destroyToolTip(ev);
    });
  }
})();

//TODO lade daten von url in data-url
//TODO in der obenhälfte tooltip down untehälte up
//TODO linke hälte tooltip richts sondt links