jQuery arrows

Hi,

I'm trying to make a thumbnail slider that has a left and right arrow for sliding in a new set of thumbnails. I'm new to jQuery and javascript so I may be missing something obvious, but I can't figure out what's wrong with my code. When I click on the arrows, nothing happens. Here's a code for the left arrow, take a look:


$(function arrows(i) {

$('#left_arrow').click( function (){
var number = i +1;
var next = i + 2;

$('#cluster' + number).animate({opacity: 0,right:"400px"}, 400, function(){
$(this).css({right:"-3000px",opacity:1});
});

if($(".thumb_cluster").length > number){
$('#cluster'+ next).animate({left:"100px"},400);
}
else{
$('#cluster1').animate({left:"100px"},400);
}
return false;
});

});


Here's some sample HTML:


<div id="thumbs">
<img src="images/left_arrow.png" id="left_arrow">
<div class="thumb_cluster" id="cluster1">
<img src='/exhibition_1/piece_thumbs/GCaldwellAugurweb.jpg' alt='The Augur' class='piece_thumb'/>
<img src='/exhibition_1/piece_thumbs/GCaldwellAugurdetweb.jpg' alt='The Augur' class='piece_thumb'/>
<img src='/exhibition_1/piece_thumbs/GCaldwellteethsmallweb.jpg' alt='Twenty-two teeth' class='piece_thumb'/>
<img src='/exhibition_/piece_thumbs/ADymond2small.jpg' alt='I’m Pretty Sure That Bruce Wayne is Batman' class='piece_thumb'/>
</div>

<div class='thumb_cluster' id='cluster2'>
<img src='/exhibition_1/piece_thumbs/ADymondbrucesmallweb.jpg' alt='I’m Pretty Sure That Bruce Wayne is Batman' class='piece_thumb'/>
<img src='/exhibition_1/piece_thumbs/ZFriedphone2smallweb.jpg' alt='Untitled' class='piece_thumb'/>
<img src='/exhibition_1/piece_thumbs/ZFriedGoodsmallweb.jpg' alt='It’s Good Sometimes' class='piece_thumb'/>
<img src='/exhibition_1/piece_thumbs/ZFriedSauvageweb.jpg' alt='Untitled (Triptych Sauvage)' class='piece_thumb'/>
<img src='/exhibition_1/piece_thumbs/CJonesblindsmallweb.jpg' alt='Double Blind' class='piece_thumb'/>
</div>
<img src="images/right_arrow.png" id="right_arrow">
</div>



here's the css:


#thumbs {
margin: 10px auto;
height: 64px;
padding: 10px;
width: 860px;
position:relative;
overflow:visible;
}
#left_arrow {
float: left;
}
#right_arrow {
float: right;
}
.thumb_cluster{
position:absolute;
top:0;
left:-3000px;
width: 715px;
}
#cluster1{
left: 100px;
}


I have feeling the the problem is with the jQuery, can any please tell me if they see the problem? I'd really appreciate it.

Thanks