Hover cover follows mouse

classes/text.class.php

                 }
                 $Str .= '"';
                 if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-                  $Str .= " onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($Group['WikiImage'], 'thumb')."\" onmouseleave=\"ungetCover(event)\"";
+                  $Str .= ' data-cover="'.ImageTools::process($Group['WikiImage'], 'thumb').'"';
                 }
                 $Name = empty($Group['Name']) ? (empty($Group['NameRJ']) ? $Group['NameJP'] : $Group['NameRJ']) : $Group['Name'];
                 $Str .= '>'.$Name.'</a>';

sections/artist/artist.php

 
     $DisplayName .= "<a href=\"torrents.php?id=$GroupID\" class=\"tooltip\" title=\"View torrent group\" ";
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover()" ';
+      $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
     }
 
     $GroupName = empty($GroupName) ? (empty($GroupNameRJ) ? $GroupNameJP : $GroupNameRJ) : $GroupName;
 
     $DisplayName .= "<a class=\"torrent_name\" href=\"torrents.php?id=$GroupID&amp;torrentid=$TorrentID#torrent$TorrentID\" ";
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= "onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($WikiImage, 'thumb')."\" onmouseleave=\"ungetCover(event)\" ";
+      $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
     }
 
     $GroupName = empty($GroupName) ? (empty($GroupNameRJ) ? $GroupNameJP : $GroupNameRJ) : $GroupName;

sections/better/covers.php

 
   $DisplayName = "<a href=\"torrents.php?id=$ID\" class=\"tooltip\" title=\"View torrent group\" ";
   if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-    $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover(event)" ';
+    $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
   }
   $DisplayName .= "dir=\"ltr\">$Name</a>";
   if ($Year > 0) {

sections/better/screenshots.php

 
   $DisplayName = "<a href=\"torrents.php?id=$ID\" class=\"tooltip\" title=\"View torrent group\" ";
   if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-    $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover(event)" ';
+    $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
   }
   $DisplayName .= "dir=\"ltr\">$LangName</a>";
   if ($Year > 0) {

sections/bookmarks/torrents.php

 
   $DisplayName .= '<a href="torrents.php?id='.$GroupID.'" ';
   if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-    $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover(event)" ';
+    $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
   }
   $DisplayName .= ' class="tooltip" title="View torrent group" dir="ltr">'.$GroupName.'</a>';
   if ($GroupYear > 0) {
 
     $DisplayName .= '<a href="torrents.php?id='.$GroupID.'" ';
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover(event)" ';
+      $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
     }
     $DisplayName .=' class="tooltip" title="View torrent group" dir="ltr">'.$GroupName.'</a>';
 

sections/collages/torrent_collage.php

 
   $DisplayName .= "<a href=\"torrents.php?id=$GroupID\" ";
   if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-    $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover(event)" ';
+    $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
   }
   $GroupName = empty($GroupName) ? (empty($GroupNameRJ) ? $GroupNameJP : $GroupNameRJ) : $GroupName;
   $DisplayName .= "dir=\"ltr\">$GroupName</a>";

sections/index/private.php

     $DisplayTime = '('.str_replace(['year','month','week','day','hour','min','Just now','s',' '],['y','M','w','d','h','m','0m'],time_diff($ExpiryTime, 1, false)).') ';
     $DisplayName = '<a href="torrents.php?torrentid='.$ID.'"';
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= " onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($Image, 'thumb')."\" onmouseleave=\"ungetCover(event)\"";
+      $DisplayName .= ' data-cover="'.ImageTools::process($Image, 'thumb').'"';
     }
     $DisplayName .= '>'.$Name.'</a>';
 ?>

sections/requests/requests.php

     $ArtistLink = Artists::display_artists($ArtistForm, true, true);
     $FullName = "$ArtistLink<a href=\"requests.php?action=view&amp;id=$RequestID\"><span ";
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $FullName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($Request['Image']).'" onmouseleave="ungetCover(event)" ';
+      $FullName .= 'data-cover="'.ImageTools::process($Request['Image']).'" ';
     }
     $FullName .= "dir=\"ltr\">$Title</span></a>";
 

