11 files changed, 1984 insertions, 347 deletions

diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 9c8d4434..42bbbb86 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -41,6 +41,7 @@ var Montage = require("montage/core/core").Montage,
                 value: 0
         },
         contentHeight: {
+        serializable: true,
                 get: function() {
                         return this._contentHeight;
                 },
@@ -59,6 +60,7 @@ var Montage = require("montage/core/core").Montage,
                 value: false
         },
         isAnimated: {
+        serializable: true,
                 get: function() {
                         return this._isAnimated;
                 },
@@ -71,6 +73,7 @@ var Montage = require("montage/core/core").Montage,
                 value: true
         },
         bypassAnimation: {
+        serializable: true,
                 get: function() {
                         return this._bypassAnimation;
                 },
@@ -102,6 +105,7 @@ var Montage = require("montage/core/core").Montage,
                 value: ""
         },
         isCollapsed : {
+        serializable: true,
                 get: function() {
                         return this._isCollapsed;
                 },
@@ -110,7 +114,6 @@ var Montage = require("montage/core/core").Montage,
                                 this._isCollapsed = newVal;
                                 //this.needsDraw = true;
                         }
-                        
                 }
         },
         
@@ -141,6 +144,7 @@ var Montage = require("montage/core/core").Montage,
                 value: true
         },
         isLabelClickable : {
+        serializable: true,
                 get: function() {
                         return this._isLabelClickable;
                 },
@@ -149,6 +153,34 @@ var Montage = require("montage/core/core").Montage,
                 }
         },
 
+    _myContent:{
+        value:null
+    },
+
+    myContent:{
+            serializable:true,
+            get:function () {
+                return this._myContent;
+            },
+            set:function (newVal) {
+                this._myContent = newVal;
+            }
+        },
+
+        _clicker:{
+            value:null
+        },
+
+        clicker:{
+            serializable:true,
+            get:function () {
+                return this._clicker;
+            },
+            set:function (newVal) {
+                this._clicker = newVal;
+            }
+        },
+
         // isToggling: Bindable property. Set this (to anything) to trigger a toggle.
         _isToggling: {
                 value: true
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index b91027b6..ba6952aa 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -28,6 +28,21 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
         }
     },
 
+    _isSelected:{
+        value:false
+    },
+
+    isSelected:{
+        serializable:true,
+        get:function(){
+            return this._isSelected;
+        },
+        set:function(value){
+            this._isSelected = value;
+            this.needsDraw = true;
+        }
+    },
+
     prepareForDraw:{
         value:function(){
             this.element.addEventListener("click", this, false);
@@ -42,21 +57,28 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
 
     draw:{
         value:function(){
+            if(this.isSelected){
+                this.element.classList.add("keyframeSelected");
+                this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
+            }else{
+                this.element.classList.remove("keyframeSelected");
+            }
             this.element.style.left = (this.position - 5) + "px";
         }
     },
 
     deselectKeyframe:{
         value:function(){
-            this.element.classList.remove("keyframeSelected");
+            this.isSelected=false;
             this.element.style.left = (this.position - 5) + "px";
         }
     },
 
     selectKeyframe:{
         value:function(){
-            this.element.classList.add("keyframeSelected");
+            this.isSelected=true;
             this.element.style.left = (this.position - 6) + "px";
+            this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty
             this.parentComponent.selectTween();
         }
     },
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 44022211..3648cbbb 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -22,7 +22,12 @@
                                                 "positionCollapser" : {"@" : "positionCollapser"},
                                                 "styleCollapser" : {"@" : "styleCollapser"},
                                                 "clickerMain" : {"#" : "clicker-main"},
-                                                "myLabel" : {"#" : "myLabel"}
+                                                "myLabel" : {"#" : "myLabel"},
+                        "leftControl": {"@" : "dtext_position_x"},
+                        "topControl": {"@" : "dtext_position_y"},
+                        "widthControl": {"@" : "dtext_scale_x"},
+                        "heightControl": {"@" : "dtext_scale_y"},
+                        "styleType":{"@" : "style"}
                     }
                 },
                     "dtext1" : {
@@ -105,7 +110,12 @@
                                         "boundObject" : {"@": "repetition1"},
                                         "boundObjectPropertyPath" : "objectAtCurrentIteration.ruleTweener",
                                         "oneway" : false
-                                }
+                                },
+                        "colorelement" : {
+                            "boundObject" : {"@": "repetition1"},
+                            "boundObjectPropertyPath" : "objectAtCurrentIteration.colorelement",
+                            "oneway" : false
+                        }
                         }
                     },
                                 "dtext_position_x" : {
@@ -148,10 +158,10 @@
                     "prototype": "js/components/hottextunit.reel[HotTextUnit]",
                     "properties": {
                         "element": {"#": "scale-x"},
-                        "maxValue" : 100,
-                        "minValue" : 0,
-                        "acceptableUnits" : "%",
-                        "units" : "%",
+                        "maxValue" : 100000,
+                        "minValue" : -100000,
+                        "acceptableUnits" : "px",
+                        "