18 files changed, 649 insertions, 7 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/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js
index 62f7e522..a2283d46 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.js
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.js
@@ -90,7 +90,7 @@ exports.CloudPopup = Montage.create(Component, {
         value: function() {
                 if(this._os === 'mac') {
                         location.href = '/ninja_localcloud_for_mac.zip';
-                } else if (this._os === 'win') {
+                } else if (this._os === 'windows') {
                         location.href = '/ninja_localcloud_for_windows.zip';
                 } else {
                         alert('Your operating system is not supported by the Ninja Local Cloud App.');
diff --git a/js/models/app-model.js b/js/models/app-model.js
index 57394bb9..bfa1871c 100755
--- a/js/models/app-model.js
+++ b/js/models/app-model.js
@@ -325,6 +325,19 @@ exports.AppModel = Montage.create(Component, {
         }
     },
 
+    _presetsPanel: {
+        value: true
+    },
+
+    PresetsPanel: {
+        get: function() {
+            return this._presetsPanel;
+        },
+        set: function(value) {
+            this._presetsPanel = value;
+        }
+    },
+
     _materials: {
         value: []
     },
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<