                 .endAngle 2*Math.PI*percent
 
             if colorIsRed
-                color = 'orange'
-            
+                color = 'red'
+
             arcValue = svg.append 'path'
                 .style 'fill', color
                 .attr 'd', arc
+                .attr 'class', arcClass
 
         drawExpectedArc = ->
-            drawArc(scope.expected, innerRadius, innerThickness, 0)
+            console.log("drawExpectedArc")
+            #d3.selectAll("svg").remove();
+            expectedArc = drawArc(attrs.expected, innerRadius, innerThickness, 0, 'expected')
 
         drawActualArc = ->
-            colorIsRed = arcColorIsRed(scope.actual, scope.expected)
-            drawArc(scope.actual, outerRadius, outerThickness, colorIsRed)
+            console.log("drawActualArc")
+            colorIsRed = arcColorIsRed(attrs.actual, attrs.expected)
+            actualArc = drawArc(attrs.actual, outerRadius, outerThickness, colorIsRed, 'actual')
+            drawText(attrs.actual)
+
+        drawBothArcs = ->
+            console.log("drawBothArcs")
+            drawActualArc()
+            drawExpectedArc()
+
+        transitionBothArcs = ->
+            console.log("transitionBothArcs")
+            transitionActualArc()
+            transitionExpectedArc()
+
+        transitionExpectedArc = ->
+
+
+        transitionActualArc = ->
+
 
         # 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("checking color: actual: #{actualPercent}, #{expectedPercent}")
+            if expectedPercent - actualPercent >= .5
                 console.log("expected 50 > actual")
                 returnVal = 1
-            if actualPercent > 25
+            if actualPercent > .25
                 console.log("actual > 25")
                 returnVal = 1
 

outerPercent = .50
innerThickness = 10
outerThickness = 20

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

            #     .text(percent)

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