5 files changed, 265 insertions, 0 deletions

diff --git a/js/panels/Components/Components.xml b/js/panels/Components/Components.xml
new file mode 100644
index 00000000..b3056330
--- /dev/null
+++ b/js/panels/Components/Components.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="ISO-8859-1"?>
+<tree id="Components">
+    <folder id="montageComponents" label="Montage Components">
+        <leaf id="Button" label="Button" />
+        <leaf id="Checkbox" label="Checkbox" />
+        <leaf id="DynamicText" label="Dynamic Text" />
+        <leaf id="FlowController" label="FlowController" />
+        <leaf id="HotText" label="HotText" />
+        <leaf id="HotTextUnit" label="HotTextUnit" />
+        <leaf id="ImageContainer" label="Image Container" />
+        <leaf id="Progress" label="Progress" />
+        <leaf id="Scrollview" label="Scrollview" />
+        <leaf id="Slider" label="Slider" />
+        <leaf id="TextArea" label="TextArea" />
+        <leaf id="Textfield" label="Textfield" />
+        <leaf id="Toggle" label="Toggle" />
+    </folder>
+    <folder id="metaComponents" label="Meta Components">
+        <leaf id="Condition" label="Condition" />
+        <leaf id="Repetition" label="Repetition" />
+        <leaf id="Slot" label="Slot" />
+        <leaf id="Substitution" label="Substitution" />
+    </folder>
+    <folder id="htmlPresets" label="HTML Components">
+        <leaf id="html_button" label="Button" />
+        <leaf id="html_input" label="Text Input" />
+    </folder>
+</tree>
\ No newline at end of file
diff --git a/js/panels/Components/ComponentsPanel.js b/js/panels/Components/ComponentsPanel.js
new file mode 100644
index 00000000..df1d74bb
--- /dev/null
+++ b/js/panels/Components/ComponentsPanel.js
@@ -0,0 +1,47 @@
+/* <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     PanelBase = require("js/panels/PanelBase").PanelBase;
+var ComponentsPanelBase = require("js/panels/Components/ComponentsPanelBase.reel").ComponentsPanelBase;
+
+exports.ComponentsPanel = Montage.create(PanelBase, {
+    id : {value : "componentsPanel", writable:true, enumerable:true, configurable:true},
+    panelName : {value : "Components", writable:true, enumerable:true, configurable:true},
+    panelHeaderID : {value : "componentsPanelHeader", writable:true, enumerable:true, configurable:true},
+    disclosureIconID : {value : "componentsPanelDisclosureIcon", writable:true, enumerable:true, configurable:true},
+    closeButtonID : {value : "componentsPanelCloseButton", writable:true, enumerable:true, configurable:true},
+    panelContentID : {value : "componentsPanelContent", writable:true, enumerable:true, configurable:true},
+
+    init : {
+        value : function()
+        {
+            this.contentHeight = 200;
+            this.minHeight = 100;
+            this.defaultHeight = 200;
+
+            /* OLD WAY -- Removing the temporary div
+            // TODO: Remove this comment once this is tested.
+            var panelContainer = document.createElement("div");
+            this._componentsPanelBase = ComponentsPanelBase.create();
+            this._componentsPanelBase.element = panelContainer;
+
+            this.content = this._componentsPanelBase;
+            this._componentsPanelBase.needsDraw = true;
+            */
+
+            this.content = ComponentsPanelBase.create();
+        }
+    },
+
+    _componentsPanelBase:{
+        enumerable: true,
+        value: null,
+        writable:true
+    }
+
+});
\ No newline at end of file
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css
new file mode 100644
index 00000000..ac250c83
--- /dev/null
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css
@@ -0,0 +1,11 @@
+/* <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> */
+
+.treeHolder{
+    width: 227px;
+    background: red;
+    padding-left: 13px;
+}
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
new file mode 100644
index 00000000..df104ecc
--- /dev/null
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -0,0 +1,34 @@
+<!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" type="text/css" href="ComponentsPanelBase.css">
+
+        <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module": "js/panels/Components/ComponentsPanelBase.reel",
+                "name": "ComponentsPanelBase",
+                "properties": {
+                    "element": {"#": "components_panel"}
+                }
+            }
+        }
+        </script>
+                
+        </head>
+        <body>
+    
+        <div id="components_panel" class="components_panel">
+            <div class="treeHolder">
+                <ul id="comp_tree"></ul>
+            </div>
+        </div>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
new file mode 100644
index 00000000..41afefa5
--- /dev/null
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -0,0 +1,145 @@
+/* <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,
+    NJUtils = require("js/lib/NJUtils").NJUtils;
+
+var treeControlModule = require("js/components/tree.reel");
+
+var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
+    _hasFocus: {
+        enumerable: false,
+        value: false
+    },
+    prepareForDraw: {
+        enumerable: false,
+        value: function() {
+            var treeHolderDiv = document.getElementById("comp_tree");
+            var componentsTree = treeControlModule.Tree.create();
+            componentsTree.element = treeHolderDiv;
+            componentsTree.dataProvider = this._loadXMLDoc("js/panels/Components/Components.xml");
+            componentsTree.needsDraw = true;
+
+            this.eventManager.addEventListener( "executeAddComponent", this, false);
+        }
+    },
+    willDraw: {
+        enumerable: false,
+        value: function() {
+
+        }
+    },
+    draw: {
+        enumerable: false,
+        value: function() {
+
+        }
+    },
+
+    _loadXMLDoc: {
+        value:function(dname) {
+            if (window.XMLHttpRequest) {
+                xhttp = new XMLHttpRequest();
+            }
+            xhttp.open("GET", dname, false);
+            xhttp.send();
+            return xhttp.responseXML;
+        }
+    },
+
+    handleExecuteAddComponent: {
+        value: function(evt) {
+            this.addComponentToStage(evt.detail.component, evt.detail.dropX, evt.detail.dropY)
+        }
+    },
+
+    addComponentToStage:{
+        value:function(componentType, dropX, dropY){
+            var compW = 100,
+                compH = 100,
+                elementType = "div",
+                componentContainer,
+                componentElement;
+
+            if(componentType == "Button"){
+                compW = 118;
+                compH = 52;
+            }else if(componentType == "Checkbox"){
+                compW = 53;
+                compH = 53;
+//                elementType = "input";
+            }else if(componentType == "DynamicText"){
+                compW = 100;
+                compH = 20;
+            }else if(componentType == "FlowController"){
+                compW = 800;
+                compH = 320;