( function() {
  'use strict';

  var buildToolTip = function(ev,content) {
    //console.log(ev);

    var mouseX = ev.pageX;
    var mouseY = ev.pageY;
    console.log(mouseX,mouseY);
    var tt = document.createElement('tooltip');
    tt.classList.add('hidden');
    tt.style.cssText= "position:absolute; top: "+(ev.pageY+10)+"px; left: "+ ev.pageX +"px;";
    var tn = document.createTextNode(content);
    tt.appendChild(tn);
    document.body.appendChild(tt);
  }

  var loadToolTip = function(ev) {
    if(!ev.target.dataset.url) return;
    var url = ev.target.dataset.url;
    console.log('URL:',url);
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        console.log('Ajax:',this.responseText);
        buildToolTip(ev,this.responseText);
      }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
  }

  var destroyToolTip = function(ev) {
    var tts = document.getElementsByTagName('tooltip');
    for (var i =0;i<tts.length;i++) {
      tts[i].remove();
    }
  }

  var fadeIn = function(el) {
    //TODO fancy fadein
    el.classList.remove('hidden');
  }

  //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