collision check of a moving circle

Question

im working on a 2d canvas game. i have a player circle and some circles (random in size and position). i made the random circles move around an random x.y point. this means i have to radii. one is the radius from the rotationpoint to the middlepoint of the "bubble" and the other ist die radius of the bubble itself.

what i need is the collision between playercircle und the bubbles. i know how to create circle to circle collisondetction with pythagorean theorem and it works quite well. However there is a problem:

right now the collision works for the random x and y point + the radius (from rotationpoint) but not for the bubble itself.

what i tryed is to store the x and y of the rotationpoint + the radius to the middlepoint of the bubble into a variable to use them in collision. it works quite fine. if i console.log these x and y points they give me the changing x and ys from the middlepoint of the bubble.

my problem now is that if if substract these point from the playercircle x and y i didnt work with the right collision. so obviously im missing somethig and right now i am at a dead end.

i made a fiddle to show you, the function for the collision is on line 170, variablenames BubbleX and BubbleY. The .counter to animate the around the neg. or positiv:

http://jsfiddle.net/CLrPx/1/ (you need to use the console to the if there is a collision or not)

function collideBubbles(c1, c2) {


    // moving/rotation xPos and yPos
    var bubbleX = c2.xPos + Math.cos(c2.counter / 100) * c2.radius; // actual x and y pos. from bubble!
    var bubbleY = c2.yPos + Math.cos(c2.counter / 100) * c2.radius;


    //console.log('bubbleX:  ' + bubbleX);
    //console.log('bubbleY:  ' + bubbleY);


    var dx = c1.xPos - bubbleX; // change with pos from actual bubble!
    var dy = c1.yPos - bubbleY; // change with pos from actual bubble!
    var distance = c1.radius + c2.bubbleRadius


    // Pytagorean Theorem
    return (dx * dx + dy * dy <= distance * distance);
}