sections/rules/ratio.php

         <br />
         <br />
         <div style="text-align: center;">
-        <img style="vertical-align: middle;" src="<?=ImageTools::process('https://chart.googleapis.com/chart?cht=tx&chf=bg,s,FFFFFF00&chl=%5Ctextrm%7B%28maximum+required+ratio%29+%2A+%281-%5Cfrac%7Bseeding%7D%7Bsnatched%7D%29%7D&ext=.png')?>" alt="required ratio = (maximum required ratio) * (1 - (seeding / snatched))" />
+        <img style="vertical-align: middle;" class="tex_img" src="<?=ImageTools::process('https://chart.googleapis.com/chart?cht=tx&chf=bg,s,FFFFFF00&chl=%5Ctextrm%7B%28maximum+required+ratio%29+%2A+%281-%5Cfrac%7Bseeding%7D%7Bsnatched%7D%29%7D&ext=.png')?>" alt="required ratio = (maximum required ratio) * (1 - (seeding / snatched))" />
         </div>
         <br />
         <br />

sections/snatchlist/snatchlist.php

 foreach ($Torrents as $Torrent) {
   $DisplayName = "<a href=\"torrents.php?id=$Torrent[ID]&torrentid=$Torrent[TorrentID]\" ";
   if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-    $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($Torrent['WikiImage'], 'thumb').'" onmouseleave="ungetCover(event)" ';
+    $DisplayName .= 'data-cover="'.ImageTools::process($Torrent['WikiImage'], 'thumb').'" ';
   }
   $DisplayName .= "dir=\"ltr\">$Torrent[Name]</a>";
 

sections/top10/torrents.php

 
     $DisplayName .= "<a href=\"torrents.php?id=$GroupID&amp;torrentid=$TorrentID\" class=\"tooltip\" title=\"View torrent\" ";
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover()" ';
+      $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
     }
 
 

sections/torrents/browse.php

     $CoverArt = $GroupInfo['WikiImage'];
     $DisplayName .= "<a class=\"torrent_title\" href=\"torrents.php?id=$GroupID\" ";
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= "onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($CoverArt, 'thumb')."\" onmouseleave=\"ungetCover(event)\" ";
+      $DisplayName .= 'data-cover="'.ImageTools::process($CoverArt, 'thumb').'" ';
     }
     $DisplayName .= "dir=\"ltr\">$GroupName</a>";
     if ($GroupYear) {
     $CoverArt = $GroupInfo['WikiImage'];
     $DisplayName .= "<a class=\"torrent_name\" href=\"torrents.php?id=$GroupID&amp;torrentid=$TorrentID#torrent$TorrentID\" ";
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= "onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($CoverArt, 'thumb')."\" onmouseleave=\"ungetCover(event)\" ";
+      $DisplayName .= 'data-cover="'.ImageTools::process($CoverArt, 'thumb').'" ';
     }
     $DisplayName .= "dir=\"ltr\">$GroupName</a>";
     if (isset($GroupedCategories[$CategoryID - 1])) {

sections/torrents/notify.php

       }
       $DisplayName .= "<a href=\"torrents.php?id=$GroupID&amp;torrentid=$TorrentID#torrent$TorrentID\" ";
       if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-         $DisplayName .= "onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($GroupInfo['WikiImage'], 'thumb')."\" onmouseleave=\"ungetCover(event)\" ";
+         $DisplayName .= 'data-cover="'.ImageTools::process($GroupInfo['WikiImage'], 'thumb').'" ';
       }
       $DisplayName .= "class=\"tooltip\" title=\"View torrent\" dir=\"ltr\">" . $GroupInfo['Name'] . '</a>';
 

sections/torrents/user.php

     $DisplayName = Artists::display_artists($Artists);
     $DisplayName .= '<a href="torrents.php?id='.$GroupID.'&amp;torrentid='.$TorrentID.'" ';
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover()" ';
+      $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
     }
     $GroupName = empty($GroupName) ? (empty($GroupNameRJ) ? $GroupNameJP : $GroupNameRJ) : $GroupName;
     $DisplayName .= 'dir="ltr">'.$GroupName.'</a>';

