From d2f4d5e5f6742d53b6324d585a700566f73c992a Mon Sep 17 00:00:00 2001
From: mqg734
Date: Tue, 21 Feb 2012 16:49:11 -0800
Subject: Updated Materials Library and Materials Editor Popup to work with
 latest version of Montage.

We had to change our css to not use id's.
Also, updated the popup to use Montage's Popup component.
It looks like bump material has a bug. So loading that material results in a runtime error.
---
 .../materials-library-panel.html                   |   8 +-
 .../materials-library-panel.js                     | 121 ++++---------------
 .../materials-popup.reel/materials-popup.css       | 131 ++++-----------------
 .../materials-popup.reel/materials-popup.html      |  18 +--
 .../materials-popup.reel/materials-popup.js        |  47 +++-----
 js/panels/properties/content.reel/content.js       |   2 +-
 6 files changed, 81 insertions(+), 246 deletions(-)

(limited to 'js/panels')

diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
index eede02bd..6ba4ac75 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
@@ -10,14 +10,18 @@
     	<link rel="stylesheet" type="text/css" href="materials-library-panel.css">
          <script type="text/montage-serialization">
         {
+             "materialInfo": {
+                 "module": "js/panels/Materials/materials-popup.reel",
+                 "name": "MaterialsPopup"
+             },
             "owner": {
                 "module": "js/panels/Materials/materials-library-panel.reel",
                 "name": "MaterialsLibraryPanels",
                 "properties": {
-                    "element": {"#": "materials_library_panel"}
+                    "element": {"#": "materials_library_panel"},
+                    "_materialInfo": {"@": "materialInfo"}
                 }
             }
-
     	}
 		</script>
    		
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
index f97e1a27..b16c4376 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
@@ -7,7 +7,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Tree = require("js/components/tree.reel").Tree,
     Button = require("js/components/button.reel").Button,
     MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup,
-    PopupMananger =		require("js/components/popup-manager.reel").PopupMananger;
+    PopupMananger =		require("js/components/popup-manager.reel").PopupMananger,
+    Popup = require("montage/ui/popup/popup.reel").Popup;
 
 exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, {
 
@@ -92,20 +93,7 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
     captureChange: {
         value:function(e) {
             var tNode = e._event.treeNode;
-            var left, top;
-            //TODO: Figure out if this is the best way to detect where user clicked
-            var mouseEvent = e._event.mouseEvent;
-    		if (mouseEvent.clientX && mouseEvent.clientY) {
-    			if (mouseEvent.clientX > (parseInt(document.width)/2)) {
-                    left = mouseEvent.clientX - mouseEvent.offsetX-2;
-                    top = mouseEvent.currentTarget.clientHeight/2+mouseEvent.clientY - mouseEvent.offsetY;
-    			} else {
-                    left = mouseEvent.clientX - mouseEvent.offsetX+parseInt(mouseEvent.currentTarget.clientWidth);
-                    top = mouseEvent.clientY - mouseEvent.offsetY;
-    			}
-    		}
-            
-            this._showMaterialPopup(left + 'px', top + 'px', 'right', 'top', tNode.id);
+            this._showMaterialPopup(tNode.id);
         }
     },
 
@@ -113,93 +101,34 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
         enumerable:true,
         value:null
     },
+
+    _materialInfo: {
+        enumerable:true
+    },
     
     _showMaterialPopup: {
     	enumerable: false,
-    	value: function (x, y, side, align, materialID) {
-    		if (this._materialPopup && this._materialPopup.opened) {
-    			if (this._materialPopup.popup.position.x === x && this._materialPopup.popup.position.y === y) {
-					this._hideMaterialPopup();
-    			} else {
-    				this._materialPopup.popup.position = {x: x, y: y};
-    				this._materialPopup.popup.tooltip = {side: side, align: align};
-                    this._materialPopup.popup.base.loadMaterials(materialID);
-    				//TODO: Tooltip needs to be fixed to allow aligning to change on fly
-    				//this._materialPopup.popup.drawTooltip();
-    			}
-    		} else {
-    			////////////////////////////////////////////////////
-    			//Creating popup from m-js component
-    			var popup = document.createElement('div');
-    			var content = document.createElement('div');
-    			var popupBase = MaterialsPopup.create();
-
-
-    			//TODO: Check to see if this HACK is needed
-    			//(elements needs to be on DOM to be drawn)
-    			document.body.appendChild(popup);
-    			popupBase.element = popup;
-   				popupBase.needsDraw = true;
-   				document.body.removeChild(popup);
-    			//Adding drawn element to container
-    			content.appendChild(popupBase.element);
-
-    			//Creating an instance of the popup and sending in created material popup content
-                this._materialPopup = {};
-	        	this._materialPopup.popup = PopupMananger.createPopup(content, {x: x, y: y}, {side: side, align: align});
-				this._materialPopup.popup.element.style.opacity = 0;
-                this._materialPopup.popup.base = popupBase;
-				popupBase._material = MaterialsLibrary.getMaterial( materialID );
-				popupBase._materialName = materialID;
-				//TODO: Fix this animation/draw HACK (Move to didDraw callback)
-				setTimeout(function () {
-					this._materialPopup.popup.element.style.opacity = 1;
-                    this._materialPopup.popup.base.loadMaterials(materialID);
-				}.bind(this), 150);
-
-
-
-	        	//Popup was added, so it's opened
-	        	this._materialPopup.opened = true;
-	        	//TODO: Fix this HACK, it listens to this canvas to be clicked to close popup
-	        	document.getElementById('stageAndScenesContainer').addEventListener('click', this, false);
-        	}
-    	}
-    },
-    ////////////////////////////////////////////////////////////////////
-    //
-    handleClick: {
-    	enumerable: true,
-    	value: function (e) {
-    		//TODO: Fix this HACK
-    		if (e._event.target.id === 'stageCanvas' && this._materialPopup.opened) {
-    			this._handleDocumentClick(e);
-    		}
-    	}
-    },
-    ////////////////////////////////////////////////////////////////////
-    //
-    _handleDocumentClick: {
-    	enumerable: false,
-    	value: function (e) {
-    		this._hideMaterialPopup();
-    		//TODO: Fix this HACK
-			document.getElementById('stageAndScenesContainer').removeEventListener ('click', this, false);
+    	value: function (materialID) {
+
+            if(!this._materialPopup)
+            {
+                this._materialPopup = Popup.create();
+                this._materialPopup.content = this._materialInfo;
+                this._materialPopup.modal = false;
+                this.eventManager.addEventListener("hideMaterialPopup", this, false);
+                this._materialPopup.addEventListener("show", this, false);
+            }
+            this._materialPopup.show();
+            this._materialInfo.loadMaterials(materialID);
     	}
     },
-    ////////////////////////////////////////////////////////////////////
-    //
-    _hideMaterialPopup: {
+
+    handleHideMaterialPopup: {
     	enumerable: false,
-    	value: function () {
-    		if (this._materialPopup.opened) {
-    			//
-	    		PopupMananger.removePopup(this._materialPopup.popup.element);
-	    		this._materialPopup.opened = false;
-	    		//TODO: Fix HACK of removing popup
-	    		this._materialPopup.popup.base.destroy();
-	    		this._materialPopup.popup = null;
-	    	}
+    	value: function (event) {
+            if(this._materialPopup){
+                this._materialPopup.hide();
+            }
     	}
     }
 });
\ No newline at end of file
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css
index 299dc5f9..89233c64 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.css
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.css
@@ -6,24 +6,22 @@
  </copyright> */
 
 .materials_popup {
-  font-size: 12px;
-  text-shadow: 1px 1px 1px #000;
+    width:400px;
+    font-size: 12px;
     overflow: hidden;
-}
-
-.materials_popup a:hover {
-  color: #CCC;
+    background: #494949;
+    color: white;
 }
 
 .materials_popup hr {
-  float: left;
-  clear: both;
-  width: 100%;
-  display: block;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1d1d1d), color-stop(0.75, #424242));
-  border: none;
-  height: 2px;
-  margin: 4px 0px 4px 0px;
+    float: left;
+    clear: both;
+    width: 100%;
+    display: block;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1d1d1d), color-stop(0.75, #424242));
+    border: none;
+    height: 2px;
+    margin: 4px 0px 4px 0px;
 }
 
 #mp_title {
@@ -36,127 +34,46 @@
     text-align: center;
 }
 
