Forever scroll

I have some movieclips placed horizontally with next and previous arrows. What I want to happen is when they reach the end of the horizontal list, the first movieclip is now at then end…after that its now the second.

you can see what I have so far here: http://ronnieswietek.com/flashden/tb_banner/BannerRotator.swf

if you go next, next, next etc, you will see clip 7 is the last at that point, I want to bring clip 1 to that position. Here is my relevant code:


		// This adds the Thumbnail MC to thumbHolder X amount of times
		private function onComplete(e:Event):void
		{
			data = xml.getXMLData();
			for (var i:int = 0; i < data.length; i++)
			{
				var t:Thumbnail = new Thumbnail();
				t.name = "thumb" + i;
				t.x = (t.width + THUMB_SPACING) * i;
				t.targetX = t.x;
				t.txt.text = String(i);
				t.txt.mouseEnabled = false;
				thumbHolder.addChild(t);
				t.addEventListener(MouseEvent.ROLL_OUT, genericOut);
				t.addEventListener(MouseEvent.ROLL_OVER, genericOver);
			}
			addEvents();
		}
		
		// This handles clicking the arrows
		private function arrowClick(e:MouseEvent):void
		{
			var l:uint = data.length;
			var i:int;
			var delay:int;
			var nextTarget:*;
			if (e.currentTarget.name == "nextThumb")
			{
				for (i = 0; i < l; i++)
				{
					nextTarget = thumbHolder.getChildByName("thumb" + i);
					nextTarget.targetX -= nextTarget.width + THUMB_SPACING;
					TweenLite.to(nextTarget, 0.3, {x:nextTarget.targetX, delay:0 + (i * 0.04),onComplete:enableArrows});
				}
			}
			else
			{
				for (i = l; i-- > 0;)
				{
					delay = l - i;
					nextTarget = thumbHolder.getChildByName("thumb" + i);
					nextTarget.targetX += nextTarget.width + THUMB_SPACING;
					TweenLite.to(nextTarget, 0.3, {x:nextTarget.targetX, delay:0 + (delay * 0.04),onComplete:enableArrows});
				}
			}
			nextThumb.removeEventListener(MouseEvent.CLICK, arrowClick);
			prevThumb.removeEventListener(MouseEvent.CLICK, arrowClick);
		}
		
		// here so the tweens dont overwrite eachother
		private function enableArrows()
		{
			thumbIndex++;
			if (thumbIndex == data.length)
			{
				nextThumb.addEventListener(MouseEvent.CLICK, arrowClick);
				prevThumb.addEventListener(MouseEvent.CLICK, arrowClick);
				thumbIndex = 0;
			}
		}


A good example is hulu’s banner: http://www.hulu.com/