From 34402bb3d41164dadbefa5f25c3bda2974fe5c40 Mon Sep 17 00:00:00 2001
From: Nicolas Stepien <stepien.nicolas@gmail.com>
Date: Sat, 18 Feb 2012 20:53:46 +0100
Subject: [PATCH] Reposition image hovering once the image is loaded. Close
 #237.

---
 4chan_x.user.js | 20 +++++++++++++++-----
 script.coffee   | 18 +++++++++++++-----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/4chan_x.user.js b/4chan_x.user.js
index d6b36efb7..a817538ec 100644
--- a/4chan_x.user.js
+++ b/4chan_x.user.js
@@ -273,8 +273,8 @@
       _ref = d.body, clientHeight = _ref.clientHeight, clientWidth = _ref.clientWidth;
       height = el.offsetHeight;
       top = clientY - 120;
-      style.top = clientHeight < height || top < 0 ? 0 : top + height > clientHeight ? clientHeight - height : top;
-      if (clientX < clientWidth - 400) {
+      style.top = clientHeight <= height || top <= 0 ? 0 : top + height >= clientHeight ? clientHeight - height : top;
+      if (clientX <= clientWidth - 400) {
         style.left = clientX + 45;
         return style.right = null;
       } else {
@@ -283,7 +283,8 @@
       }
     },
     hoverend: function() {
-      return ui.el.parentNode.removeChild(ui.el);
+      $.rm(ui.el);
+      return delete ui.el;
     }
   };
 
@@ -3320,9 +3321,18 @@
         id: 'ihover',
         src: this.parentNode.href
       });
+      $.add(d.body, ui.el);
+      $.on(ui.el, 'load', imgHover.load);
       $.on(this, 'mousemove', ui.hover);
-      $.on(this, 'mouseout', imgHover.mouseout);
-      return $.add(d.body, ui.el);
+      return $.on(this, 'mouseout', imgHover.mouseout);
+    },
+    load: function() {
+      var style;
+      style = this.style;
+      return ui.hover({
+        clientX: -45 + parseInt(style.left),
+        clientY: 120 + parseInt(style.top)
+      });
     },
     mouseout: function() {
       ui.hoverend();
diff --git a/script.coffee b/script.coffee
index df1bf358e..9ad0da2c1 100644
--- a/script.coffee
+++ b/script.coffee
@@ -196,14 +196,14 @@ ui =
 
     top = clientY - 120
     style.top =
-      if clientHeight < height or top < 0
+      if clientHeight <= height or top <= 0
         0
-      else if top + height > clientHeight
+      else if top + height >= clientHeight
         clientHeight - height
       else
         top
 
-    if clientX < clientWidth - 400
+    if clientX <= clientWidth - 400
       style.left  = clientX + 45
       style.right = null
     else
@@ -211,7 +211,8 @@ ui =
       style.right = clientWidth - clientX + 45
 
   hoverend: ->
-    ui.el.parentNode.removeChild ui.el
+    $.rm ui.el
+    delete ui.el
 
 ###
 loosely follows the jquery api:
@@ -2616,9 +2617,16 @@ imgHover =
     ui.el = $.el 'img'
       id: 'ihover'
       src: @parentNode.href
+    $.add d.body, ui.el
+    $.on ui.el, 'load',      imgHover.load
     $.on @,     'mousemove', ui.hover
     $.on @,     'mouseout',  imgHover.mouseout
-    $.add d.body, ui.el
+  load: ->
+    # 'Fake' mousemove event by giving required values.
+    {style} = @
+    ui.hover
+      clientX: - 45 + parseInt style.left
+      clientY:  120 + parseInt style.top
   mouseout: ->
     ui.hoverend()
     $.off @, 'mousemove', ui.hover