Finding correct angle in circle?

Hi all:

Hoping someone can help with this. I have a container clip that has 10 small boxes placed in a circle. I need the “active” box to always be on top, so as soon as the boxes are created, i rotate the container -90 degrees (now box 1 is at the top).

Now…when I click on box 1, I need the container (with all the boxes in it) to rotate counter-clockwise to position box 2 at the top. When I click on box 2, it needs to rotate again so box 3 is at top, etc.

The problem: Everything seems to work fine, until I get to box 3 or 4. When I click on it, the container goes through a full 360 degree rotation, before stopping at the right place.

Code:


import caurina.transitions.*;

var container:Sprite = new Sprite();
addChild(container);

var radians:Number;
var degrees:Number;
var centerX:Number = stage.stageWidth/2;
var centerY:Number = stage.stageHeight/2;
var radius:Number = 200;
var numItems:Number = 9;
var offset:Number = -90;

function buildCircle():void {
	for (var i:int = 0; i < numItems; i++) {
		var box:Box = new Box();
		box.name = i.toString();
		box.mouseChildren = false;
		box.num_txt.text = i.toString();
		
		radians = i * ((Math.PI * 2) / numItems);
		degrees = (radians * 180) / Math.PI;
		
		box.x = (Math.cos(radians) * radius);
		box.y = (Math.sin(radians) * radius);	
		
		box.rotation = degrees - offset;
		box.addEventListener(MouseEvent.CLICK, moveBox);
		container.addChild(box);
	}
	container.x = centerX;
	container.y = centerY;
	container.rotation = offset;
}

function moveBox(e:MouseEvent):void {
	var num:Number = Number(e.currentTarget.name);
	offset -= 360/numItems;
	Tweener.addTween(container, {rotation:offset, time:1, transition:'easeOutExpo'});
}
buildCircle();

(I’m using Tweener for the animation).

Does anyone have a clue how to make this work correctly? I feel like I’m missing something so obvious!

Attached is the FLA as well in case you care to tinker with it.

Thanks!