stuck in animating in Javascript
<p>I wanted to animate the picture so that when the user enters a X and Y offset values, the picture will start at the left upper corner of the window, then moves from left to right, and finally move the picture top down to the final position one pixel at a time.</p>

<p>Here's my code, <a href="http://jsfiddle.net/nMdNk/3/" rel="nofollow">http://jsfiddle.net/nMdNk/3/</a></p>

<p>in my javascript, I have:</p>

<pre><code>function moveRight() {
    hx = document.getElementById("xval").value;
    imgx = document.getElementById("picture").clientX; //get current X from image
    for (a = 0; a &lt;= imgx; a++;) {

        if (imgx == hx) {
            moveDown();
        } else {
            setTimeOut(moveRight, 1000);
        }
    }
}

function moveDown() {
    hy = document.getElementById("yval").value;
    imgy = document.getElementById("picture").clientY; //get current Y from image
    for (b = 0; b &lt;= imgy; b++;) {

        if (imgy = hy) {
            return; //stop when reach to final destination 
        } else {
            setTimeOut(moveDown, 1000);
        }
    }
}
</code></pre>

<p>I think I'm retrieving the wrong element for the x and y coordinates of the picture but not quite sure. Any help would be appreciated, thank you!  </p>
