rotating sprite around another sprite , using pivot/anchor only changes the image position

[maxxxir]

I am building a pool game i want to make the cue rotate around the white ball

Here is the live code :

http://199.26.84.223/nocol.html

 

Here is the white balll

balls = game.add.group();balls.enableBody = true;balls.physicsBodyType = Phaser.Physics.P2JS;wball = balls.create(350, 240 , 'ballW');wball.body.setCircle(15);wball.body.setCollisionGroup(wballCollisionGroup);wball.body.collides([wballCollisionGroup, ballsCollisionGroup , sidesCollisionGroup , holesCollisionGroup , playerCollisionGroup]);game.physics.p2.setImpactEvents(true);

Hhere is the cue which i call player

player = game.add.sprite( wball.x  , 240 , 'player');game.physics.p2.enable(player , true );player.enableBody = true;player.body.setCollisionGroup(playerCollisionGroup);player.anchor.setTo(-0.5, 0.5);player.pivot.x = wball.x +150;player.pivot.y = 0;

The problem is all pivot or anchor does is change the sprite image position

I got the cue on the right place by using both pivot/anchor and it seems to work fine .. the cue was rotating around the ball but after enabling debug mode here is what i saw

 

Basically only position of image has been changed but he sprite still rotates at the center which is the red part

And if i run this code , ball and cue are already collide and the ball jumps around without player doing anything

 

how can i rotate the cue around the ball without them colliding ?