var points = 360;
		var radius = 50;
		var x0 = 100; // makes the shape distort
		var y0 = 100; // makes the shape distort
		//
		var viewpointx = 0; // this is where your eye is ( if we compare where your 
		var viewpointy = 0; // eye would look, we can work out the scale and position )
		//
		var plusx = 300; // position the centre in 2D
		var plusy = 0; // position the centre in 2D

		var clipsArray = [];
		var numberofclips;

		var rotation = 0;


		init();

		function init(){
		

		// var init = function(){
			
			qAngle = Math.PI * 2 / points;
						//
			depths_top = radius + x0
			depths_bot = radius - x0;
			depths_range = depths_top - depths_bot;
			
			
			createClips();
			
			animate();
			
		}

		function createClips(){
			
			clipsArray = new Array();

			for( var c = 0 ; c < 10 ; c++ ){
				
				var newclipname = "rect"+c;
				var ypos = c * 30;
				var depth = c + 50;

				var clip = document.getElementById( newclipname );

				//console.log( "Clips = " + newclipname );

				clipsArray[c] = clip;
				
				//setUpButton( clip );

				plotpoint(c,clip)
				
			};
			
			numberofclips = clipsArray.length;

			//console.log( "number of Clips = " + numberofclips );

			//console.log( "finddistance 1, 2, 10, 20 = ( point 1, point 2, distance, scale )" + finddistance( 1, 2, 10, 20 ) );
		}

		// make a function which rotates the clips into their final position and uses inertia to stop	
		//------------------------------------------------------------------------
		//------------------------------------------------------------------------
		//------------------------------------------------------------------------
		function plotpoint( k, clip ){
			
			// translate the circular motion and position of the
			// clip in question into distance and scale values for positioning the clip
			var newx = x0 + radius * Math.cos( qAngle * k );
			var newy = y0 + radius * Math.sin( qAngle * k );
			// get the distance between the two points and the scale
			var output = finddistance( viewpointx, viewpointy, newx, newy, k );
			// position the 'clip' according to the 'output' and the offset values (plusx, plusy);
			positionmc( output, plusx, plusy, clip, k );


		}
		
		
		
		// //------------------------------------------------------------------------
		// //----------in v1, v2 - coordinates XY  p1, p2 coordinates XY ------------
		// //------------------------------------------------------------------------
		// //----------return - distance --------------------------------------------
		function finddistance(v1, v2, p1, p2){
			// lots of Pythagoras - to find the distance between the defined viewpoint and the clip in question
			var xdist = Math.abs( p1 - v1 );
			var ydist = Math.abs( v2 - p2 );
			//
			var xdistsquared = xdist * xdist;
			var ydistsquared = ydist * ydist;
			//
			var sumofthesquare = xdistsquared + ydistsquared;
			var distance = Math.round(Math.sqrt(sumofthesquare));
			var scale = Math.round(distance/1);
			var positionarray = new Array( p1, p2, distance, scale);
			return positionarray;
		}
		
		
		
		// //------------------------------------------------------------------------
		// //------------------------------------------------------------------------
		// //------------------------------------------------------------------------
		function positionmc( output, plusx, plusy, clip, angleOfClipPosition ){
			// this function actually positions the movie clips
			var newx = output[0];
			var newy = output[1];
			var distance = output[2];
			var scale = output[3]/100;
			// angleOfClipPosition is how far the clip is around the edge of the circle it lives on - not the actual angle of the clip
			var angleOfClip = angleOfClipPosition;//  * ( Math.PI / 180 );

			var newClipY = newy + plusy;
			var newClipX = 50 + plusx;
			var newScaleX = scale;
			var newScaleY = scale;
			var calcalpha  = 1;//distance - ( depths_top - depths_range  ) + 20;

			alterClipProperties( clip, newClipX, newClipY, newScaleX, newScaleY, angleOfClip, calcalpha, distance );

			//depthsSort ( clip, distance );



			// //clip.thetxt = clip.deftext + "dist_" + distance;
			// clip.swapDepths( distance );
			// // trace("clip to position = "+this[clip]+" >> 
			// // newx = "+newx+" >> newy = "+newy+ " >> distance = "+distance+" >> scale = "+scale);
		}

		function alterClipProperties( clip, newClipX, newClipY, newScaleX, newScaleY, angleOfClip, newAlpha, distance ){

			//clip._y = newClipY;
			//clip._x = 50 + plusx; // this can make the buttons look offset in 3D
			//clip._xscale = newScaleX;
			//clip._yscale = newScaleY;
			
			//console.log( " calcalpha = " + clip, newClipX, newClipY, newScaleX, newScaleY, newAlpha  );
			//clip._alpha = calcalpha;

			var newZIndex = distance;
			console.log( "newZIndex = " + newZIndex + " scale = " + newScaleX + " angleOfClip = " + angleOfClip );

			TweenMax.set(  clip,  {    x:newClipX, y:newClipY, scale:newScaleX, rotationZ:angleOfClip ,autoAlpha:newAlpha, transformOrigin: "50% 50%", zIndex:newZIndex });

		}

		function animate(){

			rotation = 0;

			TweenMax.to(  this, 3, {   rotation:300, onUpdate:updateRotation, onComplete: onComplete,
  onReverseComplete: onComplete });

		}

function onComplete() {
  this.reversed(!this.reversed());
}

		function updateRotation(){

			//console.log( "r = " + rotation );

			for( var c = 0 ; c < numberofclips ; c++ ){
				var clipToPosition = clipsArray[c];
				var clipRotation = rotation + ( ( 360 / numberofclips ) * c );
				plotpoint( clipRotation, clipToPosition );
			}

			

			
		}