14 files changed, 748 insertions, 312 deletions

diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.js b/js/components/tools-properties/pen-properties.reel/pen-properties.js
index cd205e07..c37359e1 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.js
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.js
@@ -9,6 +9,17 @@ var ToolProperties = require("js/components/tools-properties/tool-properties").T
 
 var PenProperties = exports.PenProperties = Montage.create(ToolProperties, {
     addedColorChips: { value: false },
+    _penToolRadio:     { value: null, enumerable: false },
+    _penPlusRadio:   { value: null, enumerable: false },
+    _penMinusRadio:   { value: null, enumerable: false },
+
+    _subPrepare: {
+        value: function() {
+            this._penToolRadio.addEventListener("click", this, false);
+            this._penPlusRadio.addEventListener("click", this, false);
+            this._penMinusRadio.addEventListener("click", this, false);
+        }
+    },
 
     _fill: {
         enumerable: false,
@@ -50,6 +61,22 @@ var PenProperties = exports.PenProperties = Montage.create(ToolProperties, {
         }
     },
 
+    _selectedSubtool: {
+        value: "pen", enumerable: false
+    },
+
+    selectedSubtool: {
+        get: function() { return this._selectedSubtool;},
+        set: function(value) { this._selectedSubtool = value; }
+    },
+
+    handleClick: {
+        value: function(event) {
+            this._selectedSubtool = event._event.target.value;
+            NJevent("penSubToolChange");
+        }
+    },
+
     draw: {
         enumerable: false,
         value: function () {
diff --git a/js/data/tools-data.js b/js/data/tools-data.js
index 05455efe..138f9f4d 100755
--- a/js/data/tools-data.js
+++ b/js/data/tools-data.js
@@ -104,7 +104,7 @@ exports.ToolsData = Montage.create(Montage, {
                 "properties":   "penProperties",
                 "spriteSheet":  true,
                 "action":       "PenTool",
-                "toolTip":      "Pen Tool",
+                "toolTip":      "Pen Tool (P)",
                 "cursor":       "auto",
                 "lastInGroup":  false,
                 "container":    false,
@@ -165,7 +165,7 @@ exports.ToolsData = Montage.create(Montage, {
                 "properties":   "brushProperties",
                 "spriteSheet":  true,
                 "action":       "BrushTool",
-                "toolTip":      "Brush Tool",
+                "toolTip":      "Brush Tool (B)",
                 "cursor":       "url('images/tools/brush_down.png') 9 17, default",
                 "lastInGroup":  false,
                 "container":    false,
diff --git a/js/document/document-html.js b/js/document/document-html.js
index 4a8d5d41..04565753 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -68,6 +68,8 @@ exports.HtmlDocument = Montage.create(Component, {
                 if (this.model.views.design.initialize(this.model.parentContainer)) {
                         //Hiding iFrame, just initiliazing
                         this.model.views.design.hide();
+                        //Setting the iFrame property for reference in helper class
+                        this.model.webGlHelper.iframe = this.model.views.design.iframe;
                 } else {
                         //ERROR: Design View not initialized
                 }
@@ -82,7 +84,7 @@ exports.HtmlDocument = Montage.create(Component, {
                 this.model.views.design.iframe.style.opacity = 0;
                 this.model.views.design.content = this.model.file.content;
                 //TODO: Improve reference (probably through binding values)
-                this.model.views.design.model = this.model;
+                this.model.views.design._webGlHelper = this.model.webGlHelper;
                 //Rendering design view, using observers to know when template is ready
                 this.model.views.design.render(function () {
                         //Adding observer to know when template is ready
diff --git a/js/document/models/base.js b/js/document/models/base.js
index 0957145a..a3644815 100755
--- a/js/document/models/base.js
+++ b/js/document/models/base.js
@@ -65,7 +65,8 @@ exports.BaseDocumentModel = Montage.create(Component, {
     _selection: {
         value: []
     },
-
+    ////////////////////////////////////////////////////////////////////
+    //
     selection: {
         get: function() {
             return this._selection;
@@ -134,20 +135,22 @@ exports.BaseDocumentModel = Montage.create(Component, {
         }
     },
     ////////////////////////////////////////////////////////////////////
-        //
+        //Gets all stylesheets in document
         getStyleSheets: {
                 value: function () {
-                        //
+                        //Array to store styles (style and link tags)
                         var styles = [];
-                //
+                //Looping through document sytles
                 for (var k in this.views.design.iframe.contentWindow.document.styleSheets) {
+                        //Check for styles to has proper propeties
                         if (this.views.design.iframe.contentWindow.document.styleSheets[k].ownerNode && this.views.design.iframe.contentWindow.document.styleSheets[k].ownerNode.getAttribute) {
+                                //Check for ninja-template styles, if so, exclude
                         if (this.views.design.iframe.contentWindow.document.styleSheets[k].ownerNode.getAttribute('data-ninja-template') === null) {
                                 styles.push(this.views.design.iframe.contentWindow.document.styleSheets[k]);
                         }
                 }
                 }
-                //
+                //Returning filtered results
                 return styles;
                 }
         },
@@ -155,7 +158,7 @@ exports.BaseDocumentModel = Montage.create(Component, {
         //
         save: {
         value: function (callback, libCopyCallback) {
-                //
+                //TODO: Implement on demand logic
                 if (this.needsSave) {
                         //Save
                 } else {
@@ -184,7 +187,7 @@ exports.BaseDocumentModel = Montage.create(Component, {
         //
         saveAll: {
         value: function (callback, libCopyCallback) {
-                //
+                //TODO: Implement on demand logic
                 if (this.needsSave) {
                         //Save
                 } else {
@@ -214,47 +217,49 @@ exports.BaseDocumentModel = Montage.create(Component, {
         //
         saveAs: {
         value: function (callback) {
-                //
+                //TODO: Implement on demand logic
                 if (this.needsSave) {
                         //Save current file on memory
                 } else {
                         //Copy file from disk
                 }
+                //TODO: Add functionality
         }
     },
     ////////////////////////////////////////////////////////////////////
         //
         handleSaved: {
                 value: function (result) {
-                        //
+                        //Checking for success code in save
                         if (result.status === 204) {
+                                //Clearing flag with successful save
                                 this.model.needsSave = false;
                         }
-                        //
+                        //Making callback call if specifed with results of operation
                         if (this.callback) this.callback(result);
                 }