15 files changed, 631 insertions, 2 deletions

diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.css b/js/components/treeview/ninja-branch.reel/ninja-branch.css
index a3a9350e..340233c7 100644
--- a/js/components/treeview/ninja-branch.reel/ninja-branch.css
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.css
@@ -26,7 +26,6 @@
     cursor: pointer;
     font-weight: bold;
     padding: 3px 0 4px;
-    text-shadow: 1px 1px 1px #000;
 }
 
 /* First Level */
diff --git a/js/data/menu-data.js b/js/data/menu-data.js
index 3a065958..6503e776 100755
--- a/js/data/menu-data.js
+++ b/js/data/menu-data.js
@@ -352,6 +352,15 @@ exports.MenuData = Montage.create( Montage, {
                         }
                     },
                     {
+                        "displayText" : "Presets",
+                        "hasSubMenu" : false,
+                        "enabled": true,
+                        "checked": {
+                            "value": true,
+                            "boundProperty": "PresetsPanel"
+                        }
+                    },
+                    {
                         "displayText" : "Code",
                         "hasSubMenu" : false,
                         "enabled": true
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
+                    }
+                }
+            },
+            "stylesLibrary": {
+                "module": "js/panels/presets/style-presets.reel",
+                "name": "StylesLibrary"
+            },
+            "transitionsLibrary": {
+                "module": "js/panels/presets/transitions-presets.reel",
+                "name": "TransitionsLibrary"
+            }
+
+        }
+                </script>
+</head>
+<body>
+    <section id="presetsPanel" class="presetsPanel">
+        <nav id="tab-bar" class="tab-bar">
+            <div id="styles">Style Library</div>
+            <div id="transitions">Transitions Library</div>
+        </nav>
+        <div id="librarySlot" class="librarySlot"></div>
+    </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/panels/presets/content.reel/content.js b/js/panels/presets/content.reel/content.js
new file mode 100644
index 00000000..c43c593c
--- /dev/null
+++ b/js/panels/presets/content.reel/content.js
@@ -0,0 +1,79 @@
+/* <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,
+    Component = require("montage/ui/component").Component;
+
+exports.content = Montage.create(Component, {
+    hasTemplate: {
+        value: true
+    },
+    contentPanel : {