sections/userhistory/subscribed_collages.php

       }
       $DisplayName .= "<a class=\"torrent_title\" href=\"torrents.php?id=$GroupID\" ";
       if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-        $DisplayName .= "onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($WikiImage)."\" onmouseleave=\"ungetCover(event)\" ";
+        $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage).'" ';
       }
       $DisplayName .= "dir=\"ltr\">".($GroupName ? $GroupName : ($GroupNameRJ ? $GroupNameRJ : $GroupNameJP))."</a>";
       if ($GroupYear > 0) {
 
         $DisplayName = "<a class=\"torrent_title\" href=\"torrents.php?id=$GroupID\" ";
         if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-          $DisplayName .= "onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($WikiImage)."\" onmouseleave=\"ungetCover(event)\" ";
+          $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage).'" ';
         }
         $DisplayName .= "dir=\"ltr\">".($GroupName ? $GroupName : ($GroupNameRJ ? $GroupNameRJ : $GroupNameJP))."</a>";
 

static/functions/global.js

   document.body.removeChild(img)
 }
 
+let coverListener
 function getCover(event) {
-  var image = event.target.attributes['data-cover'].value
+  let image = event.target.attributes['data-cover'].value
   $('#coverCont img').remove()
-  var coverCont = ($('#coverCont').length==0)?document.body.appendChild(document.createElement('div')):$('#coverCont')[0]
+  let coverCont = ($('#coverCont').length==0)?document.body.appendChild(document.createElement('div')):$('#coverCont')[0]
   coverCont.id = 'coverCont'
   if ($('#coverCont img').length == 0) {
     coverCont.appendChild(document.createElement('img'))
   }
   $('#coverCont img')[0].src = image?image:'/static/common/noartwork/nocover.png'
-  coverCont.className = (event.clientX > (window.innerWidth/2)) ? 'left' : 'right'
   coverCont.style.display = 'block'
+  coverListener = mevent => {
+    let wh = window.innerHeight, ch = coverCont.clientHeight, ph = mevent.clientY
+    let pos = (ph<wh/2) ? ((ph+ch+10>wh) ? wh-ch : ph+10) : ((ph-ch-10<0) ? 0 : ph-ch-10)
+    coverCont.style.top = pos+'px'
+    if (mevent.clientX > window.innerWidth/2) {
+      coverCont.style.left = "initial"
+      coverCont.style.right = window.innerWidth-mevent.clientX+10+"px"
+    } else {
+      coverCont.style.left = mevent.clientX+10+"px"
+      coverCont.style.right = "initial"
+    }
+  }
+  document.addEventListener("mousemove", coverListener)
   //Preload next image
   if ($('.torrent_table, .request_table').length > 0) {
     var as = $('[data-cover]')
 function ungetCover(event) {
   $('#coverCont img').remove()
   coverCont.style.display = 'none'
+  document.removeEventListener("mousemove", coverListener)
 }
 
 // Apparently firefox doesn't implement NodeList.forEach until FF50
     })
   })
 
+  $(document).on('mouseover', '[data-cover]', getCover)
+  $(document).on('mouseleave', '[data-cover]', ungetCover)
   $(document).on('click', '.lightbox-init', function(e) {
     lightbox.init((e.target.attributes['lightbox-img']||[]).value||e.target.src, (e.target.attributes['lightbox-size']||[]).value||e.target.width)
   })

static/styles/beluga/style.css

   filter: invert(100%);
 }
 
+#coverCont {
+  font-size: 0;
+  padding: 5px;
+  background-color: #565960;
+}
+
 /* Pink Additions */
 
 body.style_pink h1 a, body.style_pink h2 a, body.style_pink h3 a, body.style_pink h4 a, body.style_pink h5 a, body.style_pink h6 a {

static/styles/global.css

 .r08           { color: #8c4802; }
 .r09           { color: #7b5200; }
 
-#coverCont.left {
-  left: 20px;
-  right: initial;
-}
-
 #coverCont {
   position: fixed;
-  right: 20px;
-  left: initial;
-  top: 20px;
   max-width: 30%;
   background-size: contain;
   background-repeat: no-repeat;