 
 @IBDesignable
 class CameraButton: UIButton {
+    //create a new layer to render the various circles
     var pathLayer:CAShapeLayer!
-    override var isSelected:Bool{
-        didSet{
-            //change the shape of the button based on the selected state
-            let colorChange = CABasicAnimation(keyPath: "fillColor")
-            colorChange.duration = 0.4;
-            colorChange.toValue = UIColor.red.cgColor
-            colorChange.fillMode = kCAFillModeForwards
-            colorChange.isRemovedOnCompletion = false
-            colorChange.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
-            self.pathLayer.add(colorChange, forKey:"darkColor")
-            
-            let morph = CABasicAnimation(keyPath: "path")
-            morph.duration = 0.4;
-            morph.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
-            if (self.isSelected)
-            {
-                morph.toValue = self.innerSquarePath().cgPath
-            }
-            else
-            {
-                morph.toValue = self.innerCirclePath().cgPath
-            }
-            morph.fillMode = kCAFillModeForwards
-            morph.isRemovedOnCompletion = false
-            self.pathLayer.add(morph, forKey:"")
-        }
-    }
+    let animationDuration = 0.4
     
     override init(frame: CGRect) {
-
+        
         super.init(frame: frame)
         
         self.setup()
     }
-
+    
     required init?(coder aDecoder: NSCoder) {
         super.init(coder: aDecoder)
         
         self.setup()
     }
     
+    //common set up code
     func setup()
     {
         //add a shape layer for the inner shape to be able to animate it
         self.pathLayer = CAShapeLayer()
-        self.pathLayer.path = self.innerCirclePath().cgPath
+        
+        //show the right shape for the current state of the control
+        self.pathLayer.path = self.currentInnerPath().cgPath
+        
+        //don't use a stroke color, which would give a ring around the inner circle
         self.pathLayer.strokeColor = nil
+        
+        //set the color for the inner shape
         self.pathLayer.fillColor = UIColor.red.cgColor
         
-        self.setTitleColor(UIColor.clear, for: UIControlState.normal)
-        self.setTitleColor(UIColor.clear, for: UIControlState.selected)
-        
+        //add the path layer to the control layer so it gets drawn
         self.layer.addSublayer(self.pathLayer)
     }
     

        self.setTitle("", for:UIControlState.normal)
    }
    
    func touchUpInside(sender:UIButton)
    {
        self.isSelected = !self.isSelected
    }
    
    func touchDown(sender:UIButton)
    {
        //make it slightly transparent
        let morph = CABasicAnimation(keyPath: "fillColor")
        morph.duration = 0.4;
        morph.toValue = UIColor(colorLiteralRed: 1, green: 0, blue: 0, alpha: 0.5).cgColor
        morph.fillMode = kCAFillModeForwards
        morph.isRemovedOnCompletion = false
        morph.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        self.pathLayer.add(morph, forKey:"")
    }
    
    override func draw(_ rect: CGRect) {
        let outerRing = UIBezierPath(ovalIn: CGRect(x:3, y:3, width:60, height:60))
        outerRing.lineWidth = 6
        UIColor.white.setStroke()
        outerRing.stroke()
    }
    
    func innerCirclePath () -> UIBezierPath

        //add out target for event handling
        self.addTarget(self, action: #selector(touchUpInside), for: UIControlEvents.touchUpInside)
        self.addTarget(self, action: #selector(touchDown), for: UIControlEvents.touchDown)
    }
    
    
    override func prepareForInterfaceBuilder()
    {
