jQuery arrows

[madmatter23]

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