diff --git a/share/static/css/bootstrap-switch/bootstrap-switch.css b/share/static/css/bootstrap-switch/bootstrap-switch.css
new file mode 100644
index 0000000000..7c37c56259
--- /dev/null
+++ b/share/static/css/bootstrap-switch/bootstrap-switch.css
@@ -0,0 +1,426 @@
+.clearfix {
+  *zoom: 1;
+}
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.clearfix:after {
+  clear: both;
+}
+.hide-text {
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+.input-block-level {
+  display: block;
+  width: 100%;
+  min-height: 30px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.has-switch {
+  display: inline-block;
+  cursor: pointer;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  border: 1px solid;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  position: relative;
+  text-align: left;
+  overflow: hidden;
+  line-height: 8px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  min-width: 100px;
+  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  -moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+.has-switch.switch-mini {
+  min-width: 72px;
+}
+.has-switch.switch-mini i.switch-mini-icons {
+  height: 1.20em;
+  line-height: 9px;
+  vertical-align: text-top;
+  text-align: center;
+  transform: scale(0.6);
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
+.has-switch.switch-small {
+  min-width: 80px;
+}
+.has-switch.switch-large {
+  min-width: 120px;
+}
+.has-switch.disabled {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  cursor: default !important;
+}
+.has-switch.disabled label,
+.has-switch.disabled span {
+  cursor: default !important;
+}
+.has-switch > div {
+  display: inline-block;
+  width: 150%;
+  position: relative;
+  top: 0;
+}
+.has-switch > div.switch-animate {
+  -webkit-transition: left 0.5s;
+  -moz-transition: left 0.5s;
+  -o-transition: left 0.5s;
+  transition: left 0.5s;
+}
+.has-switch > div.switch-off {
+  left: -50%;
+}
+.has-switch > div.switch-on {
+  left: 0%;
+}
+.has-switch input[type=radio],
+.has-switch input[type=checkbox] {
+  display: none;
+}
+.has-switch span,
+.has-switch label {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  height: 100%;
+  padding-bottom: 4px;
+  padding-top: 4px;
+  font-size: 14px;
+  line-height: 20px;
+}
+.has-switch span.switch-mini,
+.has-switch label.switch-mini {
+  padding-bottom: 4px;
+  padding-top: 4px;
+  font-size: 10px;
+  line-height: 9px;
+}
+.has-switch span.switch-small,
+.has-switch label.switch-small {
+  padding-bottom: 3px;
+  padding-top: 3px;
+  font-size: 12px;
+  line-height: 18px;
+}
+.has-switch span.switch-large,
+.has-switch label.switch-large {
+  padding-bottom: 9px;
+  padding-top: 9px;
+  font-size: 16px;
+  line-height: normal;
+}
+.has-switch label {
+  text-align: center;
+  margin-top: -1px;
+  margin-bottom: -1px;
+  z-index: 100;
+  width: 34%;
+  border-left: 1px solid #cccccc;
+  border-right: 1px solid #cccccc;
+  color: #333333;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
+  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #e6e6e6;
+  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+.has-switch label:hover,
+.has-switch label:focus,
+.has-switch label:active,
+.has-switch label.active,
+.has-switch label.disabled,
+.has-switch label[disabled] {
+  color: #333333;
+  background-color: #e6e6e6;
+  *background-color: #d9d9d9;
+}
+.has-switch label:active,
+.has-switch label.active {
+  background-color: #cccccc \9;
+}
+.has-switch label i {
+  color: #000;
+  text-shadow: 0 1px 0 #fff;
+  line-height: 18px;
+  pointer-events: none;
+}
+.has-switch span {
+  text-align: center;
+  z-index: 1;
+  width: 33%;
+}
+.has-switch span.switch-left {
+  -webkit-border-top-left-radius: 4px;
+  -moz-border-radius-topleft: 4px;
+  border-top-left-radius: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomleft: 4px;
+  border-bottom-left-radius: 4px;
+}
+.has-switch span.switch-right {
+  color: #333333;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  background-color: #f0f0f0;
+  background-image: -moz-linear-gradient(top, #e6e6e6, #ffffff);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#ffffff));
+  background-image: -webkit-linear-gradient(top, #e6e6e6, #ffffff);
+  background-image: -o-linear-gradient(top, #e6e6e6, #ffffff);
+  background-image: linear-gradient(to bottom, #e6e6e6, #ffffff);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6', endColorstr='#ffffffff', GradientType=0);
+  border-color: #ffffff #ffffff #d9d9d9;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #ffffff;
+  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+.has-switch span.switch-right:hover,
+.has-switch span.switch-right:focus,
+.has-switch span.switch-right:active,
+.has-switch span.switch-right.active,
+.has-switch span.switch-right.disabled,
+.has-switch span.switch-right[disabled] {
+  color: #333333;
+  background-color: #ffffff;
+  *background-color: #f2f2f2;
+}
+.has-switch span.switch-right:active,
+.has-switch span.switch-right.active {
+  background-color: #e6e6e6 \9;
+}
+.has-switch span.switch-primary,
+.has-switch span.switch-left {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #005fcc;
+  background-image: -moz-linear-gradient(top, #0044cc, #0088cc);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0044cc), to(#0088cc));
+  background-image: -webkit-linear-gradient(top, #0044cc, #0088cc);
+  background-image: -o-linear-gradient(top, #0044cc, #0088cc);
+  background-image: linear-gradient(to bottom, #0044cc, #0088cc);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0044cc', endColorstr='#ff0088cc', GradientType=0);
+  border-color: #0088cc #0088cc #005580;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #0088cc;
+  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+.has-switch span.switch-primary:hover,
+.has-switch span.switch-left:hover,
+.has-switch span.switch-primary:focus,
+.has-switch span.switch-left:focus,
+.has-switch span.switch-primary:active,
+.has-switch span.switch-left:active,
+.has-switch span.switch-primary.active,
+.has-switch span.switch-left.active,
+.has-switch span.switch-primary.disabled,
+.has-switch span.switch-left.disabled,
+.has-switch span.switch-primary[disabled],
+.has-switch span.switch-left[disabled] {
+  color: #ffffff;
+  background-color: #0088cc;
+  *background-color: #0077b3;
+}
+.has-switch span.switch-primary:active,
+.has-switch span.switch-left:active,
+.has-switch span.switch-primary.active,
+.has-switch span.switch-left.active {
+  background-color: #006699 \9;
+}
+.has-switch span.switch-info {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #41a7c5;
+  background-image: -moz-linear-gradient(top, #2f96b4, #5bc0de);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2f96b4), to(#5bc0de));
+  background-image: -webkit-linear-gradient(top, #2f96b4, #5bc0de);
+  background-image: -o-linear-gradient(top, #2f96b4, #5bc0de);
+  background-image: linear-gradient(to bottom, #2f96b4, #5bc0de);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2f96b4', endColorstr='#ff5bc0de', GradientType=0);
+  border-color: #5bc0de #5bc0de #28a1c5;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #5bc0de;
+  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+.has-switch span.switch-info:hover,
+.has-switch span.switch-info:focus,
+.has-switch span.switch-info:active,
+.has-switch span.switch-info.active,
+.has-switch span.switch-info.disabled,
+.has-switch span.switch-info[disabled] {
+  color: #ffffff;
+  background-color: #5bc0de;
+  *background-color: #46b8da;
+}
+.has-switch span.switch-info:active,
+.has-switch span.switch-info.active {
+  background-color: #31b0d5 \9;
+}
+.has-switch span.switch-success {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #58b058;
+  background-image: -moz-linear-gradient(top, #51a351, #62c462);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#51a351), to(#62c462));
+  background-image: -webkit-linear-gradient(top, #51a351, #62c462);
+  background-image: -o-linear-gradient(top, #51a351, #62c462);
+  background-image: linear-gradient(to bottom, #51a351, #62c462);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff51a351', endColorstr='#ff62c462', GradientType=0);
+  border-color: #62c462 #62c462 #3b9e3b;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #62c462;
+  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+.has-switch span.switch-success:hover,
+.has-switch span.switch-success:focus,
+.has-switch span.switch-success:active,
+.has-switch span.switch-success.active,
+.has-switch span.switch-success.disabled,
+.has-switch span.switch-success[disabled] {
+  color: #ffffff;
+  background-color: #62c462;
+  *background-color: #4fbd4f;
+}
+.has-switch span.switch-success:active,
+.has-switch span.switch-success.active {
+  background-color: #42b142 \9;
+}
+.has-switch span.switch-warning {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #f9a123;
+  background-image: -moz-linear-gradient(top, #f89406, #fbb450);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f89406), to(#fbb450));
+  background-image: -webkit-linear-gradient(top, #f89406, #fbb450);
+  background-image: -o-linear-gradient(top, #f89406, #fbb450);
+  background-image: linear-gradient(to bottom, #f89406, #fbb450);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff89406', endColorstr='#fffbb450', GradientType=0);
+  border-color: #fbb450 #fbb450 #f89406;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #fbb450;
+  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+.has-switch span.switch-warning:hover,
+.has-switch span.switch-warning:focus,
+.has-switch span.switch-warning:active,
+.has-switch span.switch-warning.active,
+.has-switch span.switch-warning.disabled,
+.has-switch span.switch-warning[disabled] {
+  color: #ffffff;
+  background-color: #fbb450;
+  *background-color: #faa937;
+}
+.has-switch span.switch-warning:active,
+.has-switch span.switch-warning.active {
+  background-color: #fa9f1e \9;
+}
+.has-switch span.switch-danger {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #d14641;
+  background-image: -moz-linear-gradient(top, #bd362f, #ee5f5b);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bd362f), to(#ee5f5b));
+  background-image: -webkit-linear-gradient(top, #bd362f, #ee5f5b);
+  background-image: -o-linear-gradient(top, #bd362f, #ee5f5b);
+  background-image: linear-gradient(to bottom, #bd362f, #ee5f5b);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbd362f', endColorstr='#ffee5f5b', GradientType=0);
+  border-color: #ee5f5b #ee5f5b #e51d18;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #ee5f5b;
+  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+.has-switch span.switch-danger:hover,
+.has-switch span.switch-danger:focus,
+.has-switch span.switch-danger:active,
+.has-switch span.switch-danger.active,
+.has-switch span.switch-danger.disabled,
+.has-switch span.switch-danger[disabled] {
+  color: #ffffff;
+  background-color: #ee5f5b;
+  *background-color: #ec4844;
+}
+.has-switch span.switch-danger:active,
+.has-switch span.switch-danger.active {
+  background-color: #e9322d \9;
+}
+.has-switch span.switch-default {
+  color: #333333;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  background-color: #f0f0f0;
+  background-image: -moz-linear-gradient(top, #e6e6e6, #ffffff);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#ffffff));
+  background-image: -webkit-linear-gradient(top, #e6e6e6, #ffffff);
+  background-image: -o-linear-gradient(top, #e6e6e6, #ffffff);
+  background-image: linear-gradient(to bottom, #e6e6e6, #ffffff);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6', endColorstr='#ffffffff', GradientType=0);
+  border-color: #ffffff #ffffff #d9d9d9;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #ffffff;
+  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+.has-switch span.switch-default:hover,
+.has-switch span.switch-default:focus,
+.has-switch span.switch-default:active,
+.has-switch span.switch-default.active,
+.has-switch span.switch-default.disabled,
+.has-switch span.switch-default[disabled] {
+  color: #333333;
+  background-color: #ffffff;
+  *background-color: #f2f2f2;
+}
+.has-switch span.switch-default:active,
+.has-switch span.switch-default.active {
+  background-color: #e6e6e6 \9;
+}
diff --git a/share/static/js/libs/bootstrap-switch.js b/share/static/js/libs/bootstrap-switch.js
new file mode 100644
index 0000000000..f2c8ba3de3
--- /dev/null
+++ b/share/static/js/libs/bootstrap-switch.js
@@ -0,0 +1,406 @@
+/* ========================================================================
+ * bootstrap-switch - v2.0.0
+ * http://www.bootstrap-switch.org
+ * ========================================================================
+ * Copyright 2012-2013 Mattia Larentis
+ *
+ * ========================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================================
+ */
+
+(function() {
+  (function($) {
+    $.fn.bootstrapSwitch = function(method) {
+      var methods;
+      methods = {
+        init: function() {
+          return this.each(function() {
+            var $div, $element, $form, $label, $switchLeft, $switchRight, $wrapper, changeState;
+            $element = $(this);
+            $switchLeft = $("<span>", {
+              "class": "switch-left",
+              html: function() {
+                var html, label;
+                html = "ON";
+                label = $element.data("on-label");
+                if (label != null) {
+                  html = label;
+                }
+                return html;
+              }
+            });
+            $switchRight = $("<span>", {
+              "class": "switch-right",
+              html: function() {
+                var html, label;
+                html = "OFF";
+                label = $element.data("off-label");
+                if (label != null) {
+                  html = label;
+                }
+                return html;
+              }
+            });
+            $label = $("<label>", {
+              "for": $element.attr("id"),
+              html: function() {
+                var html, icon, label;
+                html = "&nbsp;";
+                icon = $element.data("label-icon");
+                label = $element.data("text-label");
+                if (icon != null) {
+                  html = "<i class=\"icon " + icon + "\"></i>";
+                }
+                if (label != null) {
+                  html = label;
+                }
+                return html;
+              }
+            });
+            $div = $("<div>");
+            $wrapper = $("<div>", {
+              "class": "has-switch",
+              tabindex: 0
+            });
+            $form = $element.closest("form");
+            changeState = function() {
+              if ($label.hasClass("label-change-switch")) {
+                return;
+              }
+              return $label.trigger("mousedown").trigger("mouseup").trigger("click");
+            };
+            $element.data("bootstrap-switch", true);
+            if ($element.attr("class")) {
+              $.each(["switch-mini", "switch-small", "switch-large"], function(i, cls) {
+                if ($element.attr("class").indexOf(cls) >= 0) {
+                  $switchLeft.addClass(cls);
+                  $label.addClass(cls);
+                  return $switchRight.addClass(cls);
+                }
+              });
+            }
+            if ($element.data("on") != null) {
+              $switchLeft.addClass("switch-" + $element.data("on"));
+            }
+            if ($element.data("off") != null) {
+              $switchRight.addClass("switch-" + $element.data("off"));
+            }
+            $div.data("animated", false);
+            if ($element.data("animated") !== false) {
+              $div.addClass("switch-animate").data("animated", true);
+            }
+            $div = $element.wrap($div).parent();
+            $wrapper = $div.wrap($wrapper).parent();
+            $element.before($switchLeft).before($label).before($switchRight);
+            $div.addClass($element.is(":checked") ? "switch-on" : "switch-off");
+            if ($element.is(":disabled") || $element.is("[readonly]")) {
+              $wrapper.addClass("disabled");
+            }
+            $element.on("keydown", function(e) {
+              if (e.keyCode !== 32) {
+                return;
+              }
+              e.stopImmediatePropagation();
+              e.preventDefault();
+              return changeState();
+            }).on("change", function(e, skip) {
+              var isChecked, state;
+              isChecked = $element.is(":checked");
+              state = $div.hasClass("switch-off");
+              e.preventDefault();
+              $div.css("left", "");
+              if (state !== isChecked) {
+                return;
+              }
+              if (isChecked) {
+                $div.removeClass("switch-off").addClass("switch-on");
+              } else {
+                $div.removeClass("switch-on").addClass("switch-off");
+              }
+              if ($div.data("animated") !== false) {
+                $div.addClass("switch-animate");
+              }
+              if (typeof skip === "boolean" && skip) {
+                return;
+              }
+              return $element.trigger("switch-change", {
+                el: $element,
+                value: isChecked
+              });
+            });
+            $wrapper.on("keydown", function(e) {
+              if (!e.which || $element.is(":disabled") || $element.is("[readonly]")) {
+                return;
+              }
+              switch (e.which) {
+                case 32:
+                  e.preventDefault();
+                  return changeState();
+                case 37:
+                  e.preventDefault();
+                  if ($element.is(":checked")) {
+                    return changeState();
+                  }
+                  break;
+                case 39:
+                  e.preventDefault();
+                  if (!$element.is(":checked")) {
+                    return changeState();
+                  }
+              }
+            });
+            $switchLeft.on("click", function() {
+              return changeState();
+            });
+            $switchRight.on("click", function() {
+              return changeState();
+            });
+            $label.on("mousedown touchstart", function(e) {
+              var moving;
+              moving = false;
+              e.preventDefault();
+              e.stopImmediatePropagation();
+              $div.removeClass("switch-animate");
+              if ($element.is(":disabled") || $element.is("[readonly]") || $element.hasClass("radio-no-uncheck")) {
+                return $label.unbind("click");
+              }
+              return $label.on("mousemove touchmove", function(e) {
+                var left, percent, relativeX, right;
+                relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $wrapper.offset().left;
+                percent = (relativeX / $wrapper.width()) * 100;
+                left = 25;
+                right = 75;
+                moving = true;
+                if (percent < left) {
+                  percent = left;
+                } else if (percent > right) {
+                  percent = right;
+                }
+                return $div.css("left", (percent - right) + "%");
+              }).on("click touchend", function(e) {
+                e.stopImmediatePropagation();
+                e.preventDefault();
+                $label.unbind("mouseleave");
+                if (moving) {
+                  $element.prop("checked", parseInt($label.parent().css("left"), 10) > -25);
+                } else {
+                  $element.prop("checked", !$element.is(":checked"));
+                }
+                moving = false;
+                return $element.trigger("change");
+              }).on("mouseleave", function(e) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                $label.unbind("mouseleave mousemove").trigger("mouseup");
+                return $element.prop("checked", parseInt($label.parent().css("left"), 10) > -25).trigger("change");
+              }).on("mouseup", function(e) {
+                e.stopImmediatePropagation();
+                e.preventDefault();
+                return $label.trigger("mouseleave");
+              });
+            });
+            if (!$form.data("bootstrap-switch")) {
+              return $form.bind("reset", function() {
+                return window.setTimeout(function() {
+                  return $form.find(".has-switch").each(function() {
+                    var $input;
+                    $input = $(this).find("input");
+                    return $input.prop("checked", $input.is(":checked")).trigger("change");
+                  });
+                }, 1);
+              }).data("bootstrap-switch", true);
+            }
+          });
+        },
+        setDisabled: function(disabled) {
+          var $element, $wrapper;
+          $element = $(this);
+          $wrapper = $element.parents(".has-switch");
+          if (disabled) {
+            $wrapper.addClass("disabled");
+            $element.prop("disabled", true);
+          } else {
+            $wrapper.removeClass("disabled");
+            $element.prop("disabled", false);
+          }
+          return $element;
+        },
+        toggleDisabled: function() {
+          var $element;
+          $element = $(this);
+          $element.prop("disabled", !$element.is(":disabled")).parents(".has-switch").toggleClass("disabled");
+          return $element;
+        },
+        isDisabled: function() {
+          return $(this).is(":disabled");
+        },
+        setReadOnly: function(readonly) {
+          var $element, $wrapper;
+          $element = $(this);
+          $wrapper = $element.parents(".has-switch");
+          if (readonly) {
+            $wrapper.addClass("disabled");
+            $element.prop("readonly", true);
+          } else {
+            $wrapper.removeClass("disabled");
+            $element.prop("readonly", false);
+          }
+          return $element;
+        },
+        toggleReadOnly: function() {
+          var $element;
+          $element = $(this);
+          $element.prop("readonly", !$element.is("[readonly]")).parents(".has-switch").toggleClass("disabled");
+          return $element;
+        },
+        isReadOnly: function() {
+          return $(this).is("[readonly]");
+        },
+        toggleState: function(skip) {
+          var $element;
+          $element = $(this);
+          $element.prop("checked", !$element.is(":checked")).trigger("change", skip);
+          return $element;
+        },
+        toggleRadioState: function(skip) {
+          var $element;
+          $element = $(this);
+          $element.not(":checked").prop("checked", !$element.is(":checked")).trigger("change", skip);
+          return $element;
+        },
+        toggleRadioStateAllowUncheck: function(uncheck, skip) {
+          var $element;
+          $element = $(this);
+          if (uncheck) {
+            $element.not(":checked").trigger("change", skip);
+          } else {
+            $element.not(":checked").prop("checked", !$element.is(":checked")).trigger("change", skip);
+          }
+          return $element;
+        },
+        setState: function(value, skip) {
+          var $element;
+          $element = $(this);
+          $element.prop("checked", value).trigger("change", skip);
+          return $element;
+        },
+        setOnLabel: function(value) {
+          var $element;
+          $element = $(this);
+          $element.siblings(".switch-left").html(value);
+          return $element;
+        },
+        setOffLabel: function(value) {
+          var $element;
+          $element = $(this);
+          $element.siblings(".switch-right").html(value);
+          return $element;
+        },
+        setOnClass: function(value) {
+          var $element, $switchLeft, cls;
+          $element = $(this);
+          $switchLeft = $element.siblings(".switch-left");
+          cls = $element.attr("data-on");
+          if (value == null) {
+            return;
+          }
+          if (cls != null) {
+            $switchLeft.removeClass("switch-" + cls);
+          }
+          $switchLeft.addClass("switch-" + value);
+          return $element;
+        },
+        setOffClass: function(value) {
+          var $element, $switchRight, cls;
+          $element = $(this);
+          $switchRight = $element.siblings(".switch-right");
+          cls = $element.attr("data-off");
+          if (value == null) {
+            return;
+          }
+          if (cls != null) {
+            $switchRight.removeClass("switch-" + cls);
+          }
+          $switchRight.addClass("switch-" + value);
+          return $element;
+        },
+        setAnimated: function(value) {
+          var $div, $element;
+          $element = $(this);
+          $div = $element.parent();
+          if (value == null) {
+            value = false;
+          }
+          $div.data("animated", value).attr("data-animated", value)[$div.data("animated") !== false ? "addClass" : "removeClass"]("switch-animate");
+          return $element;
+        },
+        setSizeClass: function(value) {
+          var $element, $label, $switchLeft, $switchRight;
+          $element = $(this);
+          $switchLeft = $element.siblings(".switch-left");
+          $label = $element.siblings("label");
+          $switchRight = $element.siblings(".switch-right");
+          $.each(["switch-mini", "switch-small", "switch-large"], function(i, cls) {
+            if (cls !== value) {
+              $switchLeft.removeClass(cls);
+              $label.removeClass(cls);
+              return $switchRight.removeClass(cls);
+            } else {
+              $switchLeft.addClass(cls);
+              $label.addClass(cls);
+              return $switchRight.addClass(cls);
+            }
+          });
+          return $element;
+        },
+        setTextLabel: function(value) {
+          var $element;
+          $element = $(this);
+          $element.siblings("label").html(value || "&nbsp");
+          return $element;
+        },
+        setTextIcon: function(value) {
+          var $element;
+          $element = $(this);
+          $element.siblings("label").html(value ? "<i class=\"icon " + value + "\"></i>" : "&nbsp;");
+          return $element;
+        },
+        state: function() {
+          return $(this).is(":checked");
+        },
+        destroy: function() {
+          var $div, $element, $form;
+          $element = $(this);
+          $div = $element.parent();
+          $form = $div.closest("form");
+          $div.children().not($element).remove();
+          $element.unwrap().unwrap().unbind("change");
+          if ($form.length) {
+            $form.unbind("reset").removeData("bootstrapSwitch");
+          }
+          return $element;
+        }
+      };
+      if (methods[method]) {
+        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+      }
+      if (typeof method === "object" || !method) {
+        return methods.init.apply(this, arguments);
+      }
+      return $.error("Method " + method + " does not exist!");
+    };
+    return this;
+  })(jQuery);
+
+}).call(this);
diff --git a/share/templates/subscriber/webphone.tt b/share/templates/subscriber/webphone.tt
index 30e5c762f9..7053e7e282 100644
--- a/share/templates/subscriber/webphone.tt
+++ b/share/templates/subscriber/webphone.tt
@@ -48,8 +48,10 @@
     <!--<script type="text/javascript" src="/js/libs/stanzaio.bundle.min.js"></script>-->
     <script type="text/javascript" src="/js/libs/stanzaio.bundle.js"></script>
     <script type="text/javascript" src="/js/libs/bootstrap-select.min.js"></script>
+    <script type="text/javascript" src="/js/libs/bootstrap-switch.js"></script>
     <script type="text/javascript" src="/js/libs/jquery.slimscroll.min.js"></script>
     <link rel="stylesheet" type="text/css" href="/css/bootstrap-select/bootstrap-select.min.css"/>
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap-switch/bootstrap-switch.css"/>
     <link rel="stylesheet" type="text/css" href="/font/font-awesome/css/font-awesome.min.css"/>
     <script type="text/javascript">
 
@@ -61,6 +63,7 @@
         var orig_page_title = document.title;
         var window_focus = true;
         var window_timeout;
+        var xmpp_show_offline = false;
 
         $.ajax({
             url: "[% c.uri_for_action('/subscriber/webphone_ajax', c.req.captures) %]"
@@ -193,7 +196,8 @@
                             console.log(item.name);
                             var jidid = item.jid.bare.replace(/[^a-zA-Z0-9_]/g, '-');
                             var entry = create_xmpp_entry_dom(jidid, item.jid.bare, item.name || item.jid.bare);
-                            $("#xmpp-roster").append(entry);
+                            $('#xmpp-roster').append(entry);
+                            $('#xmpp-roster li').sort(roster_asc_sort).appendTo('#xmpp-roster');
                             equalHeights($('#' + jidid).find('.xmpp-roster-entry-col1'), $('#' + jidid).find('.xmpp-roster-entry-col2'));
                             $('#' + jidid)
                                 .mouseenter(function(obj) {
@@ -207,6 +211,9 @@
                                 console.log("start chat");
                                 create_chat_window($(obj.target).parents("li.xmpp-roster-entry"), jidid, item.jid.bare);
                             });
+
+                            // we get a presence callback where we'll show it
+                            $(entry).hide();
                         });
                     }
                     $('#xmpp-pres').val(xmpp_last_state);
@@ -229,6 +236,11 @@
 
                 $("#xmpp-roster #" + jidid + " .xmpp-roster-entry-col1").removeClass().addClass("xmpp-roster-entry-col1 " + show);
                 console.log("+++++++ type=" + pres.type + ", show=" + pres.show);
+                if(show != 'unavailable' || xmpp_show_offline) {
+                    $("#xmpp-roster #" + jidid).show();
+                } else {
+                    $("#xmpp-roster #" + jidid).hide();
+                }
             });
 
         }
@@ -271,6 +283,10 @@
             phone.call('sip:voicebox@pbx1.demo.sipwise.com', options);
         }
 
+        function roster_asc_sort(a, b) {
+            return ($(b).find('.xmpp-roster-entry-name').text().toLowerCase()) < ($(a).find('.xmpp-roster-entry-name').text().toLowerCase()) ? 1 : -1;    
+        }
+
         function create_xmpp_entry_dom(jidid, jid, name) {
             var entry = 
             '<li id="' + jidid + '" class="xmpp-roster-entry row span6" style="clear:both; float:left; padding:0; margin:1px; background:#f0f0f0;">' +
@@ -360,6 +376,20 @@
         $(function() {
             $('.selectpicker').selectpicker();
 
+            $('#xmpp-toggle-offline').bootstrapSwitch();
+            $('#xmpp-toggle-offline').bootstrapSwitch('setSizeClass', 'switch-mini');
+            $('#xmpp-toggle-offline').on('switch-change', function(obj) {
+                if(obj.currentTarget.checked) {
+                    console.log("show offline entries");
+                    xmpp_show_offline = true;
+                    $('.xmpp-roster-entry').show();
+                } else {
+                    console.log("hide offline entries");
+                    xmpp_show_offline = false;
+                    $('.xmpp-roster-entry-col1.unavailable').parent().hide();
+                }
+            });
+
             $('#xmpp-pres').change(function(obj) {
                 var show = obj.currentTarget[obj.currentTarget.selectedIndex].value;
                 xmpp_last_state = show;
@@ -420,21 +450,27 @@
     </div>
     -->
 
-    <div class="row">
+    <div>
         <h3>Buddy List</h3>
-        <select id="xmpp-pres" class="selectpicker span6">
-            [% FOR opt IN 
-                [
-                    { n = "unavailable", d = "Offline" },
-                    { n = "available", d = "Available" },
-                    { n = "away", d = "Away" },
-                    { n = "xa", d = "Extended Away" },
-                    { n = "dnd", d = "Do Not Disturb" },
-                ]
-            -%]
-                <option value="[% opt.n %]" data-content="<span class='xmpp-roster-entry-col1 [% opt.n %]'>&nbsp;</span><span> [% opt.d %]</span>">[% opt.d %]</option>
-            [% END -%]
-        </select>
+        <div class="row span6" style="margin:0; clear:both; padding:10px;">
+            <label for="xmpp-toggle-offline" style="float:left; margin-right: 10px;">Show offline Users</label>
+            <input id="xmpp-toggle-offline" style="float:left" type="checkbox" data-on="success" data-off="default" data-on-label="YES" data-off-label="NO">
+        </div>
+        <div class="row span6" style="margin:0; clear:both;">
+            <select id="xmpp-pres" class="selectpicker span6">
+                [% FOR opt IN 
+                    [
+                        { n = "unavailable", d = "Offline" },
+                        { n = "available", d = "Available" },
+                        { n = "away", d = "Away" },
+                        { n = "xa", d = "Extended Away" },
+                        { n = "dnd", d = "Do Not Disturb" },
+                    ]
+                -%]
+                    <option value="[% opt.n %]" data-content="<span class='xmpp-roster-entry-col1 [% opt.n %]'>&nbsp;</span><span> [% opt.d %]</span>">[% opt.d %]</option>
+                [% END -%]
+            </select>
+        </div>
         <ul id="xmpp-roster" class="span8" style="list-style-type:none; padding:0; margin:0;">
         </ul>
     </div>