function initRotateIcons(outer_id){
	// outer_id contains the ID of the HTML element (probably a DIV) within which the icons reside.
	// Additional paramaters provide the IDs of the icon elements themselves
	//   and are accessed via the arguments property of this function (an array):

	numberOfIcons = arguments.length-1;

	xTween = new Array();
	yTween = new Array();
	direction = -1;  // start clockwise!
	smoothSteps = numberOfIcons + 2;
    slowDownFactor = 2 + 5/numberOfIcons;
	maxMoves = smoothSteps * 200;  // avoid infinite (if slow) recursion!
    remainingMoves = maxMoves;
	xOffset = 210;
	yOffset = 120;
	xRadius = 220;
	yRadius = 110;

	outer_mc = document.getElementById(outer_id);
	outer_mc.onclick = changeDirection;


	// Start each icon rotating
	// ? will this work or will I have to instantiate an object for each one 
	//     - I suspect this won't get past the first object once it hits the infinite loop...
	i=1;  //set to second item in arguments array (first icon ID)
	while (i <= numberOfIcons) {
		initRotateIcon(arguments[i],i,numberOfIcons)
		i++;
	}
}


function initRotateIcon(inner_id, iconNumber, numberOfIcons){
    iconIndex = iconNumber-1;

	inner_mc = document.getElementById(inner_id);

	xTween[iconIndex] = new Tween(inner_mc.style,'left','',parseInt(inner_mc.style.left),10,1,'px');
	yTween[iconIndex] = new Tween(inner_mc.style,'top','',parseInt(inner_mc.style.top),10,1,'px');

    rotateIcon(iconNumber, numberOfIcons);
}


function moveThing(evt){
		if(!evt) evt = window.event;
		var x = evt.offsetX || evt.layerX;
		var y = evt.offsetY || evt.layerY;
		var duration = 1;
		var easingFunc = Tween.regularEaseInOut;
//		xTween.func = easingFunc;
		xTween[iconIndex].continueTo(x, duration);
//		yTween.func = easingFunc;
		yTween[iconIndex].continueTo(y, duration);
}


function changeDirection(){
	direction = 0 - direction;
}

function rotateIcon(iconNo, noOfIcons){
  // iconNo: which icon of set are we moving?
  // noOfIcons: how many icons are ranged round the elipse?
  // Divide elipse up into smoothSteps number of points between each icon
  // Then start rotation of this icon around the elipse
  smootherRotate(smoothSteps*iconNo, smoothSteps*noOfIcons, iconNo-1, remainingMoves);
}

function smootherRotate(pointNo, noOfPoints, iconIndex, remainingMoves){
  // Rotates icon from point pointNo to point pointNo+1 around elipse
  // (or pointNo-1 if going in opposite direction)
  // where there are noOfPoints points around the elipse
  // then repeats for next point
 
 //Ditch out if we've run out of moves!
 if (remainingMoves <= 0) return true;
 
 var x, y, duration, t;
 duration = slowDownFactor/smoothSteps;
 angle = 2*Math.PI*pointNo/noOfPoints;
 x = xOffset + xRadius*Math.sin(angle);  
 y = yOffset + yRadius*Math.cos(angle);  
 xTween[iconIndex].continueTo(x,duration);
 xTween.func = Tween.regularEaseInOut;
 yTween[iconIndex].continueTo(y,duration);
 yTween.func = Tween.regularEaseInOut;

// Turn attention to next point in current direction;
 pointNo += direction;
// count down to final move
 remainingMoves --;
 
// Deal with overflow after a complete rotation in either direction@
 if (pointNo == noOfPoints) pointNo = 0;
 if (pointNo < 0) noOfPoints - pointNo;
// Loop this function recursively for next point on elipse
 t=setTimeout("smootherRotate("+pointNo+", "+noOfPoints+", "+iconIndex+", "+maxMoves+")", duration * 1000);
}

