var astrolabeFragment = function(img, msk, ctx, shftX) {
  var TICK_CYCLE    = 30;
      ROTATION_RATE = 0.2 * Math.PI / 180,
      X_OFFSET      = 182,
      Y_OFFSET      = 103;

  var image      = img,
      context    = ctx,
      mask       = msk,
      curAngle   = 0,
      curTick    = 0,
      buffer     = document.createElement("canvas").getContext("2d"),
      shiftX     = shftX,
      maskOffsetX, maskOffsetY,
      ctrX, ctrY;

  var setup = function() {
    buffer.canvas.width  = image.width;
    buffer.canvas.height = image.height;
    maskOffsetX = -1 * (mask.width  - image.width ) / 2;
    maskOffsetY = -1 * (mask.height - image.height) / 2;
    ctrX = image.width  / 2;
    ctrY = image.height / 2;
  };

  var tick = function() {
    curTick += 1
    curTick %= TICK_CYCLE;
    if(curTick < 1) {
      curAngle -= ROTATION_RATE;
    } else if (curTick < 7) {
      curAngle += ROTATION_RATE;
    }
  };

  var draw = function() {
    preDraw();

    //put the buffer on main context
    context.save();
    context.drawImage(buffer.canvas, X_OFFSET, Y_OFFSET);
    context.restore();
  };

  var preDraw = function() {
    //draw the masked image in a buffer
    buffer.clearRect(0, 0, image.width, image.height);
    buffer.drawImage(mask, 0, 0);
    buffer.save();
    buffer.translate(ctrX + shftX, ctrY);
    buffer.rotate(curAngle);
    buffer.translate(-(ctrX), -ctrY);
    buffer.globalCompositeOperation = "source-in";
    buffer.drawImage(image, 0, 0);
    buffer.restore();
  };

  setup();

  return {
    tick:    tick,
    draw:    draw,
  };
};