15 files changed, 638 insertions, 2 deletions

diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css
index 27d19e58..1b3c9184 100755
--- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css
+++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css
@@ -10,6 +10,11 @@
         -webkit-box-orient: vertical;
     height:100%;
 }
+.css_panel .resizer {
+    background-color: #333;
+    cursor: row-resize;
+    height: 1px;
+}
 .nj-section-header {
         background-color: #333;
         border-top: 1px solid #3D3D3D;
@@ -37,7 +42,6 @@
     -webkit-box-flex: 0;
     background-color: #474747;
     color: #FFF;
-    max-height: 68px;
     overflow-y: scroll;
 }
 #nj-section-styles {
diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html
index 5d6273b6..db630934 100755
--- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html
+++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html
@@ -10,6 +10,16 @@
                 <link rel="stylesheet" href="CSSPanelBase.css" type="text/css">
         <script type="text/montage-serialization">
         {
+            "resizer1": {
+                "module": "js/panels/Resizer",
+                "name": "Resizer",
+                "properties": {
+                    "element": {"#": "subPanelResizer"},
+                    "panel": {"#": "nj-section-stylesheets"},
+                    "isVertical": true
+                }
+            },
+
             "ComputedStyleSubPanel1": {
                 "module": "js/panels/CSSPanel/ComputedStyleSubPanel.reel",
                 "name": "ComputedStyleSubPanel",
@@ -43,6 +53,7 @@
                 <div  id="nj-css-stylesheet-toolbar" class="nj-css-toolbar">
                         <a href="#" id="nj-css-add-stylesheet" title="Add Stylesheet">Add Rule</a>
                 </div>
+        <div id="subPanelResizer" class="resizer"></div>
                 <!-- Style Rule list subsection -->
                 <h2 id="nj-css-styles-header" class="nj-section-header">
                         <div id="nj-css-styles-arrow" class="panelDisclosureIcon"></div>
diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
index 66333cc0..b8223471 100755
--- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
@@ -15,6 +15,7 @@ var CSSPanel        = require("js/panels/CSSPanel/CSSPanel").CSSPanel;
 var ComponentsPanel = require("js/panels/Components/ComponentsPanel").ComponentsPanel;
 var ProjectPanel    = require("js/panels/Project/ProjectPanel").ProjectPanel;
 var MaterialsPanel  = require("js/panels/Materials/MaterialsPanel").MaterialsPanel;
+var PresetsPanel    = require("js/panels/presets/presets-panel").PresetsPanel;
 
 exports.PanelContainer = Montage.create(Component, {
     lastOffset: {
@@ -44,7 +45,7 @@ exports.PanelContainer = Montage.create(Component, {
     },
 
     initPanelOrder: {
-        value: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel']
+        value: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
     },
 
     panelOrder: {
@@ -99,6 +100,7 @@ exports.PanelContainer = Montage.create(Component, {
             this.addEventListener("change@appModel.ComponentsPanel", this, false);
             this.addEventListener("change@appModel.CSSPanel", this, false);
             this.addEventListener("change@appModel.MaterialsPanel", this, false);
+            this.addEventListener("change@appModel.PresetsPanel", this, false);
         }
     },
 
diff --git a/js/panels/presets/content.reel/content.css b/js/panels/presets/content.reel/content.css
new file mode 100644
index 00000000..08e1d53b
--- /dev/null
+++ b/js/panels/presets/content.reel/content.css
@@ -0,0 +1,52 @@
+.presetsPanel {
+    display: -webkit-box;
+    text-shadow: 1px 1px 1px #000;
+    -webkit-box-orient: vertical;
+    -webkit-box-flex: 1;
+}
+.presetsPanel .treeRoot {
+    margin: 0 8px;
+}
+.tab-bar {
+    -webkit-box-flex: 0;
+    background-color: #282828;
+    color: #FFF;
+    display: -webkit-box;
+    font-size: 12px;
+    -webkit-box-orient: horizontal;
+}
+
+.tab-bar div {
+    -webkit-box-flex: 0;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+    background-color: #474747;
+    background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.2) 0,rgba(0,0,0,0) 3px);
+    border-top: 1px solid rgb(100, 100, 100);
+    border-left: 1px solid rgba(100, 100, 100, 0.3);
+    border-right: 1px solid rgba(100, 100, 100, 0.3);
+    padding: 4px 9px;
+    cursor: pointer;
+    opacity: 0.6;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    position: relative;
+    z-index: 999;
+}
+.tab-bar div.active-tab {
+    background-image: none;
+    box-shadow: 0 -5px 2px 3px rgba(0,0,0,0.2);
+    position: relative;
+    opacity: 1;
+    text-overflow: clip;
+    z-index: 1001;
+}
+
+.librarySlot {
+    -webkit-box-flex: 1;
+    overflow: auto;
+    background-color: #474747;
+    position: relative;
+    z-index: 1000;
+}
\ No newline at end of file
diff --git a/js/panels/presets/content.reel/content.html b/js/panels/presets/content.reel/content.html
new file mode 100644
index 00000000..38de2a6d
--- /dev/null
+++ b/js/panels/presets/content.reel/content.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- <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> -->
+<html lang="en">
+<head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link rel="stylesheet" href="content.css" type="text/css">
+        <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/panels/presets/content.reel",
+                "name" : "Content",
+                "properties" : {
+                    "element" : {"#" : "presetsPanel"},
+                    "activeTabIndex": 0,
+                    "tabBar" : {"#": "tab-bar" },
+                    "tabs" : [
+                        {"key":"styles", "tab": {"#": "styles" }},
+                        {"key":"transitions", "tab": {"#": "transitions" }}
+                    ]
+                }
+            },
+            "substitution": {
+                "module": "montage/ui/substitution.reel",
+                "name": "Substitution",
+                "properties": {
+                    "element": {"#": "librarySlot"},
+                    "switchComponents": {
+                        "styles": {"@": "stylesLibrary"},
+                        "transitions": {"@": "transitionsLibrary"}
+
+                    }
+                },
+                "bindings": {
+                    "switchValue": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "contentPanel",
+                        "oneway": true