35 files changed, 4045 insertions, 1401 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index e5c04279..42bbbb86 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -183,7 +183,6 @@ var Montage = require("montage/core/core").Montage,
        // isToggling: Bindable property. Set this (to anything) to trigger a toggle.
        _isToggling: {
-                serializable: true,
                value: true
        },
        isToggling: {
@@ -211,7 +210,6 @@ var Montage = require("montage/core/core").Montage,
        
        prepareForDraw: {
                value: function() {
                        // Get the original value of the overflow property:
                        this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
                        if (this.isCollapsed === false) {
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
new file mode 100644
index 00000000..1c8f808f
--- /dev/null
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+<html lang="en">
+        <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link rel="stylesheet" type="text/css" href="css/EasingMenu.css">
+                <script type="text/montage-serialization">
+            {
+                "owner": {
+                    "prototype": "js/panels/Timeline/EasingMenu.reel",
+                    "properties": {
+                        "element": {"#": "container-easing-menu"}
+                        
+                    }
+                                }
+            }
+        </script>
+        </head>
+        <body>
+                <div data-montage-id="container-easing-menu" class="container-easing-choices">
+                        <ul data-montage-id="easing_choices" class="easing-choices">
+                                <li data-ninja-ease="none">none</li>
+                                <li data-ninja-ease="ease">ease</li>
+                                <li data-ninja-ease="ease-out">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>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
new file mode 100644
index 00000000..ced3ae6a
--- /dev/null
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -0,0 +1,180 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+var Montage = require("montage/core/core").Montage,
+        Component = require("montage/ui/component").Component,
+        Popup = require("montage/ui/popup/popup.reel").Popup;
+var EasingMenu = exports.EasingMenu = Montage.create(Component, {
+    hasTemplate:{
+        value: true
+    },
+        /* Begin: Models */
+        
+        // popup: the initialized component.
+    _popup: {
+                value: null
+    },
+    popup: {
+        get: function() {
+                return this._popup;
+        },
+        set: function(newVal) {
+                this._popup = newVal
+        }
+    },
+    
+    // callingComponent: pointer to the span that called for the menu
+    _callingComponent: {
+        value: null
+    },
+    callingComponent: {
+        get: function() {
+                return this._callingComponent;
+        },
+        set: function(newVal) {
+                this._callingComponent = newVal;
+        }
+    },
+    
+    // anchor: pointer to the anchoring element
+    _anchor: {
+        value: null
+    },
+    anchor: {
+        get: function() {
+                return this._anchor;
+        },
+        set: function(newVal) {
+                this._anchor = newVal;
+        }
+    },
+    
+    
+    _top: {
+        value: null
+    },
+    top: {
+        get: function() {
+                return this._top;
+        },
+        set: function(newVal) {
+                this._top = newVal;
+        }
+    },
+    _left: {
+        value: null
+    },
+    left: {
+        get: function() {
+                return this._left;
+        },
+        set: function(newVal) {
+                this._left = newVal;
+        }
+    },
+    
+    // currentChoice: The data attribute of the current choice
+    _currentChoice: {
+        value: "none"
+    },
+    currentChoice: {
+        get: function() {
+                return this._currentChoice;
+        },
+        set: function(newVal) {
+                this._currentChoice = newVal;
+        }
+    },
+    
+    _isShown: {
+        value: false
+    },
+    
+    /* End: Models */
+    
+    /* Begin: Draw Cycle */
+    willDraw: {
+        value: function() {
+                this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
+                document.addEventListener("scroll", this.handleDocumentScroll.bind(this), false);
+        }
+    },
+    
+    draw: {
+        value: function() {

diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index e5c04279..42bbbb86 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js
@@ -183,7 +183,6 @@ var Montage = require("montage/core/core").Montage,
183		183
184	// isToggling: Bindable property. Set this (to anything) to trigger a toggle.	184	// isToggling: Bindable property. Set this (to anything) to trigger a toggle.
185	_isToggling: {	185	_isToggling: {
186	serializable: true,
187	value: true	186	value: true
188	},	187	},
189	isToggling: {	188	isToggling: {
@@ -211,7 +210,6 @@ var Montage = require("montage/core/core").Montage,
211		210
212	prepareForDraw: {	211	prepareForDraw: {
213	value: function() {	212	value: function() {
214
215	// Get the original value of the overflow property:	213	// Get the original value of the overflow property:
216	this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");	214	this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
217	if (this.isCollapsed === false) {	215	if (this.isCollapsed === false) {


diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html new file mode 100644 index 00000000..1c8f808f --- /dev/null +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
@@ -0,0 +1,35 @@
		1	<!DOCTYPE html>
		2	<!-- <copyright>
		3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
		4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
		5	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
		6	</copyright> -->
		7	<html lang="en">
		8	<head>
		9	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		10	<link rel="stylesheet" type="text/css" href="css/EasingMenu.css">
		11	<script type="text/montage-serialization">
		12	{
		13	"owner": {
		14	"prototype": "js/panels/Timeline/EasingMenu.reel",
		15	"properties": {
		16	"element": {"#": "container-easing-menu"}
		17
		18	}
		19	}
		20	}
		21	</script>
		22	</head>
		23	<body>
		24	<div data-montage-id="container-easing-menu" class="container-easing-choices">
		25	<ul data-montage-id="easing_choices" class="easing-choices">
		26	<li data-ninja-ease="none">none</li>
		27	<li data-ninja-ease="ease">ease</li>
		28	<li data-ninja-ease="ease-out">ease-out</li>
		29	<li data-ninja-ease="ease-in">ease-in</li>
		30	<li data-ninja-ease="ease-in-out">ease-in-out</li>
		31	<li data-ninja-ease="linear">linear</li>
		32	</ul>
		33	</div>
		34	</body>
		35	</html> \ No newline at end of file


diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js new file mode 100644 index 00000000..ced3ae6a --- /dev/null +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -0,0 +1,180 @@
		1	/* <copyright>
		2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
		3	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
		4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
		5	</copyright> */
		6
		7	var Montage = require("montage/core/core").Montage,
		8	Component = require("montage/ui/component").Component,
		9	Popup = require("montage/ui/popup/popup.reel").Popup;
		10
		11	var EasingMenu = exports.EasingMenu = Montage.create(Component, {
		12
		13	hasTemplate:{
		14	value: true
		15	},
		16
		17	/* Begin: Models */
		18
		19	// popup: the initialized component.
		20	_popup: {
		21	value: null
		22	},
		23	popup: {
		24	get: function() {
		25	return this._popup;
		26	},
		27	set: function(newVal) {
		28	this._popup = newVal
		29	}
		30	},
		31
		32	// callingComponent: pointer to the span that called for the menu
		33	_callingComponent: {
		34	value: null
		35	},
		36	callingComponent: {
		37	get: function() {
		38	return this._callingComponent;
		39	},
		40	set: function(newVal) {
		41	this._callingComponent = newVal;
		42	}
		43	},
		44
		45	// anchor: pointer to the anchoring element
		46	_anchor: {
		47	value: null
		48	},
		49	anchor: {
		50	get: function() {
		51	return this._anchor;
		52	},
		53	set: function(newVal) {
		54	this._anchor = newVal;
		55	}
		56	},
		57
		58
		59	_top: {
		60	value: null
		61	},
		62	top: {
		63	get: function() {
		64	return this._top;
		65	},
		66	set: function(newVal) {
		67	this._top = newVal;
		68	}
		69	},
		70	_left: {
		71	value: null
		72	},
		73	left: {
		74	get: function() {
		75	return this._left;
		76	},
		77	set: function(newVal) {
		78	this._left = newVal;
		79	}
		80	},
		81
		82	// currentChoice: The data attribute of the current choice
		83	_currentChoice: {
		84	value: "none"
		85	},
		86	currentChoice: {
		87	get: function() {
		88	return this._currentChoice;
		89	},
		90	set: function(newVal) {
		91	this._currentChoice = newVal;
		92	}
		93	},
		94
		95	_isShown: {
		96	value: false
		97	},
		98
		99	/* End: Models */
		100
		101	/* Begin: Draw Cycle */
		102	willDraw: {
		103	value: function() {
		104	this.element.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
		105	document.addEventListener("scroll", this.handleDocumentScroll.bind(this), false);
		106	}
		107	},
		108
		109	draw: {
		110	value: function() {