diff --git a/import-layers/yocto-poky/bitbake/lib/toaster/toastergui/templates/projectconf.html b/import-layers/yocto-poky/bitbake/lib/toaster/toastergui/templates/projectconf.html
index 27a898b..fcf6df2 100644
--- a/import-layers/yocto-poky/bitbake/lib/toaster/toastergui/templates/projectconf.html
+++ b/import-layers/yocto-poky/bitbake/lib/toaster/toastergui/templates/projectconf.html
@@ -6,945 +6,1034 @@
 {% block projectinfomain %}
 
 <h2>Bitbake variables</h2>
+<div>
+  <dl>
+    {% if distro_defined %}
+    <dt>
+    <span class="js-config-var-name js-config-var-managed-name">DISTRO</span>
+    <span class="glyphicon glyphicon-question-sign get-help" title="The short name of the distribution. If the variable is blank, meta/conf/distro/defaultsetup.conf will be used"></span>
+    </dt>
+    <dd class="variable-list">
+    <span class="lead" id="distro">{{distro}}</span>
+    <span class="glyphicon glyphicon-edit" id="change-distro-icon"></span>
+    <form id="change-distro-form" class="form-inline" style="display:none;">
+      <div id="edit-distro-name-div" class="form-group">
+        <input type="text" class="form-control" id="new-distro" value="{{distro}}">
+      </div>
+      <button id="apply-change-distro" class="btn btn-default" type="button">Save</button>
+      <button id="cancel-change-distro" type="button" class="btn btn-link">Cancel</button>
+      <span class="help-block" id="distro-error-message"></span>
+    </form>
+    </dd>
+    {% endif %}
 
-    <div style="padding-left:19px;">
+    {% if dl_dir_defined %}
+    <dt>
+    <span class="js-config-var-name js-config-var-managed-name">DL_DIR</span>
+    <span class="glyphicon glyphicon-question-sign get-help" title="Absolute path to the directory used to store downloads required for your builds. By default, Toaster projects share the same downloads directory"></span>
+    </dt>
+    <dd class="variable-list">
+    <span id="dl_dir" class="lead {% if not dl_dir %} text-muted {% endif %}">{% if dl_dir %}{{dl_dir}}{%else%}Not set{%endif%}</span>
+    <span class="glyphicon glyphicon-edit" id="change-dl_dir-icon"></span>
+    <form id="change-dl_dir-form" class="form-inline" style="display:none;">
+      <div class="form-group" id="validate-dl_dir">
+        <input type="text" class="form-control" id="new-dl_dir" placeholder="Type an absolute path">
+      </div>
+      <button id="apply-change-dl_dir" class="btn btn-default" type="button">Save</button>
+      <button id="cancel-change-dl_dir" type="button" class="btn btn-link">Cancel</button>
+      <p class="help-block" id="hintError-dl_dir" style="display:none;">The directory path cannot include spaces or any of these characters: . \ ? % * : | " " &lt; &gt;</p>
+      <p class="help-block" id="hintError-initialChar-dl_dir" style="display:none;">The directory path should either start with a /, e.g. /home/toaster/downloads; or with a variable, e.g. ${TOPDIR}/downloads.</p>
+    </form>
+    </dd>
+    {% endif %}
 
-        <dl class="dl-vertical">
-            {% if distro_defined %}
-            <dt>
-                <span class="js-config-var-name js-config-var-managed-name">DISTRO</span>
-                <i class="icon-question-sign get-help" title="The short name of the distribution. If the variable is blank, meta/conf/distro/defaultsetup.conf will be used. <br /><a href='http://www.yoctoproject.org/docs/1.6.1/ref-manual/ref-manual.html#var-DISTRO' target='_blank'>Read more in the manual</a>"></i>
-            </dt>
-            <dd class="lead">
-                <span id="distro">{{distro}}</span>
-                <i class="icon-pencil" id="change-distro-icon"></i>
-                <form id="change-distro-form" style="display:none;">
-                    <div class="input-append">
-                        <span  id="edit-distro-name-div" class="control-group">
-                            <input type="text" id="new-distro" value="{{distro}}">
-                            <button id="apply-change-distro" class="btn" type="button">Save</button>
-                            <button id="cancel-change-distro" type="button" class="btn btn-link">Cancel</button>
-                        </span>
-                        <span class="help-block error" id="distro-error-message"></span>
-                    </div>
-                </form>
-            </dd>
-            {% endif %}
+    {% if fstypes_defined %}
+    <dt>
+    <span class="js-config-var-name js-config-var-managed-name">IMAGE_FSTYPES</span>
+    <span class="glyphicon glyphicon-question-sign get-help" title="Formats of root file system images that you want to create"></span>
+    </dt>
+    <dd class="variable-list">
+    <span class="lead" id="image_fstypes">{{fstypes}}</span>
+    <span class="glyphicon glyphicon-edit" id="change-image_fstypes-icon"></span>
+    <form id="change-image_fstypes-form" style="display:none;">
+      <label>Type the image types you want to build:</label>
+      <div class="form-group form-inline" id="validate-image_fstypes">
+        <input type="text" class="form-control "id="new-imagefs_types">
+        <button id="apply-change-image_fstypes" type="button" class="btn btn-default">Save</button>
+        <button id="cancel-change-image_fstypes" type="button" class="btn btn-link">Cancel</button>
+      </div>
+      <p class="help-block text-danger" style="display:none;" id="hintError-image-fs_type">A valid image type cannot include underscores</p>
+      <label>Or choose from known image types:</label>
+      <input id="filter-image_fstypes" type="text" placeholder="Search image types" class="form-control">
+      <div id="all-image_fstypes" class="scrolling"></div>
+    </form>
+    </dd>
+    {% endif %}
 
