1 files changed, 223 insertions, 13 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 313693b1..55274322 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -25,26 +25,25 @@ exports.TextProperties = Montage.create(ToolProperties, {
     alignCenter: {value: null},
     alignRight: {value: null},
     alignJustify: {value: null},
-    indentRight: {value: null},
-    indentLeft: {value: null},
+    indent: {value: null},
+    outdent: {value: null},
     numberedList: {value: null},
     bulletedList: {value: null},
 
     prepareForDraw: {
         value: function() {
-            this.linkTarget.items = ["Target","_blank","_self","_parent", "_top"];
-            this.fontSettings.label = "Settings";
-            this.btnBold.label = "Bold";
-            this.btnItalic.label = "Italic";
-            this.btnUnderline.label = "Underline";
-            this.btnStrikethrough.label = "Strikethrough";
-            this.alignLeft.label = "Left";
-            this.alignCenter.label = "Center";
-            this.alignRight.label = "Right";
-            this.alignJustify.label = "Justify";
+            this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia",  "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"];
+            this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"];
+            this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"];
         }
     },
-    
+
+    handleEditorSelect: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.updateStates();
+        }
+    },
+
     _subPrepare: {
         value: function() {
             //this.divElement.addEventListener("click", this, false);
@@ -54,6 +53,217 @@ exports.TextProperties = Montage.create(ToolProperties, {
     handleClick: {
         value: function(event) {
            // this.selectedElement = event._event.target.id;
+
+        }
+    },
+
+    handleBtnBoldAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("bold");
+        }
+    },
+
+    handleBtnItalicAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("italic");
+        }
+    },
+
+    handleBtnUnderlineAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("underline");
+        }
+    },
+
+    handleBtnStrikethroughAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("strikethrough");
+        }
+    },
+    
+    handleAlignLeftAction: {
+        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");
+        }
+    },
+
+    handleAlignCenterAction: {
+        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("justifycenter");
+        }
+    },
+
+    handleAlignRightAction: {
+        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("justifyright");
+        }
+    },
+
+    handleAlignJustifyAction: {
+        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("justifyfull");
+        }
+    },
+
+    handleIndentAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("indent");
+        }
+    },
+
+    handleOutdentAction: {
+        value: function(e) {
+            this.application.ninja.stage.textTool.doAction("outdent");
+        }
+    },
+
+    handleFontSizeChange: {
+        value: function(e) {
+            //We need the index of whats selected. This is a temporary solution til we can have a variable amount for font-size.
+            for( var i = 0; i < this.fontSize.items.length; i++) {
+                if (this.fontSize.value === this.fontSize.items[i]) {
+                    this.application.ninja.stage.textTool.doAction("fontsize", (i +1));
+                    break;
+                }
+            }
+        }
+    },
+
+    defineInitialProperties: {
+        value: function() {
+            if (!this.initialized) {
+
+                //Setup Font Selection tool
+                this.fontColor = this.element.getElementsByClassName("fontColor")[0];
+                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, false);
+
+                Object.defineBinding(this.btnBold, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.bold",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
+
+                Object.defineBinding(this.btnItalic, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.italic",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
+
+                Object.defineBinding(this.btnUnderline, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.underline",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
+
+                Object.defineBinding(this.btnStrikethrough, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.strikethrough",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
+
+                Object.defineBinding(this.alignLeft, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.justifyleft",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
+
+                Object.defineBinding(this.alignCenter, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.justifycenter",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true
+                });
+
+                Object.defineBinding(this.alignRight, "pressed", {
+                  boundObject: this.application.ninja.stage.textTool,
+                  boundObjectPropertyPath: "states.justifyright",
+                  boundValueMutator: this.validatePressed,
+                  oneway: true