34 files changed, 2704 insertions, 1 deletions

diff --git a/js/panels/CSSPanel/css-shorthand-map.js b/js/panels/CSSPanel/css-shorthand-map.js
index bc43ebc4..191dbae5 100755
--- a/js/panels/CSSPanel/css-shorthand-map.js
+++ b/js/panels/CSSPanel/css-shorthand-map.js
@@ -52,7 +52,6 @@ exports.CSS_SHORTHAND_MAP = {
     'font-style' : ['font'],
     'font-family' : ['font'],
     'font-size' : ['font'],
-    'font-style' : ['font'],
     'font-variant' : ['font'],
     'font-weight' : ['font'],
     
@@ -74,4 +73,21 @@ exports.CSS_SHORTHAND_MAP = {
     '-webkit-transition-duration' : ['-webkit-transition'],
     '-webkit-transition-timing-function' : ['-webkit-transition'],
     '-webkit-transition-delay' : ['-webkit-transition']
+};
+
+exports.CSS_SHORTHAND_TO_SUBPROP_MAP = {
+    'background' : ["background-image", "background-repeat-x", "background-repeat-y", "background-attachment",
+                    "background-position-x", "background-position-y", "background-origin", "background-clip",
+                    "background-color"],
+    'border' : ["border-top-width", "border-right-width", "border-bottom-width", "border-left-width",
+                "border-top-style", "border-right-style", "border-bottom-style", "border-left-style",
+                "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "border-image"],
+    'border-radius' : ["border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius",
+                       "border-bottom-left-radius"],
+    'font' : ["font-family", "font-size", "font-style", "font-variant", "font-weight", "line-height"],
+    'list' : ["list-style-type", "list-style-image", "list-style-position"],
+    'margin' : ["margin-top", "margin-right", "margin-bottom", "margin-left"],
+    'padding' : ["padding-top", "padding-right", "padding-bottom", "padding-left"],
+    '-webkit-transition' : ["-webkit-transition-property", "-webkit-transition-duration",
+                            "-webkit-transition-timing-function", "-webkit-transition-delay"]
 };
\ No newline at end of file
diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html
index d3673105..ef023f01 100755
--- a/js/panels/PanelContainer.reel/PanelContainer.html
+++ b/js/panels/PanelContainer.reel/PanelContainer.html
@@ -61,6 +61,13 @@
                     "element": {"#": "panel_5"}
                 }
             },
+            "panel_6": {
+                "module": "js/panels/Panel.reel",
+                "name": "Panel",
+                "properties": {
+                "element": {"#": "panel_6"}
+                }
+            },
 
             "panel_6": {
                 "prototype": "js/panels/Panel.reel",
diff --git a/js/panels/collapse-composer.js b/js/panels/collapse-composer.js
new file mode 100644
index 00000000..0bd916c8
--- /dev/null
+++ b/js/panels/collapse-composer.js
@@ -0,0 +1,137 @@
+/* <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 Composer = require("montage/ui/composer/composer").Composer;
+
+exports.CollapseComposer = Montage.create(Composer, {
+
+    collapsed : {
+        value: false
+    },
+
+    _expandedHeight : {
+        value: null
+    },
+
+    _doCollapse : {
+        value: false,
+        distinct: true
+    },
+
+    _doExpand : {
+        value: false,
+        distinct: true
+    },
+
+    _step : {
+        value: 0,
+        distinct: true
+    },
+
+    load: {
+        value: function() {
+            //this.element.addEventListener("mousedown", this, true);
+            this.element.addEventListener("click", this, false);
+        }
+    },
+
+    unload: {
+        value: function() {
+            //this.element.removeEventListener("mousedown", this, true);
+            this.element.removeEventListener("click", this, true);
+        }
+    },
+
+    handleClick : {
+        value: function(e) {
+            e.preventDefault();
+            this.toggleCollapse();
+        }
+    },
+
+    toggleCollapse : {
+        value: function() {
+            if(this.collapsed) {
+                this.initExpand();
+            } else {
+                this.initCollapse();
+            }
+
+            this.collapsed = !this.collapsed;
+        }
+    },
+
+    initCollapse : {
+        value: function() {
+            //this.component.element.style.display = 'none';
+            console.log("init collapse");
+            this._expandedHeight = window.getComputedStyle(this.component.element).height;
+            this.needsFrame = this._doCollapse = true;
+        }
+    },
+
+    initExpand : {
+        value: function() {
+            //this.component.element.style.display = '';
+            console.log("init collapse");
+
+            this.needsFrame = this._doExpand = true;
+        }
+    },
+
+    frame : {
+        value: function() {
+            if(this._doCollapse) {
+                if (this._step === 0) {
+                    this.component.element.style.height = this._expandedHeight;
+                    this._step = 1;
+                    this.needsFrame = true;
+                } else if (this._step === 1) {
+                    this.component.element.style.webkitTransition = 'height 0.14s cubic-bezier(.44,.19,0,.99)';
+                    this._step = 2;
+                    this.needsFrame = true;
+                } else {
+                    this.component.element.style.height = '0px';
+                    this.collapsed = true;
+                    this._doCollapse = false;
+                    this._step = 0;
+                }
+            } else if(this._doExpand) {
+                this.component.element.style.height = this._expandedHeight;
+                this.collapsed = false;
+                this._doExpand = false;
+            }
+        }
+    },
+
+    handleWebkitTransitionEnd : {
+        value: function(e) {
+            e.stopPropagation();
+