1 files changed, 75 insertions, 3 deletions

diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index bfa6aab8..e5894500 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -13,10 +13,10 @@ var Span = exports.Span = Montage.create(Component, {
         value: true
     },
 
+        // BEGIN: Models
     _spanWidth:{
         value:0
     },
-
     spanWidth:{
         serializable:true,
         get:function () {
@@ -27,16 +27,88 @@ var Span = exports.Span = Montage.create(Component, {
             this.needsDraw = true;
         }
     },
-
+    
+    _isHighlighted: {
+        value: false
+    },
+    isHighlighted: {
+        get: function() {
+                return this._isHighlighted;
+        },
+        set: function(newVal) {
+                if (newVal !== this._isHighlighted) {
+                        this._isHighlighted = newVal;
+                        this.needsDraw = true;
+                }
+        }
+    },
+    
+    _areChoicesVisible: {
+        value: false
+    },
+    areChoicesVisible: {
+        get: function() {
+                return this._areChoicesVisible;
+        },
+        set: function(newVal) {
+                if (newVal !== this._areChoicesVisible) {
+                        this._areChoicesVisible = newVal;
+                        this.needsDraw = true;
+                }
+        }
+    },
+        
+        // BEGIN: draw cycle
+        prepareForDraw: {
+                value: function() {
+                        this.init();
+                }
+        },
+        
     draw:{
         value: function(){
             this.element.style.width = this.spanWidth + "px";
+            
+            // Highlight the span?
+            if (this.isHighlighted === true) {
+                this.element.classList.add("spanHighlight");
+            } else {
+                this.element.classList.remove("spanHighlight");
+            }
+            
+            // Hide or show the choices menu?
+            if (this.areChoicesVisible === true) {
+                this.easing_choices.style.display = "block";
+            } else {
+                this.easing_choices.style.display = "none";
+            }
         }
     },
 
+        // BEGIN: Controllers
+        init: {
+                value: function() {
+                        this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
+                        this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
+                }
+        },
+        
     highlightSpan:{
         value: function(){
-            this.element.classList.add("spanHighlight");
+                // Class add/remove should only be done in draw cycle.
+            // this.element.classList.add("spanHighlight");
+            this.isHighlighted = true;
         }
+    },
+    
+    handleEasingChoiceClick: {
+        value: function(event) {
+                this.areChoicesVisible = true;
+        }
+    },
+    handleEasingChoicesClick: {
+        value: function(event) {
+                this.areChoicesVisible = false;
+        }
     }
 });