-#mp_maps div div,
-#mp_maps div div:focus,
-#mp_maps div input,
-#mp_maps div input:focus {
-    margin: 0px 0px 2px 0px;
+.mp_property
+{
+    height:40px;
 }
 
-#mp_properties_labels,
-#mp_maps_labels {
-  display:block;
+.mp_property > .prop-label
+{
   float: left;
-  width:86px;
+  /*width:86px;*/
   margin: 0px 8px 2px 5px;
-  font-family: 'Droid Sans', sans-serif;
-  font-size: 12px;
 }
 
-#mp_properties_labels div,
-#mp_maps_labels div {
+.mp_property > .prop-controller
+{
   float: right;
   clear: left;
   width: auto;
   margin: 0px 0px 3px 0px;
 }
 
-#mp_maps_labels div {
-  margin: 2px 0px 3px 0px !important;
-}
-
-#mp_properties_labels div {
-  margin: 6px 0px 6px 0px !important;
-}
-
-#mp_properties_colors
-{
-    float:left;
-    width: 24px;
-    margin: 0px -8px 0px 10px;
-}
-
-#mp_properties_colors button {
-  width: 22px;
-  height: 22px;
-  margin:  2px 0;
-}
-
-#mp_properties_colors input.hottext {
-  background: none;
-  float: right;
-  margin: 4px 0px;
-  padding: 0px;
-  width: 23px;
-  color: #FFF;
-  text-shadow: 1px 1px 1px #000;
-  font-family: 'Droid Sans', sans-serif;
-  font-size: 11px;
-  text-align: center;
-}
-
-#mp_properties_colors input.hottextInput {
-  background: #FFF;
-  color: #000;
-  text-shadow: none;
-  border: 1px solid #333;
-  margin: 3px -2px 5px 1px;
-  padding: 1px;
-  text-decoration: none;
-  outline: none;
-}
-
-#mp_maps_inputs
-{
-    float: left;
-    width: auto;
-}
-
-#mp_maps_inputs input {
-  float:left;
-  clear:both;
-  width: 100px;
-  background: #555;
-  border: 1px solid #333;
-  color: #FFF;
-  padding: 1px 0px 1px 0px;
-  margin: 0px 0px 0px 10px;
-  text-decoration: none !important;
-  text-shadow: 1px 1px 1px #000;
-  font-family: 'Droid Sans', sans-serif;
-  font-size: 11px;
-  letter-spacing: 1px;
-}
-
-#mp_maps_inputs input:focus {
-  outline: none;
-  margin: -1px 0px -1px 10px;
-  background: #FFF;
-  color: #000;
-  text-shadow: none;
-}
-
-
-#mp_buttons {
+.mp_buttons {
     clear:both;
     float: left;
     margin: 0px -4px 0px 4px;
     width: 97%;
 }
 
-#mp_buttons button {
+.mp_buttons button {
   height: 22px;
   overflow: hidden;
   display: block;
   cursor: pointer;
 }
 
-#mp_cancel_btn {
+.mp_buttons .mp_cancel_btn {
     float: left;
     width: 60px;
 }
 
-#mp_ok_btn {
+.mp_buttons .mp_ok_btn {
     float: right;
     width: 30px;
 }
