/*

For JSBin 5th birthday compo

​

Author: Kushagra Gour (@chinchang457)

​

*/

var last_t = Date.now(),

          PI_BY_180 = Math.PI / 180,

          c = document.querySelector('#c'),

          ctx = c.getContext('2d'),

          ctx2 = c2.getContext('2d'),

          t = 0,

          square = {

            w: 80,

            h: 80,

            angle: 91

          },

          jumps2 = [

            {x: 0, y: 2, pivot: 2},

            {x: 1, y: 2, pivot: 1},

            {x: 2, y: 2, pivot: 3},

            {x: 2, y: 1, pivot: 2},

            {x: 2, y: 0, pivot: 0},

            {x: 1, y: 0, pivot: 3},

            {x: 0, y: 0, pivot: 1},

            {x: 0, y: 1, pivot: 0}

          ],

          points = [{}, {}, {}, {}],

          i = -1,

          colorSwitch = 0,

          colors = ['red', 'blue', 'green', 'orange'];

      function update () {

        var x, y, j;

        if (square.angle > 90) {

          i = (++i) % jumps2.length;

          x = jumps2[i].x * square.w,

          y = jumps2[i].y * square.h;

          if (!i) {

            points[0].x = x; points[0].y = y;

            points[1].x = x + square.w; points[1].y = y;

            points[2].x = x + square.w; points[2].y = y + square.h;

            points[3].x = x; points[3].y = y + square.h;

            colorSwitch ^= 1;

          }

          else {

            for (j = 0; j <= 3; j++) {

              points[j].x = points[j].cx;

              points[j].y = points[j].cy;

            }

          }

          points.pivot = jumps2[i].pivot;

          square.angle = 0;

        }

        square.angle += 0.9;

        var s = Math.sin(square.angle * PI_BY_180),

            c = Math.cos(square.angle * PI_BY_180),

            pivotPoint = points[points.pivot];

        pivotPoint.cx = pivotPoint.last_x = pivotPoint.x;

        pivotPoint.cy = pivotPoint.last_y = pivotPoint.y;

        // rotate 3 points about the 4th pivot point

        for (j = 0; j < points.length; j++) {          

          if (j === points.pivot) continue;          

          // translate point back to origin:

          x = points[j].x - pivotPoint.x;

          y = points[j].y - pivotPoint.y;          

          // rotate point

          var xnew = x * c - y * s,

            ynew = x * s + y * c;

          // save last cordinates

          points[j].last_x = points[j].cx || points[j].x;

          points[j].last_y = points[j].cy || points[j].y;

          // translate point back:          

          points[j].cx = xnew + pivotPoint.x;

          points[j].cy = ynew + pivotPoint.y;

        }

      }

      function draw () {

        ctx.clearRect (0, 0, 600, 600);

        ctx.lineWidth = 2;

        ctx.beginPath();

        ctx.moveTo(points[0].cx, points[0].cy);

        ctx2.beginPath();

        for (var j = 0; j < points.length; j++) {

          ctx.lineTo(points[j].cx, points[j].cy);

          ctx2.save();

          ctx2.strokeStyle = colorSwitch ? colors[j] : '#f9f9f9';

          ctx2.lineWidth = colorSwitch ? 1 : 3;

          ctx2.moveTo(points[j].last_x, points[j].last_y);          

          ctx2.lineTo(points[j].cx, points[j].cy);

          ctx2.stroke();

          ctx2.restore();

        }       

        ctx.closePath();

        ctx.rect(0, 0, 240, 240);

        ctx.stroke();        

      }

      function animate() {

        update();

        draw();  

        // works on chrome and firefox

        window.requestAnimationFrame ? requestAnimationFrame(animate) : mozRequestAnimationFrame(animate);

      }

      animate();