title: Issue with Image movement on mousemove (in opposite direction)
body: <p>I have to move an image using jQuery / Javascript exactly like this <a href="http://chaikenclothing.com/#/collections/attachment/11/" rel="nofollow noreferrer">url</a></p>
  <p>I have done <a href="http://jsfiddle.net/N2k6M/1/" rel="nofollow noreferrer">similar to this</a> using my own logic. But it gets cut for smaller / bigger image either at the top or at the bottom. Or It moves completely at the bottom and doesn't move completely at the top or vice-versa.</p>
  <p><a href="http://jsfiddle.net/N2k6M/" rel="nofollow noreferrer">http://jsfiddle.net/N2k6M/</a>
  (Please move the horizontal scrollbar to view full image.)</p>
  <p>Can anyone please suggest me  / Fix my code here, so that my mousemove functionality works perfectly fine and upper / lower part of image moves properly.</p>
  <p>I need a seamless movement of image just like in the original url.</p>
  <p><strong>HTML PART</strong></p>
  <pre><code>&lt;div id=&quot;oheight&quot; style=&quot;z-index:1000;position:absolute;&quot;&gt;123&lt;/div&gt; , &lt;div id=&quot;yheight&quot; style=&quot;z-index:1000;position:absolute;&quot;&gt;123&lt;/div&gt;
  
      &lt;img id=&quot;avatar&quot; src=&quot;http://chaikenclothing.com/wp-content/uploads/2012/05/11.jpg![enter image description here][2]&quot; style=&quot;position:absolute;overflow:hidden;&quot; /&gt;
  </code></pre>
  <p><strong>JAVASCRIPT PART</strong></p>
  <pre><code>&lt;script src=&quot;http://code.jquery.com/jquery-latest.js&quot;&gt;&lt;/script&gt; 
  &lt;script lang=&quot;javascript&quot;&gt;
  var doc_height = $(document).height();
  function updateAvatarPosition( e )
  {
      var avatar = document.getElementById(&quot;avatar&quot;);
      var yheight = parseInt(e.y);
      var ywidth = e.x;
      //avatar.style.left = e.x + &quot;px&quot;;
      
      
      if((yheight)&lt;(doc_height)){     
          yheight*=2;
          avatar.style.top = '-'+(yheight) + &quot;px&quot;;
      }
      console.log(yheight);
      $(&quot;#oheight&quot;).html(doc_height);
      $(&quot;#yheight&quot;).html(yheight);
      /*if((ywidth)&lt;(doc_height/6)){
          avatar.style.top = '-'+e.x + &quot;px&quot;;
      }*/ 
  }
  
  document.getElementById(&quot;avatar&quot;).onmousemove = updateAvatarPosition;
  
  
  &lt;/script&gt;
  </code></pre>