-            {% if dl_dir_defined %}
-            <dt>
-                <span class="js-config-var-name js-config-var-managed-name">DL_DIR</span>
-                <i class="icon-question-sign get-help" title="Absolute path to the directory used to store downloads required for your builds. By default, Toaster projects share the same downloads directory.<br /><a href='http://www.yoctoproject.org/docs/2.1/ref-manual/ref-manual.html#var-DL_DIR' target='_blank'>Read more in the manual</a>"></i>
-            </dt>
-            <dd class="lead">
-                <span id="dl_dir"{% if dl_dir %}{%else%} class="muted"{%endif%}>{% if dl_dir %}{{dl_dir}}{%else%}Not set{%endif%}</span>
-                <i class="icon-pencil" id="change-dl_dir-icon"></i>
-                <form id="change-dl_dir-form" style="display:none;">
-                    <div class="row-fluid">
-                        <span class="help-block span4">To set DL_DIR type the absolute path of the download folder.</span>
-                    </div>
-                    <div class="input-append" id="validate-dl_dir">
-                        <input type="text" class="input-xlarge" id="new-dl_dir" placeholder="Type absolute path of the DL_DIR folder">
-                        <button id="apply-change-dl_dir" class="btn" type="button">Save</button>
-                        <button id="cancel-change-dl_dir" type="button" class="btn btn-link">Cancel</button>
-			</br><span class="help-block error" id="hintError-dl_dir">A valid directory cannot include spaces or any of these characters: . \ ? % * : | " " < ></span>
-                    </div>
-                </form>
-            </dd>
-            {% endif %}
-
-            {% if fstypes_defined %}
-            <dt>
-                <span class="js-config-var-name js-config-var-managed-name">IMAGE_FSTYPES</span>
-                <i class="icon-question-sign get-help" title="Formats of root file system images that you want to have created <br /><a href='http://www.yoctoproject.org/docs/1.6.1/ref-manual/ref-manual.html#var-IMAGE_FSTYPES' target='_blank'>Read more in the manual</a>"></i>
-            </dt>
-            <dd class="lead">
-                <span id="image_fstypes">{{fstypes}}</span>
-                <i class="icon-pencil" id="change-image_fstypes-icon"></i>
-                <form id="change-image_fstypes-form" style="display:none;">
-                    <input id="filter-image_fstypes" type="text" placeholder="Search image types" class="span4">
-                    <div id="all-image_fstypes" class="scrolling">
-                    </div>
-                    <span class="help-block" id="fstypes-error-message">You must select at least one image type</span>
-                    <button id="apply-change-image_fstypes" type="button" class="btn">Save</button>
-                    <button id="cancel-change-image_fstypes" type="button" class="btn btn-link">Cancel</button>
-                </form>
-            </dd>
-            {% endif %}
-
-            {% if image_install_append_defined %}
-            <dt>
-                <span class="js-config-var-name js-config-var-managed-name">IMAGE_INSTALL_append</span>
-                <i class="icon-question-sign get-help" title="Specifies additional packages to install into an image. If your build creates more than one image, the packages will be installed in <strong>all of them</strong> <br /><a href='http://www.yoctoproject.org/docs/1.6.1/ref-manual/ref-manual.html#var-IMAGE_INSTALL' target='_blank'>Read more in the manual</a>"></i>
-            </dt>
-            <dd class="lead">
-                <span id="image_install"{% if image_install_append %}{%else%} class="muted"{%endif%}>{% if image_install_append %}{{image_install_append}}{%else%}Not set{%endif%}</span>
-                <i class="icon-pencil" id="change-image_install-icon"></i>
-                <i class="icon-trash" id="delete-image_install-icon" {% if image_install_append %}{%else%}style="display:none;"{%endif%}></i>
-                <form id="change-image_install-form" style="display:none;">
-                    <div class="row-fluid">
-                        <span class="help-block span4">To set IMAGE_INSTALL_append to more than one package, type the package names separated by a space.</span>
-                    </div>
-                    <div class="input-append">
-                        <input type="text" class="input-xlarge" id="new-image_install" placeholder="Type one or more package names">
-                        <button id="apply-change-image_install" class="btn" type="button">Save</button>
-                        <button id="cancel-change-image_install" type="button" class="btn btn-link">Cancel</button>
-                    </div>
-                </form>
-            </dd>
-            {% endif %}
-
-            {% if package_classes_defined %}
-            <dt>
-                <span class="js-config-var-name js-config-var-managed-name">PACKAGE_CLASSES</span>
-                <i class="icon-question-sign get-help" title="Specifies the package manager to use when packaging data <br /><a href='http://www.yoctoproject.org/docs/1.6.1/ref-manual/ref-manual.html#var-PACKAGE_CLASSES' target='_blank'>Read more in the manual</a>"></i>
-            </dt>
-            <dd class="lead">
-                <span id="package_classes">{{package_classes}}</span>
-                <i id="change-package_classes-icon" class="icon-pencil"></i>
-                <form id="change-package_classes-form" style="display:none;">
-                    <label>
-                        Root file system package format
-                        <i class="icon-question-sign get-help" title="The package format used to generate the root file system. Options are <code>dev</code>, <code>ipk</code> and <code>rpm</code>"></i>
-                    </label>
-                    <select id="package_classes-select">
-                        <option>package_deb</option>
-                        <option>package_ipk</option>
-                        <option>package_rpm</option>
-                    </select>
-                    <label>
-                        Additional package formats
-                        <i class="icon-question-sign get-help" title="Extra package formats to build"></i>
-                    </label>
-                    <label class="checkbox" id="package_class_1">
-                        <input type="checkbox" id="package_class_1_input"> package_deb
-                    </label>
-                    <label class="checkbox" id="package_class_2">
-                        <input type="checkbox" id="package_class_2_input"> package_ipk
-                    </label>
-                    <div style="padding-top:10px;">
-                        <button id="apply-change-package_classes" type="button" class="btn">Save</button>
-                        <button id="cancel-change-package_classes" type="button" class="btn btn-link">Cancel</button>
-                    </div>
-                </form>
-            </dd>
-            {% endif %}
-
-            {% if sstate_dir_defined %}
-            <dt>
-                <span class="js-config-var-name js-config-var-managed-name">SSTATE_DIR</span>
-                <i class="icon-question-sign get-help" title="Absolute path to the directory used to store shared state cache files. These files are reused across the builds, which makes the builds faster. By default, Toaster projects share the same cache directory.<br /><a href='http://www.yoctoproject.org/docs/2.1/ref-manual/ref-manual.html#var-SSTATE_DIR' target='_blank'>Read more in the manual</a>"></i>
-            </dt>
-            <dd class="lead">
-                <span id="sstate_dir"{% if sstate_dir %}{%else%} class="muted"{%endif%}>{% if sstate_dir %}{{sstate_dir}}{%else%}Not set{%endif%}</span>
-                <i class="icon-pencil" id="change-sstate_dir-icon"></i>
-                <form id="change-sstate_dir-form" style="display:none;">
-                    <div class="row-fluid">
-                        <span class="help-block span4">To set SSTATE_DIR type the absolute path of the download folder.</span>
-                    </div>
-                    <div class="input-append" id="validate-sstate_dir">
-                        <input type="text" class="input-xlarge" id="new-sstate_dir" placeholder="Type absolute path of the SSTATE_DIR folder">
-                        <span class="error">A valid directory name required</span>
-                        <button id="apply-change-sstate_dir" class="btn" type="button">Save</button>
-                        <button id="cancel-change-sstate_dir" type="button" class="btn btn-link">Cancel</button>
-			</br><p class="help-block error" id="hintError-sstate_dir">A valid directory cannot include spaces or any of these characters: . \ ? % * : | " " < ></span>
-                    </div>
-                </form>
-            </dd>
-            {% endif %}
-        </dl>
-
-        <!-- <ul class="unstyled configuration-list" id="configvar-list"> -->
-        <dl id="configvar-list">
-            <!-- the added configuration variables are inserted here -->
-        </dl>
-
-        <!-- pass the fstypes list, black list, and externally managed variables here -->
-        {% for fstype in vars_fstypes %}
-            <input type="hidden" class="js-checkbox-fstypes-list" value="{{fstype}}">
-        {% endfor %}
-        {% for b in vars_blacklist %}
-            <input type="hidden" class="js-config-blacklist-name" value="{{b}}">
-        {% endfor %}
-        {% for b in vars_managed %}
-            <input type="hidden" class="js-config-managed-name" value="{{b}}">
-        {% endfor %}
-
-        <div class="row-fluid">
-          <form id="variable-form">
-            <fieldset style="padding-left:0px;">
-                <legend>Add variable</legend>
-                <div class="span3" style="margin-left:0px;">
-                    <span  id="add-configvar-name-div" class="control-group">
-                      <label>
-                        Variable
-                        <i title="" class="icon-question-sign get-help"
-                           data-original-title="Variable names are case sensitive,
-                           cannot have spaces, and can only include letters, numbers, underscores
-                           and dashes"></i>
-                      </label>
-                      <input type="text" placeholder="Type variable name" id="variable">
-                      <span class="help-block error" id="new-variable-error-message"></span>
-                    </span>
-                    <label>Value</label>
-                    <input id="value" type="text" placeholder="Type variable value"><p>
-                    <div>
-                        <button id="add-configvar-button" class="btn save" type="button" disabled>Add variable</button>
-                    </div>
-                </div>
-                <div class="span5 help-block">
-                    <h5>Some variables are reserved from Toaster</h5>
-                    <p>Toaster cannot set any variables that impact 1) the configuration of the build servers,
-                    or 2) where artifacts produced by the build are stored. Such variables include: </p>
-                    <p>
-                    <code><a href="http://www.yoctoproject.org/docs/1.6.1/ref-manual/ref-manual.html#var-BB_DISKMON_DIRS" target="_blank">BB_DISKMON_DIRS</a></code>
-                    <code><a href="http://www.yoctoproject.org/docs/1.6.1/ref-manual/ref-manual.html#var-BB_NUMBER_THREADS" target="_blank">BB_NUMBER_THREADS</a></code>
-                    <code>CVS_PROXY_HOST</code>
-                    <code>CVS_PROXY_PORT</code>
-                    <code><a href="http://www.yoctoproject.org/docs/1.6.1/ref-manual/ref-manual.html#var-PARALLEL_MAKE" target="_blank">PARALLEL_MAKE</a></code>
-                    <code><a href="http://www.yoctoproject.org/docs/1.6.1/ref-manual/ref-manual.html#var-SSTATE_MIRRORS" target="_blank">SSTATE_MIRRORS</a></code>
-                    <code><a href="http://www.yoctoproject.org/docs/1.6.1/ref-manual/ref-manual.html#var-TMPDIR" target="_blank">TMPDIR</a></code></p>
-                    <p>Plus the following standard shell environment variables:</p>
-                    <p><code>http_proxy</code> <code>ftp_proxy</code> <code>https_proxy</code> <code>all_proxy</code></p>
-                </div>
-            </fieldset>
-          </form>
+    {% if image_install_append_defined %}
+    <dt>
+    <span class="js-config-var-name js-config-var-managed-name">IMAGE_INSTALL_append</span>
+    <span class="glyphicon glyphicon-question-sign get-help" title="Specifies additional packages to install into an image. If your build creates more than one image, the packages will be installed in all of them"></span>
+    </dt>
+    <dd class="variable-list">
+    <span id="image_install" class="lead {% if not image_install_append %} text-muted {%endif%}">{% if image_install_append %}{{image_install_append}}{%else%}Not set{%endif%}</span>
+    <span class="glyphicon glyphicon-edit" id="change-image_install-icon"></span>
+    <span class="glyphicon glyphicon-trash" id="delete-image_install-icon" {% if image_install_append %}{%else%}style="display:none;"{%endif%}></span>
+    <form id="change-image_install-form" class="form-inline" style="display:none;">
+      <div class="row">
+        <div class="col-md-4">
+          <span class="help-block">To set IMAGE_INSTALL_append to more than one package, type the package names separated by a space.</span>
         </div>
+      </div>
+      <div class="form-group">
+        <input type="text" class="form-control" id="new-image_install" placeholder="Type one or more package names">
+      </div>
+      <button id="apply-change-image_install" class="btn btn-default" type="button">Save</button>
+      <button id="cancel-change-image_install" type="button" class="btn btn-link">Cancel</button>
+    </form>
+    </dd>
+    {% endif %}
 
-    </div>
+    {% if package_classes_defined %}
+    <dt>
+    <span class="js-config-var-name js-config-var-managed-name">PACKAGE_CLASSES</span>
+    <span class="glyphicon glyphicon-question-sign get-help" title="Specifies the package manager to use when packaging data"></span>
+    </dt>
+    <dd class="variable-list">
+    <span class="lead" id="package_classes">{{package_classes}}</span>
+    <span id="change-package_classes-icon" class="glyphicon glyphicon-edit"></span>
+    <form id="change-package_classes-form" style="display:none;">
+      <div class="form-group">
+        <label class="control-label">
+          Root file system package format
+          <span class="glyphicon glyphicon-question-sign get-help" title="The package format used to generate the root file system. Options are <code>deb</code>, <code>ipk</code> and <code>rpm</code>"></i>
+        </label>
+        <select id="package_classes-select" class="form-control">
+          <option>package_deb</option>
+          <option>package_ipk</option>
+          <option>package_rpm</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label class="control-label">
+          Additional package formats
+          <span class="glyphicon glyphicon-question-sign get-help" title="Extra package formats to build"></span>
+        </label>
+        <div class="checkbox">
+          <label id="package_class_1">
+            <input type="checkbox" id="package_class_1_input"> package_deb
+          </label>
+        </div>
+        <div class="checkbox">
+          <label id="package_class_2">
+            <input type="checkbox" id="package_class_2_input"> package_ipk
+          </label>
+        </div>
+      </div>
+      <button id="apply-change-package_classes" type="button" class="btn btn-default">Save</button>
+      <button id="cancel-change-package_classes" type="button" class="btn btn-link">Cancel</button>
+    </form>
+    </dd>
+    {% endif %}
 
-    <script>
+    {% if sstate_dir_defined %}
+    <dt>
+    <span class="js-config-var-name js-config-var-managed-name">SSTATE_DIR</span>
+    <span class="glyphicon glyphicon-question-sign get-help" title="Absolute path to the directory used to store shared state cache files. These files are reused across the builds, which makes the builds faster. By default, Toaster projects share the same cache directory"></span>
+    </dt>
+    <dd class="variable-list">
+    <span id="sstate_dir" class="lead {% if not sstate_dir %} text-muted {% endif %}">{% if sstate_dir %}{{sstate_dir}}{%else%}Not set{%endif%}</span>
+    <span class="glyphicon glyphicon-edit" id="change-sstate_dir-icon"></span>
+    <form class="form-inline" id="change-sstate_dir-form" style="display:none;">
+      <div class="form-group" id="validate-sstate_dir">
+        <input type="text" class="form-control" id="new-sstate_dir" placeholder="Type an absolute path">
+      </div>
+      <button id="apply-change-sstate_dir" class="btn btn-default" type="button">Save</button>
+      <button id="cancel-change-sstate_dir" type="button" class="btn btn-link">Cancel</button>
+      <p class="help-block" id="hintError-sstate_dir" style="display:none;">The directory path cannot include spaces or any of these characters: . \ ? % * : | " " &lt; &gt;</p>
+      <p class="help-block" id="hintError-initialChar-sstate_dir" style="display:none;">The directory path should either start with a /, e.g. /home/toaster/sstate-cache; or with a variable, e.g. ${TOPDIR}/sstate-cache.</p>
+    </form>
+    </dd>
+    {% endif %}
+  </dl>
 
