(function () {
  let css = document.createElement('style');
  css.innerHTML = `
    #imgZoom_wrap {
      position: fixed;
      width: 100%; height: 100%;
      z-index: 100;
      transition: opacity 0.4s ease;
      cursor: zoom-out;
    }
    .imgZoom-hide {
      left: -100%; opacity: 0;
    }
    #imgZoom_shade {
      position: absolute;
      width: 100%; height: 100%;
      background: #000; opacity: 0.75;
    }
    #imgZoom_content {
      position: absolute;
      width: 100%; height: 100%;
      background-size: contain !important;
    }
    #imgZoom_close {
      position: absolute;
      top:0; right:0;
      width: 1.5em; height: 1.5em;
      font: bold 1.5em/1.5em Century Gothic;
      text-align: center;
      background: #f33;
      opacity: 0.75;
      color: #fff;
    }
  `;
  document.head.appendChild(css);

  let html = document.createElement('div');
  html.id = 'imgZoom_wrap';
  html.className = 'imgZoom-hide';
  html.innerHTML = `
    <div id='imgZoom_shade'></div>
    <div id='imgZoom_content'></div>
    <div id='imgZoom_close'>X</div>
  `;
  document.body.appendChild(html);

  let zoom = (e) => {
    let el = e.srcElement;
    let imgSmall = el.src;
    let imgLarge = el.getAttribute('large-src');
    imgZoom_content.style = `
      background:url("${imgLarge}") no-repeat center,
        url("${imgSmall}") no-repeat center;
    `;

    imgZoom_wrap.classList.toggle('imgZoom-hide');
  }
  let close = () => {
    imgZoom_wrap.classList.toggle('imgZoom-hide');
  }

  let imgs = document.getElementsByClassName('imgZoom');
  for (let i = 0; i < imgs.length; i++) {
    const el = imgs[i];
    el.addEventListener('click', zoom, false);
  }
  imgZoom_wrap.addEventListener('click', close, false);
})();
(function () {
  let css = document.createElement('style');
  css.innerHTML = `
    .hint {
      display: inline;
      padding:0 6px 0 6px;
      background: #69c;
      color: #fff;
      cursor: pointer;
      border-radius: 9px;
      position: relative;
      font:normal 16px/19px Tahoma;
      transition: background 0.4s ease;
    }
    .hint:hover {
      background: #369;
    }
    .hint div {
      position: absolute;
      padding:0.5em 0.25em;
      box-sizing: border-box;
      top:0;
      border:solid 1px #fff;
      box-shadow: 0 0 2px 0px #000;
      border-radius: 9px;
      font:normal 16px/19px Calibri;
      width:300px;
      background: #369;
      color: #fff;
      z-index:10;
      transition: opacity 0.4s ease;
    }
    .hint-hide div {
      left:-8000px;
      opacity: 0;
    }
    .hint-show div {
      left:-150px;
      opacity: 1;
    }
  `;
  document.head.appendChild(css);

  let close = (e) => {
    let hints = document.getElementsByClassName('hint-show');
    for (let i = 0; i < hints.length; i++) {
      hints[i].className = 'hint hint-hide';
    }
  }

  let showHint = (e) => {
    let el = e.srcElement;
    setTimeout(() => {el.className = 'hint hint-show';} ,50);
  }

  let hints = document.getElementsByClassName('hint');
  for (let i = 0; i < hints.length; i++) {
    const el = hints[i];
    let info = el.innerHTML;
    el.innerHTML = `?<div>${info}</div>`;
    el.classList.add("hint-hide");
    el.addEventListener('click', showHint, false);
  }

  window.addEventListener('click', close, false);
})();