patternfly-sass 3.11.0 → 3.12.0

data/spec/html/list-view.html

@@ -145,11 +145,9 @@
                   <div class="input-group-btn">
                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                     <ul class="dropdown-menu">
-                      <li><a href="#">Action</a></li>
-                      <li><a href="#">Another action</a></li>
-                      <li><a href="#">Something else here</a></li>
-                      <li role="separator" class="divider"></li>
-                      <li><a href="#">Separated link</a></li>
+                      <li class="selected"><a href="#">Name</a></li>
+                      <li><a href="#">Type</a></li>
+                      <li><a href="#">Color</a></li>
                     </ul>
                   </div><!-- /btn-group -->
                   <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
@@ -159,11 +157,9 @@
                 <div class="dropdown btn-group">
                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                   <ul class="dropdown-menu">
-                    <li><a href="#">Action</a></li>
-                    <li><a href="#">Another action</a></li>
-                    <li><a href="#">Something else here</a></li>
-                    <li role="separator" class="divider"></li>
-                    <li><a href="#">Separated link</a></li>
+                    <li class="selected"><a href="#">Name</a></li>
+                    <li><a href="#">Type</a></li>
+                    <li><a href="#">Last Modified</a></li>
                   </ul>
                 </div>
                 <button class="btn btn-link" type="button">
@@ -245,21 +241,7 @@
           </div><!-- /col -->
         </div><!-- /row -->
       </div><!-- /container -->
-      <script>
-      (function($) {
-        $(document).ready(function() {
-          // Upon clicking the find button, show the find dropdown content
-          $(".btn-find").click(function () {
-            $(".find-pf-dropdown-container").toggle();
-          });
-          // Upon clicking the find close button, hide the find dropdown content
-          $(".btn-find-close").click(function () {
-            $(".find-pf-dropdown-container").hide();
-          });
 
-        });
-      })(jQuery);
-    </script>
 <div class="container-fluid">
 <div class="list-group list-view-pf list-view-pf-view">
   <div class="list-group-item">

data/spec/html/notification-drawer-horizontal-nav.html

@@ -1359,6 +1359,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -1387,6 +1388,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -1417,6 +1419,7 @@
                   Last 30 Days <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                  <li class="selected"><a href="#">Last 30 Days</a></li>
                   <li><a href="#">Last 60 Days</a></li>
                   <li><a href="#">Last 90 Days</a></li>
                 </ul>

data/spec/html/notification-drawer-vertical-nav.html

@@ -1433,6 +1433,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -1461,6 +1462,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -1491,6 +1493,7 @@
                   Last 30 Days <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                  <li class="selected"><a href="#">Last 30 Days</a></li>
                   <li><a href="#">Last 60 Days</a></li>
                   <li><a href="#">Last 90 Days</a></li>
                 </ul>

data/spec/html/toolbar.html

@@ -146,11 +146,9 @@
                   <div class="input-group-btn">
                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                     <ul class="dropdown-menu">
-                      <li><a href="#">Action</a></li>
-                      <li><a href="#">Another action</a></li>
-                      <li><a href="#">Something else here</a></li>
-                      <li role="separator" class="divider"></li>
-                      <li><a href="#">Separated link</a></li>
+                      <li class="selected"><a href="#">Name</a></li>
+                      <li><a href="#">Type</a></li>
+                      <li><a href="#">Color</a></li>
                     </ul>
                   </div><!-- /btn-group -->
                   <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
@@ -160,11 +158,9 @@
                 <div class="dropdown btn-group">
                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                   <ul class="dropdown-menu">
-                    <li><a href="#">Action</a></li>
-                    <li><a href="#">Another action</a></li>
-                    <li><a href="#">Something else here</a></li>
-                    <li role="separator" class="divider"></li>
-                    <li><a href="#">Separated link</a></li>
+                    <li class="selected"><a href="#">Name</a></li>
+                    <li><a href="#">Type</a></li>
+                    <li><a href="#">Last Modified</a></li>
                   </ul>
                 </div>
                 <button class="btn btn-link" type="button">
@@ -246,12 +242,13 @@
           </div><!-- /col -->
         </div><!-- /row -->
       </div><!-- /container -->
