1 files changed, 122 insertions, 235 deletions

diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js
index 0cfa6c4c..db0d3af6 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -34,309 +34,196 @@ var ArrayController = require("montage/ui/controller/array-controller").ArrayCon
 var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 
 exports.TextProperties = Montage.create(ToolProperties, {
-    className: {value: null, serializable: true},
-    tagType: {value: null, serializable: true},
-    fontSelection: {value: null, serializable: true},
-    fontSettings: {value: null, serializable: true},
+
+    fontName: {value: null, serializable: true},
     fontSize: {value: null, serializable: true},
     fontColor: {value: null, serializable: true},
+
     btnBold: {value: null, serializable: true},
     btnItalic: {value: null, serializable: true},
     btnUnderline: {value: null, serializable: true},
     btnStrikethrough: {value: null, serializable: true},
-    txtLink: {value: null, serializable: true},
-    linkTarget: {value: null, serializable: true},
+
     alignLeft: {value: null, serializable: true},
     alignCenter: {value: null, serializable: true},
     alignRight: {value: null, serializable: true},
     alignJustify: {value: null, serializable: true},
+
     indent: {value: null, serializable: true},
     outdent: {value: null, serializable: true},
+
     numberedList: {value: null, serializable: true},
     bulletedList: {value: null, serializable: true},
-    fontTypes: {value: null, serializable: true},
-    fontSizes: {value: null, serializable: true},
 
-    prepareForDraw: {
-        value: function() {
-            // code commented out because montage ui element select-input is incomplete. Will switch back when they fix or actually complete the component
-//            this.fontTypes = Montage.create(ArrayController);
-//            this.fontTypes.content = [
-//                { value: "Arial", text: "Arial" },
-//                { value: "Arial Black", text: "Arial Black" },
-//                { value: "Courier New", text: "Courier New" },
-//                { value: "Garamond", text: "Garamond" },
-//                { value: "Georgia", text: "Georgia" },
-//                { value: "Open Sans", text: "Open Sans" },
-//                { value: "Tahoma", text: "Tahoma" },
-//                { value: "Times New Roman", text: "Times New Roman" },
-//                { value: "Trebuchet MS", text: "Trebuchet MS" },
-//                { value: "Verdana", text: "Verdana" }
-//            ];
-
-            //this.fontSelection.contentController = this.fontTypes;
-//
-//            this.fontSizes = Montage.create(ArrayController);
-//            this.fontSizes.content = [
-//                { value: 1, text: "8pt" },
-//                { value: 2, text: "10pt" },
-//                { value: 3, text: "12pt" },
-//                { value: 4, text: "14pt" },
-//                { value: 5, text: "18pt" },
-//                { value: 6, text: "24pt" },
-//                { value: 7, text: "36pt" }
-//            ];
-//            this.fontSize.contentController = this.fontSizes;
-            
-            this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia",  "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"];
-            this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"];
-            this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"];
+    // Events
+    handleEditorSelect: {
+        value: function(e) {
+            this.alignLeft.pressed = false;
+            this.alignCenter.pressed = false;
+            this.alignRight.pressed = false;
+            this.alignJustify.pressed = false;
+            this.bulletedList.pressed = false;
+            this.numberedList.pressed = false;
+
+
+            switch(this.application.ninja.stage.textTool.justify) {
+                case "left":
+                    this.alignLeft.pressed = true;
+                    break;
+                case "center":
+                    this.alignCenter.pressed = true;
+                    break;
+                case "right":
+                    this.alignRight.pressed = true;
+                    break;
+                case "full":
+                    this.alignJustify.pressed = true;
+            }
+
+            switch(this.application.ninja.stage.textTool.listStyle) {
+                case "ordered":
+                    this.numberedList.pressed = true;
+                    break;
+                case "unordered":
+                    this.bulletedList.pressed = true;
+            }
         }
     },
 
-    handleEditorSelect: {
+    handleEditorBlur: {
         value: function(e) {
-            //this.application.ninja.stage.textTool.updateStates();
-//            this.fontSelection.value = this.application.ninja.stage.textTool.states.fontname;
-//
-//            for( var i = 0; i < this.fontSize.items.length; i++) {
-//                if (this.application.ninja.stage.textTool.states.fontsize == i + 1) {
-//                    this.fontSize.value = this.fontSize.items[i]
-//                    break;
-//                }
-//            }
+
         }
     },
 
-    _subPrepare: {
+
+    // Draw Cycle
+    prepareForDraw: {
         value: function() {
-            //this.divElement.addEventListener("click", this, false);
-        }
-    },
 
-    handleClick: {
-        value: function(event) {
-           // this.selectedElement = event._event.target.id;
+            this.fontColor.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80};
+            this.application.ninja.colorController.addButton("chip", this.fontColor);
+            this.fontColor.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'});
+            this.fontColor.addEventListener("change",this.handleFontColorChange.bind(this),false);
+
+            this.application.ninja.stage.textTool.addEventListener("editorSelect", this.handleEditorSelect.bind(this), false);
+
+
+            //Bind to Rich Text editor that lives on the stage component
+            Object.defineBinding(this.application.ninja.stage.textTool, "fontName", {
+                boundObject: this.fontName,
+                boundObjectPropertyPath: "value",
+                oneway: false
+            });
+
+            Object.defineBinding(this.application.ninja.stage.textTool, "fontSize", {
+                boundObject: this.fontSize,
+                boundObjectPropertyPath: "value",
+                oneway: false
+            });
+
+            Object.defineBinding(this.btnBold, "pressed", {
+                boundObject: this.application.ninja.stage.textTool,
+                boundObjectPropertyPath: "bold",
+                oneway: false
+            });
+
+            Object.defineBinding(this.btnItalic, "pressed", {
+                boundObject: this.application.ninja.stage.textTool,
+                boundObjectPropertyPath: "italic",
+                oneway: false
+            });
+
+            Object.defineBinding(this.btnUnderline, "pressed", {
+                boundObject: this.application.ninja.stage.textTool,
+                boundObjectPropertyPath: "underline",
+                oneway: false
+            });
 
+            Object.defineBinding(this.btnStrikethrough, "pressed", {
+                boundObject: this.application.ninja.stage.textTool,
+                boundObjectPropertyPath: "strikeThrough",
+                oneway: false
+            });
         }
     },
-    
-    handleAlignLeftAction: {
+
+    // Actions
+    handleJustifyLeftAction: {
         value: function(e) {
-            //this.alignLeft.value = false;
-            this.alignCenter.value = false;
-            this.alignRight.value = false;
-            this.alignJustify.value = false;
-            this.application.ninja.stage.textTool.doAction("justifyleft");
+            this.alignCenter.pressed = false;
+            this.alignRight.pressed = false;
+            this.alignJustify.pressed = false;
+            this.application.ninja.stage.textTool.justify = "left";
         }
     },
 
-    handleAlignCenterAction: {
+    handle