4 files changed, 82 insertions, 51 deletions

diff --git a/js/panels/Materials/Materials.xml b/js/panels/Materials/Materials.xml
index 7d10fcfa..e955623a 100644
--- a/js/panels/Materials/Materials.xml
+++ b/js/panels/Materials/Materials.xml
@@ -2,24 +2,10 @@
 <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="ReliefTunnelMaterial" label="Relief Tunnel" />
-       <leaf id="SquareTunnelMaterial" label="Square Tunnel" />
-      <leaf id="FlyMaterial" label="Fly" />
-      <leaf id="WaterMaterial" label="Water" />
-      <leaf id="ZInvertMaterial" label="ZInvert" />
-      <leaf id="DeformMaterial" label="Deform" />
-      <leaf id="StarMaterial" label="Star" />
-      <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" />
+        <leaf id="LinearGradientMaterial" label="Linear Gradient" />
+        <leaf id="RadialGradientMaterial" label="Radial Gradient" />
+        <leaf id="FlatMaterial" label="Flat" />
     </folder>
     <folder id="customMaterials" label="Custom Materials">
         <leaf id="CheckerBoard" label="CheckerBoard" />
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index bce2e42b..62ca5395 100644
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -236,28 +236,11 @@ exports.MaterialsPopup = Montage.create(Component, {
                 {
            this._materialName = materialID;
             if( 
-                                        (materialID === "BrickMaterial")                                ||
-                                        (materialID ===  "UberMaterial")                                || 
+                                        (materialID ===  "UberMaterial")                                ||
                                         (materialID ===  "FlatMaterial")                                ||
                                         (materialID ===  "BumpMetalMaterial")                   ||
-                                        (materialID ===  "PlasmaMaterial")                              ||
                                         (materialID ===  "LinearGradientMaterial")              ||
-                                        (materialID ===  "RadialGradientMaterial")              ||
-                                        (materialID ===  "RadialBlurMaterial")                  ||
-                                        (materialID ===  "PulseMaterial")                               ||
-                                        (materialID ===  "TunnelMaterial")                              ||
-                                        (materialID ===  "ReliefTunnelMaterial")                ||
-                                        (materialID ===  "SquareTunnelMaterial")                ||
-                                        (materialID ===  "FlyMaterial")                                 ||
-                                        (materialID ===  "WaterMaterial")                               ||
-                                        (materialID ===  "ZInvertMaterial")                             ||
-                                        (materialID ===  "DeformMaterial")                              ||
-                                        (materialID ===  "StarMaterial")                                ||
-                                        (materialID ===  "TwistMaterial")                               ||
-                                        (materialID ===  "KeleidoscopeMaterial")                ||
-                                        (materialID ===  "JuliaMaterial")                               ||
-                                        (materialID ===  "MandelMaterial")                              ||
-                                        (materialID ===  "IridescentScalesMaterial")
+                                        (materialID ===  "RadialGradientMaterial")
                                 )
                         {
                                 var material = MaterialsLibrary.getMaterial( materialID );
diff --git a/js/panels/properties/sections/position-and-size.reel/position-and-size.js b/js/panels/properties/sections/position-and-size.reel/position-and-size.js
index 43f08fcf..49117090 100644
--- a/js/panels/properties/sections/position-and-size.reel/position-and-size.js
+++ b/js/panels/properties/sections/position-and-size.reel/position-and-size.js
@@ -28,6 +28,14 @@ exports.PosSize = Montage.create(Component, {
         value: null
     },
 
+    aspectRatioWidth: {
+        value: null
+    },
+
+    aspectRatioHeight: {
+        value: null
+    },
+
     _disablePosition: {
         value: true
     },
@@ -62,9 +70,8 @@ exports.PosSize = Montage.create(Component, {
             this.widthControl.addEventListener("change", this, false);
             this.widthControl.addEventListener("changing", this, false);
 
-            
-            //this._controlList[0].control.addEventListener("action", this._handleStageEvent.bind(this), false);
-            //PropertiesPanelModule.PropertiesPanelBase.PIControlList["stageWidthHeightLock"] = this._controlList[0].control;
+            this.bindButton.identifier = "ratio";
+            this.bindButton.addEventListener("action", this, false);
 
         }
     },
@@ -87,6 +94,25 @@ exports.PosSize = Montage.create(Component, {
         }
     },
 
+    /**
+     * Calculate the current aspect ration when the bind button is pressed.
+     * If one of the values is 0, then use 1:1 as the ratio;
+     */
+    handleRatioAction: {
+        value: function() {
+            if(this.bindButton.value) {
+                this.aspectRatioWidth = this.heightControl.value / this.widthControl.value;
+                if(isNaN(this.aspectRatioWidth) || !isFinite(this.aspectRatioWidth) || this.aspectRatioWidth === 0) this.aspectRatioWidth = 1;
+
+                this.aspectRatioHeight = this.widthControl.value / this.heightControl.value;
+                if(isNaN(this.aspectRatioHeight) || !isFinite(this.aspectRatioHeight) || this.aspectRatioHeight === 0) this.aspectRatioHeight = 1;
+            } else {
+                this.aspectRatioWidth = 1;
+                this.aspectRatioHeight = 1;
+            }
+        }
+    },
+
     handleLeftChange: {
         value: function(event) {
             var prevPosition;
@@ -121,6 +147,17 @@ exports.PosSize = Montage.create(Component, {
                 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
 
                 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
+
+                if(this.bindButton.value) {
+
+                    var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value);
+
+                    if(!isFinite(newWidth)) newWidth = this.heightControl.value;
+
+                    this.widthControl.value = newWidth;
+                    this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Change", "pi");
+                }
+
                 this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Change", "pi", prevPosition);
                 this.savedPosition = null;
             }
@@ -135,9 +172,23 @@ exports.PosSize = Montage.create(Component, {
                 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
 
                 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
+
+                if(this.bindButton.value) {
+
+                    var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value);
+
+                    if(!isFinite(newHeight)) newHeight = this.widthControl.value;
+
+                    this.heightControl.value = newHeight;
+                    this.application.ninja.elementMediator.setProperty(items, "height", [newHeight + "px"] , "Change", "pi");
+
+                }
+
                 this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Change", "pi", prevPosition);
                 this.savedPosition = null;
+
             }
+
         }
     },
 
@@ -166,24 +217,22 @@ exports.PosSize = Montage.create(Component, {
             var items;
             if(!event.wasSetByCode) {
 
+                if(!this.savedPosition) this.savedPosition = this.heightSize;
+
+                this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
+
                 if(this.bindButton.value) {