I decided to leverage Twitter Bootstrap's buitlin drop down menu faci…

…tily rather then roll my own. Thus, updating the Twitter Bootstap instance.

....
Added the following logical UI/UX functions:
Delete a row.
Edit a cell (row_column) content.
Edit the width and indentation of a cell.
Delete a cell (row_column).

js/local/dom_doc.js

@@ -1,3 +1,91 @@
+/** Cell edit dialog.
+ * This function constructs the html elements required to edit our document cell.
+ * @class Cell edit dialog.
+ * @constructor
+ */
+var form_gen = function(options) {
+    this.init = function(options) {
+        if (options && options.hasOwnProperty("href")) {
+            this.href = href;
+        }
+        if (options && options.hasOwnProperty("row")) {
+            this.row = options.row;
+        }
+        if (options && options.hasOwnProperty("column")) {
+            this.column = options.column;
+        }
+        if (options && options.hasOwnProperty("content")) {
+            this.content = options.content;
+        }
+        if (options && options.hasOwnProperty("css_class")) {
+            this.css_class = options.css_class;
+        }
+        if (options && options.hasOwnProperty("elem")) {
+            this.elem = options.elem;
+        }
+    };
+    /** Renders the dialog.
+    *   - Locates the dialog container elements (set to hidden).
+    *   - Injects the dialog body elements with the cell chosen by the user (the cell link clicked on)
+    * */
+    this.render = function() {
+        closeDialogControls();
+        var editColumnContainer = document.querySelector("#edit-column-container");
+        var row_input = document.createElement("input");
+        row_input.setAttribute("type", "hidden");
+        row_input.setAttribute("value", this.row);
+        row_input.setAttribute("row_id", this.row);
+        var column_input = document.createElement("input");
+        column_input.setAttribute("type", 'hidden');
+        column_input.setAttribute("value", this.column);
+        column_input.setAttribute("column_id", this.column);
+        var row_column = g.getRowColumn(this.row, this.column);
+        var cell_col_span = document.querySelector("#cell-col");
+        cell_col_span.textContent = row_column.getLocation();
+
+        var rowList = g.getRowList();
+        var rowObj = rowList.getRow(this.row);
+        var cell_row_span = document.querySelector("#cell-row");
+        cell_row_span.textContent = rowObj.getLocation();
+
+        var text_area = document.createElement("textarea");
+        text_area.setAttribute("rows", "8");
+        text_area.setAttribute("cols", "120");
+        text_area.setAttribute("id", "content-text-area");
+        text_area.innerHTML = this.content;
+        editColumnContainer.innerHTML = text_area.outerHTML;
+
+        var css_fieldset = document.createElement("fieldset");
+        var css_label = document.createElement("label");
+        css_label.setAttribute("for", "css_clss_tf");
+        css_label.appendChild(document.createTextNode("Style"));
+        css_fieldset.innerHTML = css_label.outerHTML;
+        var css_class_tf = document.createElement("input");
+        css_class_tf.setAttribute("type", "text");
+        css_class_tf.setAttribute("value", this.css_class);
+        css_class_tf.setAttribute("id", "css_class_tf");
+        css_fieldset.innerHTML += css_class_tf.outerHTML;
+        editColumnContainer.innerHTML += css_fieldset.outerHTML;
+
+        var button = document.createElement("button");
+        button.setAttribute("id", "save-column");
+        button.innerHTML = "Save";
+        editColumnContainer.innerHTML += button.outerHTML;
+
+        var delete_button = document.createElement("button");
+        delete_button.setAttribute("id", "delete-column");
+        delete_button.innerHTML = "Delete";
+        editColumnContainer.innerHTML += delete_button.outerHTML;
+        editColumnContainer.innerHTML += row_input.outerHTML;
+        editColumnContainer.innerHTML += column_input.outerHTML;
+        var control_panel = document.getElementById("edit-column-dlg");
+        var style = control_panel.style;
+        style.setProperty("display", "block");
+    };
+    this.init(options);
+};
+
+
 /*** This section contains utility methods. ***/
 
 /** Closes any dialogs who's markup contrains the "control-dlg" css class.  **/
@@ -106,6 +194,17 @@ var AppRouter  =  function() {
             showSuccessMessage("Row Added.");
         });
 
+        /** Responds to click on menu item : Rows->Delete Row */
+        document.querySelector("#delete-row-link").addEventListener("click", function(event) {
+            event.preventDefault();
+            closeDialogControls();
+            reloadSelectControl("#delete-row");
+            var dlg = document.querySelector("#row-delete-dlg");
+            var style = dlg.style;
+            style.display = "block";
+        });
+
+
         /** Responds to click on menu item : Columns->Add Column (to specific row) */
         document.querySelector("#add-column-link").addEventListener("click", function(event) {
             event.preventDefault();
@@ -123,6 +222,15 @@ var AppRouter  =  function() {
             }
         });
 
