animateMotion Controlling with script

Question

i've made a Path with SVG, and i'm making a ball to move along it.

But is there anyway i can control de movement of the ball?

Like, the ball starts stoped, while i press the Right Arrow on the keyboard, the ball moves Clockwise, and when i press the left arrow, the ball moves Counter-Clockwise...

is it possible?

here is the svg code:

<svg width="800" height="800" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">

<!-- Draw the outline of the motion path in grey, along
     with 2 small circles at key points -->
<path d="M66,89.32c18,143,154,82,97,118s-187,38-152,102s114,105,163,74
s89-111,89-127s18-128,13-155s-29-67-57-80s-47-14-62-17s-17-8-32,0s-40,23-47,30s-11,20-16,24s-14,29-14,29L66,89.32z" stroke="lightgrey" stroke-width="2" fill="none" id="theMotionPath"/>

<!-- Here is a red circle which will be moved along the motion path. -->
<circle cx="" cy="" r="5" fill="red">

    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite">
       <mpath xlink:href="#theMotionPath"/>
    </animateMotion>
</circle>

I put my code here: http://jsfiddle.net/fPQv2/

Thanks!!

Answer 1

The best thing i can do, is that i've add this script, so i can pause and unpause the animation... but still not what im looking for....

var pause = document.getElementById('draw');
var unPause = document.getElementById('draw');

function parar(){
    pause.pauseAnimations();
}
function voltar(){
    unPause.unpauseAnimations();
}

    $(window).keydown(function (e) {
        if (e.keyCode == 39) {
            setTimeout(voltar,10);
            setTimeout(parar,500);
        }
    });