7 files changed, 2266 insertions, 1871 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index f7c936f7..45a2afd3 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -9,6 +9,7 @@ var Component = require("montage/ui/component").Component;
 
 var Keyframe = exports.Keyframe = Montage.create(Component, {
 
+    // ==== Begin models
     hasTemplate:{
         value: true
     },
@@ -42,7 +43,9 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
             this.needsDraw = true;
         }
     },
+    // ==== End Models
 
+    // ==== Begin Draw cycle methods
     prepareForDraw:{
         value:function(){
             this.element.addEventListener("click", this, false);
@@ -66,57 +69,31 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
             this.element.style.left = (this.position - 5) + "px";
         }
     },
+    // ==== End Draw cycle methods
 
-    deselectKeyframe:{
-        value:function(){
-            this.isSelected=false;
-            this.element.style.left = (this.position - 5) + "px";
-        }
-    },
-
-    selectKeyframe:{
-        value:function(){
-            if(this.isSelected){
-                return;
-            }
-
-            if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){
-                var tweenID = this.parentComponent.tweenID;
-                var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent;
-                mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe();
-                return;
-            }
-
-            this.isSelected=true;
-            this.element.style.left = (this.position - 6) + "px";
-            this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
-            this.parentComponent.selectTween();
-        }
-    },
-
+    // ==== Begin Event handlers
     handleClick:{
         value:function(ev){
             this.selectKeyframe();
             ev.stopPropagation();
         }
     },
-    
+
         handleMouseover: {
                 value: function(event) {
                         this.element.draggable = true;
                 }
         },
+
         handleMouseout: {
                 value: function(event) {
                         this.element.draggable = false;
                 }
         },
+
         handleDragstart: {
                 value: function(event) {
-                        //this.parentComponent.parentComponent.dragLayerID = this.layerID;
             event.dataTransfer.setData('Text', 'Keyframe');
-            
-            // Get my index in my track's tween array
             var i = 0,
                 tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
                 myIndex = null;
@@ -129,10 +106,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
             this.selectKeyframe();
                 }
         },
+
         handleDragend: {
                 value: function(event) {
                         this.parentComponent.isDragging = false;
                 }
-        }
-    
+        },
+    // ==== End Event handlers
+
+    // === Begin Controllers
+    selectKeyframe:{
+        value:function(){
+            if(this.isSelected){
+                return;
+            }
+            if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){
+                var tweenID = this.parentComponent.tweenID;
+                var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent;
+                mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe();
+                return;
+            }
+            this.isSelected=true;
+            this.element.style.left = (this.position - 6) + "px";
+            this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
+            this.parentComponent.selectTween();
+        }
+    },
+
+    deselectKeyframe:{
+        value:function () {
+            this.isSelected = false;
+            this.element.style.left = (this.position - 5) + "px";
+        }
+    }
+    // ==== End Controllers
 });
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 4dd9e88a..f7b66a39 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -1,1372 +1,1339 @@
-/* <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;
-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 nj = require("js/lib/NJUtils").NJUtils;
-var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
-
-var Layer = exports.Layer = Montage.create(Component, {
-
-    dynamicLayerTag: {
-        value: null,
-        serializable: true
-    },
-
-    positionCollapser: {
-        value: null,
-        serializable: true
-    },
-
-    transformCollapser: {
-        value: null,
-        serializable: true
-    },
-
-    styleCollapser: {
-        value: null,
-        serializable: true
-    },
-
-    clickerMain: {
-        value: null,
-        serializable: true
-    },
-
-    myLabel: {
-        value: null,
-        serializable: true
-    },
+/* <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;

+var Component = require("montage/ui/component").Component;

+var Hintable = require("js/components/hintable.reel").Hintable;

+var nj = require("js/lib/NJUtils").NJUtils;

+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;

+

+var Layer = exports.Layer = Montage.create(Component, {

+    

+    /* Begin: Models */

+

+        _dynamicLayerTag: {

+                value: null

+        },

+    dynamicLayerTag: {

+        serializable: true,

+        get: function() {

+                return this._dynamicLayerTag;

+        },

+        set: function(newVal) {

+                this._dynamicLayerTag = newVal;

+        }

+    },

+

+        _positionCollapser: {

+                value: null

+        },

+    positionCollapser: {

+        serializable: true,

+        get: function() {

+                return this._positionCollapser;

+        },

+        set: function(newVal) {

+                this._positionCollapser = newVal;

+        }

+    },

+

+        _transformCollapser: {

+                value: null

+        },

+    transformCollapser: {

+        serializable: true,