+        /** Responds to click in Delete Row Dialog->buttom  */
+        document.querySelector("#delete-row-button").addEventListener('click', function(event) {
+            var row_id = document.querySelector("#delete-row").value;
+            g.deleteRow(row_id);
+            document.querySelector("#report").innerHTML = g.render().outerHTML;
+            reloadSelectControl("#delete-row");
+            showSuccessMessage("Row Deleted.");
+        });
+
         /** General event handler for all of the application's dialogs.
         *   Note! So once a dialog is displayed, the EventManager services events like a button or link click.
         *
@@ -145,14 +253,136 @@ var AppRouter  =  function() {
                 var tagName = event.target.tagName;
                 switch (tagName) {
                     case 'I':
-                        closeDialogControls();
+                        closeDialogControls();event
                     break;
                 }
             };
+
+            /** Determines which cell the user clicked.
+            *   Looks through dom tree till it finds a link.
+            *   Parses the link's href attribute and determine the row and column id of the cell we want to process
+            *   (render in the Edit Cell Dialog).
+            *
+            *   Also captures when a user clicks the edit icon. The edit icons are displayed when the document "Grid" layout is set to display.
+            *   The grid "Layout" allows the user to edit BLANK cells.
+            */
+            this.clickListener = function(event) {
+                var tagName = event.target.tagName;
+                event.preventDefault();
+                event.stopPropagation();
+                switch (tagName) {
+                    case 'I':
+                        var icon = event.target.className;
+                        if (icon !== 'icon-pencil') {
+                            closeDialogControls();
+                            break;
+                        }
+                    case 'A':
+                    default:
+                        /*  * Note we have some redundent code -- editCellListenerll Handler does the same thing (below) */
+                        var href = null;
+                        var elem = event.target;
+                        var not_found = true;
+                        while (not_found) {
+                            if (elem.href && elem.classList && elem.classList.contains("internal")) {
+                                href = elem.href;
+                                not_found = false;
+                                break;
+                            } else {
+                                elem = elem.parentElement;
+                                if (elem == null) {
+                                    return;
+                                }
+                                // kind of a kludge -- we've reached the cell parent. So let's use querySelector and get the link
+                                if (elem.hasAttribute("cell")) {
+                                    elem =elem.querySelector("a.internal");
+                                }
+                            }
+                        }
+                        var elements = href.split("/");
+                        var len = elements.length;
+                        elem = null;
+                        var srcElement = document.querySelector("a[href='" + "#" + href.split("#")[1] + "']");
+                        for (var nIndex = 0; nIndex < len; nIndex++) {
+                            elem = elements[nIndex];
+                            if (elem.indexOf("#op") != -1) {
+                                var row_id = elements[(nIndex + 2)];
+                                var column_id = elements[(nIndex + 4)];
+                                var columnList = g.getColumnList();
+                                var column = columnList.getColumn(column_id);
+                                var row_column = g.getRowColumn(row_id, column_id);
+                                var fg = new form_gen({"row": row_id, "column": column_id,
+                                    "content": column.getContent(), "css_class": row_column.getCssClass(), "elem": srcElement});
+                                fg.render();
+                                break;
+                            }
+                        }
+                        break;
+                }
+            };
+
+            /** Services the edit-cell dialog (when the dialog is displayed to the user).
+             *  The edit-cell dialog allows the user to change content, set css classes on the containing <div> element.
+             *  The edit cell dialog also allows the user to Delete the cell.
+             *  The user can cancel the edit dialog by clicking on the "close-icon".
+             *
+             */
+            this.editCellListener = function(event) {
+                event.preventDefault();
+                var src = event.target.tagName;
+                switch (src) {
+                    case 'BUTTON':
+                        var edit_dlg = document.querySelector("#edit-column-dlg>div[id='edit-column-container']");
+                        var content = edit_dlg.querySelector("#content-text-area").value;
+                        var css_class = edit_dlg.querySelector("#css_class_tf").value;
+                        var row_id = edit_dlg.querySelector("input[row_id]").value;
+                        var column_id = edit_dlg.querySelector("input[column_id]").value;
+                        var columnList = g.getColumnList();
+                        var column = columnList.getColumn(column_id);
+                        var row_column = g.getRowColumn(row_id, column_id);
+                        var operation = event.target.id;
+                        switch (operation) {
+                            case 'save-column':
+                                column.setContent(content);
+                                row_column.setCssClass(css_class);
+                                showSuccessMessage("Column Save Successfully.");
+                                break;
+                            case 'delete-column':
+                                g.deleteRowColumn(row_column);
+                                // since a column can used in more than one row or location,
+                                // we can't delete column if there are other instances remaining
+                                if (g.getNumColumnReferences(column) === 0) {
+                                    columnList.deleteColumn(column);
+                                }
+                                if (g.getNumColumnsInRow(row_id) === 0) {
+                                    g.deleteRow(row_id);
+                                }
+                                showSuccessMessage("Column Deleted.");
+                                break;
+                        }
+                        edit_dlg.querySelector("input[row_id]").value = "";
+                        edit_dlg.querySelector("input[column_id]").value = "";
+                        var report = document.getElementById("report");
+                        var table = g.render();
+                        report.innerHTML = table.outerHTML;
+                        var dlg = document.querySelector("#edit-column-dlg");
+                        var style = dlg.style;
+                        style.setProperty("display", "none");
+                        break;
+                    case "I":
+                        if (event.target.classList.contains("close-dlg-icon")) {
+                            closeDialogControls();
+                        }
+                        break;
+                }
+            };
+
             /** Selects the appropriate dom elements and adds event listeners to them.
              *
              */
             this.init = function() {
+                document.querySelector("#report").addEventListener("click", this.clickListener, true);
+                document.querySelector("#edit-column-dlg").addEventListener("click", this.editCellListener, true);
                 document.querySelector("#add-column-to-row-button").addEventListener("click", this.addColumnListener, true);
                 document.querySelector("#dlg-controls").addEventListener("click", this.dlgListener, true);
             };
@@ -163,5 +393,5 @@ var AppRouter  =  function() {
             var eventManager = new EventManager();
         } catch (error) {
             console.log("Error installing EventManager: " + error);
-       }
+        }
 };