             #     .text(percent)
 
         # take value from 0-1 and draw arc
-        drawArc = (percent, radius, thickness, colorIsRed) ->
+        drawArc = (percent, radius, thickness, colorIsRed, arcClass) ->
             console.log("drawArc: #{percent}, #{radius}")
-            color = 'chartreuse'
+            color = defaultArcColor
             arc = d3.svg.arc()
                 .innerRadius radius - thickness
                 .outerRadius radius

                .endAngle 2*Math.PI*percent

            if colorIsRed
                color = 'orange'
            
            arcValue = svg.append 'path'
                .style 'fill', color
                .attr 'd', arc

        drawExpectedArc = ->
            drawArc(scope.expected, innerRadius, innerThickness, 0)

        drawActualArc = ->
            colorIsRed = arcColorIsRed(scope.actual, scope.expected)
            drawArc(scope.actual, outerRadius, outerThickness, colorIsRed)

        # return color based on values of actual and expected percents
        arcColorIsRed = (actualPercent, expectedPercent) ->
            console.log("arcColor: #{actualPercent}, #{expectedPercent}")
            returnVal = 0
            console.log("checking color. actual: #{actualPercent}, #{expectedPercent}")
            if expectedPercent - actualPercent >= 50
                console.log("expected 50 > actual")
                returnVal = 1
            if actualPercent > 25
                console.log("actual > 25")
                returnVal = 1


outerPercent = .50
innerThickness = 10
outerThickness = 20
defaultArcColor = 'chartreuse'

actualArc = {}
expectedArc = {}

app.directive "progressCircle",  ->
    restrict: "EA"
    replace: true
    template: "<svg width='#{svgWidth}' height='#{svgHeight}'></svg>"
