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

let frontlogVanish = function(elem) {
  elem.classList.add('flvanish');
  setTimeout(function() {
    elem.remove();
    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);
    }
  },3100);
}

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 < 16; 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){
    let tg = ev.target;
    if(tg.tagName.toLowerCase() != 'flogelem') {
      tg = ev.target.parentNode;
    }
    frontlogVanish(tg);
  });
  setTimeout(function(){
    frontlogVanish(elem);
  },time*1000)
  frontlog.appendChild(elem);
  setTimeout(function(){
    elem.classList.add('flshow');
  },10);
}