4 files changed, 74 insertions, 139 deletions

diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html
index a1f3afeb..6e643daa 100644
--- a/js/panels/Timeline/Span.reel/Span.html
+++ b/js/panels/Timeline/Span.reel/Span.html
@@ -15,8 +15,7 @@
                             "properties": {
                                 "element": {"#": "spanspace"},
                                 "container_easing" : {"#" : "container_easing"},
-                                "easing_choice" : {"#": "easing_choice"},
-                                "easing_choices" : {"#" : "easing_choices"}
+                                "easing_choice" : {"#": "easing_choice"}
                             }
                         }
 
@@ -27,17 +26,10 @@
 
         <div data-montage-id="spanspace" class="tween_span">
                 <div class="tween_span_bar"></div>
-                <div data-montage-id="container_easing" class="container-easing">
+                <div data-montage-id="container_easing" class="container-easing-choice">
                         <div data-montage-id="easing_choice" class="easing-choice">
                                 ease-out
                         </div>
-                        <ul data-montage-id="easing_choices" class="easing-choices">
-                                <li data-ninja-ease="ease">ease</li>
-                                <li data-ninja-ease="ease-out" class="easing-selected">ease-out</li>
-                                <li data-ninja-ease="ease-in">ease-in</li>
-                                <li data-ninja-ease="ease-in-out">ease-in-out</li>
-                                <li data-ninja-ease="linear">linear</li>
-                        </ul>
                 </div>
         </div>
 
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 8d4c25ae..7347ef51 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -4,8 +4,8 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
-var Montage = require("montage/core/core").Montage;
-var Component = require("montage/ui/component").Component;
+var Montage = require("montage/core/core").Montage,
+        Component = require("montage/ui/component").Component;
 
 var Span = exports.Span = Montage.create(Component, {
 
@@ -112,12 +112,14 @@ var Span = exports.Span = Montage.create(Component, {
                 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";
             }
+            */
             
             // Change easing?
             if (this.easing_choice.innerText !== this.easing) {
@@ -131,7 +133,7 @@ var Span = exports.Span = Montage.create(Component, {
         init: {
                 value: function() {
                         this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
-                        this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
+                        //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
 
                 }
         },
@@ -147,15 +149,30 @@ var Span = exports.Span = Montage.create(Component, {
     handleEasingChoiceClick: {
         value: function(event) {
                 event.stopPropagation();
-                this.areChoicesVisible = true;
-                
-                // Possibly another menu is already open.  If so, we need to close it.
-                if (this.application.ninja.timeline.currentOpenSpanMenu !== false) {
-                        this.application.ninja.timeline.currentOpenSpanMenu.hideEasingMenu();
-                }
-                
-                // Now store a pointer to ourselves for possible future use.
-                this.application.ninja.timeline.currentOpenSpanMenu = this;
+                //this.areChoicesVisible = true;
+                this.application.ninja.timeline.easingMenu.anchor = this.easing_choice;
+                this.application.ninja.timeline.easingMenu.currentChoice = event.currentTarget.innerText;
+
+                function findPos(obj) {
+                        var objReturn = {};
+                        objReturn.top = 0;
+                        objReturn.left = 0;
+
+                                if (obj.offsetParent) {
+
+                                        do {
+                                                objReturn.left += obj.offsetLeft;
+                                                objReturn.top += obj.offsetTop;
+        
+                                        } while (obj = obj.offsetParent);
+                                }
+                                return objReturn;
+                        }
+                        var objPos = findPos(event.target);
+                this.application.ninja.timeline.easingMenu.top = objPos.top +38 - (this.application.ninja.timeline.layout_tracks.scrollTop);
+                this.application.ninja.timeline.easingMenu.left = objPos.left+18 - (this.application.ninja.timeline.layout_tracks.scrollLeft);
+                this.application.ninja.timeline.easingMenu.show();
+                this.application.ninja.timeline.easingMenu.callingComponent = this;
         }
     },
     handleEasingChoicesClick: {
@@ -163,22 +180,26 @@ var Span = exports.Span = Montage.create(Component, {
                 event.stopPropagation();
                         
                         // Remove the pointer to ourselves
-                        this.application.ninja.timeline.currentOpenSpanMenu = false;
+                        //this.application.ninja.timeline.currentOpenSpanMenu = false;
                         
                         // Un-highlight the old choice and highlight the new choice
-                this.easing_choices.querySelector(".easing-selected").classList.remove("easing-selected");
+                this.application.ninja.timeline.easingMenu.popup.contentEl.querySelector(".easing-selected").classList.remove("easing-selected");
                 event.target.classList.add("easing-selected");
                 
                 // Set the easing 
                 this.easing = event.target.dataset.ninjaEase;
                 
+                // Unbind the event handler
+                this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click");
+                
                 // Hide the menu.
                 this.hideEasingMenu();  
         }
     },
     hideEasingMenu: {
         value: function() {
-                this.areChoicesVisible = false;
+                //this.areChoicesVisible = false;
+                this.application.ninja.timeline.easingMenu.hide();
         }
     }
 });
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css
index e5cb4263..040379ea 100644
--- a/js/panels/Timeline/Span.reel/css/Span.css
+++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -27,11 +27,8 @@
   opacity: 0.4;
 }
 
-/*
- * Easing picker
- */
-/* line 42, ../scss/Span.scss */
-.container-easing {
+/* line 38, ../scss/Span.scss */
+.container-easing-choice {
   position: absolute;
   top: 2px;
   right: 8px;
@@ -42,65 +39,26 @@
   background-color: #474747;
 }
 
-/* line 54, ../scss/Span.scss */
-.container-easing,
-.container-easing .easing-choice,
-.container-easing .easing-choices {
+/* line 50, ../scss/Span.scss */
+.container-easing-choice,
+.container-easing-choice .easing-choice,
+.container-easing-choices .easing-choices {
+  font-size: 10px;
   width: 70px;
   white-space: nowrap;
 }
 
-/* line 59, ../scss/Span.scss */
-.container-easing,
-.container-easing .easing-choice {
+/* line 56, ../scss/Span.scss */
+.container-easing-choice,
+.container-easing-choice .easing-choice {
   height: 10px;
 }
 
-/* line 62, ../scss/Span.scss */
-.container-easing .easing-choice {
+/* line 59, ../scss/Span.scss */
+.container-easing-choice .easing-choice {
   position: absolute;
   top: 0px;
   left: 3px;
   width: 67px;
   cursor: pointer;
 }
-
-/* line 69, ../scss/Span.scss */
-.container-easing .easing-choices {
-  position: absolute;
-  display: none;