Need help animating a jquery carousel

[drayarms]

Hello, I'm building a picture carousel. Here is a demo below:

 

http://flirtchatmingle.com/test/picture.php

 

The colored boxes are frames with fixed position withing which the pictures are placed.  I just gave them colored backgrounds for this demonstration.  The frames all belong to a class called "frame" and the pictures in a class called "picture".  I dynamically assigned ids to all the frames( frame0, frame1...) and to all the pictures(picture0, picture1, picture2...) .  By default, all the pictures and frames are hidden, but in a script, I stack up the frames as they appear in the demo, and then show the pictures in their corresponding frames, picture 0 -> frame0, picture1-> frame1... etc

 

Now the problem I face is the animation part.  I want each picture to to move to the next frame in the stack, so picture3 should move to frame2, picture 2 to frame1, picture 1 to frame0, picture0 to the last frame(on the right of frame0), the last picture, to the last but one frame, etc, when the forward arrow is clicked.  And I Want to do the opposite for the back arrow.  And here is the code I used.  I'm just going to include the forward and back functions and not the entire code for what already works.  The logic behind the code is simple,  first, I  append each picture to the new frame where I expect it to go.  Then I get the new position and dimension of the picture based on the frame to which it has been appended to, and finally, run the animation.

 

for some reason I can't understand, picture1(the one on the left of the centered picture) won't move at all, when the forward button is clicked.  and it stays in place even when subsequent pictures try to occypy its frame(frame1).  And picture0(the one in the center) entirely skips the last frame, and moves to the last but one frame instead.  Anyone knows why this is the case?  Or can anyone suggest a better way to do the animation?

 

PS:  the variables picture_count and frame_count used in the script, represent the number of pictures and frames respectively and I use them interchangeably since they represent the same number. The variable width, is the width of frame0, the center frame.

 

The frames/pictures are numbered 0 to frame_count-1, starting from the center frame/picture, and running counter clockwise.

 

		$(document).ready(function() {// ...A whole lotta code that arranges the frames in a stack and makes the pictures visible withing their respective stacks

			$("#pic_fwd").click(function() {// Push picture ahead by one frame



				for(i=0; i<picture_count; i++){//Do the following to all pictures



					if(i==0){//For frame0, the center frame

						var pic = $(".picture").slice(0,1);//Assign current pic to a variable

						var frame = $("#frame"+(picture_count-1));//Assign last frame to a variable

						var new_width = $("#frame"+(picture_count-1)).width();//The picture assumes width of preceding frame 

    							function move_animate(element, newParent){

        							var old_offset = element.offset();//Get current position of picture

							var oldz = element.css("z-index");//Get z index of current picture

        							element.appendTo(newParent);//Place picture in last frame

        							var new_offset = element.offset();//Get current position of picture

        							element.animate( {"top": new_offset.top, "left":new_offset.left, "width":new_width}, "fast", "easeInBack");


    							}//End move animate function

					}else{//Rest of the pics

						var pic = $(".picture").slice(i,i+1);//Assign current pic to a variable

						var frame = $("#frame"+(i-1));//Assign preceding frame to a variable

						var new_width = $("#frame"+(i-1)).width();//The picture assumes width of preceding frame 

    							function move_animate(element, newParent){

        							var old_offset = element.offset();//Get current position of picture

							var oldz = element.css("z-index");//Get z index of current picture

        							element.appendTo(newParent);//Place picture in last frame

        							var new_offset = element.offset();//Get current position of picture					
        							
        							element.animate( {'top': new_offset.top, 'left':new_offset.left, "width":new_width}, "fast", "easeInBack");


					}//End of for the rest of the pics other than pic0

           									        										
    						}//End move animate function						



					move_animate(pic,frame);//Do the animation





				}//End of for loop that loop through all pictures



			});//End pic foward click function
















			$("#pic_back").click(function() {// Push picture back by one frame



				for(i=0; i<picture_count; i++){//Do the following to all pictures



					if(i==picture_count-1){//For last frame

						var pic = $(".picture").slice(i,i+1);//Assign current pic to a variable

						var frame = $("#frame0");//Assign last frame to a variable

						var new_width = width;//The picture assumes width of preceding frame if frame0 width

    							function move_animate(element, newParent){

        							var old_offset = element.offset();//Get current position of picture

							var oldz = element.css("z-index");//Get z index of current picture

        							element.appendTo(newParent);//Place picture in last frame

        							var new_offset = element.offset();//Get current position of picture

        							element.animate( {"top": new_offset.top, "left":new_offset.left, "width":new_width}, "fast", "easeInBack");


    							}//End move animate function

					}else{//Rest of the pics

						var pic = $(".picture").slice(i,i+1);//Assign current pic to a variable

						var frame = $("#frame"+(i+1));//Assign next frame to a variable

						var new_width = $("#frame"+(i+1)).width();//The picture assumes width of preceding frame 

    							function move_animate(element, newParent){

        							var old_offset = element.offset();//Get current position of picture

							var oldz = element.css("z-index");//Get z index of current picture

        							element.appendTo(newParent);//Place picture in last frame

        							var new_offset = element.offset();//Get current position of picture					
        							
        							element.animate( {'top': new_offset.top, 'left':new_offset.left, "width":new_width}, "fast", "easeInBack");


					}//End of for the rest of the pics other than pic0

           									        										
    						}//End move animate function						



					move_animate(pic,frame);//Do the animation





				}//End of for loop that loop through all pictures



			});//End pic back click function







		});//End document ready method