-        // global variables
-        var do_reload=false;
+  <!-- <ul class="list-unstyled configuration-list" id="configvar-list"> -->
+  <dl id="configvar-list">
+    <!-- the added configuration variables are inserted here -->
+  </dl>
 
-        // validate new variable name
-        function validate_new_variable() {
-            var variable = $("input#variable").val();
-            var value    = $("input#value").val();
+  <!-- pass the fstypes list, black list, and externally managed variables here -->
+  {% for fstype in vars_fstypes %}
+  <input type="hidden" class="js-checkbox-fstypes-list" value="{{fstype}}">
+  {% endfor %}
+  {% for b in vars_blacklist %}
+  <input type="hidden" class="js-config-blacklist-name" value="{{b}}">
+  {% endfor %}
+  {% for b in vars_managed %}
+  <input type="hidden" class="js-config-managed-name" value="{{b}}">
+  {% endfor %}
 
-            // presumed innocence
-            $('#new-variable-error-message').text("");
-            var error_msg = "";
+  <form id="variable-form">
+    <fieldset>
+      <legend>Add variable</legend>
+      <div class="row">
+        <div class="col-md-3">
+          <div id="add-configvar-name-div" class="form-group">
+            <label class="control-label">
+              Variable
+              <span class="glyphicon glyphicon-question-sign get-help"
+                    title="Variable names are case sensitive,
+                    cannot have spaces, and can only include letters, numbers, underscores
+                    and dashes"></span>
+            </label>
+            <input type="text" class="form-control" placeholder="Type the variable name" id="variable">
+          </div>
+          <p class="help-block" id="new-variable-error-message"></p>
+          <div class="form-group">
+            <label clas="control-label">Value</label>
+            <input id="value" type="text" class="form-control" placeholder="Type the variable value">
+          </div>
+          <button id="add-configvar-button" class="btn btn-default save" type="button" disabled>Add variable</button>
+        </div>
+        <div class="col-md-5 help-block">
+          <h5>Some variables cannot be set from Toaster</h5>
+          <p>Toaster cannot set any variables that impact 1) the configuration of the build servers,
+          or 2) where artifacts produced by the build are stored. Such variables include: </p>
+          <p>
+          <code><a href="http://www.yoctoproject.org/docs/1.6.1/ref-manual/ref-manual.html#var-BB_DISKMON_DIRS" target="_blank">BB_DISKMON_DIRS</a></code>
+          <code><a href="http://www.yoctoproject.org/docs/1.6.1/ref-manual/ref-manual.html#var-BB_NUMBER_THREADS" target="_blank">BB_NUMBER_THREADS</a></code>
+          <code>CVS_PROXY_HOST</code>
+          <code>CVS_PROXY_PORT</code>
+          <code><a href="http://www.yoctoproject.org/docs/1.6.1/ref-manual/ref-manual.html#var-PARALLEL_MAKE" target="_blank">PARALLEL_MAKE</a></code>
+          <code><a href="http://www.yoctoproject.org/docs/1.6.1/ref-manual/ref-manual.html#var-TMPDIR" target="_blank">TMPDIR</a></code></p>
+          <p>Plus the following standard shell environment variables:</p>
+          <p><code>http_proxy</code> <code>ftp_proxy</code> <code>https_proxy</code> <code>all_proxy</code></p>
+        </div>
+      </div>
+    </fieldset>
+  </form>
+</div>
 
-            var existing_configvars = document.getElementsByClassName('js-config-var-name');
-            for (var i = 0, length = existing_configvars.length; i < length; i++) {
-                if (existing_configvars[i].innerHTML.toUpperCase() == variable.toUpperCase()) {
-                    error_msg = "This variable is already set in this page, edit its value instead";
-                }
-            }
+</div>
 
-            var blacklist_configvars = document.getElementsByClassName('js-config-blacklist-name');
-            for (var i = 0, length = blacklist_configvars.length; i < length; i++) {
-                if (blacklist_configvars[i].value.toUpperCase() == variable.toUpperCase()) {
-                    error_msg = "You cannot edit this variable in Toaster because it is set by the build servers";
-                }
-            }
+<script>
 
-            var managed_configvars = document.getElementsByClassName('js-config-managed-name');
-            for (var i = 0, length = managed_configvars.length; i < length; i++) {
-                if (managed_configvars[i].value.toUpperCase() == variable.toUpperCase()) {
-                    error_msg = "You cannot set this variable here. Please set it in the <a href=\"{% url 'project' project.id %}\">project main page</a>";
-                }
-            }
+// global variables
+var do_reload=false;
 
