Kineticjs: Rotate a group around a point

How can I rotate a group of objects around a point? I have a set of shapes in the same group and I would like to rotate it around an arbitrary point. I made an example, but it didn't work very well: http://jsfiddle.net/cequiel/Fn5Ba/2/

In the above example, you can resize the rectangle by dragging the corners. If you want to rotate the rectangle around the black point, just press the 'rotate' button. The first time it works fine, but not the second time. Here's the rotate function:

// rotate event handler
$('#rotate').click(function() {
    var offset0 = group.getOffset();
    var offset1 = center.getPosition();

    // change offset, rotate and move
    group.setOffset(offset1);
    group.rotate(0.1);
    group.move(offset1.x - offset0.x, offset1.y - offset0.y);

    layer.draw();
});

I have probably explained wrong. I wanted to rotate a list of objects around an arbitrary point. The trick consist of using different groups. One group to rotate, another group to translate and another group to scale. Here's an example:

http://jsfiddle.net/cequiel/H54Um/

var stage = new Kinetic.Stage({
    container: 'canvas',
    x: 320,
    y: 240,
    width: 640,
    height: 480
});
var layer = new Kinetic.Layer();
var translateGroup = new Kinetic.Group();
var rotateGroup = new Kinetic.Group();
var scaleGroup = new Kinetic.Group({
    offsetX: 100,
    offsetY: 75
});

// adds a yellow rectangle to the scaleGroup
var rect = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: 200,
    height: 150,
    fill: 'yellow',
    stroke: 'black'
});
scaleGroup.add(rect);

// adds a semitransparent green circle to the scaleGroup
var circ = new Kinetic.Circle({
    x: 200,
    y: 75,
    radius: 60,
    fill: 'green',
    stroke: 'black',
    opacity: 0.2
});
scaleGroup.add(circ);

rotateGroup.add(scaleGroup);
translateGroup.add(rotateGroup);
layer.add(translateGroup);
stage.add(layer);

// action handlers
$('#up').click(function() {
    translateGroup.move(0, -5);
    layer.draw();
});
$('#down').click(function() {
    translateGroup.move(0, +5);
    layer.draw();
});
$('#left').click(function() {
    translateGroup.move(-5, 0);
    layer.draw();
});
$('#right').click(function() {
    translateGroup.move(+5, 0);
    layer.draw();
});
$('#rotate1').click(function() {
    rotateGroup.rotate(0.1);
    layer.draw();
});
$('#rotate2').click(function() {
    rotateGroup.rotate(-0.1);
    layer.draw();
});
$('#scaleh1').click(function() {
    scaleGroup.setScaleX(scaleGroup.getScaleX() + 0.02);
    layer.draw();
});
$('#scaleh2').click(function() {
    scaleGroup.setScaleX(scaleGroup.getScaleX() - 0.02);
    layer.draw();
});
$('#scalev1').click(function() {
    scaleGroup.setScaleY(scaleGroup.getScaleY() + 0.02);
    layer.draw();
});
$('#scalev2').click(function() {
    scaleGroup.setScaleY(scaleGroup.getScaleY() - 0.02);
    layer.draw();
});