From 86a801c057fc3b0580d6130be5740c2ee503444f Mon Sep 17 00:00:00 2001
From: hwc487
Date: Fri, 27 Jan 2012 15:52:36 -0800
Subject: updated from old repo

---
 js/panels/Materials/Materials.xml | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'js/panels')

diff --git a/js/panels/Materials/Materials.xml b/js/panels/Materials/Materials.xml
index de07990e..cdeee69e 100644
--- a/js/panels/Materials/Materials.xml
+++ b/js/panels/Materials/Materials.xml
@@ -2,7 +2,17 @@
 <tree id="Materials">
     <folder id="ninjaMaterials" label="Ninja Materials">
 	  <leaf id="UberMaterial" label="Uber" />
+      <leaf id="RadialBlurMaterial" label="Radial Blur" />
+      <leaf id="PulseMaterial" label="Pulse" />
+      <leaf id="TunnelMaterial" label="Tunnel" />
+      <leaf id="TwistMaterial" label="Twist" />
+      <leaf id="KeleidoscopeMaterial" label="Keleidoscope" />
+      <leaf id="JuliaMaterial" label="Julia" />
+      <leaf id="MandelMaterial" label="Mandel" />
+     <leaf id="PlasmaMaterial" label="Plasma" />
         <leaf id="BumpMetalMaterial" label="Bump Metal" />
+      <leaf id="LinearGradientMaterial" label="Linear Gradient" />
+      <leaf id="RadialGradientMaterial" label="Radial Gradient" />
     </folder>
     <folder id="customMaterials" label="Custom Materials">
         <leaf id="CheckerBoard" label="CheckerBoard" />
-- 
cgit v1.2.3


From a39bad832722a10f6556f91e94c3301a41f59bd5 Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Mon, 6 Feb 2012 13:30:49 -0800
Subject: merge new timeline

Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
 js/panels/Timeline/Collapser.js                    | 319 +++++++++++
 js/panels/Timeline/Keyframe.reel/Keyframe.html     |  27 +
 js/panels/Timeline/Keyframe.reel/Keyframe.js       | 147 +++++
 js/panels/Timeline/Keyframe.reel/css/Keyframe.css  |  11 +
 js/panels/Timeline/Layer.reel/Layer.html           | 158 ++++++
 js/panels/Timeline/Layer.reel/Layer.js             | 511 +++++++++++++++++
 js/panels/Timeline/Layer.reel/css/Layer.css        | 322 +++++++++++
 js/panels/Timeline/Layer.reel/images/eye.png       | Bin 0 -> 1331 bytes
 .../Timeline/Layer.reel/images/icon-collapsed.png  | Bin 0 -> 325 bytes
 js/panels/Timeline/Layer.reel/images/icon-eye.png  | Bin 0 -> 550 bytes
 js/panels/Timeline/Layer.reel/images/icon-lock.png | Bin 0 -> 475 bytes
 .../Timeline/Layer.reel/images/icon-minus.png      | Bin 0 -> 161 bytes
 js/panels/Timeline/Layer.reel/images/icon-open.png | Bin 0 -> 323 bytes
 js/panels/Timeline/Layer.reel/images/icon-plus.png | Bin 0 -> 230 bytes
 .../Timeline/Layer.reel/images/lock_closed.png     | Bin 0 -> 1208 bytes
 js/panels/Timeline/Layer.reel/images/lock_open.png | Bin 0 -> 1186 bytes
 .../Layer.reel/images/panelDisclosureIcon.png      | Bin 0 -> 3028 bytes
 js/panels/Timeline/Layer.reel/scss/Layer.scss      | 220 ++++++++
 js/panels/Timeline/Layer.reel/scss/config.rb       |   9 +
 js/panels/Timeline/Span.reel/Span.html             |  27 +
 js/panels/Timeline/Span.reel/Span.js               |  35 ++
 js/panels/Timeline/Span.reel/css/Span.css          |   6 +
 js/panels/Timeline/Style.reel/Style.html           |  91 +++
 js/panels/Timeline/Style.reel/Style.js             | 603 ++++++++++++++++++++
 js/panels/Timeline/Style.reel/css/Style.css        | 133 +++++
 js/panels/Timeline/Style.reel/scss/Style.scss      |  70 +++
 js/panels/Timeline/Style.reel/scss/config.rb       |   9 +
 js/panels/Timeline/TimelineController.js           |  13 -
 .../Timeline/TimelinePanel.reel/TimelinePanel.css  |   6 -
 .../Timeline/TimelinePanel.reel/TimelinePanel.html | 230 +++++++-
 .../Timeline/TimelinePanel.reel/TimelinePanel.js   | 615 +++++++++++++--------
 .../TimelinePanel.reel/css/TimelinePanel.css       | 249 +++++++++
 .../Timeline/TimelinePanel.reel/images/pause.png   | Bin 0 -> 1076 bytes
 .../Timeline/TimelinePanel.reel/images/play.png    | Bin 0 -> 1190 bytes
 .../TimelinePanel.reel/images/play_next.png        | Bin 0 -> 1185 bytes
 .../TimelinePanel.reel/images/play_prev.png        | Bin 0 -> 1199 bytes
 .../Timeline/TimelinePanel.reel/images/plus.png    | Bin 0 -> 1133 bytes
 .../TimelinePanel.reel/images/timetick.jpg         | Bin 0 -> 737 bytes
 .../Timeline/TimelinePanel.reel/images/trash.png   | Bin 0 -> 1154 bytes
 .../Timeline/TimelineTrack.reel/TimelineTrack.html | 112 ++++
 .../Timeline/TimelineTrack.reel/TimelineTrack.js   | 414 ++++++++++++++
 .../TimelineTrack.reel/css/TimelineTrack.css       | 117 ++++
 .../TimelineTrack.reel/images/gridline.jpg         | Bin 0 -> 724 bytes
 .../TimelineTrack.reel/scss/TimelineTrack.scss     |  65 +++
 .../Timeline/TimelineTrack.reel/scss/config.rb     |   9 +
 js/panels/Timeline/Track.reel/Track.html           |  61 ++
 js/panels/Timeline/Track.reel/Track.js             | 186 +++++++
 js/panels/Timeline/Track.reel/css/Track.css        |  26 +
 js/panels/Timeline/Track.reel/images/gridline.jpg  | Bin 0 -> 724 bytes
 .../Timeline/TrackSpacer.reel/TrackSpacer.html     |  26 +
 js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js |  15 +
 .../Timeline/TrackSpacer.reel/css/TrackSpacer.css  |   5 +
 js/panels/Timeline/Tween.reel/Tween.html           |  47 ++
 js/panels/Timeline/Tween.reel/Tween.js             | 109 ++++
 js/panels/Timeline/Tween.reel/css/Tween.css        |   4 +
 55 files changed, 4741 insertions(+), 266 deletions(-)
 create mode 100644 js/panels/Timeline/Collapser.js
 create mode 100644 js/panels/Timeline/Keyframe.reel/Keyframe.html
 create mode 100644 js/panels/Timeline/Keyframe.reel/Keyframe.js
 create mode 100644 js/panels/Timeline/Keyframe.reel/css/Keyframe.css
 create mode 100644 js/panels/Timeline/Layer.reel/Layer.html
 create mode 100644 js/panels/Timeline/Layer.reel/Layer.js
 create mode 100644 js/panels/Timeline/Layer.reel/css/Layer.css
 create mode 100644 js/panels/Timeline/Layer.reel/images/eye.png
 create mode 100644 js/panels/Timeline/Layer.reel/images/icon-collapsed.png
 create mode 100644 js/panels/Timeline/Layer.reel/images/icon-eye.png
 create mode 100644 js/panels/Timeline/Layer.reel/images/icon-lock.png
 create mode 100644 js/panels/Timeline/Layer.reel/images/icon-minus.png
 create mode 100644 js/panels/Timeline/Layer.reel/images/icon-open.png
 create mode 100644 js/panels/Timeline/Layer.reel/images/icon-plus.png
 create mode 100644 js/panels/Timeline/Layer.reel/images/lock_closed.png
 create mode 100644 js/panels/Timeline/Layer.reel/images/lock_open.png
 create mode 100644 js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png
 create mode 100644 js/panels/Timeline/Layer.reel/scss/Layer.scss
 create mode 100644 js/panels/Timeline/Layer.reel/scss/config.rb
 create mode 100644 js/panels/Timeline/Span.reel/Span.html
 create mode 100644 js/panels/Timeline/Span.reel/Span.js
 create mode 100644 js/panels/Timeline/Span.reel/css/Span.css
 create mode 100644 js/panels/Timeline/Style.reel/Style.html
 create mode 100644 js/panels/Timeline/Style.reel/Style.js
 create mode 100644 js/panels/Timeline/Style.reel/css/Style.css
 create mode 100644 js/panels/Timeline/Style.reel/scss/Style.scss
 create mode 100644 js/panels/Timeline/Style.reel/scss/config.rb
 delete mode 100644 js/panels/Timeline/TimelineController.js
 delete mode 100644 js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css
 create mode 100644 js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
 create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/pause.png
 create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play.png
 create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play_next.png
 create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/play_prev.png
 create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/plus.png
 create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/timetick.jpg
 create mode 100644 js/panels/Timeline/TimelinePanel.reel/images/trash.png
 create mode 100644 js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
 create mode 100644 js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
 create mode 100644 js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css
 create mode 100644 js/panels/Timeline/TimelineTrack.reel/images/gridline.jpg
 create mode 100644 js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss
 create mode 100644 js/panels/Timeline/TimelineTrack.reel/scss/config.rb
 create mode 100644 js/panels/Timeline/Track.reel/Track.html
 create mode 100644 js/panels/Timeline/Track.reel/Track.js
 create mode 100644 js/panels/Timeline/Track.reel/css/Track.css
 create mode 100644 js/panels/Timeline/Track.reel/images/gridline.jpg
 create mode 100644 js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html
 create mode 100644 js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js
 create mode 100644 js/panels/Timeline/TrackSpacer.reel/css/TrackSpacer.css
 create mode 100644 js/panels/Timeline/Tween.reel/Tween.html
 create mode 100644 js/panels/Timeline/Tween.reel/Tween.js
 create mode 100644 js/panels/Timeline/Tween.reel/css/Tween.css

