// ==UserScript==
// @name         subscene preview Image
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Show image preview next to the titles by hovering the mouse.
// @author       dr.bobo0
// @match        https://subscene.com/u/*/subtitles*
// @grant        none
// @downloadURL none
// ==/UserScript==
document.querySelectorAll('a').forEach(link => {
  link.addEventListener("mouseover", function(event) {
    let previewContainer = document.createElement("div");
    previewContainer.style.position = "fixed";
    //previewContainer.style.backgroundColor = "#f8f8f8";
    //previewContainer.style.padding = "5px";
    //previewContainer.style.border = "1px solid #ccc";
    previewContainer.style.display = "none";
    previewContainer.style.transition = "opacity 0.1s ease-in-out";
    previewContainer.style.opacity = 0;
    previewContainer.style.width = "154px";
    previewContainer.style.height = "231px";
    previewContainer.style.overflow = "hidden";
    document.body.appendChild(previewContainer);

    var url = this.href;
    var cachedImage = localStorage.getItem(url);

    if (cachedImage) {
previewContainer.innerHTML = `<img style="width: 100%; height: 100%; border-radius: 8px;" src="${cachedImage}"/>`;
      document.addEventListener("mousemove", function (event) {
        previewContainer.style.top = event.clientY + 20 + "px";
        previewContainer.style.left = event.clientX + 20 + "px";
      });
      previewContainer.style.display = "block";
      setTimeout(function () {
        previewContainer.style.opacity = 1;
      }, 0);
    } else {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url);
      xhr.responseType = "document";

      xhr.onload = function() {
        let preview = xhr.response.querySelector(".poster a img");
        previewContainer.innerHTML = `<img style="width: 100%; height: 100%; border-radius: 8px;" src="${preview.getAttribute("src")}"/>`;
        localStorage.setItem(url, preview.getAttribute("src"));
      };

      document.addEventListener("mousemove", function (event) {
        previewContainer.style.top = event.clientY + 20 + "px";
        previewContainer.style.left = event.clientX + 20 + "px";
      });

      xhr.send();
      previewContainer.style.display = "block";
      setTimeout(function () {
        previewContainer.style.opacity = 1;
      }, 0);
    }

    link.addEventListener("mouseout", function() {
      previewContainer.style.opacity = 0;
      document.removeEventListener("mousemove", function (event) {});
      setTimeout(function () {
        previewContainer.style.display = "none";
        previewContainer.remove();
      }, 300);
    });
  });
});