Circles within circles

An example of rotating circles with jQuery.

HTML

<a id="goL" href="javascript:void(0);">Go Left</a>
    <a id="goR" href="javascript:void(0);">Go Right</a>
    
    <div class="maincircle">
        <div class="inner">
            <div class="circle1 circle" data-angle="0">Movies</div>
            <div class="circle2 circle" data-angle="45">Animation</div>
            <div class="circle2 circle" data-angle="90">Something?</div>
        </div>
    </div>

CSS

.maincircle {
  position: absolute;
  height: 600px;
  left:50%;
  margin-left:-300px;
}

.inner {
  position: relative;
  width:600px;
  height:600px;
  border-radius: 50%;
  background-color:#02E3E7;
}

.circle {
  position: absolute;
  width:100px;
  height:100px;
  border-radius: 50%;
  font-family: "Segoe UI", tahoma, sans-serif;
  font-size: 12px;
  text-align:center;
  vertical-align:middle;
  background-color: white;
  box-shadow: 0px 0px 10px 10px teal;
  margin-top: -50px;
  margin-left: -50px;
  left: 50%;
  top: 50%;
  line-height: 100px;
}

JavaScript

jQuery(function($){

  !jQuery.easing && (jQuery.easing = {});
  !jQuery.easing.easeOutQuad && (jQuery.easing.easeOutQuad = function( p ) { return 1 - Math.pow( 1 - p, 2 ); });
  
  var circleController = {
    create: function( circle ){
      var obj = {
        angle: circle.data('angle'),
        element: circle,
        measure: $('<div />').css('width', 360 * 8 + parseFloat(circle.data('angle'))),
        update: circleController.update,
        reposition: circleController.reposition,
      };
      obj.reposition();
      return obj;
    },
    update: function( angle ){
      this.angle = angle;
      this.reposition();
    },
    reposition: function(){
      var radians = this.angle * Math.PI / 180, radius = 600 / 2;
      this.element.css({
        marginLeft: (Math.sin( radians ) * radius - 50) + 'px',
        marginTop: (Math.cos( radians ) * radius - 50) + 'px'
      });
    }
  };
  
  var spin = {
    circles: [],
    left: function(){
      var self = this;
      $.each(this.circles, function(i, circle){
        circle.measure.stop(true, false).animate(
          { 'width': '-=45' },
          {
            easing: 'easeOutQuad',
            duration: 1000,
            step: function( now ){ circle.update( now ); }
          }
        );
      });
    },
    right: function(){
      var self = this;
      $.each(this.circles, function(i, circle){
        circle.measure.stop(true, false).animate(
          { 'width': '+=45' },
          {
            easing: 'easeOutQuad',
            duration: 1000,
            step: function( now ){ circle.update( now ); }
          }
        );
      });
    },
    prep: function( circles ){
      for ( var i=0, circle; i<circles.length; i++ ) {
        this.circles.push(circleController.create($(circles[i])));
      }
    }
  };
  
  $('#goL').click(function(){ spin.left() });
  $('#goR').click(function(){ spin.right() });
  
  spin.prep($('.circle'));
  
});