+
       <script>
       (function($) {
         $(document).ready(function() {
           // Upon clicking the find button, show the find dropdown content
           $(".btn-find").click(function () {
-            $(".find-pf-dropdown-container").toggle();
+            $(this).parent().find(".find-pf-dropdown-container").toggle();
           });
           // Upon clicking the find close button, hide the find dropdown content
           $(".btn-find-close").click(function () {

data/spec/html/vertical-navigation-primary-only.html

@@ -649,6 +649,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -677,6 +678,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -707,6 +709,7 @@
                   Last 30 Days <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                  <li class="selected"><a href="#">Last 30 Days</a></li>
                   <li><a href="#">Last 60 Days</a></li>
                   <li><a href="#">Last 90 Days</a></li>
                 </ul>

data/spec/html/vertical-navigation-with-badges.html

@@ -987,6 +987,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -1015,6 +1016,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -1045,6 +1047,7 @@
                   Last 30 Days <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                  <li class="selected"><a href="#">Last 30 Days</a></li>
                   <li><a href="#">Last 60 Days</a></li>
                   <li><a href="#">Last 90 Days</a></li>
                 </ul>

data/spec/html/vertical-navigation-with-secondary.html

@@ -716,6 +716,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -744,6 +745,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -774,6 +776,7 @@
                   Last 30 Days <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                  <li class="selected"><a href="#">Last 30 Days</a></li>
                   <li><a href="#">Last 60 Days</a></li>
                   <li><a href="#">Last 90 Days</a></li>
                 </ul>

data/spec/html/vertical-navigation-with-tertiary-no-icons.html

@@ -890,6 +890,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -918,6 +919,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -948,6 +950,7 @@
                   Last 30 Days <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                  <li class="selected"><a href="#">Last 30 Days</a></li>
                   <li><a href="#">Last 60 Days</a></li>
                   <li><a href="#">Last 90 Days</a></li>
                 </ul>

data/spec/html/vertical-navigation-with-tertiary-pins.html

@@ -890,6 +890,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -918,6 +919,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -948,6 +950,7 @@
                   Last 30 Days <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                  <li class="selected"><a href="#">Last 30 Days</a></li>
                   <li><a href="#">Last 60 Days</a></li>
                   <li><a href="#">Last 90 Days</a></li>
                 </ul>

data/spec/html/wizard.html

@@ -40,310 +40,272 @@
         These examples are included for development testing purposes.  For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
       </div>
       <hr>
-<h2>Initializing</h2>
-<button class="btn btn-default" data-toggle="modal" data-target="#initializing">Launch wizard showing initialization
-  state
-</button>
-<div class="example-pf "><!-- for testing/dev; not for production -->
-  <div class="modal" id="initializing" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-lg wizard-pf">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-          </button>
-          <dt class="modal-title">Wizard Title</dt>
-        </div>
-        <div class="modal-body wizard-pf-body clearfix">
-          <div class="wizard-pf-steps hidden">
-            <ul class="wizard-pf-steps-indicator">
-              <li>
-                <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
-              </li>
-              <li>
-                <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
-              </li>
-              <li>
-                <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
-              </li>
-            </ul>
-          </div>
-
-          <div class="wizard-pf-sidebar hidden">
-            <ul class="list-group">
-              <li class="list-group-item active">
-                <a>
-                  <span class="wizard-pf-substep-number">1A.</span>
-                  <span class="wizard-pf-substep-title">General</span>
-                </a>
-              </li>
-              <li class="list-group-item">
-                <a>
-                  <span class="wizard-pf-substep-number">1B.</span>
-                  <span class="wizard-pf-substep-title">Masters &amp; Nodes</span>
-                </a>
-              </li>
-              <li class="list-group-item">
-                <a>
-                  <span class="wizard-pf-substep-number">1C.</span>
-                  <span class="wizard-pf-substep-title">CDN Channel</span>
-                </a>
-              </li>
-            </ul>
-          </div><!-- /.wizard-pf-sidebar -->
-
-          <div class="wizard-pf-main">
-            <div class="blank-slate-pf">
-              <div class="spinner spinner-lg blank-slate-pf-icon"></div>
-              <h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
-              <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
-                vivamus, lorem sociosqu eget nunc amet. </p>
-            </div>
-
-          </div>
-
-        </div><!-- /.wizard-pf-body -->
-
-        <!-- TODO: disable buttons -->
-        <div class="modal-footer wizard-pf-footer">
-          <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-default disabled" data-dismiss="modal">
-            <span class="i fa fa-angle-left"></span>
-            Back
-          </button>
-          <button type="button" class="btn btn-primary disabled" data-dismiss="modal">
-            Next
-            <span class="i fa fa-angle-right"></span>
-          </button>
-        </div><!-- /.wizard-pf-footer -->
-
-      </div><!-- /.modal-content -->
-    </div><!-- /.modal-dialog -->
-  </div><!-- /.modal -->
-</div><!-- /.example-pf (not for production) -->
 
-<h2>First Step</h2>
-<button class="btn btn-default" data-toggle="modal" data-target="#firstStep">Launch wizard showing first step</button>
+<h2>Complete Wizard</h2>
+<button class="btn btn-default wizard-pf-open" data-target="#complete">Launch wizard</button>
 <div class="example-pf "><!-- for testing/dev; not for production -->
-  <div class="modal " id="firstStep" tabindex="-1" role="dialog">
+  <div class="modal " id="complete" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg wizard-pf">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+          <button type="button" class="close wizard-pf-dismiss" aria-label="Close"><span
             aria-hidden="true">&times;</span></button>
           <dt class="modal-title">Wizard Title</dt>
         </div>
         <div class="modal-body wizard-pf-body clearfix">
-          <div class="wizard-pf-steps">
-            <ul class="wizard-pf-steps-indicator">
-              <li class="active">
-                <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
-              </li>
-              <li>
-                <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
-              </li>
-              <li>
-                <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
-              </li>
-            </ul>
-          </div>
-
-          <div class="wizard-pf-sidebar">
-            <ul class="list-group">
-              <li class="list-group-item active clearfix">
-                <a>
-                  <span class="wizard-pf-substep-number">1A.</span>
-                  <span class="wizard-pf-substep-title">Details</span>
-                </a>
-              </li>
-              <li class="list-group-item">
-                <a>
-                  <span class="wizard-pf-substep-number">1B.</span>
-                  <span class="wizard-pf-substep-title">Settings</span>
-                </a>
-              </li>
-            </ul>
-          </div><!-- /.wizard-pf-sidebar -->
-
-          <div class="wizard-pf-main">
-            <div>
-              <form class="form-horizontal">
-                <div class="form-group required">
-                  <label class="col-sm-2 control-label" for="textInput-markup">Name</label>
-                  <div class="col-sm-10">
-                    <input type="text" id="textInput-markup" class="form-control">
-                  </div>
-                </div>
-                <div class="form-group">
-                  <label class="col-sm-2 control-label" for="descriptionInput-markup">Description (Optional)</label>
-                  <div class="col-sm-10">
-                    <textarea id="descriptionInput-markup" class="form-control" rows="2"></textarea>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div><!-- /.wizard-pf-main -->
-
-        </div><!-- /.wizard-pf-body -->
-
-        <div class="modal-footer wizard-pf-footer">
-          <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-default disabled" data-dismiss="modal">
-            <span class="i fa fa-angle-left"></span>
-            Back
-          </button>
-          <button type="button" class="btn btn-primary " data-dismiss="modal">
-            Next
-            <span class="i fa fa-angle-right"></span>
-          </button>
-
-        </div><!-- /.wizard-pf-footer -->
-
-      </div><!-- /.modal-content -->
-    </div><!-- /.modal-dialog -->
-  </div><!-- /.modal -->
-</div><!-- /.example-pf (not for production) -->
-
-<h2>Review Step</h2>
-<button class="btn btn-default" data-toggle="modal" data-target="#secondStep">Launch wizard showing review step</button>
-<div class="example-pf "><!-- for testing/dev; not for production -->
-  <div class="modal " id="secondStep" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-lg wizard-pf">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
-            aria-hidden="true">&times;</span></button>
-          <dt class="modal-title">Wizard Title</dt>
-        </div>
-        <div class="modal-body wizard-pf-body clearfix">
-          <div class="wizard-pf-steps">
+          <div class="wizard-pf-steps hidden">
             <ul class="wizard-pf-steps-indicator">
-              <li class="viewed-pf">
+              <li class="wizard-pf-step active" data-tabgroup="1">
                 <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
               </li>
-              <li class="viewed-pf">
+              <li class="wizard-pf-step" data-tabgroup="2">
                 <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
               </li>
-              <li class="active">
+              <li class="wizard-pf-step" data-tabgroup="3">
                 <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
               </li>
             </ul>
           </div>
 
-          <div class="wizard-pf-sidebar">
-            <ul class="list-group">
-              <li class="list-group-item active">
-                <a>
-                  <span class="wizard-pf-substep-number">3A.</span>
-                  <span class="wizard-pf-substep-title">Summary</span>
-                </a>
-              </li>
-              <li class="list-group-item">
-                <a>
-                  <span class="wizard-pf-substep-number">3B.</span>
-                  <span class="wizard-pf-substep-title">Progress</span>
-                </a>
-              </li>
-            </ul>
-          </div><!-- /.wizard-pf-sidebar -->
-
-          <div class="wizard-pf-main">
-            <div class="wizard-pf-review-steps">
+          <div class="wizard-pf-row">
+            <div class="wizard-pf-sidebar hidden">
               <ul class="list-group">
+                <li class="list-group-item active">
+                  <a href="#">
+                    <span class="wizard-pf-substep-number">1A.</span>
+                    <span class="wizard-pf-substep-title">Details</span>
+                  </a>
+                </li>
                 <li class="list-group-item">
-                  <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1').toggleClass('collapse');">First Step</a>
-                  <div id="reviewStep1" class="wizard-pf-review-substeps">
-                    <ul class="list-group">
-                      <li class="list-group-item">
-                        <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep1').toggleClass('collapse');">
-                          <span class="wizard-pf-substep-number">1A.</span>
-                          <span class="wizard-pf-substep-title">Details</span>
-                        </a>
-                        <div id="reviewStep1Substep1" class="wizard-pf-review-content">
-                          <form class="form">
-                            <div class="wizard-pf-review-item">
-                              <span class="wizard-pf-review-item-label">Name:</span>
-                              <span class="wizard-pf-review-item-value">First Last</span>
-                            </div>
-                            <div class="wizard-pf-review-item">
-                              <span class="wizard-pf-review-item-label">Description:</span>
-                              <span class="wizard-pf-review-item-value">This is the description</span>
-                            </div>
-                          </form>
-                        </div>
-                      </li>
-                      <li class="list-group-item">
-                        <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep2').toggleClass('collapse');">
-                          <span class="wizard-pf-substep-number">1B.</span>
-                          <span class="wizard-pf-substep-title">Settings</span>
-                        </a>
-                        <div id="reviewStep1Substep2" class="wizard-pf-review-content">
-                          <form class="form">
-                            <div class="wizard-pf-review-item">
-                              <div class="wizard-pf-review-item-field">Setting A</div>
-                              <div class="wizard-pf-review-item-field">Setting B</div>
-                            </div>
-                          </form>
-                        </div>
-                      </li>
-                    </ul>
-                  </div>
+                  <a href="#">
+                    <span class="wizard-pf-substep-number">1B.</span>
+                    <span class="wizard-pf-substep-title">Settings</span>
+                  </a>
+                </li>
+              </ul>
+              <ul class="list-group hidden">
+                <li class="list-group-item">
+                  <a href="#">
+                    <span class="wizard-pf-substep-number">2A.</span>
+                    <span class="wizard-pf-substep-title">Details</span>
+                  </a>
+                </li>
+                <li class="list-group-item">
+                  <a href="#">
+                    <span class="wizard-pf-substep-number">2B.</span>
+                    <span class="wizard-pf-substep-title">Settings</span>
+                  </a>
+                </li>
+              </ul>
+              <ul class="list-group hidden">
+                <li class="list-group-item">
+                  <a>
+                    <span class="wizard-pf-substep-number">3A.</span>
+                    <span class="wizard-pf-substep-title">Summary</span>
+                  </a>
                 </li>
                 <li class="list-group-item">
-                  <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2').toggleClass('collapse');">Second Step</a>
-                  <div id="reviewStep2" class="wizard-pf-review-substeps">
-                    <ul class="list-group">
-                      <li class="list-group-item">
-                        <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep1').toggleClass('collapse');">
-                          <span class="wizard-pf-substep-number">2A.</span>
-                          <span class="wizard-pf-substep-title">Details</span>
-                        </a>
-                        <div id="reviewStep2Substep1" class="wizard-pf-review-content">
-                          <form class="form">
-                            <div class="wizard-pf-review-item">
-                              <span class="wizard-pf-review-item-label">Name:</span>
-                              <span class="wizard-pf-review-item-value">First Last</span>
+                  <a>
+                    <span class="wizard-pf-substep-number">3B.</span>
+                    <span class="wizard-pf-substep-title">Progress</span>
+                  </a>
+                </li>
+              </ul>
+            </div> <!-- /.wizard-pf-sidebar -->
+            <div class="wizard-pf-main">
+              <div class="wizard-pf-loading blank-slate-pf">
+                <div class="spinner spinner-lg blank-slate-pf-icon"></div>
+                <h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
+                <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
+                  vivamus, lorem sociosqu eget nunc amet. </p>
+              </div>
+              <div class="wizard-pf-contents hidden">
+                <form class="form-horizontal">
+                  <!-- replacing id with data-id to pass build errors -->
+                  <div class="form-group required">
+                    <label class="col-sm-2 control-label" for="textInput-markup">Name</label>
+                    <div class="col-sm-10">
+                      <input type="text" data-id="textInput-markup" class="form-control">
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <label class="col-sm-2 control-label" for="descriptionInput-markup">Description (Optional)</label>
+                    <div class="col-sm-10">
+                      <textarea data-id="descriptionInput-markup" class="form-control" rows="2"></textarea>
+                    </div>
+                  </div>
+                </form>
+              </div>
+              <div class="wizard-pf-contents hidden">
+                <form class="form-horizontal">
+                  <div class="form-group required">
+                    <label class="col-sm-2 control-label" for="lorem">Lorem ipsum</label>
+                    <div class="col-sm-10">
+                      <input type="text" id="lorem" class="form-control">
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <label class="col-sm-2 control-label" for="dolor">Dolor (Optional)</label>
+                    <div class="col-sm-10">
+                      <textarea id="dolor" class="form-control" rows="2"></textarea>
+                    </div>
+                  </div>
+                </form>
+              </div>
+              <div class="wizard-pf-contents hidden">
+                <form class="form-horizontal">
+                  <div class="form-group required">
+                    <label class="col-sm-2 control-label" for="aliquam">Aliquam</label>
+                    <div class="col-sm-10">
+                      <input type="text" id="aliquam" class="form-control">
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <label class="col-sm-2 control-label" for="fermentum">Fermentum</label>
+                    <div class="col-sm-10">
+                      <textarea id="fermentum" class="form-control" rows="2"></textarea>
+                    </div>
+                  </div>
+                </form>
+              </div>
+              <div class="wizard-pf-contents hidden">
+                <form class="form-horizontal">
+                  <div class="form-group required">
+                    <label class="col-sm-2 control-label" for="consectetur">Consectetur</label>
+                    <div class="col-sm-10">
+                      <input type="text" id="consectetur" class="form-control">
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <label class="col-sm-2 control-label" for="adipiscing">Adipiscing</label>
+                    <div class="col-sm-10">
+                      <textarea id="adipiscing" class="form-control" rows="2"></textarea>
+                    </div>
+                  </div>
+                </form>
+              </div>
+              <div class="wizard-pf-contents hidden">
+                <div class="wizard-pf-review-steps">
+                  <ul class="list-group">
+                    <li class="list-group-item">
+                      <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1').toggleClass('collapse');">First Step</a>
+                      <div id="reviewStep1" class="wizard-pf-review-substeps">
+                        <ul class="list-group">
+                          <li class="list-group-item">
+                            <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep1').toggleClass('collapse');">
+                              <span class="wizard-pf-substep-number">1A.</span>
+                              <span class="wizard-pf-substep-title">Details</span>
+                            </a>
+                            <div id="reviewStep1Substep1" class="wizard-pf-review-content">
+                              <form class="form">
+                                <div class="wizard-pf-review-item">
+                                  <span class="wizard-pf-review-item-label">Name:</span>
+                                  <span class="wizard-pf-review-item-value">First Last</span>
+                                </div>
+                                <div class="wizard-pf-review-item">
+                                  <span class="wizard-pf-review-item-label">Description:</span>
+                                  <span class="wizard-pf-review-item-value">This is the description</span>
+                                </div>
+                              </form>
                             </div>
-                            <div class="wizard-pf-review-item">
-                              <span class="wizard-pf-review-item-label">Description:</span>
-                              <span class="wizard-pf-review-item-value">This is the description</span>
+                          </li>
+                          <li class="list-group-item">
+                            <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep2').toggleClass('collapse');">
+                              <span class="wizard-pf-substep-number">1B.</span>
+                              <span class="wizard-pf-substep-title">Settings</span>
+                            </a>
+                            <div id="reviewStep1Substep2" class="wizard-pf-review-content">
+                              <form class="form">
+                                <div class="wizard-pf-review-item">
+                                  <div class="wizard-pf-review-item-field">Setting A</div>
+                                  <div class="wizard-pf-review-item-field">Setting B</div>
+                                </div>
+                              </form>
                             </div>
-                          </form>
-                        </div>
-                      </li>
-                      <li class="list-group-item">
-                        <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep2').toggleClass('collapse');">
-                          <span class="wizard-pf-substep-number">2B.</span>
-                          <span class="wizard-pf-substep-title">Settings</span>
-                        </a>
-                        <div id="reviewStep2Substep2" class="wizard-pf-review-content">
-                          <form class="form">
-                            <div class="wizard-pf-review-item">
-                              <div class="wizard-pf-review-item-field">Setting A</div>
-                              <div class="wizard-pf-review-item-field">Setting B</div>
+                          </li>
+                        </ul>
+                      </div>
+                    </li>
+                    <li class="list-group-item">
+                      <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2').toggleClass('collapse');">Second Step</a>
+                      <div id="reviewStep2" class="wizard-pf-review-substeps">
+                        <ul class="list-group">
+                          <li class="list-group-item">
+                            <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep1').toggleClass('collapse');">
+                              <span class="wizard-pf-substep-number">2A.</span>
+                              <span class="wizard-pf-substep-title">Details</span>
+                            </a>
+                            <div id="reviewStep2Substep1" class="wizard-pf-review-content">
+                              <form class="form">
+                                <div class="wizard-pf-review-item">
+                                  <span class="wizard-pf-review-item-label">Name:</span>
+                                  <span class="wizard-pf-review-item-value">First Last</span>
+                                </div>
+                                <div class="wizard-pf-review-item">
+                                  <span class="wizard-pf-review-item-label">Description:</span>
+                                  <span class="wizard-pf-review-item-value">This is the description</span>
+                                </div>
+                              </form>
                             </div>
-                          </form>
-                        </div>
-                      </li>
-                    </ul>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div><!-- /.wizard-pf-main -->
+                          </li>
+                          <li class="list-group-item">
+                            <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep2').toggleClass('collapse');">
+                              <span class="wizard-pf-substep-number">2B.</span>
+                              <span class="wizard-pf-substep-title">Settings</span>
+                            </a>
+                            <div id="reviewStep2Substep2" class="wizard-pf-review-content">
+                              <form class="form">
+                                <div class="wizard-pf-review-item">
+                                  <div class="wizard-pf-review-item-field">Setting A</div>
+                                  <div class="wizard-pf-review-item-field">Setting B</div>
+                                </div>
+                              </form>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div class="wizard-pf-contents hidden">
+                <div class="wizard-pf-process blank-slate-pf">
+                  <div class="spinner spinner-lg blank-slate-pf-icon"></div>
+                  <h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
+                  <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
+                    vivamus, lorem sociosqu eget nunc amet. </p>
+                </div>
+                <div class="wizard-pf-complete blank-slate-pf hidden">
+                  <div class="wizard-pf-success-icon"><span class="glyphicon glyphicon-ok-circle"></span></div>
+                  <h3 class="blank-slate-pf-main-action">Deployment was successful</h3>
+                  <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
+                    vivamus, lorem sociosqu eget nunc amet. </p>
+                  <button type="button" class="btn btn-lg btn-primary">
+                    View Deployment
+                  </button>
+
+                </div>
+              </div>
+            </div><!-- /.wizard-pf-main -->
+          </div>
 
         </div><!-- /.wizard-pf-body -->
 
         <div class="modal-footer wizard-pf-footer">
-          <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-default" data-dismiss="modal">
+          <button type="button" class="btn btn-default btn-cancel wizard-pf-cancel wizard-pf-dismiss">Cancel</button>
+          <button type="button" class="btn btn-default wizard-pf-back disabled">
             <span class="i fa fa-angle-left"></span>
             Back
           </button>
-          <button type="button" class="btn btn-primary " data-dismiss="modal">
+          <button type="button" class="btn btn-primary wizard-pf-next disabled">
             Next
             <span class="i fa fa-angle-right"></span>
           </button>
+          <button type="button" class="btn btn-primary hidden wizard-pf-finish">
+            Deploy
+            <span class="i fa fa-angle-right"></span>
+          </button>
+          <button type="button" class="btn btn-primary hidden wizard-pf-close wizard-pf-dismiss">Close</button>
 
         </div><!-- /.wizard-pf-footer -->
 
@@ -352,12 +314,12 @@
   </div><!-- /.modal -->
 </div><!-- /.example-pf (not for production) -->
 
-<h2>Last Step</h2>
-<button class="btn btn-default" data-toggle="modal" data-target="#done">Launch wizard showing finalizing
+<h2>Initializing</h2>
+<button class="btn btn-default" data-toggle="modal" data-target="#initializing">Launch wizard showing initialization
   state
 </button>
 <div class="example-pf "><!-- for testing/dev; not for production -->
-  <div class="modal" id="done" tabindex="-1" role="dialog">
+  <div class="modal" id="initializing" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg wizard-pf">
       <div class="modal-content">
         <div class="modal-header">
@@ -367,41 +329,47 @@
           <dt class="modal-title">Wizard Title</dt>
         </div>
         <div class="modal-body wizard-pf-body clearfix">
-          <div class="wizard-pf-steps">
+          <div class="wizard-pf-steps hidden">
             <ul class="wizard-pf-steps-indicator">
-              <li class="viewed-pf">
+              <li>
                 <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
               </li>
-              <li class="viewed-pf">
+              <li>
                 <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
               </li>
-              <li class="active">
+              <li>
                 <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
               </li>
             </ul>
           </div>
 
-          <div class="wizard-pf-sidebar">
+          <div class="wizard-pf-sidebar hidden">
             <ul class="list-group">
+              <li class="list-group-item active">
+                <a>
+                  <span class="wizard-pf-substep-number">1A.</span>
+                  <span class="wizard-pf-substep-title">General</span>
+                </a>
+              </li>
               <li class="list-group-item">
                 <a>
-                  <span class="wizard-pf-substep-number">3A.</span>
-                  <span class="wizard-pf-substep-title">Summary</span>
+                  <span class="wizard-pf-substep-number">1B.</span>
+                  <span class="wizard-pf-substep-title">Masters &amp; Nodes</span>
                 </a>
               </li>
-              <li class="list-group-item active">
+              <li class="list-group-item">
                 <a>
-                  <span class="wizard-pf-substep-number">3B.</span>
-                  <span class="wizard-pf-substep-title">Progress</span>
+                  <span class="wizard-pf-substep-number">1C.</span>
+                  <span class="wizard-pf-substep-title">CDN Channel</span>
                 </a>
               </li>
             </ul>
           </div><!-- /.wizard-pf-sidebar -->
 
-          <div class="wizard-pf-main">
+          <div class="wizard-pf-main" style="margin-left: 0px">
             <div class="blank-slate-pf">
               <div class="spinner spinner-lg blank-slate-pf-icon"></div>
-              <h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
+              <h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
               <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
                 vivamus, lorem sociosqu eget nunc amet. </p>
             </div>
@@ -418,7 +386,7 @@
             Back
           </button>
           <button type="button" class="btn btn-primary disabled" data-dismiss="modal">
-            Deploy
+            Next
             <span class="i fa fa-angle-right"></span>
           </button>
         </div><!-- /.wizard-pf-footer -->
@@ -428,12 +396,12 @@
   </div><!-- /.modal -->
 </div><!-- /.example-pf (not for production) -->
 
-<h2>Completed</h2>
-<button class="btn btn-default" data-toggle="modal" data-target="#finalizing">Launch wizard showing finalizing
+<h2>Last Step</h2>
+<button class="btn btn-default" data-toggle="modal" data-target="#done">Launch wizard showing finalizing
   state
 </button>
 <div class="example-pf "><!-- for testing/dev; not for production -->
-  <div class="modal" id="finalizing" tabindex="-1" role="dialog">
+  <div class="modal" id="done" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg wizard-pf">
       <div class="modal-content">
         <div class="modal-header">
@@ -456,48 +424,46 @@
               </li>
             </ul>
           </div>
+          <div class="wizard-pf-row">
+            <div class="wizard-pf-sidebar">
+              <ul class="list-group">
+                <li class="list-group-item">
+                  <a>
+                    <span class="wizard-pf-substep-number">3A.</span>
+                    <span class="wizard-pf-substep-title">Summary</span>
+                  </a>
+                </li>
+                <li class="list-group-item active">
+                  <a>
+                    <span class="wizard-pf-substep-number">3B.</span>
+                    <span class="wizard-pf-substep-title">Progress</span>
+                  </a>
+                </li>
+              </ul>
+            </div><!-- /.wizard-pf-sidebar -->
 
-          <div class="wizard-pf-sidebar">
-            <ul class="list-group">
-              <li class="list-group-item">
-                <a>
-                  <span class="wizard-pf-substep-number">3A.</span>
-                  <span class="wizard-pf-substep-title">Summary</span>
-                </a>
-              </li>
-              <li class="list-group-item active">
-                <a>
-                  <span class="wizard-pf-substep-number">3B.</span>
-                  <span class="wizard-pf-substep-title">Progress</span>
-                </a>
-              </li>
-            </ul>
-          </div><!-- /.wizard-pf-sidebar -->
-
-          <div class="wizard-pf-main">
-            <div class="blank-slate-pf">
-              <div class="wizard-pf-success-icon"><span class="glyphicon glyphicon-ok-circle"></span></div>
-              <h3 class="blank-slate-pf-main-action">Deployment was successful</h3>
-              <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
-                vivamus, lorem sociosqu eget nunc amet. </p>
-              <button type="button" class="btn btn-lg btn-primary">
-                View Deployment
-              </button>
+            <div class="wizard-pf-main">
+              <div class="blank-slate-pf">
+                <div class="spinner spinner-lg blank-slate-pf-icon"></div>
+                <h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
+                <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
+                  vivamus, lorem sociosqu eget nunc amet. </p>
+              </div>
 
             </div>
-
           </div>
-
         </div><!-- /.wizard-pf-body -->
 
         <!-- TODO: disable buttons -->
         <div class="modal-footer wizard-pf-footer">
-          <button type="button" class="btn btn-default" data-dismiss="modal">
+          <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-default disabled" data-dismiss="modal">
             <span class="i fa fa-angle-left"></span>
             Back
           </button>
-          <button type="button" class="btn btn-primary" data-dismiss="modal">
-            Close
+          <button type="button" class="btn btn-primary disabled" data-dismiss="modal">
+            Deploy
+            <span class="i fa fa-angle-right"></span>
           </button>
         </div><!-- /.wizard-pf-footer -->
 
@@ -507,6 +473,296 @@
 </div><!-- /.example-pf (not for production) -->
 
 
+<script>
+
+  $(document).ready(function() {
+    //initialize wizards
+    var completeWizard = new wizard(".btn[data-target='#complete']");
+    // the other wizard examples are not listed here -- they are only
+    // included to show examples of the loading and process screens
+
+  });
+
+  var wizard = function(id) {
+    var self = this, modal, tabs, tabCount, tabLast, currentGroup, currentTab, contents;
+    self.id = id;
+
+    $(self.id).click(function() {
+        self.init(this)
+    });
+
+    this.init = function(button){
+      // get id of open modal
+      self.modal = $(button).data("target");
+
+      // open modal
+      $(self.modal).modal('show');
+      // adjust height of contents row (while steps and sidebar are hidden and loading message displays)
+      self.updateWizardLayout();
+
+      // assign data attribute to all tabs
+      $(self.modal + " .wizard-pf-sidebar .list-group-item").each(function() {
+          // set the first digit (i.e. n.0) equal to the index of the parent tab group
+          // set the second digit (i.e. 0.n) equal to the index of the tab within the tab group
+          $(this).attr("data-tab", ($(this).parent().index() +1 + ($(this).index()/10 + .1)));
+      });
+      // assign data attribute to all tabgroups
+      $(self.modal + " .wizard-pf-sidebar .list-group").each(function() {
+          // set the value equal to the index of the tab group
+          $(this).attr("data-tabgroup", ($(this).index() +1));
+      });
+
+      // create array of all tabs, using the data attribute, and determine the last tab
+      self.tabs = $(self.modal + " .wizard-pf-sidebar .list-group-item" ).map(function()
+        {
+          return $(this).data("tab");
+        }
+      );
+      self.tabCount = self.tabs.length;
+      self.tabSummary = self.tabs[self.tabCount - 2]; // second to last tab displays summary
+      self.tabLast = self.tabs[self.tabCount - 1]; // last tab displays progress
+      // set first tab group and tab as current tab
+      // if someone wants to target a specific tab, that could be handled here
+      self.currentGroup = 1;
+      self.currentTab = 1.1;
+      self.updateTabGroup();
+      // hide loading message
+      $(self.modal + " .wizard-pf-loading").addClass("hidden");
+      // show tabs and tab groups
+      $(self.modal + " .wizard-pf-steps").removeClass("hidden");
+      $(self.modal + " .wizard-pf-sidebar").removeClass("hidden");
+      // remove active class from all tabs
+      $(self.modal + " .wizard-pf-sidebar .list-group-item.active").removeClass("active");
+      // apply active class to new current tab and associated contents
+      self.updateActiveTab();
+      // adjust height of contents row (while steps and sidebar and tab contents are visible)
+      self.updateWizardLayout();
+      self.updateWizardFooterDisplay();
+
+      //initialize click listeners
+      self.tabGroupSelect();
+      self.tabSelect();
+      self.backBtnClicked();
+      self.nextBtnClicked();
+      self.finishBtnClick();
+      self.cancelBtnClick();
+
+      $( window ).resize(function() {
+        self.updateWizardLayout();
+      });
+    };
+
+    // update which tab group is active
+    this.updateTabGroup = function() {
+      $(self.modal + " .wizard-pf-step.active").removeClass("active");
+      $(self.modal + " .wizard-pf-step[data-tabgroup='" + self.currentGroup + "']").addClass("active");
+      $(self.modal + " .wizard-pf-sidebar .list-group").addClass("hidden");
+      $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "']").removeClass("hidden");
+    };
+
+    // update which tab is active
+    this.updateActiveTab = function() {
+      $(self.modal + " .list-group-item[data-tab='" + self.currentTab + "']").addClass("active");
+      self.updateVisibleContents();
+    };
+
+    // update which contents are visible
+    this.updateVisibleContents = function() {
+      var tabIndex = ($.inArray(self.currentTab, self.tabs));
+      // displaying contents associated with currentTab
+      $(self.modal + " .wizard-pf-contents").addClass("hidden");
+      $(self.modal + " .wizard-pf-contents:eq(" + tabIndex + ")").removeClass("hidden");
+      // setting focus to first form field in active contents
+      setTimeout (function() {
+        $(".wizard-pf-contents:not(.hidden) form input, .wizard-pf-contents:not(.hidden) form textarea, .wizard-pf-contents:not(.hidden) form select").first().focus(); // this does not account for disabled or read-only inputs
+      }, 100);
+    };
+
+    // update display state of Back button
+    this.updateBackBtnDisplay = function() {
+      if (self.currentTab == self.tabs[0]) {
+        $(self.modal + " .wizard-pf-back").addClass("disabled");
+      }
+    };
+
+    // update display state of next/finish button
+    this.updateNextBtnDisplay = function() {
+      if (self.currentTab == self.tabSummary) {
+        $(self.modal + " .wizard-pf-next").addClass("hidden");
+        $(self.modal + " .wizard-pf-finish").removeClass("hidden");
+      } else {
+        $(self.modal + " .wizard-pf-finish").addClass("hidden");
+        $(self.modal + " .wizard-pf-next").removeClass("hidden");
+      }
+    };
+
+    // update display state of buttons in the footer
+    this.updateWizardFooterDisplay = function() {
+      $(self.modal + " .wizard-pf-footer .disabled").removeClass("disabled")
+      self.updateBackBtnDisplay();
+      self.updateNextBtnDisplay();
+    };
+
+    // adjust layout of panels in wizard
+    this.updateWizardLayout = function() {
+      var top = ($(self.modal + " .modal-header").outerHeight() + $(self.modal + " .wizard-pf-steps").outerHeight()) + "px",
+          bottom = $(self.modal + " .modal-footer").outerHeight() + "px",
+          sidebarwidth = $(self.modal + " .wizard-pf-sidebar").outerWidth() + "px";
+      $(self.modal + " .wizard-pf-row").css("top", top);
+      $(self.modal + " .wizard-pf-row").css("bottom", bottom);
+      $(self.modal + " .wizard-pf-main").css("margin-left", sidebarwidth);
+    };
+
+    // when the user clicks a step, then the tab group for that step is displayed
+    this.tabGroupSelect = function() {
+      $(self.modal + " .wizard-pf-step>a").click(function() {
+        // remove active class active tabgroup and add active class to the
+        // clicked tab group (but don't remove the active class from current tab)
+        self.currentGroup = $(this).parent().data("tabgroup");
+        self.updateTabGroup();
+        // update value for currentTab -- if a tab is already marked as active
+        // for the new tab group, use that, otherwise set it to the first tab
+        // in the tab group
+        self.currentTab = $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item.active").data("tab");
+        if (self.currentTab == undefined) {
+          self.currentTab = $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item:first-child").data("tab");
+          // apply active class to new current tab and associated contents
+          self.updateActiveTab();
+        } else {
+          // use already active tab and just update contents
+          self.updateVisibleContents();
+        }
+        // show/hide/disable/enable buttons if needed
+        self.updateWizardFooterDisplay();
+      });
+    };
+
+    // when the user clicks a tab, then the tab contents are displayed
+    this.tabSelect = function() {
+      $(self.modal + " .wizard-pf-sidebar .list-group-item>a").click(function() {
+        // update value of currentTab to new active tab
+        self.currentTab = $(this).parent().data("tab");
+        // remove active class from active tab in current active tab group (i.e.
+        // don't remove the class from tabs in other groups)
+        $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item.active").removeClass("active");
+        // add active class to the clicked tab and the associated contents
+        $(this).parent().addClass("active");
+        self.updateVisibleContents();
+        if (self.currentTab == self.tabLast) {
+          $(self.modal + " .wizard-pf-next").addClass("hidden");
+          $(self.modal + " .wizard-pf-finish").removeClass("hidden");
+          self.finish();
+        } else {
+          // show/hide/disable/enable buttons if needed
+          self.updateWizardFooterDisplay();
+        }
+      });
+    };
+
+    // Back button clicked
+    this.backBtnClicked = function() {
+      $(self.modal + " .wizard-pf-back").click(function() {
+        // if not the first page
+        if (self.currentTab != self.tabs[0]) {
+          // go back a page (i.e. -1)
+          self.wizardPaging(-1);
+          // show/hide/disable/enable buttons if needed
+          self.updateWizardFooterDisplay();
+        }
+      });
+    };
+
+    // Next button clicked
+    this.nextBtnClicked = function() {
+      $(self.modal + " .wizard-pf-next").click(function() {
+        // go forward a page (i.e. +1)
+        self.wizardPaging(1);
+        // show/hide/disable/enable buttons if needed
+        self.updateWizardFooterDisplay();
+      });
+    };
+
+    // Finish button clicked
+    // Deploy/Finish button would only display during the second to last step.
+    this.finishBtnClick = function() {
+      $(self.modal + " .wizard-pf-finish").click(function() {
+        self.wizardPaging(1);
+        self.finish();
+      });
+    };
+
+    // Cancel/Close button clicked
+    this.cancelBtnClick = function() {
+      $(self.modal + " .wizard-pf-dismiss").click(function() {
+        // close the modal
+        $(self.modal).modal('hide');
+        // drop click event listeners
+        $(self.modal + " .wizard-pf-step>a").off("click");
+        $(self.modal + " .wizard-pf-sidebar .list-group-item>a").off("click");
+        $(self.modal + " .wizard-pf-back").off("click");
+        $(self.modal + " .wizard-pf-next").off("click");
+        $(self.modal + " .wizard-pf-finish").off("click");
+        $(self.modal + " .wizard-pf-dismiss").off("click");
+        // reset final step
+        $(self.modal + " .wizard-pf-process").removeClass("hidden");
+        $(self.modal + " .wizard-pf-complete").addClass("hidden");
+        // reset loading message
+        $(self.modal + " .wizard-pf-contents").addClass("hidden");
+        $(self.modal + " .wizard-pf-loading").removeClass("hidden");
+        // remove tabs and tab groups
+        $(self.modal + " .wizard-pf-steps").addClass("hidden");
+        $(self.modal + " .wizard-pf-sidebar").addClass("hidden");
+        // reset buttons in final step
+        $(self.modal + " .wizard-pf-close").addClass("hidden");
+        $(self.modal + " .wizard-pf-cancel").removeClass("hidden");
+      });
+    };
+
+    // when the user clicks Next/Back, then the next/previous tab and contents display
+    this.wizardPaging = function(direction) {
+      // get n.n value of next tab using the index of next tab in tabs array
+      var tabIndex = ($.inArray(self.currentTab, self.tabs)) + direction;
+      var newTab = self.tabs[tabIndex];
+      // add/remove active class from current tab group
+      // included math.round to trim off extra .000000000002 that was getting added
+      if (newTab != Math.round(10*(direction*.1 + self.currentTab))/10) {
+        // this statement is true when the next tab is in the next tab group
+        // if next tab is in next tab group (e.g. next tab data-tab value is
+        // not equal to current tab +.1) then apply active class to next
+        // tab group and step, and update the value for var currentGroup +/-1
+        self.currentGroup = self.currentGroup + direction;
+        self.updateTabGroup();
+      }
+      self.currentTab = newTab;
+      // remove active class from active tab in current tab group
+      $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item.active").removeClass("active");
+      // apply active class to new current tab and associated contents
+      self.updateActiveTab();
+    };
+
+    // This code keeps the same contents div active, but switches out what
+    // contents display in that div (i.e. replaces process message with
+    // success message).
+    this.finish = function() {
+      $(self.modal + " .wizard-pf-back").addClass("disabled"); // if Back remains enabled during this step, then the Close button needs to be removed when the user clicks Back
+      $(self.modal + " .wizard-pf-finish").addClass("disabled");
+      // code for kicking off process goes here
+      // the next code is just to simulate the expected experience, in that
+      // when the process is complete, the success message etc. would display
+      setTimeout (function() {
+        $(self.modal + " .wizard-pf-cancel").addClass("hidden");
+        $(self.modal + " .wizard-pf-finish").addClass("hidden");
+        $(self.modal + " .wizard-pf-close").removeClass("hidden");
+        $(self.modal + " .wizard-pf-process").addClass("hidden");
+        $(self.modal + " .wizard-pf-complete").removeClass("hidden");
+      }, 3000);
+    };
+
+
+
+  };
+</script>
+
 
     </div><!-- /container -->
   </body>