Detect if rect is completely inside circle d3js - d3.js

Question

I'm trying to detect if my rectangle is completely enclosed inside the circle. If the rectangle is completely enclosed in the circle I'd like it to stay "steelblue" if it touches or crosses the line I'd like it to switch to red.
I've figured out a way based of the x, y, cx, cy, and r to determine if it is within the bounding box of the circle, but I need to check it against the actual circle.
I have a running example here: http://jsfiddle.net/TheMcMurder/T92jF/
my code is below:
var drag = d3.behavior.drag()
.on("drag", function(){
var self = d3.select(this)
var dx = d3.event.dx;
var dy = d3.event.dy;
var x = self.attr("x")
var y = self.attr("y")
self.attr("x", (+x + dx))
self.attr("y", (+y + dy))
detection(d3.select(".circle"), d3.select(".rect"))
})
var svg = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 400)
.attr("class", "parent_svg")
svg.append("rect")
.attr("width", 400)
.attr("height", 400)
.style("fill", "#e4e5e5")
var rect = svg.append("rect")
.attr("width", 100)
.attr("height", 48)
.attr("x", 50)
.attr("y", 50)
.style("fill", "steelblue")
.attr("class", "rect")
.style("cursor", "all-scroll")
.call(drag)
var circle = svg.append("circle")
.attr("class", "circle")
.attr("r", 300/2)
.attr("cx", 350/2)
.attr("cy", 350/2)
.style("fill", "none")
.attr("stroke", "orange")
.attr("stroke-width", 1)
detection(circle, rect)
function detection(circle, rect){
var cx = (+circle.attr("cx"))
var cy = (+circle.attr("cy"))
var r = (+circle.attr("r"))
var x = (+rect.attr("x"))
var y = (+rect.attr("y"))
var width = (+rect.attr("width"))
var height = (+rect.attr("height"))
var x_range = false
var y_range = false
if ( x > (cx-r) && (x+width) < (cx+r)){
x_range = true;
}
if ( y > (cy-r) && (y+height) < (cy+r)){
y_range = true;
}
if (x_range && y_range){
rect.style("fill", "steelblue")
}else{
rect.style("fill", "red")
}
}

Answer 1

One way of doing this is to iterate over the four corners of the rectangle and check if the distance to the centre of the circle is less than the radius. If this is true for all four points, the rectangle is within the circle. If this is true for 1-3 points, the rectangle touches or intersects the circle.
var sum = 0;
[[x,y], [x+width,y], [x,y+height], [x+width,y+height]].forEach(function(c) {
sum += Math.sqrt(Math.pow(cx - c[0], 2) + Math.pow(cy - c[1], 2)) < r ? 1 : 0;
});
This code constructs the coordinates of the four corner points and counts the number of corners that are within the circle (i.e. distance to centre is less than radius). All you need to do now is to check whether that number is 4 or something else.
Complete demo here.