let frontlogList = [];
let frontlogMaxEl = document.body.dataset['frontlog']||3;
let frontlog = document.createElement('frontlog');
document.body.appendChild(frontlog);

let frontlogVanish = function(elem) {
  elem.remove();
  //TODO irgendwann hübscher machen
  let elems = document.getElementsByTagName('flogelem');
  if(elems.length < frontlogMaxEl && frontlogList.length) {
    let p = frontlogList.shift();
    frontlogPipe(p.title,p.icon,p.msg,p.col,p.time);
  }
}

let frontlogAdd = function(title,icon,msg,col,time) {
  let elems = document.getElementsByTagName('flogelem');
  if(elems.length < frontlogMaxEl) {
    frontlogPipe(title,icon,msg,col,time);
  }else{
    let pElem = {"title":title,"icon":icon,"msg":msg,"col":col,"time":time};
    frontlogList.push(pElem);
  }
}

let frontlogPipe = function(title,icon,msg,col, time) {
  let elem = document.createElement('flogelem');
  {
    let elemid = 'fl_';
    {
      let ch = 'abcdefghijklmnopqrstuvwxyz0123456789';
      let chl = ch.length;
      for ( let i = 0; i < length; i++ ) {
        elemid += ch.charAt(Math.floor(Math.random() * chl));
      }
    }
    elem.id = elemid;
    let flicon = document.createElement('img');
    flicon.src = icon;
    elem.appendChild(flicon);

    let fltitle = document.createElement('fltitle');
    fltitle.innerText = title;
    elem.appendChild(fltitle);

    let flmsg = document.createElement('flmsg');
    flmsg.innerText = msg;
    elem.appendChild(flmsg);
  }

  elem.style = 'border-color: '+col+';';
  elem.addEventListener('click',function(ev){
    frontlogVanish(ev.target);
  });
  setTimeout(function(){
    frontlogVanish(elem);
  },time*1000)
  frontlog.appendChild(elem);
}
