Dynamic Javascript Problem

I'm trying to revise the following sample code from http://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3

--------------------------------------------------Sample Code---------------------------------------------------

#container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; }

Click Me

function myMove() { var elem = document.getElementById(\"animate\"); var pos = 0; var id = setInterval(frame, 5); function frame() { if (pos == 350) { clearInterval(id); } else { pos++; elem.style.top = pos + 'px'; elem.style.left = pos + 'px'; } } }

-----------------------------------------------------------Sample Code End------------------------------------------------------

The goal is to get the red square to move in a straight line diagonally from the upper left corner of the big yellow square to the middle of the right side of the yellow square. Then without pause it should move diagonally in a straightline from the middle to the lower left corner of the yellow square.

How do I go about doing this? Help is appreciated.