Как сделать поле изображения динамичным

Question

У меня есть длинное прямоугольное изображение, подобное этому http://www.openstudio.fr/jquery-virtual-tour/img/sculpteur.jpg

и 3 кнопки, которые будут перемещать изображение влево, вправо и делать паузу... как показано здесь. Я пытаюсь воссоздать этот виртуальный тур http://www.openstudio.fr/jquery-virtual-tour/

Это мой HTML контент

<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

Это файл Javascript. Коды после нажатия правой кнопки

$(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);
        });
    }

    .......
}

Моя проблема в том, что всякий раз, когда я нажимаю левую или правую кнопку, он снова начинается с -500px margin-left, а затем перемещается, в отличие от примера виртуального тура, который должен быть просто плавным потоком фотографии, где он останавливается там, где это будет продолжаться.

Я попытался вставить div, который оборачивает фотографию, с помощью функции.after в jquery, например, где.start и.end - это имя класса div, который окружает изображение. Из-за этого я подумал, что смогу позже контролировать величину маржи.

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

Этот код не работал, он не оборачивал фотографию.

Итак, есть ли у кого-нибудь идея или предложение о том, как я могу сделать этот левый край динамичным?