From 6636b77489a6758e715c50cf54061014a2cb80e8 Mon Sep 17 00:00:00 2001
From: Mark McDowall <markus.mcd5@gmail.com>
Date: Thu, 25 Apr 2013 19:44:39 -0700
Subject: [PATCH] Replaced bootstrap switch with css only version!

---
 Gruntfile.js                                 |   1 -
 UI/Content/base.less                         |   8 +
 UI/Content/bootstrapSwitch.css               | 233 -----------------
 UI/Content/form.less                         |  62 ++---
 UI/Content/toggle-switch.css                 | 216 +---------------
 UI/Index.html                                |   4 +-
 UI/JsLibraries/bootstrap.switch.js           | 251 -------------------
 UI/Mixins/backbone.bootstrap.switch.mixin.js |  59 -----
 UI/Mixins/backbone.modelbinder.mixin.js      |   1 -
 UI/Settings/Naming/NamingTemplate.html       |  58 ++++-
 10 files changed, 89 insertions(+), 804 deletions(-)
 delete mode 100644 UI/Content/bootstrapSwitch.css
 delete mode 100644 UI/JsLibraries/bootstrap.switch.js
 delete mode 100644 UI/Mixins/backbone.bootstrap.switch.mixin.js

diff --git a/Gruntfile.js b/Gruntfile.js
index 9addc2676..c57e76824 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -13,7 +13,6 @@ module.exports = function (grunt) {
             'UI/JsLibraries/backbone.shortcuts.js'       : 'http://raw.github.com/bry4n/backbone-shortcuts/master/backbone.shortcuts.js',
             //'UI/JsLibraries/bootstrap.js':
             //'UI/JsLibraries/bootstrap.slider.js':
-            'UI/JsLibraries/bootstrap.switch.js'         : 'http://raw.github.com/nostalgiaz/bootstrap-switch/master/static/js/bootstrapSwitch.js',
             'UI/JsLibraries/handlebars.runtime.js'       : 'http://raw.github.com/wycats/handlebars.js/master/dist/handlebars.runtime.js',
             'UI/JsLibraries/jquery.cookie.js'            : 'http://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js',
             'UI/JsLibraries/jquery.js'                   : 'http://code.jquery.com/jquery.js',
diff --git a/UI/Content/base.less b/UI/Content/base.less
index b6dbe0b50..63446cdf0 100644
--- a/UI/Content/base.less
+++ b/UI/Content/base.less
@@ -78,3 +78,11 @@ html {
   margin-top: 10px;
   margin-bottom: 30px;
 }
+
+button::-moz-focus-inner, a::-moz-focus-inner {
+  border: 0;
+}
+
+a:focus {
+  outline: none;
+}
\ No newline at end of file
diff --git a/UI/Content/bootstrapSwitch.css b/UI/Content/bootstrapSwitch.css
deleted file mode 100644
index 77b2640ba..000000000
--- a/UI/Content/bootstrapSwitch.css
+++ /dev/null
@@ -1,233 +0,0 @@
-/* ============================================================
- * bootstrapSwitch v1.2 by Larentis Mattia @spiritualGuru
- * http://www.larentis.eu/switch/
- * ============================================================
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- * ============================================================ */
-/* line 18, ../sass/bootstrapSwitch.scss */
-.has-switch {
-    display: inline-block;
-    cursor: pointer;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    -ms-border-radius: 5px;
-    -o-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);
-    background: #e6e6e6;
-    position: relative;
-    text-align: left;
-    overflow: hidden;
-    line-height: 8px;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    min-width: 102px;
-}
-
-/* line 40, ../sass/bootstrapSwitch.scss */
-.has-switch.switch-mini {
-    min-width: 72px;
-}
-
-/* line 44, ../sass/bootstrapSwitch.scss */
-.has-switch.switch-small {
-    min-width: 81px;
-}
-
-/* line 48, ../sass/bootstrapSwitch.scss */
-.has-switch.switch-large {
-    min-width: 120px;
-}
-
-/* line 52, ../sass/bootstrapSwitch.scss */
-.has-switch.deactivate {
-    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
-    opacity: 0.5;
-    cursor: default !important;
-}
-
-/* line 55, ../sass/bootstrapSwitch.scss */
-.has-switch.deactivate label, .has-switch.deactivate span {
-    cursor: default !important;
-}
-
-/* line 59, ../sass/bootstrapSwitch.scss */
-.has-switch > div {
-    display: inline-block;
-    width: 150%;
-    position: relative;
-    top: 0;
-}
-
-/* line 65, ../sass/bootstrapSwitch.scss */
-.has-switch > div.switch-animate {
-    -webkit-transition: left 0.5s;
-    -moz-transition: left 0.5s;
-    -o-transition: left 0.5s;
-    transition: left 0.5s;
-}
-
-/* line 68, ../sass/bootstrapSwitch.scss */
-.has-switch > div.switch-off {
-    left: -50%;
-}
-
-/* line 71, ../sass/bootstrapSwitch.scss */
-.has-switch > div.switch-on {
-    left: 0%;
-}
-
-/* line 75, ../sass/bootstrapSwitch.scss */
-.has-switch input[type=checkbox] {
-    display: none;
-}
-
-/* line 83, ../sass/bootstrapSwitch.scss */
-.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;
-}
-
-/* line 96, ../sass/bootstrapSwitch.scss */
-.has-switch span.switch-mini, .has-switch label.switch-mini {
-    padding-bottom: 4px;
-    padding-top: 4px;
-    font-size: 10px;
-    line-height: 9px;
-}
-
-/* line 103, ../sass/bootstrapSwitch.scss */
-.has-switch span.switch-small, .has-switch label.switch-small {
-    padding-bottom: 3px;
-    padding-top: 3px;
-    font-size: 12px;
-    line-height: 18px;
-}
-
-/* line 110, ../sass/bootstrapSwitch.scss */
-.has-switch span.switch-large, .has-switch label.switch-large {
-    padding-bottom: 9px;
-    padding-top: 9px;
-    font-size: 16px;
-    line-height: normal;
-}
-
-/* line 118, ../sass/bootstrapSwitch.scss */
-.has-switch label {
-    background: white;
-    margin-top: -1px;
-    margin-bottom: -1px;
-    z-index: 100;
-    width: 33.333333%;
-    border-left: 1px solid #e6e6e6;
-    border-right: 1px solid #e6e6e6;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
-    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
-    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
-    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
-    background-image: linear-gradient(top, #ffffff, #e6e6e6);
-}
-
-/* line 130, ../sass/bootstrapSwitch.scss */
-.has-switch span {
-    color: white;
-    text-align: center;
-    z-index: 1;
-    width: 33.333333%;
-}
-
-/* line 136, ../sass/bootstrapSwitch.scss */
-.has-switch span.switch-left {
-    -moz-border-radius-topleft: 4px;
-    -webkit-border-top-left-radius: 4px;
-    border-top-left-radius: 4px;
-    -moz-border-radius-bottomleft: 4px;
-    -webkit-border-bottom-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-}
-
-/* line 140, ../sass/bootstrapSwitch.scss */
-.has-switch span.switch-right {
-    color: black;
-    -moz-border-radius-topright: 4px;
-    -webkit-border-top-right-radius: 4px;
-    border-top-right-radius: 4px;
-    -moz-border-radius-bottomright: 4px;
-    -webkit-border-bottom-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-    background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
-    background-image: -webkit-linear-gradient(bottom, #ffffff, #e6e6e6);
-    background-image: -moz-linear-gradient(bottom, #ffffff, #e6e6e6);
-    background-image: -o-linear-gradient(bottom, #ffffff, #e6e6e6);
-    background-image: linear-gradient(bottom, #ffffff, #e6e6e6);
-}
-
-/* line 147, ../sass/bootstrapSwitch.scss */
-.has-switch span.switch-primary, .has-switch span.switch-left {
-    color: white;
-    background: #0088cc;
-    background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0088cc), color-stop(100%, #0055cc));
-    background-image: -webkit-linear-gradient(bottom, #0088cc, #0055cc);
-    background-image: -moz-linear-gradient(bottom, #0088cc, #0055cc);
-    background-image: -o-linear-gradient(bottom, #0088cc, #0055cc);
-    background-image: linear-gradient(bottom, #0088cc, #0055cc);
-}
-
-/* line 152, ../sass/bootstrapSwitch.scss */
-.has-switch span.switch-info {
-    color: white;
-    background: #5bc0de;
-    background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #5bc0de), color-stop(100%, #2f96b4));
-    background-image: -webkit-linear-gradient(bottom, #5bc0de, #2f96b4);
-    background-image: -moz-linear-gradient(bottom, #5bc0de, #2f96b4);
-    background-image: -o-linear-gradient(bottom, #5bc0de, #2f96b4);
-    background-image: linear-gradient(bottom, #5bc0de, #2f96b4);
-}
-
-/* line 158, ../sass/bootstrapSwitch.scss */
-.has-switch span.switch-success {
-    color: white;
-    background: #62c462;
-    background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #62c462), color-stop(100%, #51a351));
-    background-image: -webkit-linear-gradient(bottom, #62c462, #51a351);
-    background-image: -moz-linear-gradient(bottom, #62c462, #51a351);
-    background-image: -o-linear-gradient(bottom, #62c462, #51a351);
-    background-image: linear-gradient(bottom, #62c462, #51a351);
-}
-
-/* line 164, ../sass/bootstrapSwitch.scss */
-.has-switch span.switch-warning {
-    color: white;
-    background: #dbb450;
-    background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #dbb450), color-stop(100%, #f89406));
-    background-image: -webkit-linear-gradient(bottom, #dbb450, #f89406);
-    background-image: -moz-linear-gradient(bottom, #dbb450, #f89406);
-    background-image: -o-linear-gradient(bottom, #dbb450, #f89406);
-    background-image: linear-gradient(bottom, #dbb450, #f89406);
-}
-
-/* line 170, ../sass/bootstrapSwitch.scss */
-.has-switch span.switch-danger {
-    color: white;
-    background: #ee5f5b;
-    background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #ee5f5b), color-stop(100%, #bd362f));
-    background-image: -webkit-linear-gradient(bottom, #ee5f5b, #bd362f);
-    background-image: -moz-linear-gradient(bottom, #ee5f5b, #bd362f);
-    background-image: -o-linear-gradient(bottom, #ee5f5b, #bd362f);
-    background-image: linear-gradient(bottom, #ee5f5b, #bd362f);
-}
diff --git a/UI/Content/form.less b/UI/Content/form.less
index fa8414ad7..40723b113 100644
--- a/UI/Content/form.less
+++ b/UI/Content/form.less
@@ -1,19 +1,4 @@
-.form-horizontal .controls i {
-    font-size: 16px;
-    /*color: #3A87AD;*/
-    /* Info blue */
-    color: #595959;
-    cursor: default;
-}
-
-.form-horizontal .controls i.warning {
-    color: #f89406;
-}
-
-.form-horizontal .controls i.danger {
-    color: #b94a48;
-}
-.form-horizontal {
+.form-horizontal {
   .controls {
     i.danger {
       color: #b94a48;
@@ -26,41 +11,30 @@
       color: #595959;
       cursor: default;
     }
+    .checkbox {
+      width: 100px;
+      margin-left: 0px;
+      display: inline-block;
+      padding-top: 0px;
+      margin-bottom: 0px;
+    }
+
+    .help-inline-checkbox {
+      padding-left: 5px;
+      display: inline-block;
+      margin-top: -20px;
+      margin-bottom: 0;
+      vertical-align: middle;
+    }
   }
 }
-.switch {
-  float: left;
-}
+
 .text-area-help {
   display: block;
   color: #777777;
   font-size: 12px;
 }
-textarea.nzb-restrictions {
-  width: 260px;
-}
-.help-inline-checkbox {
-  float: left;
-  padding-left: 7px;
-  padding-top: 3px;
-}
-
-.help-inline-checkbox {
-    float: left;
-    padding-left: 7px;
-    padding-top: 3px;
-}
-
-.switch {
-    float: left;
-}
 
 textarea.nzb-restrictions {
-    width: 260px;
-}
-
-.text-area-help {
-    display: block;
-    color: #777777;
-    font-size: 12px;
+  width: 260px;
 }
\ No newline at end of file
diff --git a/UI/Content/toggle-switch.css b/UI/Content/toggle-switch.css
index 05c9aebca..5604b2415 100644
--- a/UI/Content/toggle-switch.css
+++ b/UI/Content/toggle-switch.css
@@ -32,7 +32,6 @@ https://github.com/ghinda/css-toggle-switch
 	.toggle label {
 		position: relative;
 		z-index: 3;
-		
 		display: block;
 		width: 100%;
 	}
@@ -48,11 +47,9 @@ https://github.com/ghinda/css-toggle-switch
 	.toggle p {
 		position: absolute;
 		left: -100px;
-		
 		width: 100%;
 		margin: 0;
 		padding-right: 100px;
-		
 		text-align: left;
 	}
 	
@@ -61,12 +58,11 @@ https://github.com/ghinda/css-toggle-switch
 		top: 0;
 		left: 0;
 		z-index: 5;
-		
 		display: block;
 		width: 50%;
 		margin-left: 100px;
-		
 		text-align: center;
+        color: #F5F5F5;
 	}
 	
 	.toggle p span:last-child {
@@ -78,8 +74,7 @@ https://github.com/ghinda/css-toggle-switch
 		right: 0;
 		top: 0;
 		z-index: 4;
-		
-		display: block;
+		display: inline;
 		width: 50%;
 		height: 100%;
 		padding: 0;
@@ -198,11 +193,11 @@ https://github.com/ghinda/css-toggle-switch
 	.toggle .slide-button {
 		display: block;
 		
-		-webkit-transition: all 0.3s ease-out;
-		-moz-transition: all 0.3s ease-out;
-		-ms-transition: all 0.3s ease-out;
-		-o-transition: all 0.3s ease-out;
-		transition: all 0.3s ease-out;
+		-webkit-transition: all 0.3s ease-in 0s;
+		-moz-transition: all 0.3s ease-in 0s;
+		-ms-transition: all 0.3s ease-in 0s;
+		-o-transition: all 0.3s ease-in 0s;
+		transition: all 0.3s ease-in 0s;
 	}
 	
 	.toggle label,
@@ -217,10 +212,11 @@ https://github.com/ghinda/css-toggle-switch
 	}
 	
 	/* Outline the toggles when the inputs are focused */
-	.toggle input:focus ~ .slide-button,
-	.switch input:focus + label {
-		outline: 1px dotted #888;
-	}
+	/*.toggle input:focus ~ .slide-button,*/
+    /* WHY?! It looks awful and it seems to bug out in FF */
+	/*.switch input:focus + label {*/
+		/*outline: 1px dotted #888;*/
+	/*}*/
 	
 	/* Bugfix for older Webkit, including mobile Webkit. Adapted from:
 	 * http://css-tricks.com/webkit-sibling-bug/
@@ -230,192 +226,4 @@ https://github.com/ghinda/css-toggle-switch
 	}
 	
 	@-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } }
-
-
-	/* Standalone Themes */
-
-
-	/* Candy Theme
-	 * Based on the "Sort Switches / Toggles (PSD)" by Ormal Clarck
-	 * http://www.premiumpixels.com/freebies/sort-switches-toggles-psd/
-	 */
-	 
-	.candy {
-		background-color: #2d3035;
-		
-		color: #fff;
-		font-weight: bold;
-		text-align: center;
-		text-shadow: 1px 1px 1px #191b1e;
-			
-		border-radius: 3px;	
-		
-		box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
-	}
-
-	.candy input:checked + label {
-		color: #333;
-		text-shadow: 0 1px 0 rgba(255,255,255,0.5);
-	}
-		
-	.candy .slide-button {
-		border: 1px solid #333;
-
-		background-color: #70c66b;
-		
-		background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
-		background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
-		background-image:     -ms-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
-		background-image:      -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
-		background-image:         linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
-		
-		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.45);
-		
-		border-radius: 3px;
-	}
-
-	.candy p {
-		color: #333;
-		
-		text-shadow: none;
-	}
-
-	.candy span {
-		color: #fff;
-	}
-
-	.candy.blue .slide-button {
-		background-color: #38a3d4;
-	}
-
-	.candy.yellow .slide-button {
-		background-color: #f5e560;
-	}
-
-	/* Android Theme
-	 * Based on Holo
-	 */
-	 
-	.android {
-		background-color: #b6b6b6;
-		
-		color: #fff;
-	}
-
-	.android.toggle {
-		border: 2px solid #b6b6b6;
-	}
-
-	.android.switch {
-		overflow: hidden;
-	}
-		
-	.android.switch .slide-button {
-		background-color: #279fca;
-		
-		-webkit-transform: skew(20deg) translateX(10px);
-		-moz-transform: skew(20deg) translateX(10px);
-		-ms-transform: skew(20deg) translateX(10px);
-		-o-transform: skew(20deg) translateX(10px);
-		transform: skew(20deg);
-	}
-
-	.android.toggle .slide-button {
-		border-radius: 2px;
-		
-		background-color: #848484;
-	}
-
-	/* Selected ON toggle */
-	.android.toggle input:first-of-type:checked ~ .slide-button {
-		background-color: #279fca;
-	}
-
-	.android.switch input:first-of-type:checked ~ .slide-button {
-		-webkit-transform: skew(20deg) translateX(-10px);
-		-moz-transform: skew(20deg) translateX(-10px);
-		-ms-transform: skew(20deg) translateX(-10px);
-		-o-transform: skew(20deg) translateX(-10px);
-		transform: skew(20deg) translateX(-10px);
-	}
-
-	.android p {
-		color: #333;
-	}
-
-	.android span {
-		color: #fff;
-	}
-
-	.android.switch,
-	.android span {
-		text-transform: uppercase;
-	}
-
-	/* iOS Theme
-	 * Similar to iOS but more accessible
-	 */ 
-
-	.ios {
-		background: -webkit-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
-		background: -moz-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
-		background: -o-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
-		background: -ms-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
-		background: linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
-		
-		-webkit-box-shadow: inset 0 2px 2px #b6b6b6, inset 3px 0 3px #b6b6b6;
-		box-shadow: inset 0 2px 2px #b6b6b6, inset 3px 0 3px #b6b6b6;
-
-		border: 1px solid #efefef;
-		border-radius: 3px;
-		
-		color: #7f7f7f;
-		font: bold 14px sans-serif; 
-		text-align: center;
-		text-shadow: none;
-	}
-
-	.ios.toggle .slide-button {
-		border: 1px solid #919191;
-		background: -webkit-linear-gradient(top, #cdcdcd, #fbfbfb);
-		background: -moz-linear-gradient(top, #cdcdcd, #fbfbfb);
-		background: -o-linear-gradient(top, #cdcdcd, #fbfbfb);
-		background: -ms-linear-gradient(top, #cdcdcd, #fbfbfb);
-		background: linear-gradient(top, #cdcdcd, #fbfbfb);
-		
-		border-radius: 3px;
-		
-		-webkit-box-shadow: inset 0 1px 0 #f0f0f0;
-		box-shadow: inset 0 1px 0 #f0f0f0;
-	}
-
-	/* Selected ON toggle */
-	.ios.toggle input:first-of-type:checked ~ p span:first-child,
-	.ios.switch input:checked + label {
-		color: #fff;
-		text-shadow: 0 -1px 0 #1b3b6f;
-	}
-
-	.ios.toggle input:first-of-type:checked ~ .slide-button,
-	.ios.switch .slide-button {
-		background: -webkit-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
-		background: -moz-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
-		background: -o-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
-		background: -ms-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
-		background: linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
-		
-		border-radius: 3px;
-		border: 1px solid #1654b5;
-		
-		text-align: center;
-		color: #fff;
-		
-		font: bold 14px sans-serif; 
-		text-shadow: 0 -1px 0 #1b3b6f;
-	}
-	
-	.ios.toggle p span {
-		color: #7f7f7f;
-	}
-	
 }
diff --git a/UI/Index.html b/UI/Index.html
index f9bd36199..803d046d6 100644
--- a/UI/Index.html
+++ b/UI/Index.html
@@ -11,7 +11,6 @@
     <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>
     <link href="/content/bootstrap.css" rel='stylesheet' type='text/css'/>
     <link href="/content/bootstrap.slider.css" rel='stylesheet' type='text/css'/>
-    <link href="/content/bootstrapSwitch.css" rel='stylesheet' type='text/css'/>
     <link href="/Content/Messenger/messenger.css" rel='stylesheet' type='text/css'/>
     <link href="/Content/Messenger/messenger.future.css" rel='stylesheet' type='text/css'/>
     <link href="/content/theme.css" rel='stylesheet' type='text/css'>
@@ -19,11 +18,13 @@
     <link href="/content/fullcalendar.css" rel='stylesheet' type='text/css'>
     <link href="/content/tablesorter.bootstrap.css" rel='stylesheet' type='text/css'/>
     <link href="/content/tablesorter.pager.css" rel='stylesheet' type='text/css'/>
+    <link href="/content/toggle-switch.css" rel='stylesheet' type='text/css'/>
     <link href="/AddSeries/addseries.css" rel='stylesheet' type='text/css'/>
     <link href="/content/menu.css" rel='stylesheet' type='text/css'/>
     <link href="/content/form.css" rel='stylesheet' type='text/css'/>
     <link href="/content/settings.quality.css" rel='stylesheet' type='text/css'/>
     <link href="/series/series.css" rel='stylesheet' type='text/css'/>
+
     <link href="/content/base.css" rel='stylesheet' type='text/css'/>
 </head>
 <body>
@@ -91,7 +92,6 @@
 <script src="/JsLibraries/jquery.js"></script>
 <script src="/JsLibraries/bootstrap.js"></script>
 <script src="/JsLibraries/bootstrap.slider.js"></script>
-<script src="/JsLibraries/bootstrap.switch.js"></script>
 <script src="/JsLibraries/underscore.js"></script>
 <script src="/JsLibraries/handlebars.runtime.js"></script>
 <script src="/JsLibraries/backbone.js"></script>
diff --git a/UI/JsLibraries/bootstrap.switch.js b/UI/JsLibraries/bootstrap.switch.js
deleted file mode 100644
index 46b9216cc..000000000
--- a/UI/JsLibraries/bootstrap.switch.js
+++ /dev/null
@@ -1,251 +0,0 @@
-/* ============================================================
- * bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru
- * http://www.larentis.eu/switch/
- * ============================================================
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- * ============================================================ */
-
-!function ($) {
-  "use strict";
-
-  $.fn['bootstrapSwitch'] = function (method) {
-    var methods = {
-      init: function () {
-        return this.each(function () {
-            var $element = $(this)
-              , $div
-              , $switchLeft
-              , $switchRight
-              , $label
-              , myClasses = ""
-              , classes = $element.attr('class')
-              , color
-              , moving
-              , onLabel = "ON"
-              , offLabel = "OFF"
-              , icon = false;
-
-            $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
-              if (classes.indexOf(el) >= 0)
-                myClasses = el;
-            });
-
-            $element.addClass('has-switch');
-
-            if ($element.data('on') !== undefined)
-              color = "switch-" + $element.data('on');
-
-            if ($element.data('on-label') !== undefined)
-              onLabel = $element.data('on-label');
-
-            if ($element.data('off-label') !== undefined)
-              offLabel = $element.data('off-label');
-
-            if ($element.data('icon') !== undefined)
-              icon = $element.data('icon');
-
-            $switchLeft = $('<span>')
-              .addClass("switch-left")
-              .addClass(myClasses)
-              .addClass(color)
-              .html(onLabel);
-
-            color = '';
-            if ($element.data('off') !== undefined)
-              color = "switch-" + $element.data('off');
-
-            $switchRight = $('<span>')
-              .addClass("switch-right")
-              .addClass(myClasses)
-              .addClass(color)
-              .html(offLabel);
-
-            $label = $('<label>')
-              .html("&nbsp;")
-              .addClass(myClasses)
-              .attr('for', $element.find('input').attr('id'));
-
-            if (icon) {
-              $label.html('<i class="icon icon-' + icon + '"></i>');
-            }
-
-            $div = $element.find(':checkbox').wrap($('<div>')).parent().data('animated', false);
-
-            if ($element.data('animated') !== false)
-              $div.addClass('switch-animate').data('animated', true);
-
-            $div
-              .append($switchLeft)
-              .append($label)
-              .append($switchRight);
-
-            $element.find('>div').addClass(
-              $element.find('input').is(':checked') ? 'switch-on' : 'switch-off'
-            );
-
-            if ($element.find('input').is(':disabled'))
-              $(this).addClass('deactivate');
-
-            var changeStatus = function ($this) {
-              $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
-            };
-
-            $element.on('keydown', function (e) {
-              if (e.keyCode === 32) {
-                e.stopImmediatePropagation();
-                e.preventDefault();
-                changeStatus($(e.target).find('span:first'));
-              }
-            });
-
-            $switchLeft.on('click', function (e) {
-              changeStatus($(this));
-            });
-
-            $switchRight.on('click', function (e) {
-              changeStatus($(this));
-            });
-
-            $element.find('input').on('change', function (e) {
-              var $this = $(this)
-                , $element = $this.parent()
-                , thisState = $this.is(':checked')
-                , state = $element.is('.switch-off');
-
-              e.preventDefault();
-
-              $element.css('left', '');
-
-              if (state === thisState) {
-
-                if (thisState)
-                  $element.removeClass('switch-off').addClass('switch-on');
-                else $element.removeClass('switch-on').addClass('switch-off');
-
-                if ($element.data('animated') !== false)
-                  $element.addClass("switch-animate");
-
-                $element.parent().trigger('switch-change', {'el': $this, 'value': thisState})
-              }
-            });
-
-            $element.find('label').on('mousedown touchstart', function (e) {
-              var $this = $(this);
-              moving = false;
-
-              e.preventDefault();
-              e.stopImmediatePropagation();
-
-              $this.closest('div').removeClass('switch-animate');
-
-              if ($this.closest('.switch').is('.deactivate'))
-                $this.unbind('click');
-              else {
-                $this.on('mousemove touchmove', function (e) {
-                  var $element = $(this).closest('.switch')
-                    , relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $element.offset().left
-                    , percent = (relativeX / $element.width()) * 100
-                    , left = 25
-                    , right = 75;
-
-                  moving = true;
-
-                  if (percent < left)
-                    percent = left;
-                  else if (percent > right)
-                    percent = right;
-
-                  $element.find('>div').css('left', (percent - right) + "%")
-                });
-
-                $this.on('click touchend', function (e) {
-                  var $this = $(this)
-                    , $target = $(e.target)
-                    , $myCheckBox = $target.siblings('input');
-
-                  e.stopImmediatePropagation();
-                  e.preventDefault();
-
-                  $this.unbind('mouseleave');
-
-                  if (moving)
-                    $myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25));
-                  else $myCheckBox.prop("checked", !$myCheckBox.is(":checked"));
-
-                  moving = false;
-                  $myCheckBox.trigger('change');
-                });
-
-                $this.on('mouseleave', function (e) {
-                  var $this = $(this)
-                    , $myCheckBox = $this.siblings('input');
-
-                  e.preventDefault();
-                  e.stopImmediatePropagation();
-
-                  $this.unbind('mouseleave');
-                  $this.trigger('mouseup');
-
-                  $myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change');
-                });
-
-                $this.on('mouseup', function (e) {
-                  e.stopImmediatePropagation();
-                  e.preventDefault();
-
-                  $(this).unbind('mousemove');
-                });
-              }
-            });
-          }
-        );
-      },
-      toggleActivation: function () {
-        $(this).toggleClass('deactivate');
-      },
-      isActive: function () {
-        return !$(this).hasClass('deactivate');
-      },
-      setActive: function (active) {
-        if (active)
-          $(this).removeClass('deactivate');
-        else $(this).addClass('deactivate');
-      },
-      toggleState: function (skipOnChange) {
-        var $input = $(this).find('input:checkbox');
-        $input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange);
-      },
-      setState: function (value, skipOnChange) {
-        $(this).find('input:checkbox').prop('checked', value).trigger('change', skipOnChange);
-      },
-      status: function () {
-        return $(this).find('input:checkbox').is(':checked');
-      },
-      destroy: function () {
-        var $div = $(this).find('div')
-          , $checkbox;
-
-        $div.find(':not(input:checkbox)').remove();
-
-        $checkbox = $div.children();
-        $checkbox.unwrap().unwrap();
-
-        $checkbox.unbind('change');
-
-        return $checkbox;
-      }
-    };
-
-    if (methods[method])
-      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-    else if (typeof method === 'object' || !method)
-      return methods.init.apply(this, arguments);
-    else
-      $.error('Method ' + method + ' does not exist!');
-  };
-}(jQuery);
-
-$(function () {
-  $('.switch')['bootstrapSwitch']();
-});
diff --git a/UI/Mixins/backbone.bootstrap.switch.mixin.js b/UI/Mixins/backbone.bootstrap.switch.mixin.js
deleted file mode 100644
index 4ebc2a9cb..000000000
--- a/UI/Mixins/backbone.bootstrap.switch.mixin.js
+++ /dev/null
@@ -1,59 +0,0 @@
-'use strict';
-
-var oldItemViewRender = Marionette.ItemView.prototype.render;
-var oldItemCollectionViewRender = Marionette.CollectionView.prototype.render;
-
-
-Marionette.View.prototype.viewName = function () {
-    if (this.template) {
-        var regex = new RegExp('\/', 'g');
-
-        return this.template
-            .toLocaleLowerCase()
-            .replace('template', '')
-            .replace(regex, '-');
-    }
-
-    return undefined;
-};
-
-Marionette.ItemView.prototype.self$ = function (selector) {
-    return  this.$(selector).not("[class*='iv-'] " + selector);
-};
-
-Marionette.ItemView.prototype.render = function () {
-
-    var result = oldItemViewRender.apply(this, arguments);
-
-
-    //check to see if el has bindings (name attribute)
-    // any element that has a name attribute and isn't child of another view.
-    if (this.self$('[name]').length > 0) {
-        if (!this.model) {
-            throw 'view ' + this.viewName() + ' has binding attributes but model is not defined';
-        }
-
-        if (!this._modelBinder) {
-            this._modelBinder = new Backbone.ModelBinder();
-        }
-
-        window.console.log('binding ' + this.viewName());
-
-        this._modelBinder.bind(this.model, this.el);
-    }
-
-    this.self$('.switch').bootstrapSwitch();
-    this.$el.addClass('iv-' + this.viewName());
-
-
-    return result;
-};
-
-Marionette.CollectionView.prototype.render = function () {
-
-    if (this.model) {
-        NzbDrone.ModelBinder.bind(this.model, this.el);
-    }
-
-    return oldItemCollectionViewRender.apply(this, arguments);
-};
\ No newline at end of file
diff --git a/UI/Mixins/backbone.modelbinder.mixin.js b/UI/Mixins/backbone.modelbinder.mixin.js
index 4ebc2a9cb..c25bcd509 100644
--- a/UI/Mixins/backbone.modelbinder.mixin.js
+++ b/UI/Mixins/backbone.modelbinder.mixin.js
@@ -42,7 +42,6 @@ Marionette.ItemView.prototype.render = function () {
         this._modelBinder.bind(this.model, this.el);
     }
 
-    this.self$('.switch').bootstrapSwitch();
     this.$el.addClass('iv-' + this.viewName());
 
 
diff --git a/UI/Settings/Naming/NamingTemplate.html b/UI/Settings/Naming/NamingTemplate.html
index efdfcf310..bb1b5b555 100644
--- a/UI/Settings/Naming/NamingTemplate.html
+++ b/UI/Settings/Naming/NamingTemplate.html
@@ -5,7 +5,16 @@
         <label class="control-label">Use Scene Name</label>
 
         <div class="controls">
-            <input type="checkbox" name="useSceneName"/>
+            <label class="checkbox toggle well">
+                <input type="checkbox" name="useSceneName"/>
+                <p>
+                    <span>On</span>
+                    <span>Off</span>
+                </p>
+
+                <div class="btn btn-primary slide-button"></div>
+            </label>
+
             <span class="help-inline-checkbox">
                 <i class="icon-question-sign" title="Use the scene name, ignoring all other naming settings"></i>
             </span>
@@ -16,7 +25,16 @@
         <label class="control-label">Include Series Title</label>
 
         <div class="controls">
-            <input type="checkbox" name="includeSeriesTitle"/>
+            <label class="checkbox toggle well">
+                <input type="checkbox" name="includeSeriesTitle"/>
+                <p>
+                    <span>On</span>
+                    <span>Off</span>
+                </p>
+
+                <div class="btn btn-primary slide-button"></div>
+            </label>
+
             <span class="help-inline-checkbox">
                 <i class="icon-question-sign" title="Should filenames contain the series name when renamed?"></i>
             </span>
@@ -27,7 +45,16 @@
         <label class="control-label">Include Episode Title</label>
 
         <div class="controls">
-            <input type="checkbox" name="includeEpisodeTitle"/>
+            <label class="checkbox toggle well">
+                <input type="checkbox" name="includeEpisodeTitle"/>
+                <p>
+                    <span>On</span>
+                    <span>Off</span>
+                </p>
+
+                <div class="btn btn-primary slide-button"></div>
+            </label>
+
             <span class="help-inline-checkbox">
                 <i class="icon-question-sign" title="Should filenames contain the episode name when renamed?"></i>
             </span>
@@ -38,9 +65,16 @@
         <label class="control-label">Replace Spaces</label>
 
         <div class="controls">
-            <div class="switch">
+            <label class="checkbox toggle well">
                 <input type="checkbox" name="replaceSpaces"/>
-            </div>
+                <p>
+                    <span>On</span>
+                    <span>Off</span>
+                </p>
+
+                <div class="btn btn-primary slide-button"></div>
+            </label>
+
             <span class="help-inline-checkbox">
                 <i class="icon-question-sign" title="Do you want to replace spaces in the filename with periods?"></i>
             </span>
@@ -51,13 +85,19 @@
         <label class="control-label">Include Quality</label>
 
         <div class="controls">
-            <div class="switch">
+            <label class="checkbox toggle well">
                 <input type="checkbox" name="includeQuality"/>
-            </div>
-        <span class="help-inline-checkbox">
+                <p>
+                    <span>On</span>
+                    <span>Off</span>
+                </p>
+
+                <div class="btn btn-primary slide-button"></div>
+            </label>
+
+            <span class="help-inline-checkbox">
                 <i class="icon-question-sign" title="Should filenames have the quality appended to the end?"></i>
             </span>
-
         </div>
     </div>