/**
 * Created by Leo on 16/12/22.
 */
function moveElement(elementID,final_x,final_y,interval) {
    if (!document.getElementById) return false;
    if (!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    if (xpos == final_x && ypos == final_y) {
        return true;
    }
    if (xpos < final_x) {
        xpos++;
    }
    if (xpos > final_x) {
        xpos--;
    }
    if (ypos < final_y) {
        ypos++;
    }
    if (ypos > final_y) {
        ypos--;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    movement = setTimeout(repeat,interval);
}

@@ -257,511 +257,1790 @@
     
-var xpos = parseInt(elem.style.left);%0A    var ypos = parseInt(elem.style.top);%0A    if (xpos == final_x && ypos == final_y) %7B%0A        return true;%0A    %7D%0A    if (xpos %3C final_x) %7B%0A        xpos++;%0A    %7D%0A    if (xpos %3E final_x) %7B%0A        xpos--;%0A    %7D%0A    if (ypos %3C final_y) %7B%0A        ypos++;%0A    %7D%0A    if (ypos %3E final_y) %7B%0A        ypos--;%0A    %7D%0A    elem.style.left = xpos + %22px%22;%0A    elem.style.top = ypos + %22px%22;%0A    var repeat = %22moveElement('%22+elementID+%22',%22+final_x+%22,%22+final_y+%22,%22+interval+%22)%22;%0A    
+/*%0A     This is causing a problem now that the moveElement function is being called whenever the user%0A     hovers over a link. Regardless of whether or not the previous call to the function has finished moving the%0A     image, the function is being asked to move the same element somewhere else. In other words, the%0A     moveElement function is attempting to move the same element to two different places at once, and the%0A     movement variable has become the rope in a tug of war.%0A     */%0A    if (elem.movement) %7B%0A        clearTimeout(elem.movement);%0A    %7D%0A%0A    var xpos = parseInt(elem.style.left);%0A    var ypos = parseInt(elem.style.top);%0A    if (xpos == final_x && ypos == final_y) %7B%0A        return true;%0A    %7D%0A    if (xpos %3C final_x) %7B%0A        xpos++;%0A    %7D%0A    if (xpos %3E final_x) %7B%0A        xpos--;%0A    %7D%0A    if (ypos %3C final_y) %7B%0A        ypos++;%0A    %7D%0A    if (ypos %3E final_y) %7B%0A        ypos--;%0A    %7D%0A    elem.style.left = xpos + %22px%22;%0A    elem.style.top = ypos + %22px%22;%0A    var repeat = %22moveElement('%22+elementID+%22',%22+final_x+%22,%22+final_y+%22,%22+interval+%22)%22;%0A    /*%0A     If we do that, the clearTimeout statement won%E2%80%99t work; the movement variable will no longer exist.%0A     We can%E2%80%99t use a global variable. We can%E2%80%99t use a local variable. We need something in between. We%0A     need a variable that applies just to the element being moved.%0A     Element-specific variables do exist. In fact, we%E2%80%99ve been using them all the time. What I%E2%80%99ve just%0A     described is a property.%0A%0A     Until now, we%E2%80%99ve used properties provided by the DOM: element.firstChild, element.style, and so%0A     on. You can also assign your own properties:%0A%0A     element.property = value%0A%0A     If you wanted, you could create a property called foo with a value of %22bar%22:%0A%0A     element.foo = %22bar%22;%0A     */%0A%0A    elem.
 move

use element.property instead of global variable