How to make the margin of an image dynamic

Question

What i have is a long rectangular image like this http://www.openstudio.fr/jquery-virtual-tour/img/sculpteur.jpg

and 3 buttons that will move the image to left, to right and pause.. just like what can be seen here. I am trying to recreate this virtual tour http://www.openstudio.fr/jquery-virtual-tour/

This is my Html content

<div class="pan" style="margin-left:-500px">
    <img src="sculpteur.jpg" />
</div>

<button class="right"> --) </button>   // move to right  >>
<button class="left"> (-- </button>    // move to left   <<
<button class="pause">||</button>      // pause          X

This is the Javascript file. The codes after the right button is clicked

$(document).ready(function() {
    $a=parseInt($('.pan').css('marginLeft'));

    $(".right").click(function(){
        $('.pan').stop();
        $direction = "right";
        movePanorama($direction,$('.pan'), $a);
    });
    ... ...   
});


function movePanorama($direction, $e, $a){
    if($direction=="right"){
        $e.animate({marginLeft:$a--}, 1, function(){
            movePanorama($direction,$e, $a);
        });
    }

    .......
}

My problem is that, whenever i click the left or right button, it will start again on -500px margin-left then move, unlike in the virtual tour example that it should just be a smooth flow of the photo, where it stops is where it will continue.

What I tried is to just insert the div that wraps the photo using the .after function in jquery like this.. wherein .start and .end is the class name of a div that surrounds the image. By this i thought that i could control the value of the margin later on.

$(".start").after("<div class=\"pan\" style=\"margin-left:-500px\">");
$(".end").before("</div>");

This code didn't work, it didn't wrap the photo.

So, Do anyone have an idea or suggestion on how i could make this left margin dynamic?