4 files changed, 1200 insertions, 12 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 44022211..717306a0 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" : {
@@ -148,10 +153,10 @@
                     "prototype": "js/components/hottextunit.reel[HotTextUnit]",
                     "properties": {
                         "element": {"#": "scale-x"},
-                        "maxValue" : 100,
-                        "minValue" : 0,
-                        "acceptableUnits" : "%",
-                        "units" : "%",
+                        "maxValue" : 100000,
+                        "minValue" : -100000,
+                        "acceptableUnits" : "px",
+                        "units" : "px",
                         "value" : 0
                     },
                         "bindings": {
@@ -166,10 +171,10 @@
                     "prototype": "js/components/hottextunit.reel[HotTextUnit]",
                     "properties": {
                         "element": {"#": "scale-y"},
-                        "maxValue" : 100,
-                        "minValue" : 0,
-                        "acceptableUnits" : "%",
-                        "units" : "%",
+                        "maxValue" : 100000,
+                        "minValue" : -100000,
+                        "acceptableUnits" : "px",
+                        "units" : "px",
                         "value" : 0
                     },
                         "bindings": {
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index db4ad712..77db9b64 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -12,6 +12,7 @@ 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, {
 
@@ -203,7 +204,6 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this._dtextPositionX = value;
                         this.layerData.dtextPositionX = value;
                 }
-            
         }
     },
     
@@ -526,6 +526,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.element.addEventListener("drop", this.handleDrop.bind(this), false);
         }
     },
+
     draw: {
         value: function() {
                 var boolHasClass = this.element.classList.contains("layerSelected");
@@ -636,6 +637,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         defaultEventManager.dispatchEvent(newEvent);
                 }
         },
+
         deleteStyle : {
                 value: function() {
                         var newEvent = document.createEvent("CustomEvent"),
@@ -884,6 +886,100 @@ var Layer = exports.Layer = Montage.create(Component, {
                         return false;
                 }
         },
+
+    handleLeftChange:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "left", [this.dtextPositionX + "px"] , "Change", "timeline");
+        }
+    },
+
+    handleTopChange:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "top", [this.dtextPositionY + "px"] , "Change", "timeline");
+        }
+    },
+
+    handleWidthChange:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "width", [this.dtextScaleX + "px"] , "Change", "timeline");
+        }
+    },
+
+    handleHeightChange:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "height", [this.dtextScaleY + "px"] , "Change", "timeline");
+        }
+    },
+
+    handleLeftChanging:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "left", [this.dtextPositionX + "px"] , "Changing", "timeline");
+        }
+    },
+
+    handleTopChanging:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "top", [this.dtextPositionY + "px"] , "Changing", "timeline");
+        }
+    },
+
+    handleWidthChanging:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "width", [this.dtextScaleX + "px"] , "Changing", "timeline");
+        }
+    },
+
+    handleHeightChanging:{
+        value:function(){
+            this.application.ninja.elementMediator.setProperty(this.layerData.elementsList, "height", [this.dtextScaleY + "px"] , "Changing", "timeline");
+        }
+    },
+
+
+    handleElementChange:{
+        value:function(event){
+            var el = this.layerData.elementsList[0];
+            var length = this.arrLayerStyles.length , i;
+
+            if(event.detail.source && event.detail.source!== "timeline"){
+                this.dtextPositionX = parseFloat(ElementsMediator.getProperty(el, "left"));
+                this.dtextPositionY = parseFloat(ElementsMediator.getProperty(el, "top"));
+                this.dtextScaleY = parseFloat(ElementsMediator.getProperty(el, "height"));
+                this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width"));
+
+                for(i=0; i<length; i++){
+                    if(event.detail.data.prop === this.arrLayerStyles[i].editorProperty){
+                        this.arrLayerStyles[i].editorValue = parseFloat(ElementsMediator.getProperty(el, this.arrLayerStyles[i].editorProperty));
+                        break;
+                    }
+                }
+            }
+
+        }
+    },
+
+    handleUpdatedID:{
+        value:function(event){
+            var i= this.application.ninja.timeline.arrLayers.length;
+            if(event.detail.id){
+                for(var k=0;k<i;k++){
+                    if(this.application.ninja.timeline.arrLayers[k].layerData.layerID=== this.application.ninja.timeline.currentLayerSelected.layerData.layerID){
+                        this.application.ninja.timeline.currentLayerSelected.layerData.layerName = event.detail.id;
+                        this.application.ninja.timeline.triggerLayerBinding(k);
+                        this.needsDraw=true;
+                    }
+                }
+
+            }
+        }
+    },
+
+    handleChanging:{
+        value:function(){
+            console.log("in layer.js")
+        }
+    },
+
         /* End: Event handlers */
         
         /* Begin: Logging routines */
diff --git a/js/panels/Timeline/Layer.reel/Layer.js.orig b/js/panels/Timeline/Layer.reel/Layer.js.orig
new file mode 100644
index 00000000..d3301014
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/Layer.js.orig
@@ -0,0 +1,1057 @@
+/* <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, {