3 files changed, 36 insertions, 17 deletions

diff --git a/webgui/data/index.html b/webgui/data/index.html
index e4a6c63..b677387 100644
--- a/webgui/data/index.html
+++ b/webgui/data/index.html
@@ -15,14 +15,14 @@
       Need javascript to function.
     </p>
     <div class="tabs">
-      <ul class="tab-links">
+      <ul class="tabLinks" id="tabLinks">
         <li class="active"><a href="#editor">Editor</a></li>
         <li><a href="#drafts">Drafts</a></li>
         <li><a href="#printers">Printers & Jobs</a></li>
         <li id="errors-tab" style="display:none;"><a href="#errors">Errors</a></li>
       </ul>
 
-      <div class="tab-content">
+      <div class="tabContent" id="tabContent">
         <div class="tab active" id="editor">
           <!-- <label id="titleLabel" for="editorTitle">Title</label> -->
           <input id="saveDraft" type="checkbox" checked="checked" /><label for="saveDraft">Save as Draft</label>
diff --git a/webgui/data/style.css b/webgui/data/style.css
index fd40d92..d496e2a 100644
--- a/webgui/data/style.css
+++ b/webgui/data/style.css
@@ -98,6 +98,16 @@ tr.focused td {
     background-color:#f0f0f0;
 }
 
+.close {
+    float:right;
+    text-decoration:underline;
+    color:#4c4c4c;
+}
+
+.close:hover {
+    text-decoration:none;
+}
+
 /*----- Tabs -----*/
 .tabs {
     display:block;
@@ -109,7 +119,7 @@ tr.focused td {
 }
 
 /*----- Tab Links -----*/
-.tab-links {
+.tabLinks {
     display:block;
     height:2.2em;
     margin:0;
@@ -118,19 +128,19 @@ tr.focused td {
 }
 
 /* Clearfix */
-.tab-links:after {
+.tabLinks:after {
     display:block;
     clear:both;
     content:'';
 }
 
-.tab-links li {
+.tabLinks li {
     margin:0px 0.5em;
     float:left;
     list-style:none;
 }
 
-.tab-links a {
+.tabLinks a {
     padding:0.5em 1em;
     display:inline-block;
     border-radius:3px 3px 0px 0px;
@@ -141,7 +151,7 @@ tr.focused td {
     transition:all linear 0.15s;
 }
 
-.tab-links a:hover {
+.tabLinks a:hover {
     text-decoration:none;
 }
 
@@ -156,7 +166,7 @@ li.active a, li.active a:hover {
 }
 
 /*----- Content of Tabs -----*/
-.tab-content {
+.tabContent {
     padding:0.5em;
     border:1px solid #ddd;
     border-radius:3px;
diff --git a/webgui/data/tabs.js b/webgui/data/tabs.js
index 1d178d9..0cdb8e5 100644
--- a/webgui/data/tabs.js
+++ b/webgui/data/tabs.js
@@ -1,13 +1,22 @@
 jQuery(document).ready(function() {
-    jQuery('.tabs .tab-links a').on('click', function(e)  {
-        var currentAttrValue = jQuery(this).attr('href');
+    jQuery('.tabs .tabLinks a').on('click', switchTab);
+
+    var observer = new window.MutationObserver(function(mutations, observer) {
+        jQuery('.tabs .tabLinks a').on('click', switchTab);
+    });
+    jQuery('.tabLinks').each( function () {
+        observer.observe(this, { childList: true, subtree: true });
+    });
+});
+
+function switchTab(e) {
+    var currentAttrValue = jQuery(this).attr('href');
  
-        // Show/Hide Tabs
-        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
+    // Show/Hide Tabs
+    jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
  
-        // Change/remove current tab to active
-        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
+    // Change/remove current tab to active
+    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
  
-        e.preventDefault();
-    });
-});
+    e.preventDefault();
+}