-            var bad_chars  = /[^a-zA-Z0-9\-_]/.test(variable);
-            var has_spaces = (0 <= variable.indexOf(" "));
-            var only_spaces = (0 < variable.length) && (0 == variable.trim().length);
+// validate new variable name
+function validate_new_variable() {
+  var variable = $("input#variable").val();
+  var value    = $("input#value").val();
 
-            if (only_spaces) {
-                error_msg = "A valid variable name cannot include spaces";
-            } else if (bad_chars && has_spaces) {
-                error_msg = "A valid variable name can only include letters, numbers, underscores, dashes, and cannot include spaces";
-            } else if (bad_chars) {
-                error_msg = "A valid variable name can only include letters, numbers, underscores, and dashes";
-            }
+  // presumed innocence
+  $('#new-variable-error-message').text("");
+  var error_msg = "";
 
-            if ("" != error_msg) {
-                $('#new-variable-error-message').html(error_msg);
-                $(".save").attr("disabled","disabled");
+  var existing_configvars = document.getElementsByClassName('js-config-var-name');
+  for (var i = 0, length = existing_configvars.length; i < length; i++) {
+    if (existing_configvars[i].innerHTML.toUpperCase() == variable.toUpperCase()) {
+      error_msg = "This variable is already set in this page. Edit its value instead";
+    }
+  }
 
-                // add one (and only one) error class append
-                var d = document.getElementById("add-configvar-name-div");
-                d.className = d.className.replace(" error","");
-                d.className = d.className + " error";
+  var blacklist_configvars = document.getElementsByClassName('js-config-blacklist-name');
+  for (var i = 0, length = blacklist_configvars.length; i < length; i++) {
+    if (blacklist_configvars[i].value.toUpperCase() == variable.toUpperCase()) {
+      error_msg = "You cannot edit this variable in Toaster because it is set by the build servers";
+    }
+  }
 
-                return false;
-            } else if (0 == variable.length) {
-                $(".save").attr("disabled","disabled");
-                return false;
-            }
+  var managed_configvars = document.getElementsByClassName('js-config-managed-name');
+  for (var i = 0, length = managed_configvars.length; i < length; i++) {
+    if (managed_configvars[i].value.toUpperCase() == variable.toUpperCase()) {
+      error_msg = "You cannot set this variable here. Please set it in the <a href=\"{% url 'project' project.id %}\">project main page</a>";
+    }
+  }
 
-            var d = document.getElementById("add-configvar-name-div");
-            d.className = d.className.replace(" error","");
+  var bad_chars  = /[^a-zA-Z0-9\-_/]/.test(variable);
+  var has_spaces = (0 <= variable.indexOf(" "));
+  var only_spaces = (0 < variable.length) && (0 == variable.trim().length);
 
-            // now set the "Save" enablement if 'value' also passes
-            if (value.trim().length > 0) {
-                $(".save").removeAttr("disabled");
-            } else {
-                $(".save").attr("disabled","disabled");
-            }
+  if (only_spaces) {
+    error_msg = "A valid variable name cannot include spaces";
+  } else if (bad_chars && has_spaces) {
+    error_msg = "A valid variable name can only include letters, numbers and the special characters <code> _ - /</code>. Variable names cannot include spaces";
+  } else if (bad_chars) {
+    error_msg = "A valid variable name can only include letters, numbers and the special characters <code>_ - /</code>";
+  }
 
-            return true;
+  if ("" != error_msg) {
+    $('#new-variable-error-message').html(error_msg);
+    $(".save").attr("disabled","disabled");
+
+    // add one (and only one) error class append
+    $("#add-configvar-name-div").addClass("has-error");
+    $("#new-variable-error-message").addClass("text-danger");
+
+    return false;
+  } else if (0 == variable.length) {
+    $(".save").attr("disabled","disabled");
+    return false;
+  }
+
+  $("#add-configvar-name-div").removeClass("has-error");
+
+  // now set the "Save" enablement if 'value' also passes
+  if (value.trim().length > 0) {
+    $(".save").removeAttr("disabled");
+  } else {
+    $(".save").attr("disabled","disabled");
+  }
+
+  return true;
+}
+
+// validate distro name
+function validate_distro_name() {
+  var value    = $("input#new-distro").val();
+
+  // presumed innocence
+  $('#distro-error-message').text("");
+  var error_msg = "";
+
+  var has_spaces = (0 <= value.indexOf(" "));
+
+  if (has_spaces) {
+    error_msg = "A valid distro name cannot include spaces";
+  } else if (0 == value.length) {
+    error_msg = " ";
+  }
+
+  if ("" != error_msg) {
+    $('#distro-error-message').text(error_msg);
+    $("#apply-change-distro").attr("disabled","disabled");
+
+    // add one (and only one) error class append
+    $("#change-distro-form").addClass("has-error");
+
+    return false;
+  }
+
+  $("#change-distro-form").removeClass("has-error");
+  $("#apply-change-distro").removeAttr("disabled");
+  return true;
+}
+
+// Test to insure at least one FS Type is checked
+function enableFsTypesSave() {
+  var any_checked = 0;
+  $(".fs-checkbox-fstypes:checked").each(function(){
+    any_checked = 1;
+  });
+  if ( 0 == any_checked ) {
+    $("#apply-change-image_fstypes").attr("disabled","disabled");
+    $('.scrolling').addClass('has-error');
+    $('#fstypes-error-message').show();
+  }
+  else {
+    $("#apply-change-image_fstypes").removeAttr("disabled");
+    $('.scrolling').removeClass('has-error');
+    $('#fstypes-error-message').hide();
+  }
+}
+
+// Preset or reset the Package Class checkbox labels
+function updatePackageClassCheckboxes() {
+  $('#package_class_1, #package_class_2').hide();
+  if ($('select').val() == 'package_deb') {
+    $('#package_class_1').html('<input type="checkbox" id="package_class_1_input"> package_ipk');
+    $('#package_class_2').html('<input type="checkbox" id="package_class_2_input"> package_rpm');
+  }
+  if ($('select').val() == 'package_ipk') {
+    $('#package_class_1').html('<input type="checkbox" id="package_class_1_input"> package_deb');
+    $('#package_class_2').html('<input type="checkbox" id="package_class_2_input"> package_rpm');
+  }
+  if ($('select').val() == 'package_rpm') {
+    $('#package_class_1').html('<input type="checkbox" id="package_class_1_input"> package_deb');
+    $('#package_class_2').html('<input type="checkbox" id="package_class_2_input"> package_ipk');
+  }
+  $('#package_class_1, #package_class_2').fadeIn(1500);
+}
+
+// Re-assert handlers when the page is served and/or refreshed via Ajax
+function setEventHandlersForDynamicElements() {
+
+  // change variable value
+  $('.js-icon-pencil-config_var').click(function (evt) {
+    var pk = $(this).attr("x-data");
+    var current_val = $("#config_var_value_"+pk).text();
+    $("#config_var_value_"+pk).hide();
+    $("#config_var_trash_"+pk).hide();
+    $(".js-icon-pencil-config_var[x-data="+pk+"]").hide();
+    $("#change-config_var-form_"+pk).slideDown();
+    $("#new-config_var_"+pk).val(current_val);
+    if ( $("#new-config_var_"+pk).val().length ) {
+      $("#apply-change-config_var_"+pk).removeAttr("disabled");
+    }
+    else {
+      $("#apply-change-config_var_"+pk).attr("disabled");
+    }
+  });
+
+  $('.js-cancel-change-config_var').click(function (evt) {
+    var pk = evt.target.attributes["x-data"].value;
+    $("#change-config_var-form_"+pk).slideUp(function() {
+      $("#config_var_trash_"+pk).show();
+      $('#config_var_value_'+pk).show();
+      $(".js-icon-pencil-config_var[x-data="+pk+"]").show();
+    });
+  });
+
+  $(".js-new-config_var").on('input', function(){
+    if ($(this).val().length == 0) {
+      $(this).parent("div").next(".btn-default").attr("disabled","disabled");
+    }
+    else {
+      $(this).parent("div").next(".btn-default").removeAttr("disabled");
+    }
+  });
+
+  $('.js-apply-change-config_var').click(function (evt) {
+    var xdata    = evt.target.attributes["x-data"].value.split(":");
+    var pk       = xdata[0];
+    var variable = xdata[1];
+    var val      = $('#new-config_var_'+pk).val();
+    postEditAjaxRequest({"configvarChange" : variable+':'+val});
+    $("#change-config_var-form_"+pk).slideUp();
+    $("#config_var_trash_"+pk).fadeIn();
+    $('#config_var_value_'+pk).fadeIn();
+    $(".js-icon-pencil-config_var[x-data="+pk+"]").fadeIn();
+  });
+
+  // delete variable
+  $(".js-icon-trash-config_var").click(function (evt) {
+    var pk = $(this).attr("x-data");
+
+    // fade out the variable+value div, then refresh the variable list
+    $(this).fadeOut();
+    $(this).tooltip("hide");
+    $("config_var_entry_"+pk).fadeOut();
+    $('#config_var_value_'+pk).parent("dd").fadeOut();
+    postEditAjaxRequest({"configvarDel": evt.target.attributes["x-data"].value});
+  });
+
+}
+
+function onEditPageUpdate(data) {
+  // update targets
+  var i; var orightml = "";
+
+  var configvars_sorted = data.configvars.sort(function(a, b){return a[0] > b[0]});
+
+  var managed_configvars = document.getElementsByClassName('js-config-var-managed-name');
+
+  for (i = 0; i < configvars_sorted.length; i++) {
+    // skip if the variable name has a special context (not user defined)
+    var var_context=undefined;
+    for (var j = 0, length = managed_configvars.length; j < length; j++) {
+      if ((managed_configvars[j].innerHTML == configvars_sorted[i][0]) ||
+          (managed_configvars[j].value     == configvars_sorted[i][0]) ) {
+        var_context='m';
+      }
+    }
+    if (var_context == undefined) {
+      orightml += '<dt><span id="config_var_entry_'+configvars_sorted[i][2]+'" class="js-config-var-name"></span><span class="glyphicon glyphicon-trash js-icon-trash-config_var" id="config_var_trash_'+configvars_sorted[i][2]+'" x-data="'+configvars_sorted[i][2]+'"></span> </dt>'
+        orightml += '<dd class="variable-list">'
+        orightml += '    <span class="lead" id="config_var_value_'+configvars_sorted[i][2]+'"></span>'
+        orightml += '    <span class="glyphicon glyphicon-edit js-icon-pencil-config_var" x-data="'+configvars_sorted[i][2]+'"></span>'
+        orightml += '    <form class="form-inline" id="change-config_var-form_'+configvars_sorted[i][2]+'" style="display:none;">'
+        orightml += '        <div class="form-group">'
+        orightml += '            <input type="text" class="form-control js-new-config_var" id="new-config_var_'+configvars_sorted[i][2]+'" value=""></div>'
+        orightml += '            <button id="apply-change-config_var_'+configvars_sorted[i][2]+'" class="btn btn-default js-apply-change-config_var" type="button" x-data="'+configvars_sorted[i][2]+':'+configvars_sorted[i][0]+'" disabled>Save</button>'
+        orightml += '            <button type="button" class="btn btn-link js-cancel-change-config_var" x-data="'+configvars_sorted[i][2]+'">Cancel</button>'
+        orightml += '    </form>'
+        orightml += '</dd>'
+    }
+  }
+
+  // update configvars list HTML framework
+  $("dl#configvar-list").html(orightml);
+
+  // insert the name/value pairs safely as non-HTML
+  for (i = 0; i < configvars_sorted.length; i++) {
+    $('#config_var_entry_'+configvars_sorted[i][2]).text(configvars_sorted[i][0]);
+    $('#config_var_value_'+configvars_sorted[i][2]).text(configvars_sorted[i][1]);
+  }
+
+  // Add the tooltips
+  $(".js-icon-trash-config_var").each( function(){ setDeleteTooltip($(this)); });
+  $(".js-icon-pencil-config_var").each(function(){ setChangeTooltip($(this)); });
+
+  // re-assert these event handlers
+  setEventHandlersForDynamicElements();
+}
+
+function onEditAjaxSuccess(data, textstatus) {
+  console.log("XHR returned:", data, "(" + textstatus + ")");
+  if (data.error != "ok") {
+    alert("error on request:\n" + data.error);
+    return;
+  }
+
+  // delayed page reload?
+  if (do_reload) {
+    do_reload=false;
+    location.reload(true);
+  } else {
+    onEditPageUpdate(data);
+  }
+}
+
+function onEditAjaxError(jqXHR, textstatus, error) {
+  alert("XHR errored:\n" + error + "\n(" + textstatus + ")");
+  // re-assert the event handlers
+}
+
+/* ensure cookie exists {% csrf_token %} */
+function postEditAjaxRequest(reqdata) {
+  var ajax = $.ajax({
+    type:"POST",
+    data: $.param(reqdata),
+    url:"{% url 'xhr_configvaredit' project.id%}",
+    headers: { 'X-CSRFToken': $.cookie("csrftoken")},
+    success: onEditAjaxSuccess,
+    error: onEditAjaxError,
+  })
+}
+
+function setDeleteTooltip(object) {
+  object.tooltip({ container: 'body', html: true, delay: {show: 400}, title: "Delete" });
+}
+function setChangeTooltip(object) {
+  object.tooltip({ container: 'body', html: true, delay: {show: 400}, title: "Change" });
+}
+
+$(document).ready(function() {
+
+  //
+  // Register handlers for static elements
+  //
+
+  {% if distro_defined %}
+  // change distro variable
+  $('#change-distro-icon').click(function() {
+    $('#change-distro-icon, #distro').hide();
+    $("#change-distro-form").slideDown();
+    $("#new-distro").val( $('#distro').text() );
+    $("#apply-change-distro").removeAttr("disabled");
+  });
+
+  $('#cancel-change-distro').click(function(){
+    $("#change-distro-form").slideUp(function() {
+      $('#distro, #change-distro-icon').show();
+
+      // reset any dangling error state
+      $('#distro-error-message').text("");
+      $("#change-distro-form").removeClass("has-error");
+    });
+  });
+
+  // validate new distro name
+  $("input#new-distro").on('input', function (evt) {
+    validate_distro_name();
+  });
+
+  $('#apply-change-distro').click(function(){
+    //$('#repo').parent().removeClass('highlight-go');
+    var name = $('#new-distro').val();
+    postEditAjaxRequest({"configvarChange" : 'DISTRO:'+name});
+    $('#distro').text(name);
+    $("#change-distro-form").slideUp(function () {
+      $('#distro, #change-distro-icon').show();
+    });
+  });
+  {% endif %}
+
+  {% if dl_dir_defined %}
+
+  // change DL_DIR variable
+  $('#change-dl_dir-icon').click(function() {
+    $('#change-dl_dir-form').removeClass('has-error');
+    // preset the edit value
+    var current_val = $("#dl_dir").text().trim();
+    if (current_val == "Not set") {
+      current_val="";
+      $("#apply-change-dl_dir").attr("disabled","disabled");
+    }
+    $("input#new-dl_dir").val(current_val);
+    // enable / disable the save button based on the input value
+    if ( current_val.length ) {
+      $("#apply-change-dl_dir").removeAttr("disabled");
+    }
+    else {
+      $("#apply-change-dl_dir").attr("disabled","disabled");
+    }
+
+    $('#change-dl_dir-icon, #dl_dir').hide();
+    $("#change-dl_dir-form").slideDown();
+  });
+
+  $('#cancel-change-dl_dir').click(function(){
+    $("#hintError-dl_dir").hide();
+    $("#hintError-initialChar-dl_dir").hide();
+    $("#change-dl_dir-form").slideUp(function() {
+      $('#dl_dir, #change-dl_dir-icon').show();
+    });
+  });
+
+  $("#new-dl_dir").on('input', function(){
+    if ($(this).val().trim().length == 0) {
+      $("#apply-change-dl_dir").attr("disabled","disabled");
+      $('#change-dl_dir-form').addClass('has-error');
+      $('#hintError-dl_dir').hide();
+      $('#hintError-initialChar-dl_dir').hide();
+    }
+    else {
+      var input = $(this);
+      var reBeginWithSlash = /^\//;
+      var reCheckVariable = /^\$/;
+      var re = /([ <>\\|":\.%\?\*]+)/;
+      var invalidDir = re.test(input.val());
+      var invalidSlash = reBeginWithSlash.test(input.val());
+      var invalidVar = reCheckVariable.test(input.val());
+      if (!invalidSlash && !invalidVar) {
+        $('#change-dl_dir-form').addClass('has-error');
+        $("#apply-change-dl_dir").attr("disabled","disabled");
+        $('#hintError-initialChar-dl_dir').show();
+      } else if (invalidDir) {
+        $('#change-dl_dir-form').addClass('has-error');
+        $("#apply-change-dl_dir").attr("disabled","disabled");
+        $('#hintError-dl_dir').show();
+      } else {
+        $('#change-dl_dir-form').removeClass('has-error');
+        $("#apply-change-dl_dir").removeAttr("disabled");
+        $('#hintError-dl_dir').hide();
+        $('#hintError-initialChar-dl_dir').hide();
+      }
+    }
+  });
+
+  $('#apply-change-dl_dir').click(function(){
+    var value = $('#new-dl_dir').val().trim();
+    postEditAjaxRequest({"configvarChange" : 'DL_DIR:'+value});
+    $('#dl_dir').text(value);
+    $('#dl_dir').removeClass('muted');
+    $("#change-dl_dir-form").slideUp(function () {
+      $('#dl_dir, #change-dl_dir-icon').show();
+    });
+  });
+
+  {% endif %}
+
+  {% if fstypes_defined %}
+  // change IMAGE_FSTYPES variable
+
+  // get value of fstypes and add to the textbox
+  $("#new-imagefs_types").val("{{fstypes}}");
+
+  // If value of new-imagefs_types is empty disable save button
+  $("#new-imagefs_types").on("input", function() {
+    $(this).val($(this).val().replace(/\s+/g,' '));
+    if ($(this).val().length === 0) {
+      //$('#apply-change-image_fstypes').prop('disabled', true);
+      $('#apply-change-image_fstypes').attr("disabled", "disabled");
+    } else {
+      //$('#apply-change-image_fstypes').prop('disabled', false);
+      $('#apply-change-image_fstypes').removeAttr("disabled");
+    }
+
+    /*If user types imagefs do the action on checkboxes.
+      Lets say if an imagefstype typed by user and the same
+      imagefs is unchecked in the checkbox, then checkbox needs
+      to get checked. Similarly when user deletes imagefs from
+      textbox the checkbox which is checked gets unchecked.
+     */
+    $('#all-image_fstypes input').each(function(){
+      var imagefs_userval = $('#new-imagefs_types').val();
+      if( imagefs_userval.indexOf($(this).val()) > -1) {
+        $(this).prop('checked', true);
+      } else {
+        $(this).prop('checked', false);
+      }
+    });
+
+    // Validate underscore in image fs types
+    if ($(this).val().indexOf('_') > -1) {
+      $('#validate-image_fstypes').addClass('has-error');
+      $('#hintError-image-fs_type').show();
+      $("#apply-change-image_fstypes").prop("disabled", true);
+    } else {
+      $('#validate-image_fstypes').removeClass('has-error');
+      $('#hintError-image-fs_type').hide();
+    }
+  });
+
+  $('#change-image_fstypes-icon').click(function() {
+    $('#change-image_fstypes-icon, #image_fstypes').hide();
+    $("#change-image_fstypes-form").slideDown();
+    // avoid false substring matches by including space separators
+    var html         = "";
+    var fstypes      = " " + document.getElementById("image_fstypes").innerHTML + " ";
+    var fstypes_list = document.getElementsByClassName('js-checkbox-fstypes-list');
+    // Add the checked boxes first
+    if ("  " != fstypes) {
+      for (var i = 0, length = fstypes_list.length; i < length; i++) {
+        if (0 <= fstypes.indexOf(" "+fstypes_list[i].value+" ")) {
+          html += '<div class="checkbox"><label><input type="checkbox" class="fs-checkbox-fstypes" value="'+fstypes_list[i].value+'" checked="checked">'+fstypes_list[i].value+'</label></div>';
         }
+      }
+    }
+    // Add the un-checked boxes second
+    for (var i = 0, length = fstypes_list.length; i < length; i++) {
+      if (0  > fstypes.indexOf(" "+fstypes_list[i].value+" ")) {
+        html += '<div class="checkbox"><label><input type="checkbox" class="fs-checkbox-fstypes" value="'+fstypes_list[i].value+'">'+fstypes_list[i].value+'</label></div>';
+      }
+    }
+    // Add the 'no search matches' line last
+    html += '<label id="no-match-fstypes" class="text-muted">No image types found</label>\n';
+    // Display the list
+    document.getElementById("all-image_fstypes").innerHTML = html;
+    $('#no-match-fstypes').hide();
 
-        // validate distro name
-        function validate_distro_name() {
-             var value    = $("input#new-distro").val();
+    // clear the previous filter values and warning messages
+    $("input#filter-image_fstypes").val("");
+  });
 
-            // presumed innocence
-            $('#distro-error-message').text("");
-            var error_msg = "";
+  // When checkbox is checked/unchecked kindly update the text
+  $(document).on("change", "#all-image_fstypes :checkbox", function() {
+    var imagefs = $(this);
+    var imagefs_obj = $('#new-imagefs_types');
+    var imagefs_userval = imagefs_obj.val();
+    if ($(this).is(':checked')) {
+      if (imagefs_userval.indexOf($(imagefs).val()) === -1) {
+        imagefs_obj.val(imagefs_userval + " " + $(imagefs).val());
+      }
+    } else {
+      if (imagefs_userval.indexOf($(imagefs).val()) > -1) {
+        imagefs_obj.val(imagefs_userval.replace($(imagefs).val(), '').trim());
+      }
+    }
+    if ($('#new-imagefs_types').val().length === 0) {
+      $("#apply-change-image_fstypes").prop("disabled", true);
+    } else {
+      $("#apply-change-image_fstypes").prop("disabled", false);
+    }
+  });
 
-            var has_spaces = (0 <= value.indexOf(" "));
+  $('#cancel-change-image_fstypes').click(function(){
+    $("#new-imagefs_types").val("{{fstypes}}");
+    $("#change-image_fstypes-form").slideUp(function() {
+      $('#image_fstypes, #change-image_fstypes-icon').show();
+    });
+  });
 
-            if (has_spaces) {
-                error_msg = "A valid distro name cannot include spaces";
-            } else if (0 == value.length) {
-                error_msg = " ";
-            }
+  $('#filter-image_fstypes').on('input', function(){
+    var valThis = $(this).val().toLowerCase();
+    var matchCount=0;
+    $('#all-image_fstypes label').each(function(){
+      var text = $(this).text().toLowerCase();
+      var match = text.indexOf(valThis);
+      if (match >= 0) {
+        $(this).show();
+        matchCount += 1;
+      }
+      else {
+        $(this).hide();
+      }
+    });
+    if (matchCount === 0) {
+      $('#no-match-fstypes').show();
+    } else {
+      $('#no-match-fstypes').hide();
+    }
+  });
 
-            if ("" != error_msg) {
-                $('#distro-error-message').text(error_msg);
-                $("#apply-change-distro").attr("disabled","disabled");
+  $('#apply-change-image_fstypes').click(function(){
+    var fstypes = $('#new-imagefs_types').val();
 
-                // add one (and only one) error class append
-                var d = document.getElementById("edit-distro-name-div");
-                d.className = d.className.replace(" error","");
-                d.className = d.className + " error";
+    postEditAjaxRequest({"configvarChange" : 'IMAGE_FSTYPES:'+fstypes});
+    $('#image_fstypes').text(fstypes);
+    $('#image_fstypes').parent().removeClass('muted');
 
-                return false;
-            }
+    $("#change-image_fstypes-form").slideUp(function() {
+      $('#image_fstypes, #change-image_fstypes-icon').show();
+    });
+  });
+  {% endif %}
 
-            var d = document.getElementById("edit-distro-name-div");
-            d.className = d.className.replace(" error","");
-            $("#apply-change-distro").removeAttr("disabled");
-            return true;
-        }
 
-        // Test to insure at least one FS Type is checked
-        function enableFsTypesSave() {
-            var any_checked = 0;
-            $(".fs-checkbox-fstypes:checked").each(function(){
-                any_checked = 1;
-            });
-            if ( 0 == any_checked ) {
-                $("#apply-change-image_fstypes").attr("disabled","disabled");
-                $('#fstypes-error-message').show();
-            }
-            else {
-                $("#apply-change-image_fstypes").removeAttr("disabled");
-                $('#fstypes-error-message').hide();
-            }
-        }
+  {% if image_install_append_defined %}
 
-        // Preset or reset the Package Class checkbox labels
-        function updatePackageClassCheckboxes() {
-            $('#package_class_1, #package_class_2').hide();
-            if ($('select').val() == 'package_deb') {
-                $('#package_class_1').html('<input type="checkbox" id="package_class_1_input"> package_ipk');
-                $('#package_class_2').html('<input type="checkbox" id="package_class_2_input"> package_rpm');
-            }
-            if ($('select').val() == 'package_ipk') {
-                $('#package_class_1').html('<input type="checkbox" id="package_class_1_input"> package_deb');
-                $('#package_class_2').html('<input type="checkbox" id="package_class_2_input"> package_rpm');
-            }
-            if ($('select').val() == 'package_rpm') {
-                $('#package_class_1').html('<input type="checkbox" id="package_class_1_input"> package_deb');
-                $('#package_class_2').html('<input type="checkbox" id="package_class_2_input"> package_ipk');
-            }
-            $('#package_class_1, #package_class_2').fadeIn(1500);
-        }
+  // init IMAGE_INSTALL_append trash icon
+  setDeleteTooltip($('#delete-image_install-icon'));
 
-        // Re-assert handlers when the page is served and/or refreshed via Ajax
-        function setEventHandlersForDynamicElements() {
+  // change IMAGE_INSTALL_append variable
+  $('#change-image_install-icon').click(function() {
+    // preset the edit value
+    var current_val = $("span#image_install").text().trim();
+    if (current_val == "Not set") {
+      current_val="";
+      $("#apply-change-image_install").attr("disabled","disabled");
+    } else {
+      // insure these non-empty values have single space prefix
+      current_val=" " + current_val;
+      $("#apply-change-image_install").removeAttr("disabled");
+    }
+    $("input#new-image_install").val(current_val);
 
-            // change variable value
-            $('.js-icon-pencil-config_var').click(function (evt) {
-                var pk = evt.target.attributes["x-data"].value;
-                var current_val = $("span#config_var_value_"+pk).text();
-                $('.js-icon-pencil-config_var, .js-icon-trash-config_var, #config_var_value_'+pk).hide();
-                $("#change-config_var-form_"+pk).slideDown();
-                $("input#new-config_var_"+pk).val(current_val);
-            });
+    $('#change-image_install-icon, #delete-image_install-icon, #image_install').hide();
+    $("#change-image_install-form").slideDown();
+  });
 
-            $('.js-cancel-change-config_var').click(function (evt) {
-                var pk = evt.target.attributes["x-data"].value;
-                $("#change-config_var-form_"+pk).slideUp(function() {
-                    $('.js-icon-pencil-config_var, .js-icon-trash-config_var, #config_var_value_'+pk).show();
-                });
-            });
+  $('#cancel-change-image_install').click(function(){
+    $("#change-image_install-form").slideUp(function() {
+      $('#image_install, #change-image_install-icon').show();
+      if ($("span#image_install").text() != "Not set") {
+        $('#delete-image_install-icon').show();
+        setDeleteTooltip($('#delete-image_install-icon'));
+      }
+    });
+  });
 
-            $(".js-new-config_var").on('input', function(){
-                if ($(this).val().length == 0) {
-                    $(".js-apply-change-config_var").attr("disabled","disabled");
-                }
-                else {
-                    $(".js-apply-change-config_var").removeAttr("disabled");
-                }
-            });
+  $("#new-image_install").on('input', function(){
+    if ($(this).val().trim().length == 0) {
+      $("#apply-change-image_install").attr("disabled","disabled");
+    }
+    else {
+      $("#apply-change-image_install").removeAttr("disabled");
+    }
+  });
 
-            $('.js-apply-change-config_var').click(function (evt) {
-                var xdata    = evt.target.attributes["x-data"].value.split(":");
-                var pk       = xdata[0];
-                var variable = xdata[1];
-                var val      = $('#new-config_var_'+pk).val();
-                postEditAjaxRequest({"configvarChange" : variable+':'+val});
-                $('#config_var_value_'+pk).parent().removeClass('muted');
-                $("#change-config_var-form_"+pk).slideUp(function() {
-                    $('.js-icon-pencil-config_var, .js-icon-trash-config_var, #config_var_value_'+pk).show();
-                });
-            });
+  $('#apply-change-image_install').click(function(){
+    // insure these non-empty values have single space prefix
+    var value = " " + $('#new-image_install').val().trim();
+    postEditAjaxRequest({"configvarChange" : 'IMAGE_INSTALL_append:'+value});
+    $('#image_install').text(value);
+    $('#image_install').removeClass('text-muted');
+    $("#change-image_install-form").slideUp(function () {
+      $('#image_install, #change-image_install-icon').show();
+      if (value.length > -1) {
+        $('#delete-image_install-icon').show();
+        setDeleteTooltip($('#delete-image_install-icon'));
+      }
+    });
+  });
 
-            // delete variable
-            $(".js-icon-trash-config_var").click(function (evt) {
-                var xdata    = evt.target.attributes["x-data"].value.split(":");
-                var pk       = xdata[0];
+  // delete IMAGE_INSTALL_append variable value
+  $('#delete-image_install-icon').click(function(){
+    $(this).tooltip('hide');
+    postEditAjaxRequest({"configvarChange" : 'IMAGE_INSTALL_append:'+''});
+    $('#image_install').parent().fadeOut(1000, function(){
+      $('#image_install').addClass('text-muted');
+      $('#image_install').text('Not set');
+      $('#delete-image_install-icon').hide();
+      $('#image_install').parent().fadeIn(1000);
+    });
+  });
+  {% endif %}
 
-                // hide the dangling trash tooltip
-                $('#config_var_trash_'+pk).hide();
 
-                // fade out the variable+value div, then refresh the variable list
-                $('#config_var_entry_'+pk).parent().parent().fadeOut(1000, function(){
-                     postEditAjaxRequest({"configvarDel": evt.target.attributes["x-data"].value});
-                });
+  {% if package_classes_defined %}
+  // change PACKAGE_CLASSES variable
+  $('#change-package_classes-icon').click(function() {
+    $('#change-package_classes-icon, #package_classes').hide();
+    $("#change-package_classes-form").slideDown();
 
-            });
+    // initialize the pulldown and checkboxes
+    var value = $("#package_classes").text();
+    if ( value.indexOf("package_deb") == 0 ) {
+      $("#package_classes-select").prop('selectedIndex', 0);
+      updatePackageClassCheckboxes();
+      if ( value.indexOf("_ipk") > 0 ) {
+        $("#package_class_1_input").attr("checked",true);
+      }
+      if ( value.indexOf("_rpm") > 0 ) {
+        $("#package_class_2_input").attr("checked",true);
+      }
+    }
 
-        }
+    if ( value.indexOf("package_ipk") == 0 ) {
+      $("#package_classes-select").prop('selectedIndex', 1);
+      updatePackageClassCheckboxes();
+      if ( value.indexOf("_deb") > 0 ) {
+        $("#package_class_1_input").attr("checked",true);
+      }
+      if ( value.indexOf("_rpm") > 0 ) {
+        $("#package_class_2_input").attr("checked",true);
+      }
+    }
 
-        function onEditPageUpdate(data) {
-            // update targets
-            var i; var orightml = "";
+    if ( value.indexOf("package_rpm") == 0 ) {
+      $("#package_classes-select").prop('selectedIndex', 2);
+      updatePackageClassCheckboxes();
+      if ( value.indexOf("_deb") > 0 ) {
+        $("#package_class_1_input").attr("checked",true);
+      }
+      if ( value.indexOf("_ipk") > 0 ) {
+        $("#package_class_2_input").attr("checked",true);
+      }
+    }
+  });
 
-            var configvars_sorted = data.configvars.sort(function(a, b){return a[0] > b[0]});
+  $('#cancel-change-package_classes').click(function(){
+    $("#change-package_classes-form").slideUp(function() {
+      $('#package_classes, #change-package_classes-icon').show();
+    });
+  });
 
-            var managed_configvars = document.getElementsByClassName('js-config-var-managed-name');
+  $('select').change(function() {
+    updatePackageClassCheckboxes();
+  });
 
-            for (i = 0; i < configvars_sorted.length; i++) {
-                // skip if the variable name has a special context (not user defined)
-                var var_context=undefined;
-                for (var j = 0, length = managed_configvars.length; j < length; j++) {
-                    if ((managed_configvars[j].innerHTML == configvars_sorted[i][0]) ||
-                        (managed_configvars[j].value     == configvars_sorted[i][0]) ) {
-                        var_context='m';
-                    }
-                }
-                if (var_context == undefined) {
-                    orightml += '<div> <dt><span id="config_var_entry_'+configvars_sorted[i][2]+'" class="js-config-var-name"></span><i class="icon-trash js-icon-trash-config_var" id="config_var_trash_'+configvars_sorted[i][2]+'" x-data="'+configvars_sorted[i][2]+'"></i> </dt>'
-                    orightml += '<dd class="lead">'
-                    orightml += '    <span id="config_var_value_'+configvars_sorted[i][2]+'"></span>'
-                    orightml += '    <i class="icon-pencil js-icon-pencil-config_var" x-data="'+configvars_sorted[i][2]+'"></i>'
-                    orightml += '    <form id="change-config_var-form_'+configvars_sorted[i][2]+'" style="display:none;">'
-                    orightml += '        <div class="input-append">'
-                    orightml += '            <input type="text" class="input-xlarge js-new-config_var" id="new-config_var_'+configvars_sorted[i][2]+'" value="">'
-                    orightml += '            <button class="btn js-apply-change-config_var" type="button" x-data="'+configvars_sorted[i][2]+':'+configvars_sorted[i][0]+'" disabled>Save</button>'
-                    orightml += '            <button type="button" class="btn btn-link js-cancel-change-config_var" x-data="'+configvars_sorted[i][2]+'">Cancel</button>'
-                    orightml += '        </div>'
-                    orightml += '    </form>'
-                    orightml += '</dd> </div>'
-                }
-            }
+  $('#apply-change-package_classes').click(function(){
+    var e   = document.getElementById("package_classes-select");
+    var val = e.options[e.selectedIndex].text;
 
-            // update configvars list HTML framework
-            $("dl#configvar-list").html(orightml);
+    pc1_checked = document.getElementById("package_class_1_input").checked;
+    pc2_checked = document.getElementById("package_class_2_input").checked;
+    if (val == "package_deb") {
+      if (pc1_checked) val = val + " package_ipk";
+      if (pc2_checked) val = val + " package_rpm";
+    }
+    if (val == "package_ipk") {
+      if (pc1_checked) val = val + " package_deb";
+      if (pc2_checked) val = val + " package_rpm";
+    }
+    if (val == "package_rpm") {
+      if (pc1_checked) val = val + " package_deb";
+      if (pc2_checked) val = val + " package_ipk";
+    }
 
-            // insert the name/value pairs safely as non-HTML
-            for (i = 0; i < configvars_sorted.length; i++) {
-                $('#config_var_entry_'+configvars_sorted[i][2]).text(configvars_sorted[i][0]);
-                $('#config_var_value_'+configvars_sorted[i][2]).text(configvars_sorted[i][1]);
-            }
+    $('#package_classes').text(val);
+    //$('#package_classes').parent().removeClass('muted');
+    postEditAjaxRequest({"configvarChange" : 'PACKAGE_CLASSES:'+val});
+    $("#change-package_classes-form").slideUp(function() {
+      $('#package_classes, #change-package_classes-icon').show();
+    });
+  });
+  {% endif %}
 
-            // Add the tooltips
-            $(".js-icon-trash-config_var").each( function(){ setDeleteTooltip($(this)); });
-            $(".js-icon-pencil-config_var").each(function(){ setChangeTooltip($(this)); });
+  {% if sstate_dir_defined %}
 
-            // re-assert these event handlers
-            setEventHandlersForDynamicElements();
-        }
+  // change SSTATE_DIR variable
+  $('#change-sstate_dir-icon').click(function() {
+    $('#change-sstate_dir-form').removeClass('has-error');
+    // preset the edit value
+    var current_val = $("span#sstate_dir").text().trim();
+    if (current_val == "Not set") {
+      current_val="";
+      $("#apply-change-sstate_dir").attr("disabled","disabled");
+    }
+    $("input#new-sstate_dir").val(current_val);
 
-        function onEditAjaxSuccess(data, textstatus) {
-            // console.log("XHR returned:", data, "(" + textstatus + ")");
-            if (data.error != "ok") {
-                alert("error on request:\n" + data.error);
-                return;
-            }
+    // enable / disable the save button based on the input value
+    if ( current_val.length ) {
+      $("#apply-change-sstate_dir").removeAttr("disabled");
+    }
+    else {
+      $("#apply-change-sstate_dir").attr("disabled","disabled");
+    }
 
-            // delayed page reload?
-            if (do_reload) {
-                do_reload=false;
-                location.reload(true);
-            } else {
-                onEditPageUpdate(data);
-            }
-        }
+    $('#change-sstate_dir-icon, #sstate_dir').hide();
+    $("#change-sstate_dir-form").slideDown();
+  });
 
-        function onEditAjaxError(jqXHR, textstatus, error) {
-            alert("XHR errored:\n" + error + "\n(" + textstatus + ")");
-            // re-assert the event handlers
-        }
+  $('#cancel-change-sstate_dir').click(function(){
+    $("#hintError-sstate_dir").hide();
+    $("#hintError-initialChar-sstate_dir").hide();
+    $("#change-sstate_dir-form").slideUp(function() {
+      $('#sstate_dir, #change-sstate_dir-icon').show();
+    });
+  });
 
-        /* ensure cookie exists {% csrf_token %} */
-        function postEditAjaxRequest(reqdata) {
-            var ajax = $.ajax({
-                    type:"POST",
-                    data: $.param(reqdata),
-                    url:"{% url 'xhr_configvaredit' project.id%}",
-                    headers: { 'X-CSRFToken': $.cookie("csrftoken")},
-                    success: onEditAjaxSuccess,
-                    error: onEditAjaxError,
-            })
-        }
+  $("#new-sstate_dir").on('input', function(){
+    if ($(this).val().trim().length == 0) {
+      $("#apply-change-sstate_dir").attr("disabled","disabled");
+      $('#change-sstate_dir-form').addClass('has-error');
+      $('#hintError-sstate_dir').hide();
+      $('#hintError-initialChar-sstate_dir').hide();
+    }
+    else {
+      var input = $(this);
+      var reBeginWithSlash = /^\//;
+      var reCheckVariable = /^\$/;
+      var re = /([ <>\\|":\.%\?\*]+)/;
+      var invalidDir = re.test(input.val());
+      var invalidSlash = reBeginWithSlash.test(input.val());
+      var invalidVar = reCheckVariable.test(input.val());
+      if (!invalidSlash && !invalidVar) {
+        $('#change-sstate_dir-form').addClass('has-error');
+        $("#apply-change-sstate_dir").attr("disabled","disabled");
+        $('#hintError-initialChar-sstate_dir').show();
+      } else if (invalidDir) {
+          $('#change-sstate_dir-form').addClass('has-error');
+          $("#apply-change-sstate_dir").attr("disabled","disabled");
+          $('#hintError-sstate_dir').show();
+      } else {
+        $('#change-sstate_dir-form').removeClass('has-error');
+        $("#apply-change-sstate_dir").removeAttr("disabled");
+        $('#hintError-sstate_dir').hide();
+        $('#hintError-initialChar-sstate_dir').hide();
+      }
+    }
+  });
 
-        function setDeleteTooltip(object) {
-            object.tooltip({ container: 'body', html: true, delay: {show: 400}, title: "Delete" });
-        }
-        function setChangeTooltip(object) {
-            object.tooltip({ container: 'body', html: true, delay: {show: 400}, title: "Change" });
-        }
+  $('#apply-change-sstate_dir').click(function(){
+    var value = $('#new-sstate_dir').val().trim();
+    postEditAjaxRequest({"configvarChange" : 'SSTATE_DIR:'+value});
+    $('#sstate_dir').text(value);
+    $('#sstate_dir').removeClass('text-muted');
+    $("#change-sstate_dir-form").slideUp(function () {
+      $('#sstate_dir, #change-sstate_dir-icon').show();
+    });
+  });
 
-        $(document).ready(function() {
+  {% endif %}
 
-            //
-            // Register handlers for static elements
-            //
-
-            {% if distro_defined %}
-            // change distro variable
-            $('#change-distro-icon').click(function() {
-                $('#change-distro-icon, #distro').hide();
-                $("#change-distro-form").slideDown();
-                $("#new-distro").val( $('#distro').text() );
-            });
-
-            $('#cancel-change-distro').click(function(){
-                $("#change-distro-form").slideUp(function() {
-                    $('#distro, #change-distro-icon').show();
-
-                    // reset any dangling error state
-                    $('#distro-error-message').text("");
-                    var d = document.getElementById("edit-distro-name-div");
-                    d.className = d.className.replace(" error","");
-                });
-            });
-
-            // validate new distro name
-            $("input#new-distro").on('input', function (evt) {
-                validate_distro_name();
-            });
-
-            $('#apply-change-distro').click(function(){
-                //$('#repo').parent().removeClass('highlight-go');
-                var name = $('#new-distro').val();
-                postEditAjaxRequest({"configvarChange" : 'DISTRO:'+name});
-                $('#distro').text(name);
-                $("#change-distro-form").slideUp(function () {
-                    $('#distro, #change-distro-icon').show();
-                });
-            });
-            {% endif %}
-
-            {% if dl_dir_defined %}
-
-            // change DL_DIR variable
-            $('#change-dl_dir-icon').click(function() {
-                $('#hintError-dl_dir').hide();
-	        // preset the edit value
-                var current_val = $("span#dl_dir").text().trim();
-                if (current_val == "Not set") {
-                    current_val="";
-                    $("#apply-change-dl_dir").attr("disabled","disabled");
-                }
-                $("input#new-dl_dir").val(current_val);
-
-                $('#change-dl_dir-icon, #dl_dir').hide();
-                $("#change-dl_dir-form").slideDown();
-            });
-
-            $('#cancel-change-dl_dir').click(function(){
-                $("#change-dl_dir-form").slideUp(function() {
-                    $('#dl_dir, #change-dl_dir-icon').show();
-                });
-            });
-
-            $("#new-dl_dir").on('input', function(){
-	        if ($(this).val().trim().length == 0) {
-                    $("#apply-change-dl_dir").attr("disabled","disabled");
-                }
-                else {
-                    var input = $(this);
-                    var re = /^\/([^ <>\\|":\.%\?\*]+)$/;
-	            var invalidDir = re.test(input.val());
-		    console.log(invalidDir);
-                    if ( invalidDir ) {
-                        $('#validate-dl_dir').removeClass('control-group error');
-			$("#apply-change-dl_dir").removeAttr("disabled");
-                        $('#hintError-dl_dir').hide();
-                    } else {
-                        $('#validate-dl_dir').addClass('control-group error');
-			$("#apply-change-dl_dir").attr("disabled","disabled");
-                        $('#hintError-dl_dir').show();
-                    }
-                }
-            });
-
-            $('#apply-change-dl_dir').click(function(){
-                var value = $('#new-dl_dir').val().trim();
-                postEditAjaxRequest({"configvarChange" : 'DL_DIR:'+value});
-                $('#dl_dir').text(value);
-                $('#dl_dir').removeClass('muted');
-                $("#change-dl_dir-form").slideUp(function () {
-                    $('#dl_dir, #change-dl_dir-icon').show();
-               });
-            });
-
-            {% endif %}
-
-            {% if fstypes_defined %}
-            // change IMAGE_FSTYPES variable
-
-            $('#change-image_fstypes-icon').click(function() {
-                $('#change-image_fstypes-icon, #image_fstypes').hide();
-                $("#change-image_fstypes-form").slideDown();
-                // avoid false substring matches by including space separators
-                var html         = "";
-                var fstypes      = " " + document.getElementById("image_fstypes").innerHTML + " ";
-                var fstypes_list = document.getElementsByClassName('js-checkbox-fstypes-list');
-                // Add the checked boxes first
-                if ("  " != fstypes) {
-                    for (var i = 0, length = fstypes_list.length; i < length; i++) {
-                        if (0 <= fstypes.indexOf(" "+fstypes_list[i].value+" ")) {
-                             html += '<label class="checkbox"><input type="checkbox" class="fs-checkbox-fstypes" value="'+fstypes_list[i].value+'" checked="checked">'+fstypes_list[i].value+'</label>\n';
-                        }
-                    }
-                }
-                // Add the un-checked boxes second
-                for (var i = 0, length = fstypes_list.length; i < length; i++) {
-                    if (0  > fstypes.indexOf(" "+fstypes_list[i].value+" ")) {
-                        html += '<label class="checkbox"><input type="checkbox" class="fs-checkbox-fstypes" value="'+fstypes_list[i].value+'">'+fstypes_list[i].value+'</label>\n';
-                    }
-                }
-                // Add the 'no search matches' line last
-                html += '<label id="no-match-fstypes">No image types found</label>\n';
-                // Display the list
-                document.getElementById("all-image_fstypes").innerHTML = html;
-                $('#no-match-fstypes').hide();
-
-                // Watch elements to disable Save when none are checked
-                $(".fs-checkbox-fstypes").each(function(){
-                    $(this).click(function() {
-                        enableFsTypesSave();
-                    });
-                });
-
-                // clear the previous filter values and warning messages
-                $("input#filter-image_fstypes").val("");
-                $('#fstypes-error-message').hide();
-            });
-
-            $('#cancel-change-image_fstypes').click(function(){
-                $("#change-image_fstypes-form").slideUp(function() {
-                    $('#image_fstypes, #change-image_fstypes-icon').show();
-                });
-            });
-
-            $('#filter-image_fstypes').on('input', function(){
-                var valThis = $(this).val().toLowerCase();
-                var matchCount=0;
-                $('#all-image_fstypes label').each(function(){
-                    var text = $(this).text().toLowerCase();
-                    var match = text.indexOf(valThis);
-                    if (match >= 0) {
-                        $(this).show();
-                        matchCount += 1;
-                    }
-                    else {
-                        $(this).hide();
-                    }
-                });
-                if (matchCount === 0) {
-                   $('#no-match-fstypes').show();
-                } else {
-                   $('#no-match-fstypes').hide();
-                }
-            });
-
-            $('#apply-change-image_fstypes').click(function(){
-                // extract the selected fstypes and sort them
-                var fstypes_array = [];
-                var checkboxes = document.getElementsByClassName('fs-checkbox-fstypes');
-                $(".fs-checkbox-fstypes:checked").each(function(){
-                       fstypes_array.push($(this).val());
-                });
-                fstypes_array.sort();
-
-                // now make a string of them
-                var fstypes = '';
-                for (var i = 0, length = fstypes_array.length; i < length; i++) {
-                    fstypes += fstypes_array[i] + ' ';
-                }
-                fstypes = fstypes.trim();
-
-                postEditAjaxRequest({"configvarChange" : 'IMAGE_FSTYPES:'+fstypes});
-                $('#image_fstypes').text(fstypes);
-                $('#image_fstypes').parent().removeClass('muted');
-
-                $("#change-image_fstypes-form").slideUp(function() {
-                    $('#image_fstypes, #change-image_fstypes-icon').show();
-                });
-            });
-            {% endif %}
-
-
-            {% if image_install_append_defined %}
-
-            // init IMAGE_INSTALL_append trash icon
-            setDeleteTooltip($('#delete-image_install-icon'));
-
-            // change IMAGE_INSTALL_append variable
-            $('#change-image_install-icon').click(function() {
-                // preset the edit value
-                var current_val = $("span#image_install").text().trim();
-                if (current_val == "Not set") {
-                    current_val="";
-                    $("#apply-change-image_install").attr("disabled","disabled");
-                } else {
-                    // insure these non-empty values have single space prefix
-                    current_val=" " + current_val;
-                }
-                $("input#new-image_install").val(current_val);
-
-                $('#change-image_install-icon, #delete-image_install-icon, #image_install').hide();
-                $("#change-image_install-form").slideDown();
-            });
-
-            $('#cancel-change-image_install').click(function(){
-                $("#change-image_install-form").slideUp(function() {
-                    $('#image_install, #change-image_install-icon').show();
-                    if ($("span#image_install").text() != "Not set") {
-                        $('#delete-image_install-icon').show();
-                        setDeleteTooltip($('#delete-image_install-icon'));
-                    }
-                });
-            });
-
-            $("#new-image_install").on('input', function(){
-                if ($(this).val().trim().length == 0) {
-                    $("#apply-change-image_install").attr("disabled","disabled");
-                }
-                else {
-                    $("#apply-change-image_install").removeAttr("disabled");
-                }
-            });
-
-            $('#apply-change-image_install').click(function(){
-                // insure these non-empty values have single space prefix
-                var value = " " + $('#new-image_install').val().trim();
-                postEditAjaxRequest({"configvarChange" : 'IMAGE_INSTALL_append:'+value});
-                $('#image_install').text(value);
-                $('#image_install').removeClass('muted');
-                $("#change-image_install-form").slideUp(function () {
-                    $('#image_install, #change-image_install-icon').show();
-                    if (value.length > -1) {
-                        $('#delete-image_install-icon').show();
-                        setDeleteTooltip($('#delete-image_install-icon'));
-                    }
-               });
-            });
-
-            // delete IMAGE_INSTALL_append variable value
-            $('#delete-image_install-icon').click(function(){
-                $(this).tooltip('hide');
-                postEditAjaxRequest({"configvarChange" : 'IMAGE_INSTALL_append:'+''});
-                $('#image_install').parent().fadeOut(1000, function(){
-                    $('#image_install').addClass('muted');
-                    $('#image_install').text('Not set');
-                    $('#delete-image_install-icon').hide();
-                    $('#image_install').parent().fadeIn(1000);
-                });
-            });
-            {% endif %}
-
-
-            {% if package_classes_defined %}
-            // change PACKAGE_CLASSES variable
-            $('#change-package_classes-icon').click(function() {
-                $('#change-package_classes-icon, #package_classes').hide();
-                $("#change-package_classes-form").slideDown();
-
-                // initialize the pulldown and checkboxes
-                var value = $("#package_classes").text();
-                if ( value.indexOf("package_deb") == 0 ) {
-                    $("#package_classes-select").prop('selectedIndex', 0);
-                    updatePackageClassCheckboxes();
-                    if ( value.indexOf("_ipk") > 0 ) {
-                        $("#package_class_1_input").attr("checked",true);
-                    }
-                    if ( value.indexOf("_rpm") > 0 ) {
-                        $("#package_class_2_input").attr("checked",true);
-                    }
-                }
-
-                if ( value.indexOf("package_ipk") == 0 ) {
-                    $("#package_classes-select").prop('selectedIndex', 1);
-                    updatePackageClassCheckboxes();
-                    if ( value.indexOf("_deb") > 0 ) {
-                        $("#package_class_1_input").attr("checked",true);
-                    }
-                    if ( value.indexOf("_rpm") > 0 ) {
-                        $("#package_class_2_input").attr("checked",true);
-                    }
-                }
-
-                if ( value.indexOf("package_rpm") == 0 ) {
-                    $("#package_classes-select").prop('selectedIndex', 2);
-                    updatePackageClassCheckboxes();
-                    if ( value.indexOf("_deb") > 0 ) {
-                        $("#package_class_1_input").attr("checked",true);
-                    }
-                    if ( value.indexOf("_ipk") > 0 ) {
-                        $("#package_class_2_input").attr("checked",true);
-                    }
-                }
-            });
-
-            $('#cancel-change-package_classes').click(function(){
-                $("#change-package_classes-form").slideUp(function() {
-                    $('#package_classes, #change-package_classes-icon').show();
-                });
-            });
-
-            $('select').change(function() {
-                updatePackageClassCheckboxes();
-            });
-
-            $('#apply-change-package_classes').click(function(){
-                var e   = document.getElementById("package_classes-select");
-                var val = e.options[e.selectedIndex].text;
-
-                pc1_checked = document.getElementById("package_class_1_input").checked;
-                pc2_checked = document.getElementById("package_class_2_input").checked;
-                if (val == "package_deb") {
-                    if (pc1_checked) val = val + " package_ipk";
-                    if (pc2_checked) val = val + " package_rpm";
-                }
-                if (val == "package_ipk") {
-                    if (pc1_checked) val = val + " package_deb";
-                    if (pc2_checked) val = val + " package_rpm";
-                }
-                if (val == "package_rpm") {
-                    if (pc1_checked) val = val + " package_deb";
-                    if (pc2_checked) val = val + " package_ipk";
-                }
-
-                $('#package_classes').text(val);
-                //$('#package_classes').parent().removeClass('muted');
-                postEditAjaxRequest({"configvarChange" : 'PACKAGE_CLASSES:'+val});
-                $("#change-package_classes-form").slideUp(function() {
-                    $('#package_classes, #change-package_classes-icon').show();
-                });
-            });
-            {% endif %}
-
-            {% if sstate_dir_defined %}
-
-            // change SSTATE_DIR variable
-            $('#change-sstate_dir-icon').click(function() {
-                $('#hintError-sstate_dir').hide();
-                // preset the edit value
-                var current_val = $("span#sstate_dir").text().trim();
-                if (current_val == "Not set") {
-                    current_val="";
-                    $("#apply-change-sstate_dir").attr("disabled","disabled");
-                }
-                $("input#new-sstate_dir").val(current_val);
-
-                $('#change-sstate_dir-icon, #sstate_dir').hide();
-                $("#change-sstate_dir-form").slideDown();
-            });
-
-            $('#cancel-change-sstate_dir').click(function(){
-                $("#change-sstate_dir-form").slideUp(function() {
-                    $('#sstate_dir, #change-sstate_dir-icon').show();
-                });
-            });
-
-            $("#new-sstate_dir").on('input', function(){
-                if ($(this).val().trim().length == 0) {
-                    $("#apply-change-sstate_dir").attr("disabled","disabled");
-                }
-                else {
-                    var input = $(this);
-                    var re = /^\/([^ <>\\|":\.%\?\*]+)$/;
-	            var invalidDir = re.test(input.val());
-		    console.log(invalidDir);
-                    if ( invalidDir ) {
-                        $('#validate-sstate_dir').removeClass('control-group error');
-			$("#apply-change-sstate_dir").removeAttr("disabled");
-                        $('#hintError-sstate_dir').hide();
-                    } else {
-                        $('#validate-sstate_dir').addClass('control-group error');
-			$("#apply-change-sstate_dir").attr("disabled","disabled");
-                        $('#hintError-sstate_dir').show();
-                    }
-                }
-            });
-
-            $('#apply-change-sstate_dir').click(function(){
-                var value = $('#new-sstate_dir').val().trim();
-                postEditAjaxRequest({"configvarChange" : 'SSTATE_DIR:'+value});
-                $('#sstate_dir').text(value);
-                $('#sstate_dir').removeClass('muted');
-                $("#change-sstate_dir-form").slideUp(function () {
-                    $('#sstate_dir, #change-sstate_dir-icon').show();
-               });
-            });
-
-            {% endif %}
-
-            // add new variable
-            $("button#add-configvar-button").click( function (evt) {
-                var variable = $("input#variable").val();
-                var value    = $("input#value").val();
+  // add new variable
+  $("button#add-configvar-button").click( function (evt) {
+    var variable = $("input#variable").val();
+    var value    = $("input#value").val();
 
-                postEditAjaxRequest({"configvarAdd" : variable+':'+value});
+    postEditAjaxRequest({"configvarAdd" : variable+':'+value});
 
-                // clear the previous values
-                $("input#variable").val("");
-                $("input#value").val("");
-                // Disable add button
-                $(".save").attr("disabled","disabled");
+    // clear the previous values
+    $("input#variable").val("");
+    $("input#value").val("");
+    // Disable add button
+    $(".save").attr("disabled","disabled");
 
-                // Reload page if admin-removed core managed value is manually added back in
-                if (0 <= " DISTRO DL_DIR IMAGE_FSTYPES IMAGE_INSTALL_append PACKAGE_CLASSES SSTATE_DIR ".indexOf( " "+variable+" " )) {
-                    // delayed reload to avoid race condition with postEditAjaxRequest
-                    do_reload=true;
-                }
-            });
+    // Reload page if admin-removed core managed value is manually added back in
+    if (0 <= " DISTRO DL_DIR IMAGE_FSTYPES IMAGE_INSTALL_append PACKAGE_CLASSES SSTATE_DIR ".indexOf( " "+variable+" " )) {
+      // delayed reload to avoid race condition with postEditAjaxRequest
+      do_reload=true;
+    }
+  });
 
-            // validate new variable name and value
-            $("#variable, #value").on('input', function() {
-                validate_new_variable();
-            });
+  // validate new variable name and value
+  $("#variable, #value").on('input', function() {
+    validate_new_variable();
+  });
 
-            //
-            // draw and register the dynamic configuration variables and handlers
-            //
+  //
+  // draw and register the dynamic configuration variables and handlers
+  //
 
-            var data = {
-                configvars : []
-            };
-            {% for c in configvars %}
-                data.configvars.push([ "{{c.name}}","{{c.value}}","{{c.pk}}" ]);
-                {% if '' != vars_context|get_dict_value:c.name %}
-                    data.vars_context[ "{{c.name}}" ] = "{{vars_context|get_dict_value:c.name }}";
-                {% endif %}
-            {% endfor %}
+  var data = {
+    configvars : []
+  };
+  {% for c in configvars %}
+  data.configvars.push([ "{{c.name}}","{{c.value}}","{{c.pk}}" ]);
+  {% if '' != vars_context|get_dict_value:c.name %}
+  data.vars_context[ "{{c.name}}" ] = "{{vars_context|get_dict_value:c.name }}";
+  {% endif %}
+  {% endfor %}
 
-            // draw these elements and assert their event handlers
-            onEditPageUpdate(data);
-        });
+  // draw these elements and assert their event handlers
+  onEditPageUpdate(data);
+});
 
-    </script>
+</script>
 
 {% endblock %}