// ==UserScript==
// @name        Image onMouseHover arch.b4k
// @namespace   Zero_G@4d7d460c-0424-11eb-adc1-0242ac120002
// @description Mouse over images to view full size
// @include     https://arch.b4k.co/*
// @version     1.0
// @grant       none
// @downloadURL none
// ==/UserScript==

(function(){
  // Create image-video containers and append them
  var imageContainer = document.createElement('div');
  var videoContainer = document.createElement('div');
  var imgTag = document.createElement('img');
  var videoTag = document.createElement('video');
  document.body.appendChild(imageContainer);
  document.body.appendChild(videoContainer);
  imageContainer.appendChild(imgTag);
  videoContainer.appendChild(videoTag);
  
  // Possition them a top right of current scroll
  imageContainer.style.position = 'fixed';
  imageContainer.style.top = '0em';
  imageContainer.style.right = '0em';
  videoContainer.style.position = 'fixed';
  videoContainer.style.top = '0em';
  videoContainer.style.right = '0em';
  
  // Hide containters
  imageContainer.style.visibility = 'hidden';
  videoContainer.style.visibility = 'hidden';
  
  // Prevent image-video from being bigger than screen
  imageContainer.style.height = '100%';
  videoContainer.style.height = '100%';
  imgTag.style.maxHeight = '100%';
  videoTag.style.maxHeight = '100%';
  
  // Wait for document to load
  document.addEventListener("DOMContentLoaded", function(){
   // Create event listeners
    const imageLinks = document.getElementsByClassName('thread_image_link');
    Array.from(imageLinks).forEach(function(element) {
      element.addEventListener('mouseover', enlargeImage, false);
      // Hide image container
      element.addEventListener('mouseout', clear, false);
    });
  });
  
  function enlargeImage(event){
    if(/\.webm$/.test(event.currentTarget.href)){
      // If it's a video
      videoTag.src = event.currentTarget.href;
      videoContainer.style.visibility = 'visible';
      videoTag.play();
    }else{
      // If it's an image
      imgTag.src = event.currentTarget.href;
      imageContainer.style.visibility = 'visible';
    }
  }
  
  function clear(){
    imageContainer.style.visibility = 'hidden';
    videoContainer.style.visibility = 'hidden';
    imgTag.src = '';
    videoTag.src = '';
  }
})()