jQuery Tweaking Image Gallery

[abdulqadir]

there's a free image gallery named "Apple-like Slideshow". I'm tweaking it a little bit so I can add many pictures. So what i will need is a horizontally scrollable thumbnail view. (the thumbnail bar will have nav buttons).

I wrote this:

var thumbwidth = 0;
var thumbpos = new Array();

// .menuItem is a class of li's of thumbs
$('.menuItem').each(function (index) {
thumbpos[index] = thumbwidth;
thumbwidth += $(this).width();
});

// #menu is a div containing the unordered list of thumbs
$('#menu').width(thumbwidth);

// #next is a div containing a button to scroll forward (to see next/more pictures)

$('#next').click(function () {
$('#menu').animate({ marginLeft: -60 + 'px' }, 450);
});

//#prev is a div containing a button to scroll backwards (to see previous thumbs)
$('#prev').click(function () {
$('#menu').stop().animate({ marginLeft: 60 + 'px' }, 450);
});

but when i click div with id ="next" it just animates margin-left: -60px. It does not respond when i click it the second time (ofcourse it wont). I'm having a very hard time because while and for loops aren't working.

Any help would be appreciated. Thanx in advance!!

oh and here's the link to the original image gallery i'm trying to tweak:

http://demo.tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/demo.html