\ No newline at end of file
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html
index bac69f25..de4f98c1 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.html
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.html
@@ -30,7 +30,7 @@
                 }
             },
             "eventDelegator": {
-                "module": "montage/event/action-event-listener",
+                "module": "montage/core/event/action-event-listener",
                 "name": "ActionEventListener",
                 "properties": {
                     "handler": {"@": "owner"},
@@ -38,7 +38,7 @@
                 }
             },
             "propControl1": {
-                "module": "js/components/ui/property-control",
+                "module": "js/components/ui/property-control.reel",
                 "name": "PropertyControl",
                 "properties": {
                     "element": {"#": "mp_property"}
@@ -64,7 +64,7 @@
                             ]
             },
             "materialsProperties": {
-                "module": "montage/ui/repetition",
+                "module": "montage/ui/repetition.reel",
                 "name": "Repetition",
                 "properties": {
                     "element": {"#": "mp_properties_list"}
@@ -95,7 +95,7 @@
 
 	<body>
 
-    	<div id="materials_popup">
+    	<div id="materials_popup" class="materials_popup">
             <div id="mp_title">Material Name</div>
 
             <hr />
@@ -104,15 +104,15 @@
 
             <hr />
 
-            <div id="mp_properties_list" style="-webkit-user-select: none;">
-                <div id="mp_property"></div>
+            <div id="mp_properties_list" class="mp_properties_list" style="-webkit-user-select: none;">
+                <div id="mp_property" class="mp_property"></div>
             </div>
 
             <hr />
             
-            <div id="mp_buttons">
-                <button id="mp_cancel_btn"></button>
-                <button id="mp_ok_btn"></button>
+            <div id="mp_buttons" class="mp_buttons">
+                <button id="mp_cancel_btn" class="mp_cancel_btn"></button>
+                <button id="mp_ok_btn" class="mp_ok_btn"></button>
             </div>
 
     	</div>
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index 62ca5395..508b8130 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -11,36 +11,13 @@ var Button = 			require("js/components/button.reel").Button;
 ////////////////////////////////////////////////////////////////////////
 //Exporting as MaterialsPopup
 exports.MaterialsPopup = Montage.create(Component, {
-	////////////////////////////////////////////////////////////////////
-    okButton: {
-        enumerable: false,
-        value: null
-    },
-
-    cancelButton: {
-        enumerable: false,
-        value: null
-    },
-
     ////////////////////////////////////////////////////////////////////
 	// Material Properties
-
-    materialsProperties: {
-        enumerable: true,
-        serializable: true,
-        value: null
-    },
-
     _materialName: {
         enumerable: true,
-        value: "Material"
+        value: ""
     },
 
-	materialTitle: {
-		enumerable: true,
-		value: null
-	},
-
 	captureAction: {
 		value:function(event) {
 			switch(event._currentTarget.label)
@@ -69,6 +46,9 @@ exports.MaterialsPopup = Montage.create(Component, {
                     }
 					break;
 			}
+
+            // Notify Materials Library to close popup
+            NJevent("hideMaterialPopup");
 		}
 	},
 
@@ -235,12 +215,12 @@ exports.MaterialsPopup = Montage.create(Component, {
 		value: function(materialID)
 		{
            this._materialName = materialID;
-            if(	
+            if(
 					(materialID ===  "UberMaterial")				||
 					(materialID ===  "FlatMaterial")				||
- 					(materialID ===  "BumpMetalMaterial")			||
- 					(materialID ===  "LinearGradientMaterial")		||
- 					(materialID ===  "RadialGradientMaterial")
+					(materialID ===  "BumpMetalMaterial")			||
+					(materialID ===  "LinearGradientMaterial")		||
+					(materialID ===  "RadialGradientMaterial")
 				)
 			{
 				var material = MaterialsLibrary.getMaterial( materialID );
@@ -323,6 +303,8 @@ exports.MaterialsPopup = Montage.create(Component, {
 	{
 		value:  function( label,  color )
 		{
+            var css = 'rgba(' + color[0]*255 + ',' + color[1]*255 + ',' + color[2]*255 + ',' + color[3] + ')';
+            var colorObj = this.application.ninja.colorController.getColorObjFromCss(css)
 			var obj =
 			{
 				"label":		label,
@@ -330,7 +312,7 @@ exports.MaterialsPopup = Montage.create(Component, {
 				"controlType":	"ColorChip",
                 "defaults":
                 {
-					"color":	{ r:color[0]*255, g:color[1]*255, b:color[2]*255, a:color[3] }
+					"color":	colorObj
 				}
 			};
 
@@ -644,7 +626,7 @@ exports.MaterialsPopup = Montage.create(Component, {
     _materialsData: {
 		enumerable: true,
         serializable: true,
-	    value: this._dummyData1
+	    value: []
     
 	},
 
@@ -656,7 +638,10 @@ exports.MaterialsPopup = Montage.create(Component, {
             },
         set: function(data) {
             this._materialsData = data;
-            this.materialsProperties.needsDraw = true;
+            if(this.materialsProperties)
+            {
+                this.materialsProperties.needsDraw = true;
+            }
         }
     }
 
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js
index 53926c78..9b6416c7 100755
--- a/js/panels/properties/content.reel/content.js
+++ b/js/panels/properties/content.reel/content.js
@@ -163,7 +163,7 @@ exports.Content = Montage.create(Component, {
             // For now hardcode the background since it is the only custom property
             // No need to loop through all the properties.
             var backgroundChip = this.customSections[0].content.controls["background"];
-            backgroundChip.initialColor = ElementsMediator.getProperty(stage, "background");
+            backgroundChip.color = ElementsMediator.getProperty(stage, "background");
 
             /*
             var customPI = PiData[this.customPi];
-- 
cgit v1.2.3


From 96a0a8c916533eb5625816192ed38488f639326d Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Wed, 22 Feb 2012 11:00:20 -0800
Subject: Integrating canvas-2d drawing and WebGL fixes, including adding back
 WebGL materials.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/panels/Materials/Materials.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/panels')

diff --git a/js/panels/Materials/Materials.xml b/js/panels/Materials/Materials.xml
index e955623a..a958575e 100755
--- a/js/panels/Materials/Materials.xml
+++ b/js/panels/Materials/Materials.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="ISO-8859-1"?>
 <tree id="Materials">
     <folder id="ninjaMaterials" label="Ninja Materials">
-	  <leaf id="UberMaterial" label="Uber" />
+	      <leaf id="UberMaterial" label="Uber" />
         <leaf id="BumpMetalMaterial" label="Bump Metal" />
         <leaf id="LinearGradientMaterial" label="Linear Gradient" />
         <leaf id="RadialGradientMaterial" label="Radial Gradient" />
-- 
cgit v1.2.3


From f775fb752cac57a0c1f6c42c8c60f5ff329eab32 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Wed, 22 Feb 2012 11:36:19 -0800
Subject: Revert "Integrating canvas-2d drawing and WebGL fixes, including
 adding back WebGL materials."

This reverts commit 96a0a8c916533eb5625816192ed38488f639326d.
---
 js/panels/Materials/Materials.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/panels')

diff --git a/js/panels/Materials/Materials.xml b/js/panels/Materials/Materials.xml
index a958575e..e955623a 100755
--- a/js/panels/Materials/Materials.xml
+++ b/js/panels/Materials/Materials.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="ISO-8859-1"?>
 <tree id="Materials">
     <folder id="ninjaMaterials" label="Ninja Materials">
-	      <leaf id="UberMaterial" label="Uber" />
+	  <leaf id="UberMaterial" label="Uber" />
         <leaf id="BumpMetalMaterial" label="Bump Metal" />
         <leaf id="LinearGradientMaterial" label="Linear Gradient" />
         <leaf id="RadialGradientMaterial" label="Radial Gradient" />
-- 
cgit v1.2.3


From d5b216d9d6d2b8cb93106e8f8ca351089d05b41d Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Wed, 22 Feb 2012 11:52:31 -0800
Subject: Integrating canvas-2d and WebGL drawing fixes. Also adding back WebGL
 materials.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/panels/Materials/Materials.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/panels')

diff --git a/js/panels/Materials/Materials.xml b/js/panels/Materials/Materials.xml
index e955623a..a958575e 100755
--- a/js/panels/Materials/Materials.xml
+++ b/js/panels/Materials/Materials.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="ISO-8859-1"?>
 <tree id="Materials">
     <folder id="ninjaMaterials" label="Ninja Materials">
-	  <leaf id="UberMaterial" label="Uber" />
+	      <leaf id="UberMaterial" label="Uber" />
         <leaf id="BumpMetalMaterial" label="Bump Metal" />
         <leaf id="LinearGradientMaterial" label="Linear Gradient" />
         <leaf id="RadialGradientMaterial" label="Radial Gradient" />
-- 
cgit v1.2.3


From b7402018659cf8058d5646c08b2a916492269e33 Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Thu, 23 Feb 2012 07:37:17 -0800
Subject: Timeline Reset to clean Master branch.  Code scrub.

Fresh copy of ninja-internal/master with Timeline folder copied in to resolved merge issues.

Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
 js/panels/Timeline/Keyframe.reel/Keyframe.html     |   6 +-
 js/panels/Timeline/Keyframe.reel/Keyframe.js       | 117 +------------
 js/panels/Timeline/Layer.reel/Layer.html           |   2 +-
 js/panels/Timeline/Layer.reel/Layer.js             |  27 ++-
 js/panels/Timeline/Layer.reel/css/Layer.css        | 117 ++++---------
 js/panels/Timeline/Layer.reel/scss/Layer.scss      |  17 +-
 js/panels/Timeline/Span.reel/Span.html             |   6 +-
 js/panels/Timeline/Span.reel/Span.js               |  11 +-
 js/panels/Timeline/Style.reel/scss/Style.scss      |   6 +-
 .../Timeline/TimelinePanel.reel/TimelinePanel.html |  49 +++++-
 .../Timeline/TimelinePanel.reel/TimelinePanel.js   | 102 +++++++----
 .../TimelinePanel.reel/css/TimelinePanel.css       |  23 ++-
 .../Timeline/TimelineTrack.reel/TimelineTrack.html |  42 ++++-
 .../Timeline/TimelineTrack.reel/TimelineTrack.js   | 192 +++++++++++++++------
 .../TimelineTrack.reel/css/TimelineTrack.css       |  65 +------
 .../TimelineTrack.reel/scss/TimelineTrack.scss     |  18 +-
 js/panels/Timeline/Tween.reel/Tween.html           |  16 +-
 js/panels/Timeline/Tween.reel/Tween.js             | 114 ++++++++++--
 18 files changed, 507 insertions(+), 423 deletions(-)
 mode change 100755 => 100644 js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
 mode change 100755 => 100644 js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js

(limited to 'js/panels')

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html
index bf21994b..72da49d5 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.html
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html
@@ -9,8 +9,7 @@
                             "module": "js/panels/Timeline/Keyframe.reel",
                             "name": "Keyframe",
                             "properties": {
-                                "element": {"#": "keyframespace"},
-                                "tweenkeyframe": {"#": "tweenkeyframe"}
+                                "element": {"#": "keyframespace"}
                             }
                         }
 
@@ -19,8 +18,7 @@
 	</head>
 	<body>
 
-    	<div id="keyframespace">
-            <div id="tweenkeyframe" class="tween_keyframe"></div>
+    	<div id="keyframespace" class="tween_keyframe">
     	</div>
 
     </body>
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index c82a9086..bb2acee0 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -1,6 +1,5 @@
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
-var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
 
 var Keyframe = exports.Keyframe = Montage.create(Component, {
 
@@ -19,136 +18,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
         },
         set:function(value){
             this._position = value;
+            this.needsDraw = true;
         }
     },
 
-    _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;
-        }
-    },
-
-    containingSpan:{
-        value: null
-    },
-
     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;
+            this.element.addEventListener("click", this, false);
         }
     },
 
     draw:{
         value:function(){
-            this.tweenkeyframe.style.left = (this.position - 3) + "px";
-        }
-    },
-
-    handleElementChange:{
-        value:function (event) {
-            if(this.application.ninja.selectedElements[0]._element != this.containingTrack.animatedElement){
-                alert("Wrong element selected for this keyframe track");
-                return;
-            }
-
-            if(event.detail.source && event.detail.source !== "keyframe") {
-                this.containingSpan.highlightSpan();
-                if(this.containingTrack.animatedElement.offsetTop != this.animatedProperties["top"] && this.containingTrack.animatedElement.offsetLeft != this.animatedProperties["left"]){
-                    this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
-                    this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
-                    this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
-                    this.containingTrack.updateKeyframeRule();
-                }
-            }
+            this.element.style.left = (this.position - 3) + "px";
         }
     },
 
-    deselect:{
+    deselectKeyframe:{
         value:function(){
-            this.tweenkeyframe.classList.remove("keyframeSelected");
-            this.eventManager.removeEventListener("elementChange", this, false);
+            this.element.classList.remove("keyframeSelected");
         }
     },
 
-    select:{
+    selectKeyframe:{
         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 currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
-            var currentMillisec = currentMillisecPerPixel * this.timelinePosition;
-            this.application.ninja.timeline.updateTimeText(currentMillisec);
-
-            var currentTop = this.animatedProperties["top"] + "px";
-            var currentLeft = this.animatedProperties["left"] + "px";
-
-            ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe");
-            ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe");
-
-            // turn on element change event listener
-            this.eventManager.addEventListener("elementChange", this, false);
+            this.element.classList.add("keyframeSelected");
+            this.parentComponent.selectTween();
         }
     },
 
     handleClick:{
         value:function(ev){
-            this.select();
+            this.selectKeyframe();
         }
     }
 });
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index dd819b2b..e262afe2 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -153,7 +153,7 @@
 				<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-delete disabled"></div>
 					<div class="cssbutton button-add"></div>
 				</div>
 				<div class="content-style collapsible-content">
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 71a1f01f..2e9a8f1a 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -80,7 +80,6 @@ var Layer = exports.Layer = Montage.create(Component, {
 	        	this._layerName = newVal;
 	        	this._layerEditable.needsDraw = true;
 	        	this.needsDraw = true;
-	        	
         	}
         	
         }
@@ -323,6 +322,7 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.styleCollapser.myContent = this.contentStyle;
             this.styleCollapser.element = this.element;
             this.styleCollapser.isCollapsed = this.isStyleCollapsed;
+            this.styleCollapser.contentHeight = 20;
             this.styleCollapser.isAnimated = true;
             this.styleCollapser.labelClickEvent = function(boolBypass) {
 				var newEvent = document.createEvent("CustomEvent");
@@ -483,8 +483,11 @@ var Layer = exports.Layer = Montage.create(Component, {
 					// 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?')
+					// Was that the last style?
+					if (this.arrLayerStyles.length === 0) {
+						this.buttonDeleteStyle.classList.add("disabled");
+					}
+					
 				}
 			}
 		}
@@ -509,8 +512,12 @@ var Layer = exports.Layer = Montage.create(Component, {
     		// Next, update this.styleRepetition.selectedIndexes.
     		if (styleIndex !== false) {
     			this.styleRepetition.selectedIndexes = [styleIndex];
+    			this.buttonDeleteStyle.classList.remove("disabled");
     		} else {
     			this.styleRepetition.selectedIndexes = null;
+    			if (typeof(this.buttonDeleteStyle) !== "undefined") {
+    				this.buttonDeleteStyle.classList.add("disabled");
+    			}
     		}
 			
 		}
@@ -537,14 +544,11 @@ var Layer = exports.Layer = Montage.create(Component, {
 	/* Begin: Event handlers */
 	handleAddStyleClick: {
 		value: function(event) {
-			// Stop the event propagation
-			//event.stopPropagation();
 			this.addStyle();
 		}
 	},
 	handleDeleteStyleClick: {
 		value: function(event) {
-			//event.stopPropagation();
 			this.deleteStyle();
 		}
 	},
@@ -566,25 +570,16 @@ var Layer = exports.Layer = Montage.create(Component, {
 	handleMousedown: {
 		value: function(event) {
 			this.isActive = true;
-			// Check ALL THE CLICKS
-			// Are they in a particular style? If so, we need to select that style and
-			// deselect the others.
 			var ptrParent = nj.queryParentSelector(event.target, ".content-style");
 			if (ptrParent !== false) {
-				// Why yes, the click was within a layer.  But which one?
-				var myIndex = this.getActiveStyleIndex();
-				this.selectStyle(myIndex);
+				this.selectStyle(this.getActiveStyleIndex());
 			}
 		}
 	},
 	handleLayerClick : {
 		value: function(event) {
-			// Check ALL THE CLICKS
-			// Are they in a particular style? If so, we need to select that style and
-			// deselect the others.
 			var ptrParent = nj.queryParentSelector(event.target, ".content-style");
 			if (ptrParent !== false) {
-				// Why yes, the click was within a layer.  But which one?
 				var myIndex = this.getActiveStyleIndex();
 				this.selectStyle(myIndex);
 			}
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
index 39869c92..3547a15e 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -2,63 +2,6 @@
 /* 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%;
@@ -174,23 +117,24 @@
   border-width: 0px;
 }
 
-/* line 112, ../scss/Layer.scss */
+/* line 113, ../scss/Layer.scss */
 .label-layer,
 .label-position,
 .label-transform,
-.label-style {
+.label-style,
+.label-styles {
   position: relative;
   border-bottom: 1px solid #505050;
   cursor: pointer;
 }
 
-/* line 119, ../scss/Layer.scss */
+/* line 120, ../scss/Layer.scss */
 .content-layer .collapsible-label,
 .content-layer .collapsible-content {
   font-size: 11px;
 }
 
-/* line 123, ../scss/Layer.scss */
+/* line 124, ../scss/Layer.scss */
 .collapsible-clicker {
   position: absolute;
   width: 10px;
@@ -203,23 +147,23 @@
   background-repeat: no-repeat;
 }
 
-/* line 134, ../scss/Layer.scss */
+/* line 135, ../scss/Layer.scss */
 .collapsible-clicker.collapsible-collapsed {
   background-image: url(../images/icon-collapsed.png);
 }
 
-/* line 137, ../scss/Layer.scss */
+/* line 138, ../scss/Layer.scss */
 .collapsible-content .collapsible-clicker {
   left: 12px;
 }
 
-/* line 140, ../scss/Layer.scss */
+/* line 141, ../scss/Layer.scss */
 .content-layer.collapsible-collapsed {
   height: 0px;
   overflow: hidden;
 }
 
-/* line 146, ../scss/Layer.scss */
+/* line 147, ../scss/Layer.scss */
 .label-layer .cssbutton,
 .label-style .cssbutton {
   width: 14px;
@@ -229,21 +173,21 @@
   background-repeat: no-repeat;
 }
 
-/* line 153, ../scss/Layer.scss */
+/* line 154, ../scss/Layer.scss */
 .label-layer .button-lock {
   background-image: url(../images/icon-lock.png);
   top: 3px;
   right: 27px;
 }
 
-/* line 158, ../scss/Layer.scss */
+/* line 159, ../scss/Layer.scss */
 .label-layer .button-visible {
   background-image: url(../images/icon-eye.png);
   top: 3px;
   right: 7px;
 }
 
-/* line 163, ../scss/Layer.scss */
+/* line 164, ../scss/Layer.scss */
 .label-style .button-add {
   background-image: url(../images/icon-plus.png);
   width: 15px;
@@ -252,7 +196,7 @@
   right: 11px;
 }
 
-/* line 170, ../scss/Layer.scss */
+/* line 171, ../scss/Layer.scss */
 .label-style .button-delete {
   background-image: url(../images/icon-minus.png);
   width: 15px;
@@ -261,17 +205,17 @@
   right: 31px;
 }
 
-/* line 177, ../scss/Layer.scss */
+/* line 178, ../scss/Layer.scss */
 .collapsible-content .layout-table {
   width: 99.9%;
 }
 
-/* line 180, ../scss/Layer.scss */
+/* line 181, ../scss/Layer.scss */
 .content-layer .collapsible-content {
   padding-left: 30px;
 }
 
-/* line 183, ../scss/Layer.scss */
+/* line 184, ../scss/Layer.scss */
 .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell {
   width: 40%;
   height: 20px;
@@ -280,19 +224,19 @@
   text-align: left;
 }
 
-/* line 190, ../scss/Layer.scss */
+/* line 191, ../scss/Layer.scss */
 .collapsible-content .layout-table:first-child {
   border-top: 1px solid #505050;
 }
 
-/* line 193, ../scss/Layer.scss */
+/* line 194, ../scss/Layer.scss */
 .collapsible-transition {
   -webkit-transition-property: height;
   -webkit-transition-duration: 200ms;
   -webkit-transition-timing-function: ease-in;
 }
 
-/* line 199, ../scss/Layer.scss */
+/* line 200, ../scss/Layer.scss */
 .editable2 {
   height: 20px;
   background-color: #242424 !important;
@@ -304,19 +248,32 @@
   text-overflow: clip;
 }
 
+<<<<<<< .mine=======/* line 210, ../scss/Layer.scss */
+.label-style .disabled {
+  cursor: default;
+}
+
+/* styles elements */
+>>>>>>> .theirs/* line 215, ../scss/Layer.scss */
+.label-style .disabled {
+  cursor: default;
+}
+
 /* styles elements */
-/* line 211, ../scss/Layer.scss */
+/* line 216, ../scss/Layer.scss */
 .content-style .item-template {
   display: none;
 }
 
-/* line 214, ../scss/Layer.scss */
-.content-style .layout-row.selected .layout-cell {
+<<<<<<< .mine/* line 219, ../scss/Layer.scss */
+=======/* line 218, ../scss/Layer.scss */
+>>>>>>> .theirs.content-style .layout-row.selected .layout-cell {
   background-color: #b2b2b2;
   color: #242424;
 }
 
-/* line 218, ../scss/Layer.scss */
-.style-row {
+<<<<<<< .mine/* line 223, ../scss/Layer.scss */
+=======/* line 222, ../scss/Layer.scss */
+>>>>>>> .theirs.style-row {
   height: 20px;
 }
diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss
index 7473a275..c66a6267 100644
--- a/js/panels/Timeline/Layer.reel/scss/Layer.scss
+++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss
@@ -5,13 +5,13 @@
  */
  
 // Import theme settings
-@import "../../../../../_scss/imports/themes/default/colors";
-// @import "../../../../../_scss/imports/themes/default/fonts";
-@import "../../../../../_scss/imports/themes/default/mixins";
+@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";
+@import "../../../../../scss/imports/scss/mixins";
+// @import "../../../../../scss/imports/scss/Base";
 
 .layerLabel{
     width: 100%;
@@ -109,7 +109,8 @@
 .label-layer,
 .label-position,
 .label-transform,
-.label-style {
+.label-style,
+.label-styles {
 	position: relative;
 	border-bottom: 1px solid #505050;
 	cursor: pointer;
@@ -207,6 +208,10 @@
     text-overflow: clip;
 }
 
+.label-style .disabled {
+	cursor: default;
+}
+
 /* styles elements */
 .content-style .item-template {
 	display: none;
diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html
index e36a25d6..24b2bd10 100644
--- a/js/panels/Timeline/Span.reel/Span.html
+++ b/js/panels/Timeline/Span.reel/Span.html
@@ -9,8 +9,7 @@
                             "module": "js/panels/Timeline/Span.reel",
                             "name": "Span",
                             "properties": {
-                                "element": {"#": "spanspace"},
-                                "tweenspan": {"#": "tweenspan"}
+                                "element": {"#": "spanspace"}
                             }
                         }
 
@@ -19,8 +18,7 @@
 	</head>
 	<body>
 
-    	<div id="spanspace">
-            <div id="tweenspan" class="tween_span"></div>
+    	<div id="spanspace" class="tween_span">
     	</div>
 
     </body>
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index f7bd4ff0..8114e74a 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -18,24 +18,19 @@ var Span = exports.Span = Montage.create(Component, {
         },
         set:function (value) {
             this._spanWidth = value;
-        }
-    },
-
-    prepareForDraw:{
-        value:function(){
-
+            this.needsDraw = true;
         }
     },
 
     draw:{
         value: function(){
-            this.tweenspan.style.width = this.spanWidth + "px";
+            this.element.style.width = this.spanWidth + "px";
         }
     },
 
     highlightSpan:{
         value: function(){
-            this.tweenspan.classList.add("spanHighlight");
+            this.element.classList.add("spanHighlight");
         }
     }
 });
diff --git a/js/panels/Timeline/Style.reel/scss/Style.scss b/js/panels/Timeline/Style.reel/scss/Style.scss
index f15f553d..827a0c43 100644
--- a/js/panels/Timeline/Style.reel/scss/Style.scss
+++ b/js/panels/Timeline/Style.reel/scss/Style.scss
@@ -3,11 +3,11 @@
  */
  
 // Import theme settings
-@import "../../../../../_scss/imports/themes/default/colors";
-@import "../../../../../_scss/imports/themes/default/mixins";
+@import "../../../../../scss/imports/themes/default/colors";
+@import "../../../../../scss/imports/themes/default/mixins";
 
 // Import generic mixins and styles
-@import "../../../../../_scss/imports/scss/mixins";
+@import "../../../../../scss/imports/scss/mixins";
 
 .hidden {
 	display: none;
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
old mode 100755
new mode 100644
index 29bf6eb3..2a84c21a
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -24,7 +24,8 @@
                         "trackRepetition" : {"@" : "repetition2"},
                         "playhead": {"#": "playhead"},
                         "playheadmarker": {"#": "playhead_marker"},
-                        "timetext" : {"#": "time_text"}
+                        "timetext" : {"#": "time_text"},
+                        "timebar" : {"#": "time_bar"}
                     }
                 },
 
@@ -143,6 +144,36 @@
 	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.tweens",
 	            			"oneway" : false
 	            		},
+                        "animatedElement" : {
+                            "boundObject" : {"@" : "repetition2"},
+            	            "boundObjectPropertyPath" : "objectAtCurrentIteration.animatedElement",
+            	            "oneway" : false
+                        },
+	            		"arrStyleTracks" : {
+	            			"boundObject" : {"@" : "repetition2"},
+	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.arrStyleTracks",
+	            			"oneway" : false
+	            		},
+                        "isTrackAnimated" : {
+                            "boundObject" : {"@" : "repetition2"},
+            	            "boundObjectPropertyPath" : "objectAtCurrentIteration.isTrackAnimated",
+            	            "oneway" : false
+                        },
+                        "trackDuration" : {
+                            "boundObject" : {"@" : "repetition2"},
+                        	"boundObjectPropertyPath" : "objectAtCurrentIteration.trackDuration",
+                        	"oneway" : false
+                        },
+                        "animationName" : {
+                            "boundObject" : {"@" : "repetition2"},
+                            "boundObjectPropertyPath" : "objectAtCurrentIteration.animationName",
+                            "oneway" : false
+                        },
+                        "currentKeyframeRule" : {
+                            "boundObject" : {"@" : "repetition2"},
+                        	"boundObjectPropertyPath" : "objectAtCurrentIteration.currentKeyframeRule",
+                        	"oneway" : false
+                        },
 	            		"isMainCollapsed" : {
 	            			"boundObject" : {"@" : "repetition2"},
 	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.isMainCollapsed",
@@ -162,7 +193,12 @@
 	            			"boundObject" : {"@" : "repetition2"},
 	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed",
 	            			"oneway" : false
-	            		}
+	            		},
+                        "trackPosition" : {
+                            "boundObject" : {"@" : "repetition2"},
+            	            "boundObjectPropertyPath" : "objectAtCurrentIteration.trackPosition",
+            	            "oneway" : false
+                        }
 	            	}
 	            }
             }
@@ -193,7 +229,9 @@
 
                         
                         <div id="user_layers" class="userlayers">
-                            <div id="master_layer" class="masterlayer">Master Layer</div>
+                            <div id="master_layer" class="masterlayer">
+                                <div>Master Layer</div>
+                            </div>
                             <div id="container-layers">
                             	<div id="container-layer"></div>
                             </div>
@@ -202,6 +240,7 @@
                         <div id="timeline_gutter" class="timelinegutter">
                             <div id="newlayer_button" class="newlayerbutton"></div>
                             <div id="deletelayer_button" class="deletelayerbutton"></div>
+                            <input id="end_hottext" class="endhottext hottext">
                         </div>
                     </div>
                 </div>
@@ -220,7 +259,9 @@
                         <div id="layer_tracks" class="tl_layertracks">
                         	<div class="layout-tracks">
 	                            <div id="playhead_marker" class="playheadmarker"></div>
-	                            <div id="master_track" class="mastertrack"></div>
+	                            <div id="master_track" class="mastertrack">
+                                    <div id="time_bar" class="timebar"></div>
+	                            </div>
 	                            <div id="container-tracks" class="container-tracks">
 	                            	<div id="container-track"></div>
 	                            </div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
old mode 100755
new mode 100644
index 07fee19d..43e758f4
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -65,6 +65,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value:1000
     },
 
+    _masterDuration:{
+        serializable: true,
+        value:0
+    },
+
+    masterDuration:{
+        serializable:true,
+        get:function(){
+            return this._masterDuration;
+        },
+        set:function(val){
+            this._masterDuration = val;
+            this.timebar.style.width = (this._masterDuration / 12) + "px";
+        }
+    },
+
     _arrTracks:{
         serializable:true,
         value:[]
@@ -109,6 +125,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
+    _selectedTweens:{
+        value:[]
+    },
+
+    selectedTweens:{
+        serializable:true,
+        get:function () {
+            return this._selectedTweens;
+        },
+        set:function (newVal) {
+            this._selectedTweens = newVal;
+        }
+    },
+
     _isLayer:{
         value:false
     },
@@ -234,13 +264,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
-    deselectKeyframes:{
+    deselectTweens:{
         value:function () {
-            for (var i = 0; i < this.selectedKeyframes.length; i++) {
-                this.selectedKeyframes[i].deselect();
+            for (var i = 0; i < this.selectedTweens.length; i++) {
+                this.selectedTweens[i].deselectTween();
             }
-            this.selectedKeyframes = null;
-            this.selectedKeyframes = new Array();
+            this.selectedTweens = null;
+            this.selectedTweens = new Array();
         }
     },
 
@@ -253,6 +283,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     handleDeleteLayerClick:{
         value:function (event) {
+        	if (this.arrLayers.length === 1) {
+        		// do not delete last layer
+        		return;
+        	}
+        	if (this.layerRepetition.selectedIndexes === null) {
+        		// nothing is selected, do not delete
+        		return;
+        	}
             this._deleteKeyDown = false;
             if (this.application.ninja.currentSelectedContainer.id === "UserContent") {
                 this._hashKey = "123";
@@ -269,10 +307,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             if (this._firstTimeLoaded) {
                 this._firstTimeLoaded = false;
             } else {
-                while (this.arrLayers.pop()) {
-                }
-                while (this.arrTracks.pop()) {
-                }
+                this.arrLayers.length = 0;
+                this.arrTracks.length = 0;
+
                 if (event.detail.element.id === "UserContent") {
                     this._hashKey = "123";
                 } else {
@@ -308,8 +345,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 while (layerResult = this.returnedObject[hashIndex]) {
                     trackResult = this.returnedTrack[hashIndex];
                     if (layerResult.deleted !== true) {
-                        this.arrLayers.push(layerResult);
                         this.arrTracks.push(trackResult);
+                        this.arrLayers.push(layerResult);
+
                     }
                     hashIndex++;
                 }
@@ -322,8 +360,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                     while (dLayer[hashVariable]) {
                         if (dLayer[hashVariable]._layerID === event.detail._el._layerID) {
                             dLayer[hashVariable].deleted = false;
-                            this.arrLayers.splice(event.detail._layerPosition, 1, event.detail._el);
-                            this.arrTracks.splice(event.detail._layerPosition, 1, event.detail._track);
+                            this.arrTracks.splice(event.detail._layerPosition, 0, event.detail._track);
+                            this.arrLayers.splice(event.detail._layerPosition, 0, event.detail._el);
+
                             break;
 
                         }
@@ -349,8 +388,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                     while (dLayer[hashVariable]) {
                         if (dLayer[hashVariable]._layerID === event.detail._el._layerID) {
                             dLayer[hashVariable].deleted = false;
-                            this.arrLayers.splice(event.detail._layerPosition, 1, event.detail._el);
-                            this.arrTracks.splice(event.detail._layerPosition, 1, event.detail._track);
+                            this.arrTracks.splice(event.detail._layerPosition, 0, event.detail._track);
+                            this.arrLayers.splice(event.detail._layerPosition, 0, event.detail._el);
                             break;
 
                         }
@@ -387,12 +426,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                     thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
                 }
 
-
                 newTrack.trackID = this.currentLayerNumber;
                 newTrack.isMainCollapsed = true;
                 newTrack.isPositionCollapsed = true;
                 newTrack.isTransformCollapsed = true;
-                newTrack.isStyleCollapsed = false;
+                newTrack.isStyleCollapsed = true;
+                newTrack.isTrackAnimated = false;
+                newTrack.currentKeyframeRule = null;
+                newTrack.trackPosition = 0;
+                newTrack.arrStyleTracks = [];
                 newTrack.tweens = [];
 
                 if (_firstLayerDraw) {
@@ -407,16 +449,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                     thingToPush.layerPosition = myIndex;
                     thingToPush.isSelected = true;
                     newTrack.trackPosition = myIndex;
-                    this.arrLayers.splice(myIndex, 0, thingToPush);
                     this.arrTracks.splice(myIndex, 0, newTrack);
+                    this.arrLayers.splice(myIndex, 0, thingToPush);
                     this._LayerUndoPosition = myIndex;
                     this.selectLayer(myIndex);
                     this.hashLayerNumber.setItem(this._hashKey, thingToPush);
                     this.hashInstance.setItem(this._hashKey, thingToPush, myIndex);
                     this.hashTrackInstance.setItem(this._hashKey, newTrack, myIndex);
                 } else {
-                    this.arrLayers.splice(0, 0, thingToPush);
                     this.arrTracks.splice(0, 0, newTrack);
+                    this.arrLayers.splice(0, 0, thingToPush);
                     thingToPush.layerPosition = this.arrLayers.length - 1;
                     newTrack.trackPosition = this.arrTracks.length - 1;
                     this._LayerUndoPosition = this.arrLayers.length - 1;
@@ -429,13 +471,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this._LayerUndoIndex = thingToPush.layerID;
                 this._LayerUndoStatus = true;
                 this._TrackUndoObject = newTrack;
-
-                // Removing clearing the selection - Handled by the selection-controller
-                /*
                 if(_firstLayerDraw){
-                    this.application.ninja.selectionController.executeSelectElement();
+                this.application.ninja.selectionController.executeSelectElement();
                 }
-                */
 
             }
         }
@@ -461,7 +499,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                                 while (this.arrLayers.length) {
                                     if (dLayer[hashVariable]._layerID === this.arrLayers[k]._layerID) {
                                         dLayer[hashVariable].deleted = true;
-                                        ElementMediator.deleteElements(dLayer[myIndex].element);
+//                                        ElementMediator.deleteElements(dLayer[myIndex].element);
                                         this.arrLayers.splice(k, 1);
                                         this.arrTracks.splice(k, 1);
                                         break;
@@ -477,7 +515,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         while (dLayer[hashVariable]) {
                             if (dLayer[hashVariable]._layerID === event.detail._el._layerID) {
                                 dLayer[hashVariable].deleted = true;
-                                ElementMediator.deleteElements(dLayer[myIndex].element);
+//                                ElementMediator.deleteElements(dLayer[myIndex].element);
                                 parentNode = dLayer[hashVariable].parentElement;
                                 break;
                             }
@@ -495,7 +533,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                                 while (this.arrLayers.length) {
                                     if (dLayer[hashVariable]._layerID === this.arrLayers[k]._layerID) {
                                         dLayer[hashVariable].deleted = true;
-                                        ElementMediator.deleteElements(dLayer[myIndex].element);
+//                                        ElementMediator.deleteElements(dLayer[myIndex].element);
                                         this.arrLayers.splice(k, 1);
                                         this.arrTracks.splice(k, 1);
                                         break;
@@ -516,12 +554,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         dLayer = this.hashInstance.getItem(this._hashKey);
                         dTrack = this.hashTrackInstance.getItem(this._hashKey);
                         dLayer[myIndex].deleted = true;
-                        ElementMediator.deleteElements(dLayer[myIndex].element);
 
                         this.arrLayers.splice(myIndex, 1);
                         this.arrTracks.splice(myIndex, 1);
                         this._LayerUndoIndex = this._LayerUndoObject.layerID;
                         this._LayerUndoPosition = myIndex;
+                        ElementMediator.deleteElements(dLayer[myIndex].element);
+
                     } else {
                         dLayer = this.hashInstance.getItem(this._hashKey);
                         dTrack = this.hashTrackInstance.getItem(this._hashKey);
@@ -744,6 +783,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             var i = 0,
                 arrLayersLength = this.arrLayers.length;
 
+            if(this.selectedKeyframes){
+                this.deselectTweens();
+            }
+                        
             for (i = 0; i < arrLayersLength; i++) {
                 if (i === layerIndex) {
                     this.arrLayers[i].isSelected = true;
@@ -757,12 +800,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.trackRepetition.selectedIndexes = [layerIndex];
                 this.currentLayerSelected = this.arrLayers[layerIndex];
                 this.currentTrackSelected = this.arrTracks[layerIndex];
-                // Selection is being handled by the selection controller
-                /*
                 if(this._captureSelection){
-                    this.application.ninja.selectionController.selectElements(this.currentLayerSelected.element)
+                this.application.ninja.selectionController.selectElements(this.currentLayerSelected.element)
                 }
-                */
                 this._captureSelection = true;
             } else {
                 this.layerRepetition.selectedIndexes = null;
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index cbae49c8..b8784d4d 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -236,7 +236,7 @@
     position: absolute;
     top: 6px;
     left: -3px;
-    z-index: 912;
+    z-index: 92;
     background-color: #b50003;
     opacity: 0.5;
 }
@@ -244,8 +244,23 @@
     height: 100%;
     width: 1px;
     background-color: #cccccc;
-    top: 0px;
-    left: 0px;
+    top: 0;
+    left: 0;
     position: absolute;
-    z-index: 913;
+    z-index: 91;
+}
+.timebar{
+    height: 3px;
+    width:1px;
+    background-color: #ff0003;
+    opacity: 0.3;
+    top:10px;
+    position: absolute;
+    border-top: #c7a19f thin solid;
+    border-right: #ffffff thin solid;
+
+}
+.endhottext{
+    float: right;
+    padding-right: 8px;
 }
\ No newline at end of file
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index b0d191c2..4808e4d8 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -11,7 +11,8 @@
                        "properties": {
                            "element": {"#": "track"},
                            "tweenRepetition" : {"@" : "tweenRepetition"},
-                           "track_lane": {"#": "track_lanes"}
+                           "styleTracksRepetition" : {"@" : "styleTracksRepetition"},
+                           "tween": {"@" : "tween"}
                        }
                    },
 
@@ -37,19 +38,24 @@
                                "boundObjectPropertyPath" : "objectAtCurrentIteration.spanPosition",
                                "oneway" : false
                            },
-                           "timelineTrack" : {
+                           "keyFrameMillisec" : {
                                "boundObject" : {"@": "tweenRepetition"},
-                               "boundObjectPropertyPath" : "objectAtCurrentIteration.timelineTrack",
+                               "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec",
                                "oneway" : false
                            },
-                           "keyFrameMillisec" : {
+                           "tweenID" : {
                                "boundObject" : {"@": "tweenRepetition"},
-                               "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec",
+                               "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenID",
                                "oneway" : false
                            },
-                           "keyframeID" : {
+                           "tweenedProperties" : {
                                "boundObject" : {"@": "tweenRepetition"},
-                               "boundObjectPropertyPath" : "objectAtCurrentIteration.keyframeID",
+                               "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenedProperties",
+                               "oneway" : false
+                           },
+                           "isTweenAnimated" : {
+                               "boundObject" : {"@": "tweenRepetit