// ==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.2
// @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
      if (videoTag.src !== event.currentTarget.href){
        videoTag.src = '';
        videoTag.src = event.currentTarget.href;
      }
      videoContainer.style.visibility = 'visible';
      videoTag.play();
    }else{
      // If it's an image
      if (imgTag.src !== event.currentTarget.href){
        imgTag.src = '';
        imgTag.src = event.currentTarget.href;
      }
      imageContainer.style.visibility = 'visible';
    }
  }
  
  function clear(){
    imageContainer.style.visibility = 'hidden';
    videoContainer.style.visibility = 'hidden';
    
    // Stop video
    videoTag.pause();
    videoTag.currentTime = 0;
  }
  
  // Support for inline quotes (https://greasyfork.org/en/scripts/424112-inline-quote-links-arch-b4k-co)
  // Add mutation observers to all posts, then when an inline is detected add event listeners to image link
  var postToObserve = document.getElementsByClassName('text');
  const observer = new MutationObserver(function(mutationsList, observer){
    for(const mutation of mutationsList) {
       if(mutation.addedNodes[0].id.includes('inline')){
         let imageLink = mutation.addedNodes[0].querySelector('.thread_image_link');
         
         if (imageLink){
           imageLink.addEventListener('mouseover', enlargeImage, false);
           imageLink.addEventListener('mouseout', clear, false);
         }
       }
    }
  });
  
  Array.from(postToObserve).forEach(function(element) {
    observer.observe(element, {childList: true, attributes: false,});
  });

})()