(function(connector) {
  'use strict';

  var style = 'default';
  if(document.body.dataset.feedbackstyle) {
    style = document.body.dataset.feedbackstyle;
  }

  var iframe;
  var flag;
  var col = 'light';
  //TODO color css
  //TODO abbrechen close anders

  var closeFlag = function(ev) {
    flag.classList.add('closing');
    iframe.classList.add('closing');
    setTimeout(function() {
      flag.style.opacity = 0;
      iframe.style.opacity = 0;
      setTimeout(function() {
        flag.remove();
        iframe.remove();
        document.body.style.overflowY = 'auto';
      },500);
    },1000);
  }

  var openFlag = function(ev, infos=false) {
    flag = document.createElement('div');
    document.body.style.overflowY = 'hidden';
    flag.id = 'flag-overlay';
    iframe = document.createElement('iframe');
    iframe.src= '';
    iframe.name = 'flag-iframe';
    iframe.id = 'flag-iframe';
    document.body.appendChild(flag);
    setTimeout(function() {
      flag.addEventListener('click',function(){
        closeFlag();
        //console.log('close2');
      });
    },3000);
    document.body.appendChild(iframe);

    var form = document.createElement('form');
    form.action = connector+"?style="+style;
    form.target = 'flag-iframe';
    form.method = 'POST';
    const screenshotTarget = document.body;

    /*html2canvas(screenshotTarget).then((canvas) => {
      const base64image = canvas.toDataURL("image/png");
      window.location.href = base64image;
    });*/
    var fields = {};
    fields['s'] = window.location.hostname;
    var datas = document.querySelectorAll('[data-flaginfo]');
    if(datas) {
      for(var i=0; i<datas.length;i++) {
        console.log(datas[i].dataset['flaginfo']);
        var tmp = datas[i].dataset['flaginfo'];
        tmp = tmp.split(':',2);
        fields[tmp[0]] = tmp[1];
      }
    }
    if(document.referrer) {fields['r'] = document.referrer;}
    if(window.location.href) {fields['u'] = window.location.href;}
    if(navigator.userAgent) {fields['a'] = navigator.userAgent;}
    fields['d'] = ''+window.screen.width+'x'+window.screen.height+' ('+window.screen.colorDepth+'bit)';
    if(infos && typeof(infos) == typeof({})) {
      for(var i in infos) {
        fields[i] = infos[i];
      }
    }
    console.log('Fields',fields);

    for(var f in fields) {
      var inp = document.createElement('input');
      inp.type = 'hidden';
      inp.name = f;
      inp.value = fields[f]
      form.appendChild(inp);
    }

    form.style = 'display:none';
    document.body.appendChild(form);
    form.submit();
    form.remove();
  }

  var panel = document.createElement('div');
  panel.id = 'flag-panel';

  var tab = document.createElement('span');
  tab.innerHTML = '&#9873;';
  tab.addEventListener('mouseenter',function(ev) {
    if(!panel.classList.contains('opened')) {
      panel.classList.add('opened');
    }
    panel.classList.toggle('open');
  });

  var button = document.createElement('button');

  button.innerHTML = 'Problem melden';
  button.addEventListener('click',openFlag);

  window.addEventListener("message", (event) => {
    //console.log(event);
    if(event.data == 'close') {
      //console.log('close1');
      closeFlag();
    }
  });

  var links = document.getElementsByClassName('flag-link');
  if(links.length > 0) {
    for(var l=0;l<links.length;l++) {
      //console.log(l,links[l]);
      links[l].addEventListener('click',function(ev) {
        openFlag(ev,ev.target.dataset);
        ev.preventDefault();
        return false;
      });
    }
  }

  panel.appendChild(tab);
  panel.appendChild(button);

  document.body.appendChild(panel);
})('https://troy-grunt.de/feedback');