// ==UserScript==
// @name         BugMeNot Everywhere
// @namespace    https://greasyfork.org/users/37096/
// @homepage     https://greasyfork.org/scripts/35957/
// @supportURL   https://greasyfork.org/scripts/35957/feedback
// @version      1.1.1
// @description  Add a list of login accounts from BugMeNot ( bugmenot.com ) on any website when focusing on username input
// @author       Hồng Minh Tâm
// @icon         http://bugmenot.com/favicon.ico
// @include      *
// @connect      bugmenot.com
// @grant        GM_addStyle
// @grant        GM_xmlhttpRequest
// @license      GNU GPLv3
// @downloadURL none
// ==/UserScript==

(function () {
  'use strict';

  const icons = {
    username: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172 172"><path fill="currentColor" d="M114.66667,50.16667c0,15.83216 -12.8345,28.66667 -28.66667,28.66667c-15.83216,0 -28.66667,-12.8345 -28.66667,-28.66667c0,-15.83216 12.8345,-28.66667 28.66667,-28.66667c15.83216,0 28.66667,12.8345 28.66667,28.66667zM86,114.66667c9.374,0 17.62608,-4.56102 22.85775,-11.51986c20.1885,4.472 41.64225,14.27902 41.64225,29.43652v17.91667h-129v-17.91667c0,-15.1575 21.45375,-24.96452 41.64225,-29.43652c5.23167,6.95883 13.48375,11.51986 22.85775,11.51986z"></path></svg>',
    password: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172 172"><path fill="currentColor" d="M50.16667,35.83333c-27.70633,0 -50.16667,22.46033 -50.16667,50.16667c0,27.70633 22.46033,50.16667 50.16667,50.16667c22.72313,0 41.89756,-15.11458 48.06706,-35.83333h30.76628v21.5h28.66667v-21.5h14.33333v-28.66667h-73.76628c-6.1695,-20.71875 -25.34393,-35.83333 -48.06706,-35.83333zM50.16667,64.5c11.87517,0 21.5,9.62483 21.5,21.5c0,11.87517 -9.62483,21.5 -21.5,21.5c-11.87517,0 -21.5,-9.62483 -21.5,-21.5c0,-11.87517 9.62483,-21.5 21.5,-21.5z"></path></svg>',
  }

  GM_addStyle([
    '.bmn-list { display:none; list-style: none; border: 1px solid #ccc; padding: 0; margin: 0; background-color: #fff; position: fixed; cursor: default; z-index: 9999999999; box-sizing: border-box; overflow: auto; text-align: left; }',
    '.bmn-list.show { display:block; }',
    '.bmn-list .bmn-row { position: relative; margin: 0 5px 5px 5px; display: -ms-flexbox; display: -webkit-flex; display: flex; }',
    '.bmn-list .bmn-row:last-child { margin-bottom: 0; }',
    '.bmn-list .bmn-col { position: relative; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }',
    '.bmn-list .bmn-full { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; }',
    '.bmn-list .bmn-align-items-center { -webkit-align-items: center; -ms-flex-align: center; align-items: center; }',
    '.bmn-list .bmn-align-self-center { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; }',
    '.bmn-list .bmn-justify-content-center { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }',
    '.bmn-list .bmn-item { position: relative; padding: 5px 2px 5px 7px; margin: 0; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,.125); color: #495057; }',
    '.bmn-list .bmn-item:last-child { border-bottom: 0; }',
    '.bmn-list .bmn-item:hover { background-color: #f8f9fa; }',
    '.bmn-list .bmn-item:before { position: absolute; content: ""; width: 5px; top: 0; left: 0; bottom: 0; background-color: #f7704f; }',
    '.bmn-list .bmn-item .bmn-icon { width: 32px; height: 32px; padding: 5px; background-color: #e9ecef; border: 1px solid #ced4da; }',
    '.bmn-list .bmn-item .bmn-username { margin-left: 10px; font-weight: 700; }',
    '.bmn-list .bmn-item .bmn-password { margin-left: 10px; color: #666; }',
    '.bmn-list .bmn-item .bmn-success { display: inline-block; font-weight: 700; }',
    '.bmn-list .bmn-item.bmn-success-100 .bmn-success { color: rgb(0,198,0); }',
    '.bmn-list .bmn-item.bmn-success-100:before { background-color: rgb(0,198,0); }',
    '.bmn-list .bmn-item.bmn-success-90 .bmn-success { color: rgb(50,180,0); }',
    '.bmn-list .bmn-item.bmn-success-90:before { background-color: rgb(50,180,0); }',
    '.bmn-list .bmn-item.bmn-success-80 .bmn-success { color: rgb(99,164,0); }',
    '.bmn-list .bmn-item.bmn-success-80:before { background-color: rgb(99,164,0); }',
    '.bmn-list .bmn-item.bmn-success-70 .bmn-success { color: rgb(149,146,0); }',
    '.bmn-list .bmn-item.bmn-success-70:before { background-color: rgb(149,146,0); }',
    '.bmn-list .bmn-item.bmn-success-60 .bmn-success { color: rgb(199,129,0); }',
    '.bmn-list .bmn-item.bmn-success-60:before { background-color: rgb(199,129,0); }',
    '.bmn-list .bmn-item.bmn-success-50 .bmn-success { color: rgb(247,112,0); }',
    '.bmn-list .bmn-item.bmn-success-50:before { background-color: rgb(247,112,0); }',
    '.bmn-list .bmn-item.bmn-success-40 .bmn-success { color: rgb(247,90,0); }',
    '.bmn-list .bmn-item.bmn-success-40:before { background-color: rgb(247,90,0); }',
    '.bmn-list .bmn-item.bmn-success-30 .bmn-success { color: rgb(247,67,0); }',
    '.bmn-list .bmn-item.bmn-success-30:before { background-color: rgb(247,67,0); }',
    '.bmn-list .bmn-item.bmn-success-20 .bmn-success { color: rgb(247,45,0); }',
    '.bmn-list .bmn-item.bmn-success-20:before { background-color: rgb(247,45,0); }',
    '.bmn-list .bmn-item.bmn-success-10 .bmn-success { color: rgb(247,22,0); }',
    '.bmn-list .bmn-item.bmn-success-10:before { background-color: rgb(247,22,0); }',
    '.bmn-list .bmn-item .bmn-vote { display: inline-block; margin-left: 16px; float: right; }',
    '.bmn-list .bmn-no-logins-found { padding: 5px 10px; margin: 0; cursor: default; text-align: center; background-color: #a90000; color: #fff; }',
  ].join(''));

  Object.defineProperty(String.prototype, 'toDOM', {
    value: function (isFull) {
      var parser = new DOMParser(),
        dom = parser.parseFromString(this, 'text/html');
      return isFull ? dom : dom.body.childNodes[0];
    },
    enumerable: false
  });

  function setValueInput(input, value, isInputSimulate) {
    var setValue = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
    setValue.call(input, value);
    if (isInputSimulate) {
      var e = new Event('input', {
        bubbles: true
      });
      input.dispatchEvent(e);
    }
  }

  function getOffset(element) {
    var elementRect = element.getBoundingClientRect();
    return {
      left: elementRect.left,
      right: elementRect.right,
      top: elementRect.top,
      bottom: elementRect.bottom,
    };
  }

  function handleEvent(func, data) {
    return function (event) {
      func.bind(this)(event, data);
    };
  }

  var accounts = [];
  var inputUsernameCurrentEl, inputPasswordCurrentEl;
  var minHeightListBMN = 100;

  GM_xmlhttpRequest({
    method: 'GET',
    url: 'http://bugmenot.com/view/' + location.hostname,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    onload: function (response) {
      var bmnEl = response.responseText.toDOM(true);
      var accountEls = bmnEl.getElementsByClassName('account');
      for (var i = 0; i < accountEls.length; i++) {
        var accountEl = accountEls[i];
        var infoEl = accountEl.getElementsByTagName('kbd');
        var statsEl = accountEl.getElementsByClassName('stats')[1].getElementsByTagName('li');
        var account = {
          username: infoEl[0].innerHTML || '',
          password: infoEl[1].innerHTML || '',
          success: parseInt(statsEl[0].innerHTML.match(/\d+(?=%)/)[0]),
          vote: parseInt(statsEl[1].innerHTML.match(/\d+(?=\svotes)/)[0]),
          time: statsEl[2].innerHTML
        };
        accounts.push(account);
      }
      init();
    },
    onerror: function (response) { }
  });

  function init() {
    var listBMNEl = document.createElement('ul');
    listBMNEl.classList.add('bmn-list');
    document.body.appendChild(listBMNEl);

    function showListBMNEl() {
      listBMNEl.classList.add('show');
    }

    function hideListBMNEl() {
      listBMNEl.classList.remove('show');
    }

    if (accounts.length) {
      accounts.forEach(function (account, index) {
        var itemBMNEl = document.createElement('li');
        itemBMNEl.classList.add('bmn-item');
        itemBMNEl.classList.add(getClassSuccess(account.success));
        var itemBMNElHTML = [
          '<div class="bmn-row">',
          '  <div class="bmn-col bmn-full">',
          '    <div class="bmn-row bmn-align-items-center">',
          '      <div class="bmn-icon">' + icons.username + '</div>',
          '      <span class="bmn-username">' + account.username + '</span>',
          '    </div>',
          '    <div class="bmn-row bmn-align-items-center">',
          '      <div class="bmn-icon">' + icons.password + '</div>',
          '      <span class="bmn-password">' + account.password + '</span>',
          '    </div>',
          '  </div>',
          '  <div class="bmn-col bmn-align-self-center">',
          '    <div class="bmn-success">' + account.success + '%</div>',
          '  </div>',
          '</div>',
          '<div class="bmn-row">',
          '  <div class="bmn-vote">' + account.vote + ' votes</div>',
          '</div>',
          // ',<div class="time">' + account.time + '</div>',
        ].join('');
        itemBMNEl.innerHTML = itemBMNElHTML;
        itemBMNEl.title = [
          'Username: ' + account.username,
          'Password: ' + account.password,
          '',
          account.success + '% success rate',
          account.vote + ' votes',
          account.time
        ].join('\n');
        itemBMNEl.onmousedown = handleEvent(onMouseDownItem);
        itemBMNEl.onclick = handleEvent(onClickItem, account);
        itemBMNEl.onmouseover = handleEvent(onMouseOverItem, account);
        itemBMNEl.onmouseout = handleEvent(onMouseOutItem);
        listBMNEl.appendChild(itemBMNEl);
      });
    } else {
      var itemBMNNoLoginsFoundEl = document.createElement('li');
      itemBMNNoLoginsFoundEl.classList.add('bmn-no-logins-found');
      itemBMNNoLoginsFoundEl.innerHTML = 'No logins found';
      listBMNEl.appendChild(itemBMNNoLoginsFoundEl);
    }

    window.onscroll = function (event) {
      if (inputUsernameCurrentEl) {
        addStyleListBMNEl(inputUsernameCurrentEl);
      }
    };

    window.onresize = function (event) {
      if (inputUsernameCurrentEl) {
        addStyleListBMNEl(inputUsernameCurrentEl);
      }
    };

    var enableMouseOut = true;

    function setValueInputItem(inputUsernameEl, inputPasswordEl, username, password, isInputSimulate) {
      // inputUsernameEl.value = username;
      // inputPasswordEl.value = password;
      setValueInput(inputUsernameEl, username, isInputSimulate);
      setValueInput(inputPasswordEl, password, isInputSimulate);
    }

    function onMouseDownItem(event) {
      event.preventDefault();
    }

    function onClickItem(event, account) {
      event.stopPropagation();
      enableMouseOut = false;
      if (inputUsernameCurrentEl && inputPasswordCurrentEl) {
        setValueInputItem(inputUsernameCurrentEl, inputPasswordCurrentEl, account.username, account.password, true);
        inputUsernameCurrentEl.setAttribute('value', account.username);
        hideListBMNEl();
      }
    }

    function onMouseOverItem(event, account) {
      if (inputUsernameCurrentEl && inputPasswordCurrentEl) {
        setValueInputItem(inputUsernameCurrentEl, inputPasswordCurrentEl, account.username, account.password);
      }
    }

    function onMouseOutItem(event) {
      if (!enableMouseOut) {
        enableMouseOut = true;
        return;
      }
      if (inputUsernameCurrentEl && inputPasswordCurrentEl) {
        setValueInputItem(inputUsernameCurrentEl, inputPasswordCurrentEl, '', '');
      }
    }

    function getClassSuccess(success) {
      if (success > 91) return 'bmn-success-100';
      else if (success > 81) return 'bmn-success-90';
      else if (success > 71) return 'bmn-success-80';
      else if (success > 61) return 'bmn-success-70';
      else if (success > 51) return 'bmn-success-60';
      else if (success > 31) return 'bmn-success-50';
      else if (success > 21) return 'bmn-success-30';
      else if (success > 11) return 'bmn-success-20';
      else return 'bmn-success-10';
    }

    function addStyleListBMNEl(inputEl) {
      listBMNEl.style.width = inputEl.offsetWidth + 'px';
      var offsetTarget = getOffset(inputEl);
      var windowHeight = document.documentElement.clientHeight;
      if (offsetTarget.top >= minHeightListBMN) {
        listBMNEl.style.bottom = (windowHeight - offsetTarget.top) + 'px';
        listBMNEl.style.top = '';
        listBMNEl.style.left = offsetTarget.left + 'px';
        listBMNEl.style.maxHeight = offsetTarget.top + 'px';
      } else {
        listBMNEl.style.top = offsetTarget.bottom + 'px';
        listBMNEl.style.bottom = '';
        listBMNEl.style.left = offsetTarget.left + 'px';
        listBMNEl.style.maxHeight = (windowHeight - offsetTarget.bottom) + 'px';
      }
    }

    function onFocusInput(event, data) {
      inputUsernameCurrentEl = data.inputUsernameEl;
      inputPasswordCurrentEl = data.inputPasswordEl;
      addStyleListBMNEl(inputUsernameCurrentEl);
      showListBMNEl();
    }

    function onBlurInput(event) {
      if (!event.target.isSameNode(document.activeElement)) {
        hideListBMNEl();
      }
    }

    function onInputInput(event) {
      enableMouseOut = false;
      hideListBMNEl();
    }

    function checkAndEventToInput() {
      var inputEls = document.querySelectorAll('input:not([type]):not([data-bmn-checked="true"]), input[type=text]:not([data-bmn-checked="true"]), input[type=email]:not([data-bmn-checked="true"]), input[type=tel]:not([data-bmn-checked="true"]), input[type=password]:not([data-bmn-checked="true"])');
      if (inputEls.length > 1) {
        for (var i = 1; i < inputEls.length; i++) {
          inputEls[i].dataset.bmnChecked = true;
          if (inputEls[i].type === 'password') {
            if ((inputEls[i + 1] && inputEls[i + 1].type === 'password')) {
              continue;
            }

            if (inputEls[i - 1]) {
              if (inputEls[i - 1].type === 'password') {
                continue;
              } else {
                var inputUsernameEl = inputEls[i - 1];
                var inputPasswordEl = inputEls[i];
                var data = {
                  inputUsernameEl: inputUsernameEl,
                  inputPasswordEl: inputPasswordEl
                };
                inputUsernameEl.onclick = handleEvent(onFocusInput, data);
                inputUsernameEl.onfocus = handleEvent(onFocusInput, data);
                inputUsernameEl.onblur = handleEvent(onBlurInput);
                inputUsernameEl.oninput = handleEvent(onInputInput);
                if (inputUsernameEl.isSameNode(document.activeElement)) onFocusInput(undefined, data);
              }
            }
          }
        }
      }
    }

    var observeDOM = (function () {
      var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
        eventListenerSupported = window.addEventListener;

      return function (obj, callback) {
        if (MutationObserver) {
          var obs = new MutationObserver(function (mutations, observer) {
            if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) {
              callback();
            }
          });
          obs.observe(obj, {
            childList: true,
            subtree: true
          });
        } else if (eventListenerSupported) {
          obj.addEventListener('DOMNodeInserted', callback, false);
          obj.addEventListener('DOMNodeRemoved', callback, false);
        }
      };
    })();

    observeDOM(document, function () {
      checkAndEventToInput();
    });
  }
})();