(limited to 'js/panels')

diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
new file mode 100644
index 00000000..2fbe8e83
--- /dev/null
+++ b/js/panels/Timeline/Collapser.js
@@ -0,0 +1,319 @@
+/*
+ * Collapser:  Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other.
+ * Required properties:
+ * 		clicker: The element that will be clicked on.
+ * 		content: The element that will expand or collapse as the clicker is clicked on.
+ * Optional properties:
+ * 		isCollapsed: Is the content collapsed.  Set to true on serialization (or initialization) to start content in collapsed state.
+ * 			Can be manually set as well.
+ * 		collapsibleClass: The CSS class to apply to the content and the clicker when collapsed.  Defaults to "collapsible-collapsed".
+ * 		isAnimated: Set to true to apply a transition to expand/collapse (defaults to false).
+ * 		transitionClass: If isAnimated is set to true, the component will apply transitionClass to the content during the 
+ * 			collapse process.  You can then define transitionClass in your style sheet with the desired CSS transitions.
+ * 			Defaults to "collapsible-transition".
+ * 		contentHeight: If both isAnimated and isCollapsedAtStart are set to true, set contentHeight to the height of the content 
+ * 			(in pixels, but without the "px") when not collapsed.  If this value is not set, the first time the content is expanded 
+ * 			the transition will not work. Subsequent collapses (and expansions) will transition as expected.
+ * 		isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to 
+ * 			false for collapsers that will only be operated remotely.
+ * 		toggle(): Manually toggle the expand/collapse of the content.
+ * 		
+ */
+var Montage = require("montage/core/core").Montage,
+	Component = require("montage/ui/component").Component,
+	Collapser = exports.Collapser = Montage.create(Component, {
+
+	// This component has no template.
+	hasTemplate:{
+		value: false
+	},
+	
+	/* === BEGIN: Models === */
+	
+	// contentHeight: Stores the height of the content just before collapse.
+	_contentHeight: {
+		value: 0
+	},
+	contentHeight: {
+		get: function() {
+			return this._contentHeight;
+		},
+		set: function(newVal) {
+			this._contentHeight = newVal;
+		}
+	},
+	
+	// isCollapsing: true if the collapser is collapsing (or expanding); used in the draw cycle.
+	_isCollapsing: {
+		value: false
+	},
+	
+	// isAnimated: boolean to apply transition to expand/collapse 
+	_isAnimated : {
+		value: false
+	},
+	isAnimated: {
+		get: function() {
+			return this._isAnimated;
+		},
+		set: function(newVal) {
+			this._isAnimated = newVal;
+		}
+	},
+	
+	_bypassAnimation : {
+		value: false
+	},
+	bypassAnimation: {
+		get: function() {
+			return this._bypassAnimation;
+		},
+		set: function(newVal) {
+			this._bypassAnimation= newVal;
+		}
+	},
+	
+	// transitionClass: The CSS class to apply to the content during collapse to provide CSS transition.
+	// Note that this CSS class must be defined in your style sheet with the desired transitions.
+	_transitionClass : {
+		value: "collapsible-transition"
+	},
+	transitionClass: {
+		get: function() {
+			return this._transitionClass;
+		},
+		set: function(newVal) {
+			this._transitionClass = newVal;
+		}
+	},
+	
+	// isCollapsed: is the content actually collapsed at this moment
+	_isCollapsed: {
+		value: ""
+	},
+	isCollapsed : {
+		get: function() {
+			return this._isCollapsed;
+		},
+		set: function(newVal) {
+			if (newVal !== this._isCollapsed) {
+				this._isCollapsed = newVal;
+				this.needsDraw = true;
+			}
+			
+		}
+	},
+	
+	// collapsedClass:  the class to apply to the clicker and content when the content is collapsed.
+	_collapsedClass : {
+		value: "collapsible-collapsed"
+	},
+	collapsedClass: {
+		get: function() {
+			return this._collapsedClass;
+		},
+		set: function(newVal) {
+			this._collapsedClass = newVal;
+		}
+	},
+	
+	// _origOverflowValue: Stores the original overflow value of the collapsible element.
+	// Why store the value? While the collapsible element is collapsed, obviously we will need overflow: hidden.
+	// But when the collapsible element is open, we will need overflow to return to its original value.
+	_origOverflowValue : {
+		value: false
+	},
+	
+	// isLabelClickable: Boolean for whether or not the label is clickable. If set to false,
+	// the label click listener is never applied.  For collapsibles that will only be operated remotely.
+	// Defaults to true.
+	_isLabelClickable : {
+		value: true
+	},
+	isLabelClickable : {
+		get: function() {
+			return this._isLabelClickable;
+		},
+		set: function(newVal) {
+			this._isLabelClickable = newVal;
+		}
+	},
+	
+	// labelClickEvent: an event to fire when the label is clicked.
+	_labelClickEvent: {
+		value: false
+	},
+	labelClickEvent: {
+		get: function() {
+			return this._labelClickEvent;
+		},
+		set: function(newVal) {
+			this._labelClickEvent = newVal;
+		}
+	},
+	
+	// toggle: manually toggle the collapser.
+	toggle: {
+		value: function() {
+			if (this.bypassAnimation) {
+				this.isAnimated = false;
+			}
+			this.myContent.classList.remove(this.transitionClass);
+			this.handleCollapserLabelClick();
+		}
+	},
+	
+	/* === END: Models === */
+	
+	/* === BEGIN: Draw cycle === */
+	
+	prepareForDraw: {
+		value: function() {
+			// Add a click listener to the label for expand/collapse
+			if (this.isLabelClickable) {
+				this.clicker.identifier = "collapserLabel";
+				this.clicker.addEventListener("click", this, false);
+			}
+
+			// Get the original value of the overflow property:
+			this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
+			
+			// If the content area is supposed to start out collapsed:
+			if (this.isCollapsed) {
+				this.myContent.style.height = "0px";
+				// Set the overflow to hidden if it's not already
+				if (this._origOverflowValue !== "hidden") {
+					this.myContent.style.overflow = "hidden";
+				}
+				this.myContent.classList.add(this.collapsedClass);
+				this.clicker.classList.add(this.collapsedClass);
+			} else {
+				this.myContent.style.height = "auto";
+				this.myContent.classList.remove(this.collapsedClass);
+				this.clicker.classList.remove(this.collapsedClass);
+			}
+		}
+	},
+	draw: {
+		value: function() {
+			// Is the content area expanding/collapsing?	
+			this.myContent.classList.remove(this.transitionClass);	
+			if (this._isCollapsing) {
+				
+				if (this.isAnimated) {
+					// Apply the transition class to the content.
+					this.myContent.classList.add(this.transitionClass);
+					
+					// Add a handler for the end of the transition, so we can tidy things up after
+					// the transition completes
+					this.myContent.addEventListener("webkitTransitionEnd", this, false);	
+					
+					this.myContent.style.overflow = "hidden";
+				}
+
+				// Next, are we expanding or collapsing?
+				if (this.myContent.classList.contains(this.collapsedClass)) {
+					// It's already collapsed so we are expanding
+					this.myContent.style.height = this.contentHeight + "px";
+					this.isCollapsed = false;
+					
+				} else {
+					// It's expanded so we are collapsing
+					this.myContent.style.height = "0px";
+					this.isCollapsed = true;
+					
+					// Set the overflow to hidden if it isn't already
+					if (this._origOverflowValue !== "hidden") {
+						this.myContent.style.overflow = "hidden";
+					}
+				}
+				
+				// Toggle the CSS class and deactivate the collapsing flag because we are now done.
+				this.myContent.classList.toggle(this.collapsedClass);
+				this.clicker.classList.toggle(this.collapsedClass);
+				this._isCollapsing = false;
+				
+				// Special cases:  If transition does not happen (in the case of a contentHeight of 0 
+				// or isAnimated = false) we need to manually fire it here to do the cleanup.
+				if ((this.contentHeight < 3) || (!this.isAnimated)) {
+					this.handleWebkitTransitionEnd();
+				}
+			}
+		}
+	},
+	
+	/* === END: Draw cycle === */
+	
+	/* === BEGIN: Event handlers === */
+	
+	// Handle a click on the label
+	handleCollapserLabelClick: {
+		value: function() {
+
+			// The user has clicked on one of the expandos.  What should we do?
+			// First, are we expanding or collapsing?
+			if (!this.myContent.classList.contains(this.collapsedClass)) {
+				// We are collapsing!
+				// Save the current height of the content.
+				this.contentHeight = this.myContent.offsetHeight;
+				// Set the current height of the content to a pixel height instead of "auto"
+				// so that the transition can happen.
+				// (This doesn't actually change the appearance of the element, 
+				// so it's okay to do here, outside the draw cycle.)
+				this.myContent.style.height = this.contentHeight + "px";
+				
+				this.isCollapsed = true;
+			} else {
+				this.isCollapsed = false;
+			}
+			
+			// Set the collapsing flag so when the draw cycle begins 
+			// it will know to expand/collapse.
+			this._isCollapsing = true;
+			
+			// Set the component to run its draw cycle.
+			this.needsDraw = true;
+			
+			// Dispatch my labelClick event
+			if (this.labelClickEvent) {
+				this.labelClickEvent(this.bypassAnimation);
+			}
+
+		}
+	},
+	
+	// This handler is bound to the transitionEnd event.  If transitions
+	// are disabled, it is called manually.
+	handleWebkitTransitionEnd: {
+		value: function(event) {
+			
+			// Are we animating the transitions?
+			if (this.isAnimated) {
+				// Yes, transitions are animated.
+				// Remove the event listener so it won't fire again.
+				this.myContent.removeEventListener("webkitTransitionEnd", this, false);
+				
+				// remove the CSS class that supplies the transition
+				this.myContent.classList.remove(this.transitionClass);
+			}
+			
+			// Set the height of the content area to auto; this way it can expand/collapse as interactions
+			// happen within.
+			if (!this.myContent.classList.contains(this.collapsedClass)) {
+				this.myContent.style.height = "auto";
+				// Return the overflow to its original value if it wasn't hidden
+				if (this._origOverflowValue !== "hidden") {
+					this.myContent.style.overflow = this._origOverflowValue;
+				}
+				
+			}
+			
+			if (this.bypassAnimation) {
+				this.bypassAnimation = false;
+				this.isAnimated = true;
+			}
+		}
+	}
+	
+	/* === END: Event handlers === */
+});
\ No newline at end of file
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html
new file mode 100644
index 00000000..bf21994b
--- /dev/null
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    	<link rel="stylesheet" type="text/css" href="css/Keyframe.css">
+        <script type="text/montage-serialization">
+                    {
+                        "owner": {
+                            "module": "js/panels/Timeline/Keyframe.reel",
+                            "name": "Keyframe",
+                            "properties": {
+                                "element": {"#": "keyframespace"},
+                                "tweenkeyframe": {"#": "tweenkeyframe"}
+                            }
+                        }
+
+                    }
+        </script>
+	</head>
+	<body>
+
+    	<div id="keyframespace">
+            <div id="tweenkeyframe" class="tween_keyframe"></div>
+    	</div>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
new file mode 100644
index 00000000..1259fa63
--- /dev/null
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -0,0 +1,147 @@
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+
+var Keyframe = exports.Keyframe = Montage.create(Component, {
+
+    hasTemplate:{
+        value: true
+    },
+
+    _position:{
+        value:0
+    },
+
+    position:{
+        serializable:true,
+        get:function(){
+            return this._position;
+        },
+        set:function(value){
+            this._position = value;
+        }
+    },
+
+    _id:{
+        value:0
+    },
+
+    id:{
+        serializable:true,
+        get:function () {
+            return this._id;
+        },
+        set:function (value) {
+            this._id = value;
+        }
+    },
+
+    _timelinePosition:{
+        value:0
+    },
+
+    timelinePosition:{
+        serializable:true,
+        get:function () {
+            return this._timelinePosition;
+        },
+        set:function (value) {
+            this._timelinePosition = value;
+        }
+    },
+
+    _containingTrack:{
+        value:{}
+    },
+
+    containingTrack:{
+        serializable:true,
+        get:function () {
+            return this._containingTrack;
+        },
+        set:function (value) {
+            this._containingTrack = value;
+        }
+    },
+
+    _animatedProperties:{
+        value:[]
+    },
+
+    animatedProperties:{
+        serializable:true,
+        get:function () {
+            return this._animatedProperties;
+        },
+        set:function (value) {
+            this._animatedProperties = value;
+        }
+    },
+
+    prepareForDraw:{
+        value:function(){
+            this.tweenkeyframe.addEventListener("click", this, false);
+            this.animatedProperties = new Array();
+
+            this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
+            this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
+        }
+    },
+
+    draw:{
+        value:function(){
+            this.tweenkeyframe.style.left = (this.position - 2) + "px";
+        }
+    },
+
+    handleElementChange:{
+        value:function (event) {
+
+            if(event.detail.source && event.detail.source !== "pi") {
+
+                var items = this.application.ninja.selectedElements;
+
+                // update this keyframe's animated properties from the item[0] element props
+                this.animatedProperties["top"] = items[0]._element.offsetTop;
+                this.animatedProperties["left"] = items[0]._element.offsetLeft;
+                this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
+
+                this.containingTrack.updateKeyframeRule();
+            }
+
+
+        }
+    },
+
+    deselect:{
+        value:function(){
+            this.tweenkeyframe.classList.remove("keyframeSelected");
+
+            this.eventManager.removeEventListener("elementChange", this, false);
+        }
+    },
+
+    select:{
+        value:function(){
+            this.application.ninja.timeline.deselectKeyframes();
+            this.tweenkeyframe.classList.add("keyframeSelected");
+            this.application.ninja.timeline.playhead.style.left = (this.timelinePosition - 2) + "px";
+            this.application.ninja.timeline.playheadmarker.style.left = this.timelinePosition + "px";
+            this.application.ninja.timeline.selectedKeyframes.push(this);
+
+            var currentTop = this.animatedProperties["top"] + "px";
+            var currentLeft = this.animatedProperties["left"] + "px";
+
+            this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "top", currentTop);
+            this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "left", currentLeft);
+
+            // turn on element change event listener
+            this.eventManager.addEventListener("elementChange", this, false);
+        }
+    },
+
+    handleClick:{
+        value:function(ev){
+            this.select();
+        }
+    }
+});
diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
new file mode 100644
index 00000000..e66bcf10
--- /dev/null
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -0,0 +1,11 @@
+.tween_keyframe{
+    position: absolute;
+    height: 16px;
+    width: 4px;
+    background-color: white;
+    z-index: 23;
+}
+
+.tween_keyframe.keyframeSelected{
+    background-color: blue;
+}
\ No newline at end of file
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
new file mode 100644
index 00000000..add6cb38
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    	<link rel="stylesheet" type="text/css" href="css/Layer.css">
+   		<script type="text/montage-serialization">
+            {
+                "owner": {
+                    "module": "js/panels/Timeline/Layer.reel",
+                    "name": "Layer",
+                    "properties": {
+                        "element": {"#": "layer"},
+						"styleRepetition" : {"@":"repetition1"},
+						"dynamicLayerName" : {"@":"dtext1"},
+						"slotStyle" : {"@":"slot1"}
+                    }
+                },
+	            "dtext1" : {
+	            	"module" : "montage/ui/dynamic-text.reel",
+	            	"name" : "DynamicText",
+	            	"properties" : {
+	            		"element" : {"#" : "layer-label-text"}
+	            	},
+	            	"bindings" : {
+	            		"value" : {
+	            			"boundObject" : {"@": "owner"},
+	            			"boundObjectPropertyPath" : "layerName",
+	            			"oneway" : false
+	            		}
+	            	}
+	            },
+	            "repetition1": {
+	                "module": "montage/ui/repetition.reel",
+	                "name": "Repetition",
+	                "properties": {
+	                    "element": {"#": "style-container"},
+	                    "isSelectionEnabled" : true
+	                },
+	                "bindings": {
+	                    "objects": {
+	                        "boundObject": {"@": "owner"},
+	                        "boundObjectPropertyPath": "arrLayerStyles",
+	                        "oneway": false
+	                    }
+	                }
+	            },
+	            "style" : {
+	            	"module" : "js/panels/Timeline/Style.reel",
+	            	"name" : "LayerStyle",
+	            	"properties" : {
+	            		"element" : {"#" : "layer-style"}
+	            	},
+	            	"bindings" : {
+	            		"styleID" : {
+	            			"boundObject" : {"@": "repetition1"},
+	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.styleID",
+	            			"oneway" : false
+	            		},
+	            		"whichView" : {
+	            			"boundObject" : {"@": "repetition1"},
+	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.whichView",
+	            			"oneway" : false
+	            		},
+	            		"editorProperty" : {
+	            			"boundObject" : {"@": "repetition1"},
+	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.editorProperty",
+	            			"oneway" : false
+	            		},
+	            		"editorValue" : {
+	            			"boundObject" : {"@": "repetition1"},
+	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.editorValue",
+	            			"oneway" : false
+	            		},
+	            		"ruleTweener" : {
+	            			"boundObject" : {"@": "repetition1"},
+	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.ruleTweener",
+	            			"oneway" : false
+	            		}
+	            	}
+	            }
+            }
+        </script>
+	</head>
+	<body>
+    
+		<div id="layer" class="container-layer">
+			<div class="label-layer">
+				<span class="collapsible-label" id="layer-label-text" spellcheck="false">Label</span>
+				<span class="collapsible-clicker collapsible-collapsed"></span>
+				<div class="cssbutton button-lock"></div>
+				<div class="cssbutton button-visible"></div>
+			</div>
+			<div class="collapsible-content content-layer collapsible-collapsed">
+				<div class="label-position">
+					<span class="collapsible-label">Position</span>
+					<span class="collapsible-clicker clicker-position"></span>
+				</div>
+				<div class="content-position collapsible-content">
+					<div class="layout-table">
+						<div class="layout-row">
+							<div class="layout-cell">X</div>
+							<div class="layout-cell">100px</div>
+						</div>
+						<div class="layout-row">
+							<div class="layout-cell">Y</div>
+							<div class="layout-cell">100px</div>
+						</div>
+						<div class="layout-row">
+							<div class="layout-cell">Z</div>
+							<div class="layout-cell">100px</div>
+						</div>
+					</div>
+				</div>
+				<div class="label-transform">
+					<span class="collapsible-label">Transform</span>
+					<span class="clicker-transform collapsible-clicker"></span>
+				</div>
+				<div class="content-transform collapsible-content">
+					<div class="layout-table">
+						<div class="layout-row">
+							<div class="layout-cell">Scale X</div>
+							<div class="layout-cell">100px</div>
+						</div>
+						<div class="layout-row">
+							<div class="layout-cell">Scale Y</div>
+							<div class="layout-cell">100px</div>
+						</div>
+						<div class="layout-row">
+							<div class="layout-cell">Skew X</div>
+							<div class="layout-cell">100px</div>
+						</div>
+						<div class="layout-row">
+							<div class="layout-cell">Skew Y</div>
+							<div class="layout-cell">100px</div>
+						</div>
+						<div class="layout-row">
+							<div class="layout-cell">Rotation</div>
+							<div class="layout-cell">100px</div>
+						</div>
+					</div>
+					
+				</div>
+				<div class="label-style">
+					<span class="collapsible-label">Style</span>
+					<span class="clicker-style collapsible-clicker"></span>
+					<div class="cssbutton button-delete"></div>
+					<div class="cssbutton button-add"></div>
+				</div>
+				<div class="content-style collapsible-content">
+					<div class="" id="style-container">
+						<div class="style-row" id="layer-style">
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
new file mode 100644
index 00000000..29171272
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -0,0 +1,511 @@
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+var Collapser = require("js/panels/Timeline/Collapser").Collapser;
+var Hintable = require("js/components/hintable.reel").Hintable;
+var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle;
+var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText;
+var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
+
+var Layer = exports.Layer = Montage.create(Component, {
+
+    hasTemplate:{
+        value: true
+    },
+    
+    /* Begin: Models */
+   
+	/* Main collapser model: the main collapser for the layer */
+    _mainCollapser : {
+    	value: false
+    },
+    mainCollapser: {
+    	get: function() {
+    		return this._mainCollapser;
+    	},
+    	set: function(newVal) {
+    		this._mainCollapser = newVal;
+    	}
+    },
+    
+    /* Style models: the array of styles, and the repetition that uses them */
+    _arrLayerStyles : {
+    	serializable: true,
+		enumerable: true,
+        serializable: true,
+	    value: []
+    },
+    arrLayerStyles : {
+    	serializable: true,
+        enumerable: true,
+        serializable: true,
+    	get: function() {
+    		return this._arrLayerStyles;
+    	},
+    	set: function(newVal) {
+    		this._arrLayerStyles = newVal;
+    	}
+    },
+    _styleRepetition : {
+    	value: false
+    },
+    styleRepetition : {
+    	get: function() {
+    		return this._styleRepetition;
+    	},
+    	set: function(newVal) {
+    		this._styleRepetition = newVal;
+    	}
+    },
+    _styleCounter : {
+    	value: 0
+    },
+
+	/* Layer models: the name, ID, and selected and animation booleans for the layer */
+    _layerName:{
+    	serializable: true,
+        value:null,
+        writable:true,
+        enumerable:true
+    },
+    
+    layerName:{
+    	serializable: true,
+        get:function(){
+            return this._layerName;
+        },
+        set:function(newVal){
+        	if (newVal !== this._layerName) {
+        		this._layerEditable.value = newVal;
+	        	this._layerName = newVal;
+	        	this._layerEditable.needsDraw = true;
+	        	this.needsDraw = true;
+	        	
+        	}
+        	
+        }
+    },
+    _layerID:{
+        value:null,
+        writable:true,
+    	serializable: true,
+        enumerable:true
+    },
+
+    layerID:{
+    	serializable: true,
+        get:function(){
+            return this._layerID;
+        },
+        set:function(value){
+            this._layerID = value;
+        }
+    },
+    _isSelected:{
+        value: false,
+        writable: true,
+        enumerable: false
+    },
+
+    isSelected:{
+        get:function(){
+            return this._isSelected;
+        },
+        set:function(value){
+            this._isSelected = value;
+        }
+    },
+    _isAnimated:{
+        value: false,
+        writable: true,
+        enumerable: false
+    },
+
+    isAnimated:{
+        get:function(){
+            return this._isAnimated;
+        },
+        set:function(value){
+            this._isAnimated = value;
+        }
+    },
+    _justAdded: {
+    	value: false
+    },
+    _layerEditable : {
+    	value: false
+    },
+    
+    // Are the various collapsers collapsed or not
+    _isMainCollapsed : {
+    	value: ""
+    },
+    isMainCollapsed : {
+    	get: function() {
+    		return this._isMainCollapsed;
+    	},
+    	set: function(newVal) {
+    		if (newVal !== this._isMainCollapsed) {
+    			this._isMainCollapsed = newVal;
+    			this.needsDraw = true;
+    		}
+    	}
+    },
+    
+    _isTransformCollapsed : {
+    	value: true
+    },
+    isTransformCollapsed : {
+    	get: function() {
+    		return this._isTransformCollapsed;
+    	},
+    	set: function(newVal) {
+    		if (newVal !== this._isTransformCollapsed) {
+    			this._isTransformCollapsed = newVal;
+    			this.needsDraw = true;
+    		}
+    	}
+    },
+    
+    _isPositionCollapsed : {
+    	value: true
+    },
+    isPositionCollapsed : {
+    	get: function() {
+    		return this._isPositionCollapsed;
+    	},
+    	set: function(newVal) {
+    		if (newVal !== this._isPositionCollapsed) {
+    			this._isPositionCollapsed = newVal;
+    			this.needsDraw = true;
+    		}
+    	}
+    },
+    
+    _isStyleCollapsed : {
+    	value: true
+    },
+    isStyleCollapsed : {
+    	get: function() {
+    		return this._isStyleCollapsed;
+    	},
+    	set: function(newVal) {
+    		if (newVal !== this._isStyleCollapsed) {
+    			this._isStyleCollapsed = newVal;
+    			this.needsDraw = true;
+    		}
+    	}
+    },
+    
+
+	/* END: Models */
+
+	/* Begin: Draw cycle */
+    prepareForDraw: {
+        value: function() {
+        	
+        	// Initialize myself
+			this.init();
+			
+        	var that = this;
+        	
+			this.positionCollapser = Collapser.create();
+    		this.transformCollapser = Collapser.create();
+    		this.styleCollapser = Collapser.create();
+    		
+        	// Make it editable!
+        	this._layerEditable = Hintable.create();
+        	this._layerEditable.element = this.titleSelector;
+        	this.titleSelector.identifier = "selectorEditable";
+        	this.titleSelector.addEventListener("click", this, false);
+        	this._layerEditable.addEventListener("blur", function(event) {
+        		that.handleSelectorEditableBlur(event);
+        	}, false);
+        	this._layerEditable.addEventListener("change", function(event) {
+				that.dynamicLayerName.value = that._layerEditable.value;
+				that.needsDraw = true;
+        	}, false);
+        	this._layerEditable.editingClass = "editable2";
+        	this._layerEditable.value = this.layerName;
+        	this._layerEditable.needsDraw = true;
+        	
+        	// Change the markup into collapsible sections using the nifty Collapser component!
+        	this.mainCollapser = Collapser.create();
+        	this.mainCollapser.clicker = this.clicker;
+        	this.mainCollapser.myContent = this.myContent;
+        	this.mainCollapser.contentHeight = 60;
+        	this.myContent.style.height = "0px";
+            this.mainCollapser.element = this.element;
+            //this.mainCollapser.isCollapsedAtStart = true;
+            this.mainCollapser.isCollapsed = this.isMainCollapsed;
+            this.mainCollapser.isAnimated = true;
+            this.element.setAttribute("data-layerid", this.layerID);
+            this.mainCollapser.labelClickEvent = function(boolBypass) {
+				var newEvent = document.createEvent("CustomEvent");
+				newEvent.initCustomEvent("layerEvent", false, true);
+				newEvent.layerEventLocale = "content-main";
+				newEvent.layerEventType = "labelClick";
+				newEvent.layerID = that.layerID;
+				newEvent.bypassAnimation = boolBypass;
+				defaultEventManager.dispatchEvent(newEvent);
+				that.isMainCollapsed = that.mainCollapser.isCollapsed;
+            }
+    		this.mainCollapser.needsDraw = true;
+
+            this.positionCollapser.clicker = this.clickerPosition;
+            this.positionCollapser.myContent = this.contentPosition;
+            this.positionCollapser.element = this.element;
+            this.positionCollapser.contentHeight = 60;
+            // this.positionCollapser.isCollapsedAtStart = true;
+            this.positionCollapser.isCollapsed = this.isPositionCollapsed;
+            this.positionCollapser.isAnimated = true;
+            this.positionCollapser.labelClickEvent = function(boolBypass) {
+				var newEvent = document.createEvent("CustomEvent");
+				newEvent.initCustomEvent("layerEvent", false, true);
+				newEvent.layerEventLocale = "content-position";
+				newEvent.layerEventType = "labelClick";
+				newEvent.layerID = that.layerID;
+				newEvent.bypassAnimation = boolBypass;
+				defaultEventManager.dispatchEvent(newEvent);
+				that.isPositionCollapsed = that.positionCollapser.isCollapsed;
+            }
+            this.positionCollapser.needsDraw = true;
+            
+            this.transformCollapser.clicker = this.clickerTransform;
+            this.transformCollapser.myContent = this.contentTransform;
+            this.transformCollapser.element = this.element;
+            this.transformCollapser.contentHeight = 100;
+            // this.transformCollapser.isCollapsedAtStart = true;
+            this.transformCollapser.isCollapsed = this.isTransformCollapsed;
+            this.transformCollapser.isAnimated = true;
+            this.transformCollapser.labelClickEvent = function(boolBypass) {
+				var newEvent = document.createEvent("CustomEvent");
+				newEvent.initCustomEvent("layerEvent", false, true);
+				newEvent.layerEventLocale = "content-transform";
+				newEvent.layerEventType = "labelClick";
+				newEvent.layerID = that.layerID;
+				newEvent.bypassAnimation = boolBypass;
+				defaultEventManager.dispatchEvent(newEvent);
+				that.isTransformCollapsed = that.transformCollapser.isCollapsed;
+            }
+            this.transformCollapser.needsDraw = true;
+            
+            this.styleCollapser.clicker = this.clickerStyle;
+            this.styleCollapser.myContent = this.contentStyle;
+            this.styleCollapser.element = this.element;
+            this.styleCollapser.isCollapsed = this.isStyleCollapsed;
+            this.styleCollapser.isAnimated = true;
+            this.styleCollapser.labelClickEvent = function(boolBypass) {
+				var newEvent = document.createEvent("CustomEvent");
+				newEvent.initCustomEvent("layerEvent", false, true);
+				newEvent.layerEventLocale = "content-style";
+				newEvent.layerEventType = "labelClick";
+				newEvent.layerID = that.layerID;
+				newEvent.bypassAnimation = boolBypass;
+				defaultEventManager.dispatchEvent(newEvent);
+				that.isStyleCollapsed = that.styleCollapser.isCollapsed;
+            }
+            this.styleCollapser.needsDraw = true;
+
+            // Add event listeners to add and delete style buttons
+            this.buttonAddStyle.identifier = "addStyle";
+            this.buttonAddStyle.addEventListener("click", this, false);
+            
+            this.buttonDeleteStyle.identifier = "deleteStyle";
+            this.buttonDeleteStyle.addEventListener("click", this, false);
+
+        }
+    },
+    draw: {
+    	value: function() {
+    		
+    		// Coordinate the collapsers
+            if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) {
+            	this.mainCollapser.bypassAnimation = true;
+            	this.mainCollapser.toggle();
+            }
+            if (this.positionCollapser.isCollapsed !== this.isPositionCollapsed) {
+            	this.positionCollapser.bypassAnimation = true;
+            	this.positionCollapser.toggle();
+            }
+            if (this.transformCollapser.isCollapsed !== this.isTransformCollapsed) {
+            	this.transformCollapser.bypassAnimation = true;
+            	this.transformCollapser.toggle();
+            }
+            if (this.styleCollapser.isCollapsed !== this.isStyleCollapsed) {
+            	this.styleCollapser.bypassAnimation = true;
+            	this.styleCollapser.toggle();
+            }
+    	}
+    },
+	/* End: Draw cycle */
+	
+	/* Begin: Controllers */
+	
+	// Initialize a just-created layer with some basic defaults and needed selectors.
+	init: {
+		value: function() {
+			// Default some vars
+			//this.arrLayerStyles = [];
+			
+			// Get some selectors.
+        	this.label = this.element.querySelector(".label-layer");
+        	this.titleSelector = this.label.querySelector(".collapsible-label");
+        	this.clicker = this.element.querySelector(".collapsible-clicker");
+        	this.myContent = this.element.querySelector(".content-layer");
+        	this.clickerPosition = this.element.querySelector(".clicker-position");
+        	this.contentPosition = this.element.querySelector(".content-position");
+        	this.clickerTransform = this.element.querySelector(".clicker-transform");
+        	this.contentTransform = this.element.querySelector(".content-transform");
+        	this.clickerStyle = this.element.querySelector(".clicker-style");
+        	this.contentStyle = this.element.querySelector(".content-style");
+        	this.buttonAddStyle = this.element.querySelector(".button-add");
+        	this.buttonDeleteStyle = this.element.querySelector(".button-delete");
+		}
+	},
+    selectLayer:{
+        value:function(){
+            // this.mainCollapser.header.classList.add("layerSelected");
+            this.element.classList.add("layerSelected");
+            this.isSelected = true;
+        }
+    },
+    deselectLayer:{
+        value:function(){
+            // this.mainCollapser.header.classList.remove("layerSelected");
+            this.element.classList.remove("layerSelected");
+            this.isSelected = false;
+        }
+    },
+	addStyle : {
+		value: function() {
+			// Add a new style rule.  It should be added above the currently selected rule, 
+			// Or at the end, if no rule is selected.
+
+			var newLength = 0, 
+				mySelection = 0,
+				// newStyle = LayerStyle.create(),
+				newStyle = {},
+				newEvent = document.createEvent("CustomEvent");
+				
+			newEvent.initCustomEvent("layerEvent", false, true);
+			newEvent.layerEventLocale = "styles";
+			newEvent.layerEventType = "newStyle";
+			newEvent.layerID = this.layerID;
+			newEvent.styleID = this.layerID + "@" + this._styleCounter;
+			
+			newStyle.styleID = newEvent.styleID;
+			newStyle.whichView = "hintable";
+			newStyle.editorProperty = "";
+			newStyle.editorValue = "";
+			newStyle.ruleTweener = false;
+			
+			if (!!this.styleRepetition.selectedIndexes) {
+				mySelection = this.styleRepetition.selectedIndexes[0];
+				this.arrLayerStyles.splice(mySelection, 0, newStyle);
+				this.styleRepetition.selectedIndexes = [mySelection];
+			} else {
+				newLength = this.arrLayerStyles.length;
+				this.arrLayerStyles.push(newStyle);
+				mySelection = this.arrLayerStyles.length;
+				this.styleRepetition.selectedIndexes = [mySelection-1];
+			}
+			
+			// Set up the event info and dispatch the event
+
+			newEvent.styleSelection = mySelection;
+			defaultEventManager.dispatchEvent(newEvent);
+
+		}
+	},
+	deleteStyle : {
+		value: function() {
+			var newEvent = document.createEvent("CustomEvent"),
+				selectedIndex = 0;
+			if (this.arrLayerStyles.length > 0) {
+				if (!!this.styleRepetition.selectedIndexes) {
+					
+					selectedIndex = this.styleRepetition.selectedIndexes[0];
+
+					// Set up the event info and dispatch the event
+					newEvent.initCustomEvent("layerEvent", false, true);
+					newEvent.layerEventLocale = "styles";
+					newEvent.layerEventType = "deleteStyle";
+					newEvent.layerID = this.layerID;
+					newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID;
+					newEvent.styleSelection = selectedIndex;
+					defaultEventManager.dispatchEvent(newEvent);
+					
+					// Delete the style from the view
+					this.arrLayerStyles.splice(selectedIndex, 1);
+					
+				} else {
+					alert('TODO: what should happen when no rule is selected and the user clicks the delete button?')
+				}
+			}
+		}
+	},
+	/* End: Controllers */
+    
+	/* Begin: Event handlers */
+	handleAddStyleClick: {
+		value: function(event) {
+			// Stop the event propagation
+			event.stopPropagation();
+			this.addStyle();
+		}
+	},
+	handleDeleteStyleClick: {
+		value: function(event) {
+			event.stopPropagation();
+			this.deleteStyle();
+		}
+	},
+	handleSelectorEditableClick: {
+		value: function(event) {
+		}
+	},
+	handleSelectorEditableBlur : {
+		value: function(event) {
+        	this.titleSelector.scrollLeft = 0;
+		}
+	},
+	handleSelectorEditableChange: {
+		value: function(event) {
+			this.layerName = this.dynamicLayerName.value;
+			this.needsDraw = true;
+		}
+	},
+	/* End: Event handlers */
+	
+	/* Begin: Logging routines */
+    _boolDebug: {
+    	enumerable: false,
+    	value: false // set to true to enable debugging to console; false for turning off all debugging.
+    },
+    boolDebug: {
+    	get: function() {
+    		return this._boolDebug;
+    	},
+    	set: function(boolDebugSwitch) {
+    		this._boolDebug = boolDebugSwitch;
+    	}
+    },
+    log: {
+    	value: function(strMessage) {
+    		if (this.boolDebug) {
+    			console.log(this.getLineNumber() + ": " + strMessage);
+    		}
+    	}
+    },
+    getLineNumber: {
+    	value: function() {
+			try {
+			   throw new Error('bazinga')
+			}catch(e){
+				return e.stack.split("at")[3].split(":")[2];
+			}
+    	}
+    }
+	/* End: Logging routines */
+
+});
\ No newline at end of file
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
new file mode 100644
index 00000000..39869c92
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -0,0 +1,322 @@
+@charset "UTF-8";
+/* Layer.scss
+ * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
+ */
+/* <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> */
+/*
+ * _colors.scss
+ * Defines the colors for the UI of the application.
+ * To create a new theme, copy this file and change the values as desired.
+ * Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values.
+ */
+/* Colors for radio buttons and other form elements */
+/* Base colors for dividers 
+ *
+ * Dividers consist of a div with a background color and either 
+ * a top & bottom border (in the case of horizontal dividers)
+ * or a left & right border (in the case of vertical dividers),
+ * for a total of three different colors.
+ * 
+ */
+/* top and left */
+/* Middle */
+/* Bottom and right */
+/* Main background color of entire app */
+/* Main app background color. */
+/* rgba version */
+/* Main app border color */
+/* color of drop shadows */
+/* Stage color */
+/* body border color */
+/* Body background color */
+/* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */
+/* Colors for tools: background, text, how they interact with the UI */
+/* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */
+/* used for editable items in their non-edit state, etc. */
+/* Border for panel and for block elements */
+/* Shadow for text and block elements */
+/* Colors for scroll bars */
+/* <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> */
+/*
+ * themes/themename/mixins.scss
+ * Mixins that are theme-dependent (e.g. sprite mixins, etc)
+ */
+/* <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> */
+/*
+ * mixins.scss
+ * Generic mixins.  Theme-specific mixins (e.g. for sprites) 
+ * should go in the theme/themename/mixins.scss file.
+ */
+/* line 16, ../scss/Layer.scss */
+.layerLabel {
+  width: 100%;
+  color: white;
+  height: 21px;
+  font-family: 'Droid Sans';
+  font-size: 12px;
+  text-shadow: 1px 1px 1px #3a3a3a;
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+}
+
+/* line 26, ../scss/Layer.scss */
+.layerLabel.layerSelected {
+  background-color: #b2b2b2;
+  color: #242424;
+}
+
+/* line 30, ../scss/Layer.scss */
+.layerLabel {
+  width: 100%;
+  height: 18px;
+  padding-left: 25px;
+  padding-top: 2px;
+  -webkit-box-flex: 1;
+}
+
+/* line 37, ../scss/Layer.scss */
+.layerDisclosure {
+  background-image: url("../images/panelDisclosureIcon.png");
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 16px;
+  /*float: left;*/
+  -webkit-transition-property: rotate;
+  -webkit-transition-duration: 0.2s;
+  -webkit-transition-timing-function: linear;
+  padding-right: 2px;
+  -webkit-box-flex: 0;
+}
+
+/* line 50, ../scss/Layer.scss */
+.layerHide {
+  background-image: url("../images/eye.png");
+  background-repeat: no-repeat;
+  /*float: right;*/
+  width: 16px;
+  height: 16px;
+  padding-right: 4px;
+  -webkit-box-flex: 0;
+}
+
+/* line 59, ../scss/Layer.scss */
+.layerLock {
+  background-image: url("../images/lock_open.png");
+  background-repeat: no-repeat;
+  /*float: right;*/
+  width: 16px;
+  height: 16px;
+  padding-right: 4px;
+  -webkit-box-flex: 0;
+}
+
+/******************************************/
+/* line 71, ../scss/Layer.scss */
+.container-layer {
+  background-color: #474747;
+  color: white;
+  font-size: 12px;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+/* line 77, ../scss/Layer.scss */
+.selected .container-layer {
+  background-color: #474747;
+}
+
+/* line 80, ../scss/Layer.scss */
+.selected .container-layer .label-layer {
+  background-color: #b2b2b2;
+  color: #242424;
+}
+
+/* line 85, ../scss/Layer.scss */
+.userlayers .collapsible-label {
+  display: block;
+  width: 100px;
+  height: 21px;
+  line-height: 20px;
+  color: white;
+  margin-left: 30px;
+  margin-right: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* line 97, ../scss/Layer.scss */
+.layerSelected .label-layer {
+  background-color: #b2b2b2;
+  color: #242424;
+}
+
+/* line 101, ../scss/Layer.scss */
+.content-layer {
+  background-color: #474747;
+  color: white;
+}
+
+/* line 105, ../scss/Layer.scss */
+.content-layer .collapsible-label {
+  background-position: 14px 5px;
+  border-width: 0px;
+}
+
+/* line 112, ../scss/Layer.scss */
+.label-layer,
+.label-position,
+.label-transform,
+.label-style {
+  position: relative;
+  border-bottom: 1px solid #505050;
+  cursor: pointer;
+}
+
+/* line 119, ../scss/Layer.scss */
+.content-layer .collapsible-label,
+.content-layer .collapsible-content {
+  font-size: 11px;
+}
+
+/* line 123, ../scss/Layer.scss */
+.collapsible-clicker {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  top: 5px;
+  left: 5px;
+  margin: 0px;
+  padding: 0px;
+  background-image: url(../images/icon-open.png);
+  background-repeat: no-repeat;
+}
+
+/* line 134, ../scss/Layer.scss */
+.collapsible-clicker.collapsible-collapsed {
+  background-image: url(../images/icon-collapsed.png);
+}
+
+/* line 137, ../scss/Layer.scss */
+.collapsible-content .collapsible-clicker {
+  left: 12px;
+}
+
+/* line 140, ../scss/Layer.scss */
+.content-layer.collapsible-collapsed {
+  height: 0px;
+  overflow: hidden;
+}
+
+/* line 146, ../scss/Layer.scss */
+.label-layer .cssbutton,
+.label-style .cssbutton {
+  width: 14px;
+  height: 14px;
+  overflow: hidden;
+  position: absolute;
+  background-repeat: no-repeat;
+}
+
+/* line 153, ../scss/Layer.scss */
+.label-layer .button-lock {
+  background-image: url(../images/icon-lock.png);
+  top: 3px;
+  right: 27px;
+}
+
+/* line 158, ../scss/Layer.scss */
+.label-layer .button-visible {
+  background-image: url(../images/icon-eye.png);
+  top: 3px;
+  right: 7px;
+}
+
+/* line 163, ../scss/Layer.scss */
+.label-style .button-add {
+  background-image: url(../images/icon-plus.png);
+  width: 15px;
+  height: 15px;
+  top: 3px;
+  right: 11px;
+}
+
+/* line 170, ../scss/Layer.scss */
+.label-style .button-delete {
+  background-image: url(../images/icon-minus.png);
+  width: 15px;
+  height: 15px;
+  top: 3px;
+  right: 31px;
+}
+
+/* line 177, ../scss/Layer.scss */
+.collapsible-content .layout-table {
+  width: 99.9%;
+}
+
+/* line 180, ../scss/Layer.scss */
+.content-layer .collapsible-content {
+  padding-left: 30px;
+}
+
+/* line 183, ../scss/Layer.scss */
+.collapsible-content .collapsible-content .layout-table .layout-row .layout-cell {
+  width: 40%;
+  height: 20px;
+  border-bottom: 1px solid #505050;
+  line-height: 20px;
+  text-align: left;
+}
+
+/* line 190, ../scss/Layer.scss */
+.collapsible-content .layout-table:first-child {
+  border-top: 1px solid #505050;
+}
+
+/* line 193, ../scss/Layer.scss */
+.collapsible-transition {
+  -webkit-transition-property: height;
+  -webkit-transition-duration: 200ms;
+  -webkit-transition-timing-function: ease-in;
+}
+
+/* line 199, ../scss/Layer.scss */
+.editable2 {
+  height: 20px;
+  background-color: #242424 !important;
+  color: #b2b2b2 !important;
+  border-width: 0px;
+  font-size: 11px;
+  overflow: hidden;
+  -webkit-user-select: text;
+  text-overflow: clip;
+}
+
+/* styles elements */
+/* line 211, ../scss/Layer.scss */
+.content-style .item-template {
+  display: none;
+}
+
+/* line 214, ../scss/Layer.scss */
+.content-style .layout-row.selected .layout-cell {
+  background-color: #b2b2b2;
+  color: #242424;
+}
+
+/* line 218, ../scss/Layer.scss */
+.style-row {
+  height: 20px;
+}
diff --git a/js/panels/Timeline/Layer.reel/images/eye.png b/js/panels/Timeline/Layer.reel/images/eye.png
new file mode 100644
index 00000000..8ec1759e
Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/eye.png differ
diff --git a/js/panels/Timeline/Layer.reel/images/icon-collapsed.png b/js/panels/Timeline/Layer.reel/images/icon-collapsed.png
new file mode 100644
index 00000000..d2823a89
Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-collapsed.png differ
diff --git a/js/panels/Timeline/Layer.reel/images/icon-eye.png b/js/panels/Timeline/Layer.reel/images/icon-eye.png
new file mode 100644
index 00000000..6178654e
Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-eye.png differ
diff --git a/js/panels/Timeline/Layer.reel/images/icon-lock.png b/js/panels/Timeline/Layer.reel/images/icon-lock.png
new file mode 100644
index 00000000..e06b4f22
Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-lock.png differ
diff --git a/js/panels/Timeline/Layer.reel/images/icon-minus.png b/js/panels/Timeline/Layer.reel/images/icon-minus.png
new file mode 100644
index 00000000..20a047f5
Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-minus.png differ
diff --git a/js/panels/Timeline/Layer.reel/images/icon-open.png b/js/panels/Timeline/Layer.reel/images/icon-open.png
new file mode 100644
index 00000000..8dc14271
Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-open.png differ
diff --git a/js/panels/Timeline/Layer.reel/images/icon-plus.png b/js/panels/Timeline/Layer.reel/images/icon-plus.png
new file mode 100644
index 00000000..ad1381b9
Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/icon-plus.png differ
diff --git a/js/panels/Timeline/Layer.reel/images/lock_closed.png b/js/panels/Timeline/Layer.reel/images/lock_closed.png
new file mode 100644
index 00000000..8ff213b7
Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/lock_closed.png differ
diff --git a/js/panels/Timeline/Layer.reel/images/lock_open.png b/js/panels/Timeline/Layer.reel/images/lock_open.png
new file mode 100644
index 00000000..9db30f8d
Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/lock_open.png differ
diff --git a/js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png b/js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png
new file mode 100644
index 00000000..4db78f13
Binary files /dev/null and b/js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.png differ
diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss
new file mode 100644
index 00000000..7473a275
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss
@@ -0,0 +1,220 @@
+@charset "UTF-8";
+
+/* Layer.scss
+ * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
+ */
+ 
+// Import theme settings
+@import "../../../../../_scss/imports/themes/default/colors";
+// @import "../../../../../_scss/imports/themes/default/fonts";
+@import "../../../../../_scss/imports/themes/default/mixins";
+
+// Import generic mixins and styles
+@import "../../../../../_scss/imports/scss/mixins";
+// @import "../../../../../_scss/imports/scss/Base";
+
+.layerLabel{
+    width: 100%;
+    color: $color-panel-text;
+    height: 21px;
+    font-family: 'Droid Sans';
+    font-size: 12px;
+    text-shadow: 1px 1px 1px $color-panel-shadow;
+    display: -webkit-box;
+    -webkit-box-orient: horizontal;
+}
+.layerLabel.layerSelected {
+	background-color: $color-panel-hilite-bg;
+	color: $color-panel-hilite-text;
+}
+.layerLabel{
+    width:100%;
+    height:18px;
+    padding-left: 25px;
+    padding-top: 2px;
+    -webkit-box-flex: 1;
+}
+.layerDisclosure{
+    background-image: url('../images/panelDisclosureIcon.png');
+    background-repeat: no-repeat;
+    width: 16px;
+    height: 16px;
+    /*float: left;*/
+
+    -webkit-transition-property: rotate;
+    -webkit-transition-duration: 0.2s;
+    -webkit-transition-timing-function: linear;
+    padding-right: 2px;
+    -webkit-box-flex: 0;
+}
+.layerHide{
+    background-image: url('../images/eye.png');
+    background-repeat: no-repeat;
+    /*float: right;*/
+    width: 16px;
+    height: 16px;
+    padding-right: 4px;
+    -webkit-box-flex: 0;
+}
+.layerLock{
+    background-image: url('../images/lock_open.png');
+    background-repeat: no-repeat;
+    /*float: right;*/
+    width: 16px;
+    height: 16px;
+    padding-right: 4px;
+    -webkit-box-flex: 0;
+}
+
+/******************************************/
+
+.container-layer {
+	background-color: $color-panel-bg;
+	color: $color-panel-text;
+	font-size: 12px;
+	text-shadow: 1px 1px 1px $color-app-shadow;
+}
+.selected .container-layer {
+	background-color: $color-panel-bg;
+}
+.selected .container-layer .label-layer {
+	background-color: $color-panel-hilite-bg;
+	color: $color-panel-hilite-text;
+}
+
+.userlayers .collapsible-label {
+	display: block;
+	width: 100px;
+    height: 21px;
+    line-height: 20px;
+	color: $color-panel-text;
+	margin-left: 30px;
+	margin-right: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.layerSelected .label-layer {
+	background-color: $color-panel-hilite-bg;
+	color: $color-panel-hilite-text;
+}
+.content-layer {
+	background-color: $color-panel-bg;
+	color: $color-panel-text;
+}
+.content-layer .collapsible-label {
+	background-position: 14px 5px;
+	border-width: 0px;
+}
+.label-layer,
+.label-position,
+.label-transform,
+.label-style {
+	position: relative;
+	border-bottom: 1px solid #505050;
+	cursor: pointer;
+}
+
+.content-layer .collapsible-label,
+.content-layer .collapsible-content {
+	font-size: 11px;
+}
+
+.collapsible-clicker {
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	top: 5px;
+	left: 5px;
+	margin: 0px;
+	padding: 0px;
+    background-image: url(../images/icon-open.png);
+    background-repeat: no-repeat;
+}
+.collapsible-clicker.collapsible-collapsed {
+	background-image: url(../images/icon-collapsed.png);
+}
+.collapsible-content .collapsible-clicker {
+	left: 12px;
+}
+.content-layer.collapsible-collapsed {
+	height: 0px;
+	overflow: hidden;
+}
+
+.label-layer .cssbutton,
+.label-style .cssbutton {
+	width: 14px;
+	height: 14px;
+	overflow: hidden;
+	position: absolute;
+	background-repeat: no-repeat;
+}
+.label-layer .button-lock {
+	background-image: url(../images/icon-lock.png);
+	top: 3px;
+	right: 27px;
+}
+.label-layer .button-visible {
+	background-image: url(../images/icon-eye.png);
+	top: 3px;
+	right: 7px;
+}
+.label-style .button-add {
+	background-image: url(../images/icon-plus.png);
+	width: 15px;
+	height: 15px;
+	top: 3px;
+	right: 11px;
+}
+.label-style .button-delete {
+	background-image: url(../images/icon-minus.png);
+	width: 15px;
+	height: 15px;
+	top: 3px;
+	right: 31px;
+}
+.collapsible-content .layout-table {
+	width: 99.9%;
+}
+.content-layer .collapsible-content {
+	padding-left: 30px;
+}
+.collapsible-content .collapsible-content .layout-table .layout-row .layout-cell {
+	width: 40%;
+	height: 20px;
+	border-bottom: 1px solid $color-menu-divider;
+	line-height: 20px;
+	text-align: left;
+}
+.collapsible-content .layout-table:first-child {
+	border-top: 1px solid $color-menu-divider;
+}
+.collapsible-transition {
+	-webkit-transition-property: height;
+	-webkit-transition-duration: 200ms;
+	-webkit-transition-timing-function: ease-in;
+}
+
+.editable2 {
+	height: 20px;
+	background-color: $color-panel-hilite-text !IMPORTANT;
+	color: $color-panel-hilite-bg !IMPORTANT;
+	border-width: 0px;
+	font-size: 11px;
+	overflow: hidden;
+    -webkit-user-select: text;
+    text-overflow: clip;
+}
+
+/* styles elements */
+.content-style .item-template {
+	display: none;
+}
+.content-style .layout-row.selected .layout-cell {
+	background-color: $color-panel-hilite-bg;
+	color: $color-panel-hilite-text;
+}
+.style-row {
+	height: 20px;
+}
diff --git a/js/panels/Timeline/Layer.reel/scss/config.rb b/js/panels/Timeline/Layer.reel/scss/config.rb
new file mode 100644
index 00000000..e5a99b70
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/scss/config.rb
@@ -0,0 +1,9 @@
+# Require any additional compass plugins here.
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "../css"
+sass_dir = ""
+images_dir = "../images/"
+javascripts_dir = "../js"
+# To enable relative