title: Shouldn't this javascript animation produce a sine wave movement?
body: <p>I am doing a small JavaScript animation hoping that the little <code>div</code> can move along a sine wave, and for the moment the horizontal path works fine (just straight line). I am almost sure that my math formula for the <code>Y</code> axis is wrong. I have tried to correct it with some examples I found, but none of them worked for me. In all the possibilities I tried, the <code>Y</code> axis is ignored and the little box just moves in straight line horizontally.</p>
  
  <p>How can I fix this, so the movement goes along a sine wave? I know that it's possible to do it easier with jQuery or using html 5, but I just got wondering what is wrong in my original code... I would prefer to fix this if possible.</p>
  
  <pre><code>function animate() {
      xnow = item.style.left;
      item.style.left = parseInt(xnow)+1+'px';
      ynow = item.style.top;
      item.style.top = ynow + (Math.sin((2*Math.PI*xnow)/document.width))*document.heigth;
      setTimeout(animate,20); 
  }
  </code></pre>
  
  <p>The complete code here:
  <a href="http://jsfiddle.net/twNcy/" rel="nofollow">JSFiddle</a></p>