massive update and revision. added coffeescript source, updated README and documentation. removed input's surrounding div.

README.md

@@ -5,11 +5,10 @@ Turn radio and checkbox form input in switches.
 
 **Bootstrap 3 ready** thanks to [nabil1337](https://github.com/nabil1337)
 
-Demo
-----
+Demo and Documentation
+----------------------
 http://www.bootstrap-switch.org
 
-
 Usage
 -----
 Just include jQuery, Bootstrap and Bootstrap Switch CSS + Javascript
@@ -40,194 +39,6 @@ Supported browsers
 ------------------
 IE8+ and all the other modern browsers.
 
-Basic Example
--------------
-checkboxes:
-
-``` html
-<div class="make-switch">
-    <input type="checkbox">
-</div>
-```
-
-radioboxes:
-
-``` html
-<div class="make-switch">
-    <input type="radio">
-</div>
-```
-
-
-Large, small or mini
---------------------
-checkboxes:
-
-``` html
-<div class="make-switch switch-large">  <!-- switch-large, switch-small or switch-mini -->
-    <input type="checkbox">
-</div>
-```
-
-radioboxes:
-
-``` html
-<div class="make-switch switch-large">  <!-- switch-large, switch-small or switch-mini -->
-    <input type="radio">
-</div>
-```
-
-
-Colors
-------
-checkboxes:
-
-``` html
-<div class="make-switch" data-on="danger" data-off="warning">  <!-- primary, info, success, warning, danger and default -->
-    <input type="checkbox">
-</div>
-```
-
-radioboxes:
-
-``` html
-<div class="make-switch" data-on="danger" data-off="warning">  <!-- primary, info, success, warning, danger and default -->
-    <input type="radio">
-</div>
-```
-
-
-Animation
----------
-checkboxes:
-
-``` html
-<div class="make-switch" data-animated="false">
-    <input type="checkbox">
-</div>
-```
-
-radioboxes:
-
-``` html
-<div class="make-switch" data-animated="false">
-    <input type="radio">
-</div>
-```
-
-
-Text
------
-checkboxes:
-
-``` html
-<div class="make-switch" data-on-label="SI" data-off-label="NO">
-    <input type="checkbox">
-</div>
-```
-
-radioboxes:
-
-``` html
-<div class="make-switch" data-on-label="SI" data-off-label="NO">
-    <input type="radio">
-</div>
-```
-
-
-Text Label
-----------
-checkboxes:
-
-``` html
-<div class="make-switch" data-text-label="My Slider Text">
-    <input type="checkbox">
-</div>
-```
-
-radioboxes:
-
-``` html
-<div class="make-switch" data-text-label="My Slider Text">
-    <input type="radio">
-</div>
-```
-
-
-HTML Text
-----------
-checkboxes:
-
-``` html
-<div class="make-switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
-    <input type="checkbox">
-</div>
-```
-
-radioboxes:
-
-``` html
-<div class="make-switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
-    <input type="radio">
-</div>
-```
-
-
-Initial values
---------------
-checkboxes:
-
-``` html
-<div class="make-switch">
-    <input type="checkbox" checked="checked" disabled="disabled">
-</div>
-```
-radioboxes:
-
-
-``` html
-<div class="make-switch">
-    <input type="radio" checked="checked" disabled="disabled">
-</div>
-```
-
-
-Event handler
--------------
-``` javascript
-$('#mySwitch').on('switch-change', function (e, data) {
-    var $el = $(data.el)
-      , value = data.value;
-    console.log(e, $el, value);
-});
-```
-
-Methods
--------
-``` javascript
-$('#mySwitch').bootstrapSwitch('toggleActivation');
-$('#mySwitch').bootstrapSwitch('isActive');
-$('#mySwitch').bootstrapSwitch('setActive', false);
-$('#mySwitch').bootstrapSwitch('setActive', true);
-$('#mySwitch').bootstrapSwitch('toggleState');
-$('.mySwitch').bootstrapSwitch('toggleRadioState'); // the radiobuttons need a class not a ID, don't allow uncheck radio switch
-$('.mySwitch').bootstrapSwitch('toggleRadioStateAllowUncheck'); // don't allow uncheck radio switch
-$('.mySwitch').bootstrapSwitch('toggleRadioStateAllowUncheck', false); // don't allow uncheck radio switch
-$('.mySwitch').bootstrapSwitch('toggleRadioStateAllowUncheck', true); // allow uncheck radio switch
-$('#mySwitch').bootstrapSwitch('setState', true);
-$('#mySwitch').bootstrapSwitch('setState', true || false, true); // sets the state without getting the switch-change event
-$('#mySwitch').bootstrapSwitch('setOnLabel', onValue); // sets the text of the "on" label
-$('#mySwitch').bootstrapSwitch('setOffLabel', offValue); // sets the text of the "off" label
-$('#mySwitch').bootstrapSwitch('setTextLabel', labelValue); // sets the text of the middle label
-$('#mySwitch').bootstrapSwitch('setIconLabel', iconValue); // sets the icon of the middle label
-$('#mySwitch').bootstrapSwitch('setOnClass', onClass); // sets the left color class
-$('#mySwitch').bootstrapSwitch('setOffClass', offClass); // sets the right color class
-$('#mySwitch').bootstrapSwitch('setAnimated', animated); // sets true or false for animation
-$('#mySwitch').bootstrapSwitch('setSizeClass', size); // sets 'switch-mini', 'switch-small' or 'switch-large'
-$('#mySwitch').bootstrapSwitch('status');  // returns true or false
-$('#mySwitch').bootstrapSwitch('destroy');
-```
-
 License
 -------
 Licensed under the Apache License, Version 2.0

bower.json

@@ -1,13 +1,13 @@
 {
   "name": "bootstrap-switch",
-  "description" : "Unofficial bootstrap switch",
+  "description": "Unofficial bootstrap switch",
   "version": "1.9.0",
   "main": [
     "build/js/bootstrap-switch.js",
     "build/css/bootstrap3/bootstrap-switch.css"
   ],
   "ignore": [
-    "examples"
+    "docs"
   ],
   "dependencies": {
     "jquery": ">=1.9.0"

component.json

@@ -1,15 +0,0 @@
-{
-  "name"        : "bootstrap-switch",
-  "description" : "Unofficial bootstrap switch",
-  "version"     : "1.8.1",
-  "main"        : "static/js/bootstrap-switch.js",
-  "ignore": [ 
-    "examples"
-  ],
-  "dependencies": {
-    "jquery": "~1.9.0"
-  },
-  "scripts": [
-    "static/js/bootstrap-switch.js"
-  ]
-}

composer.json

@@ -15,15 +15,13 @@
       "homepage": "http://www.bootstrap-switch.org"
     }
   ],
-  "require": {
-  },
   "ignore": [
-    "examples"
+    "docs"
   ],
   "extra": {
     "component": {
       "scripts": [
-        "src/js/bootstrap-switch.js"
+        "build/js/bootstrap-switch.js"
       ],
       "shim": {
         "exports": "BootstrapSwitch"

docs/index.css

@@ -23,4 +23,21 @@ h1 {
 
 h3 {
   margin-top: 20px;
+}
+
+#github {
+  display: block;
+  position: fixed;
+  width: 150px;
+  height: 150px;
+  top: 0;
+  right: 0;
+  z-index: 150;
+}
+
+.footer {
+  border-top: 1px solid #eee;
+  margin-top: 80px;
+  padding-top: 40px;
+  padding-bottom: 40px;
 }

docs/index.html

@@ -8,10 +8,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
     <link rel="stylesheet" href="../build/css/bootstrap3/bootstrap-switch.css" />
-    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" />
-    <!-- <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/docs.css" /> -->
     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
     <link rel="stylesheet" href="http://bdmdesign.github.io/bootstrap-switch/static/stylesheets/flat-ui-fonts.css">
+    <link rel="stylesheet" href="vendor/prism.css">
     <link rel="stylesheet" href="index.css">
     <script>
     var _gaq = _gaq || [];
@@ -28,67 +27,44 @@
     </script>
   </head>
   <body>
-  <a href="https://github.com/nostalgiaz/bootstrap-switch">
-      <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
-  </a>
-  <div class="container">
-    <header class="jumbotron">
-      <h1>Bootstrap switch</h1>
-      <h4>by <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> (<a href="https://twitter.com/spiritualguru">@SpiritualGuru</a>) and <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a></h4>
-      <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
-      <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
-      <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;type=follow&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
-      <iframe src="http://ghbtns.com/github-btn.html?user=BdMdesigN&amp;type=follow&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
-    </header>
-    <h2><a name="size" class="anchor" href="#size">Size</a></h2>
-    <div class="bs-docs-example">
-      <div class="make-switch switch-large">
-          <input type="checkbox" checked>
-      </div>
-      <div class="make-switch">
-          <input type="checkbox" checked>
-      </div>
-      <div class="make-switch switch-small">
-          <input type="checkbox" checked>
-      </div>
-      <div class="make-switch switch-mini">
+    <a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub">
+    </a>
+    <div class="container">
+    <div class="row">
+      <div class="col-sm-10 col-sm-offset-1">
+        <header class="jumbotron">
+          <h1>Bootstrap switch</h1>
+          <h4>by <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> (<a href="https://twitter.com/spiritualguru">@SpiritualGuru</a>), <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a> and <a href="http://www.lostcrew.it" target="_blank">Emanuele Marchi</a></h4>
+          <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
+          <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
+          <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;type=follow&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
+          <iframe src="http://ghbtns.com/github-btn.html?user=BdMdesigN&amp;type=follow&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
+        </header>
+        <h2><a name="size" class="anchor" href="#size">Size</a></h2>
+        <div class="bs-docs-example">
+          <input type="checkbox" checked class="switch-large">
           <input type="checkbox" checked>
-      </div>
-      <br>
-      <br>
-      <span>Dimensions can be changed too:</span>
-      <div id="dimension-switch" class="make-switch">
-        <input type="checkbox" checked>
-      </div>
-      <br>
-      <br>
-      <button id="btn-size-large-switch" class="btn btn-default">Large</button>
-      <button id="btn-size-regular-switch" class="btn btn-default">Regular</button>
-      <button id="btn-size-small-switch" class="btn btn-default">Small</button>
-      <button id="btn-size-mini-switch" class="btn btn-default">Mini</button>
-      <br>
-    </div>
-    <pre class="prettyprint lang-html linenums">
-&lt;div class="make-switch switch-large">
-&lt;input type="checkbox" checked>
-&lt;/div>
-
-&lt;div class="make-switch">
-&lt;input type="checkbox" checked>
-&lt;/div>
-
-&lt;div class="make-switch switch-small">
-&lt;input type="checkbox" checked>
-&lt;/div>
-
-&lt;div class="make-switch switch-mini">
-&lt;input type="checkbox" checked>
-&lt;/div>
-
-&lt;div id="dimension-switch" class="make-switch">
+          <input type="checkbox" checked class="switch-small">
+          <input type="checkbox" checked class="switch-mini">
+          <br>
+          <br>
+          <span>Dimensions can be changed too:</span>
+          <input type="checkbox" id="dimension-switch" checked>
+          <br>
+          <br>
+          <button id="btn-size-large-switch" class="btn btn-default">Large</button>
+          <button id="btn-size-regular-switch" class="btn btn-default">Regular</button>
+          <button id="btn-size-small-switch" class="btn btn-default">Small</button>
+          <button id="btn-size-mini-switch" class="btn btn-default">Mini</button>
+          <br>
+        </div>
+        <pre class="language-markup">
+&lt;input type="checkbox" checked class="switch-large">
 &lt;input type="checkbox" checked>
-&lt;/div></pre>
-    <pre class="prettyprint lang-javascript linenums">
+&lt;input type="checkbox" checked class="switch-small">
+&lt;input type="checkbox" checked class="switch-mini">
+&lt;input type="checkbox" checked></pre>
+        <pre class="language-javascript">
 // Resets to the regular style
 $('#dimension-switch').bootstrapSwitch('setSizeClass', '');
 
@@ -100,462 +76,307 @@ $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
 
 // Sets a large switch
 $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');</pre>
-    <h2><a name="colors" class="anchor" href="#colors">Colors</a></h2>
-    <div class="bs-docs-example">
-      <div class="make-switch" data-on="primary" data-off="info">
-          <input type="checkbox" checked>
-      </div>
-      <div class="make-switch" data-on="info" data-off="success">
-          <input type="checkbox" checked>
-      </div>
-      <div class="make-switch" data-on="success" data-off="warning">
-          <input type="checkbox" checked>
-      </div>
-      <div class="make-switch" data-on="warning" data-off="danger">
-          <input type="checkbox" checked>
-      </div>
-      <div class="make-switch" data-on="danger" data-off="default">
-          <input type="checkbox" checked>
-      </div>
-      <div class="make-switch" data-on="default" data-off="primary">
-          <input type="checkbox" checked>
-      </div>
-      <br>
-      <br>
-      <span>Colors can be changed too:</span>
-      <div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
-          <input type="checkbox" checked>
-      </div>
-      <br>
-      <br>
-      <button id="btn-color-on-switch" class="btn btn-success">Change ON color</button>
-      <button id="btn-color-off-switch" class="btn btn-danger">Change OFF color</button>
-    </div>
-    <pre class="prettyprint lang-html linenums">
-  &lt;div class="make-switch" data-on="primary" data-off="info">
-  &lt;input type="checkbox" checked>
-  &lt;/div>
-
-  &lt;div class="make-switch" data-on="info" data-off="success">
-  &lt;input type="checkbox" checked>
-  &lt;/div>
-
-  &lt;div class="make-switch" data-on="success" data-off="warning">
-  &lt;input type="checkbox" checked>
-  &lt;/div>
-
-  &lt;div class="make-switch" data-on="warning" data-off="danger">
-  &lt;input type="checkbox" checked>
-  &lt;/div>
-
-  &lt;div class="make-switch" data-on="danger" data-off="default">
-  &lt;input type="checkbox" checked>
-  &lt;/div>
-
-  &lt;div class="make-switch" data-on="default" data-off="primary">
-  &lt;input type="checkbox" checked>
-  &lt;/div>
-
-  &lt;div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
-  &lt;input type="checkbox" checked>
-  &lt;/div></pre>
-      <pre class="prettyprint lang-javascript linenums">
-    $('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
-    $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');</pre>
-      <h2><a name="animation" class="anchor" href="#animation">Animation <small>javascript</small></a></h2>
-      <div class="bs-docs-example">
-        <div id="animated-switch" class="make-switch" data-animated="false">
-          <input type="checkbox" checked>
-        </div>
-        <br>
-        <br>
-        <button id="btn-animate-switch" class="btn btn-default">Animate</button>
-        <button id="btn-dont-animate-switch" class="btn btn-default">Don't animate</button>
-      </div>
-      <pre class="prettyprint lang-html linenums">
-  &lt;div id="animated-switch" class="make-switch" data-animated="false">
-  &lt;input type="checkbox" checked>
-  &lt;/div></pre>
-      <pre class="prettyprint lang-javascript linenums">
-  // Enables animation for the selected item
-  $('#animated-switch').bootstrapSwitch('setAnimated', true);
-
-  // Disables animation for the selected item
-  $('#animated-switch').bootstrapSwitch('setAnimated', false);</pre>
-      <h2><a name="disabled" class="anchor" href="#disabled">Disabled</a></h2>
-      <div class="bs-docs-example">
-        <div class="make-switch">
-          <input type="checkbox" checked disabled>
-        </div>
-      </div>
-      <pre class="prettyprint lang-html linenums">
-  &lt;div class="make-switch">
-  &lt;input type="checkbox" checked disabled>
-  &lt;/div></pre>
-      <h2><a name="text" class="anchor" href="#text">Text</a></h2>
-      <div class="bs-docs-example">
-        <div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
-          <input type="checkbox" checked>
-        </div>
-        <br>
-        <br>
-        <button id="btn-label-on-switch" class="btn btn-default">Change "On" label</button>
-        <button id="btn-label-off-switch" class="btn btn-default">Change "Off" label</button>
-      </div>
-      <pre class="prettyprint lang-html linenums">
-  &lt;div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
-  &lt;input type="checkbox" checked>
-  &lt;/div></pre>
-      <pre class="prettyprint lang-javascript linenums">
-  $('#label-switch').bootstrapSwitch('setOnLabel', 'I');
-  $('#label-switch').bootstrapSwitch('setOffLabel', 'O');</pre>
-      <h2><a name="label-text" class="anchor" href="#label-text">Label Text</a></h2>
-      <div class="bs-docs-example">
-      <div class="make-switch" data-text-label="TV">
-        <input type="checkbox" checked>
-      </div>
-      </div>
-      <pre class="prettyprint lang-html linenums">
-  &lt;div class="make-switch" data-text-label="TV">
-  &lt;input type="checkbox" checked>
-  &lt;/div></pre>
-      <h2><a name="html-text" class="anchor" href="#html-text">HTML text</a></h2>
-      <div class="bs-docs-example">
-        <div class="make-switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
-          <input type="checkbox" checked>
-        </div>
-      </div>
-      <pre class="prettyprint lang-html linenums">
-  &lt;div class="make-switch" data-on-label="&lt;i class='icon-ok icon-white'>&lt;/i>" data-off-label="&lt;i class='icon-remove'>&lt;/i>">
-  &lt;input type="checkbox" checked />
-  &lt;/div></pre>
-      <h2><a name="html-text-label-icon" class="anchor" href="#html-text-label-icon">HTML text Label Icon</a></h2>
-      <div class="bs-docs-example">
-        <h5>Standard</h5>
-        <div class="make-switch switch-large" data-label-icon="icon-fullscreen" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
-            <input type="checkbox" checked>
-        </div>
-        <h5>Font Awesome</h5>
-        <div class="make-switch switch-large" data-label-icon="icon-youtube icon-large" data-on-label="<i class='icon-thumbs-up icon-white'></i>" data-off-label="<i class='icon-thumbs-down'></i>">
-            <input type="checkbox" checked>
-        </div>
-        <h5>Flat UI</h5>
-        <div class="make-switch switch-large" data-label-icon="fui-video" data-on-label="<i class='fui-check icon-white'></i>" data-off-label="<i class='fui-cross'></i>">
-            <input type="checkbox" checked>
+        <h2><a name="colors" class="anchor" href="#colors">Colors</a></h2>
+        <div class="bs-docs-example">
+          <input type="checkbox" checked data-on="primary" data-off="info">
+          <input type="checkbox" checked data-on="info" data-off="success">
+          <input type="checkbox" checked data-on="success" data-off="warning">
+          <input type="checkbox" checked data-on="warning" data-off="danger">
+          <input type="checkbox" checked data-on="danger" data-off="default">
+          <input type="checkbox" checked data-on="default" data-off="primary">
+          <br>
+          <br>
+          <span>Colors can be changed too:</span>
+          <input type="checkbox" id="change-color-switch" checked data-on="default" data-off="primary">
+          <br>
+          <br>
+          <button id="btn-color-on-switch" class="btn btn-success">Change ON color</button>
+          <button id="btn-color-off-switch" class="btn btn-danger">Change OFF color</button>
         </div>
-      </div>
-      <pre class="prettyprint lang-html linenums">
-  &lt;div class="make-switch switch-large" data-label-icon="icon-fullscreen" data-on-label="&lt;i class='icon-ok icon-white'>&lt;/i>" data-off-label="&lt;i class='icon-remove'>&lt;/i>">
-  &lt;input type="checkbox" checked>
-  &lt;/div>
-
-  &lt;div class="make-switch switch-large" data-label-icon="icon-youtube icon-large" data-on-label="&lt;i class='icon-thumbs-up icon-white'>&lt;/i>" data-off-label="&lt;i class='icon-thumbs-down'>&lt;/i>">
-  &lt;input type="checkbox" checked>
-  &lt;/div>
-
-  &lt;div class="make-switch" data-label-icon="fui-video" data-on-label="&lt;i class='fui-check icon-white'>&lt;/i>" data-off-label="&lt;i class='fui-cross'>&lt;/i>">
-  &lt;input type="checkbox" checked>
-  &lt;/div></pre>
-      <h2><a name="event-handler-javascript" class="anchor" href="#event-handler-javascript">Event handler <small>jav</small></a></h2>
-      <div class="bs-docs-example">
-        <div id="mySwitch" class="make-switch">
-          <input type="checkbox" checked>
-        </div>
-      </div>
-      <pre class="prettyprint lang-javascript linenums">
-  $('#mySwitch').on('switch-change', function (e, data) {
-  var $el = $(data.el)
-    , value = data.value;
-  console.log(e, $el, value);
-  });</pre>
-      <h2><a name="label-event-handler-javascript" class="anchor" href="#label-event-handler-javascript">Label Event h<small>javascript</small></a></h2>
-      <div class="bs-docs-example">
-        <h5>Label 1</h5>
-        <label id="label-toggle-switch">Click on this Text to change the switch state</label>
-        <div class="label-toggle-switch make-switch">
-          <input type="checkbox" checked>
-        </div>
-        <h5>Label 2</h5>
-        <div id="label2-toggle-switch">
-          <label class="label-change-switch">Click on this Text to change the switch state
-            <div class="label2-toggle-switch make-switch">
-              <input type="checkbox" checked>
-            </div>
-          </label>
-        </div>
-      </div>
-      <pre class="prettyprint lang-html linenums">
-  &lt;label id="label-toggle-switch">Click on this Text to change the switch state&lt;/label>
-  &lt;div class="label-toggle-switch make-switch">
-      &lt;input type="checkbox" checked />
-  &lt;/div>
-  &lt;script>
-  $('#label-toggle-switch').on('click', function(e, data) {
-      $('.label-toggle-switch').bootstrapSwitch('toggleState');
-  });
-  $('.label-toggle-switch').on('switch-change', function (e, data) {
-      alert(data.value);
-  });
-  &lt;/script>
+        <pre class="language-markup">&lt;input type="checkbox" checked data-on="primary" data-off="info">
+&lt;input type="checkbox" checked data-on="info" data-off="success">
+&lt;input type="checkbox" checked data-on="success" data-off="warning">
+&lt;input type="checkbox" checked data-on="warning" data-off="danger">
+&lt;input type="checkbox" checked data-on="danger" data-off="default">
+&lt;input type="checkbox" checked data-on="default" data-off="primary">
+&lt;input type="checkbox" id="change-color-switch" checked data-on="default" data-off="primary"></pre>
+        <pre class="language-javascript">
+$('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
+$('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');</pre>
+          <h2><a name="animation" class="anchor" href="#animation">Animation <small>javascript</small></a></h2>
+          <div class="bs-docs-example">
+            <input type="checkbox" id="animated-switch" checked data-animated="false">
+            <br>
+            <br>
+            <button id="btn-animate-switch" class="btn btn-default">Animate</button>
+            <button id="btn-dont-animate-switch" class="btn btn-default">Don't animate</button>
+          </div>
+          <pre class="language-markup">&lt;input type="checkbox" checked data-animated="false"></pre>
+          <pre class="language-javascript">
+// Enables animation for the selected item
+$('#animated-switch').bootstrapSwitch('setAnimated', true);
 
-  &lt;div id="label2-toggle-switch">
-  &lt;label class="label-change-switch">Click on this Text to change the switch state
-  &lt;div class="label2-toggle-switch make-switch">
-      &lt;input type="checkbox" checked />
-  &lt;/div>
-  &lt;/label>
-  &lt;/div>
-  &lt;script>
-  $('#label2-toggle-switch').on('switch-change', function(e, data) {
-      alert(data.value);
-  });
-  &lt;/script></pre>
-      <h2><a name="toggle-state" class="anchor" href="#toggle-state">Toggle State <small>javascript</small></a></h2>
-      <div class="bs-docs-example">
-        <div id="toggle-state-switch" class="make-switch">
-          <input type="checkbox" checked>
-        </div>
-        <br>
-        <br>
-        <div id="toggle-state-switch-button-status" class="btny">Status!</div>
-        <div id="toggle-state-switch-button-on" class="btn btn-default">ON!</div>
-        <div id="toggle-state-switch-button" class="btn btn-default">Toggle me!</div>
-        <div id="toggle-state-switch-button-off" class="btn btn-default">OFF!</div>
-      </div>
-      <pre class="prettyprint lang-javascript linenums">
-  $('#toggle-state-switch').bootstrapSwitch('status'); // true || false
-  $('#toggle-state-switch').bootstrapSwitch('toggleState');
-  $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false</pre>
-      <h2><a name="destroy" class="anchor" href="#destroy">Destroy <small>javascript</small></a></h2>
+// Disables animation for the selected item
+$('#animated-switch').bootstrapSwitch('setAnimated', false);</pre>
+          <h2><a name="disabled" class="anchor" href="#disabled">Disabled</a></h2>
           <div class="bs-docs-example">
-              <div id="destroy-switch" class="make-switch">
-                  <input type="checkbox" checked>
-              </div>
-              <br />
-              <br />
-              <button id="btn-destroy-switch" class="btn btn-default">Destroy me!</button>
+            <input type="checkbox" checked disabled>
           </div>
-          <pre class="prettyprint lang-javascript linenums">
-  $('#destroy-switch').bootstrapSwitch('destroy');</pre>
-      <h2><a name="create" class="anchor" href="#create">Create <small>javascript</small></a></h2>
+          <pre class="language-markup">
+&lt;input type="checkbox" checked disabled></pre>
+          <h2><a name="text" class="anchor" href="#text">Text</a></h2>
           <div class="bs-docs-example">
-              <input id="create-switch" type="checkbox" checked>
-
-              <br />
-              <br />
-
-              <div id="btn-create" class="btn btn-default">Create</div>
+            <input type="checkbox" id="label-switch" checked data-on-label="SI" data-off-label="NO">
+            <br>
+            <button id="btn-label-on-switch" class="btn btn-default">Change "On" label</button>
+            <button id="btn-label-off-switch" class="btn btn-default">Change "Off" label</button>
           </div>
-          <pre class="prettyprint lang-javascript linenums">
-  $('#create-switch').wrap('&lt;div class="make-switch" />').parent().bootstrapSwitch();</pre>
-      <h2><a name="disabled-javascript" class="anchor" href="#disabled-javascript">Disabled <small>javascript</small></a></h2>
+          <pre class="language-markup">&lt;input type="checkbox" checked data-on-label="SI" data-off-label="NO"></pre>
+          <pre class="language-javascript">
+$('#label-switch').bootstrapSwitch('setOnLabel', 'I');
+$('#label-switch').bootstrapSwitch('setOffLabel', 'O');</pre>
+          <h2><a name="label-text" class="anchor" href="#label-text">Label Text</a></h2>
           <div class="bs-docs-example">
-              <label for="disable-switch-input">amazing label</label>
-              <div id="disable-switch" class="make-switch">
-                  <input id="disable-switch-input" type="checkbox" checked>
-              </div>
-              <br />
-              <br />
-              <button id="btn-is-active-switch" class="btn btn-default">Is active?</button>
-              <button id="btn-toggle-activation-switch" class="btn btn-default">Toggle activation!</button>
-              <button id="btn-disable-switch" class="btn btn-default">Disable!</button>
-              <button id="btn-activate-switch" class="btn btn-default">Activate!</button>
+            <input type="checkbox" checked data-text-label="TV">
           </div>
-          <pre class="prettyprint lang-javascript linenums">
-  $('#disable-switch').bootstrapSwitch('isActive');
-  $('#disable-switch').bootstrapSwitch('toggleActivation');
-  $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre>
-      <h2><a name="radio-javascript" class="anchor" href="#radio-javascript">Radio <small>javascript</small></a></h2>
+          <pre class="language-markup">&lt;input type="checkbox" checked data-text-label="TV"></pre>
+          <h2><a name="html-text" class="anchor" href="#html-text">HTML text</a></h2>
           <div class="bs-docs-example">
-              <div class="control-group">
-                   <div class="controls">
-                      <label for="option1">Option 1</label>
-                      <div class="make-switch radio1 radio-no-uncheck">
-                          <input id="option1" type="radio" name="radio1" value="option1">
-                      </div>
-                      <label for="option2">Option 2</label>
-                      <div class="make-switch radio1 radio-no-uncheck">
-                          <input id="option2" type="radio" name="radio1" value="option2">
-                      </div>
-                      <label for="option3">Option 3</label>
-                      <div class="make-switch radio1 radio-no-uncheck">
-                          <input id="option3" type="radio" name="radio1" value="option3">
-                      </div>
-                   </div>
-              </div>
+            <input type="checkbox" checked data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
           </div>
-          <pre class="prettyprint lang-html linenums">
-  &lt;div class="control-group">
-  &lt;div class="controls">
-      &lt;label for="option1">Option 1&lt;/label>
-      &lt;div class="make-switch radio1 radio-no-uncheck">
-          &lt;input id="option1" type="radio" name="radio1" value="option1">
-      &lt;/div>
-      &lt;label for="option2">Option 2&lt;/label>
-      &lt;div class="make-switch radio1 radio-no-uncheck">
-          &lt;input id="option2" type="radio" name="radio1" value="option2">
-      &lt;/div>
-      &lt;label for="option3">Option 3&lt;/label>
-      &lt;div class="make-switch radio1 radio-no-uncheck">
-          &lt;input id="option3" type="radio" name="radio1" value="option3">
-      &lt;/div>
-  &lt;/div>
-  &lt;/div>
-  &lt;script>
-  $('.radio1').on('switch-change', function () {
-      $('.radio1').bootstrapSwitch('toggleRadioState');
-  });
-  // or
-  $('.radio1').on('switch-change', function () {
-      $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck');
-  });
-  // or
-  $('.radio1').on('switch-change', function () {
-      $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
-  });
-  &lt;/script></pre>
-      <h2><a name="radio-javascript-allow-uncheck" class="anchor" href="#radio-javascript-allow-uncheck"><small>javascript (allow radios uncheck)</small></a>
-      </h2>
+          <pre class="language-markup">&lt;input type="checkbox" checked data-on-label="&lt;i class='icon-ok icon-white'>&lt;/i>" data-off-label="&lt;i class='icon-remove'>&lt;/i>"></pre>
+          <h2><a name="html-text-label-icon" class="anchor" href="#html-text-label-icon">HTML text Label Icon</a></h2>
           <div class="bs-docs-example">
-              <div class="control-group">
-                   <div class="controls">
-                      <label for="option11">Option 1</label>
-                      <div class="make-switch radio2">
-                          <input id="option11" type="radio" name="radio2" value="option11">
-                      </div>
-                      <label for="option12">Option 2</label>
-                      <div class="make-switch radio2">
-                          <input id="option12" type="radio" name="radio2" value="option12" checked="checked">
-                      </div>
-                      <label for="option13">Option 3</label>
-                      <div class="make-switch radio2">
-                          <input id="option13" type="radio" name="radio2" value="option13">
-                      </div>
-                   </div>
-              </div>
+            <h5>Standard</h5>
+            <input type="checkbox" checked class="switch-large" data-label-icon="icon-fullscreen" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
+            <h5>Font Awesome</h5>
+            <input type="checkbox" checked class="switch-large" data-label-icon="icon-youtube icon-large" data-on-label="<i class='icon-thumbs-up icon-white'></i>" data-off-label="<i class='icon-thumbs-down'></i>">
+            <h5>Flat UI</h5>
+            <input type="checkbox" class="switch-large" checked data-label-icon="fui-video" data-on-label="<i class='fui-check icon-white'></i>" data-off-label="<i class='fui-cross'></i>">
           </div>
-          <pre class="prettyprint lang-html linenums">
-  &lt;div class="control-group">
-  &lt;div class="controls">
-      &lt;label for="option11">Option 1&lt;/label>
-      &lt;div class="make-switch radio2">
-          &lt;input id="option11" type="radio" name="radio2" value="option1">
-      &lt;/div>
-      &lt;label for="option12">Option 2&lt;/label>
-      &lt;div class="make-switch radio2">
-          &lt;input id="option12" type="radio" name="radio2" value="option2" checked="checked">
-      &lt;/div>
-      &lt;label for="option13">Option 3&lt;/label>
-      &lt;div class="make-switch radio2">
-          &lt;input id="option13" type="radio" name="radio2" value="option3">
-      &lt;/div>
-  &lt;/div>
-  &lt;/div>
-  &lt;script>
-  $('.radio2').on('switch-change', function () {
-      $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
-  });
-  &lt;/script></pre>
-      <h2><a name="form" class="anchor" href="#form">Form <small>- try to use tab, space and reset button</small></a></h2>
+          <pre class="language-markup">&lt;input type="checkbox" checked class="switch-large" data-label-icon="icon-fullscreen" data-on-label="&lt;i class='icon-ok icon-white'>&lt;/i>" data-off-label="&lt;i class='icon-remove'>&lt;/i>">
+&lt;input type="checkbox" checked class="switch-large" data-label-icon="icon-youtube icon-large" data-on-label="&lt;i class='icon-thumbs-up icon-white'>&lt;/i>" data-off-label="&lt;i class='icon-thumbs-down'>&lt;/i>">
+&lt;input type="checkbox" class="switch-large" checked data-label-icon="fui-video" data-on-label="&lt;i class='fui-check icon-white'>&lt;/i>" data-off-label="&lt;i class='fui-cross'>&lt;/i>"></pre>
+          <h2><a name="event-handler-javascript" class="anchor" href="#event-handler-javascript">Event handler <small>JavaScript</small></a></h2>
           <div class="bs-docs-example">
-              <form class="form-horizontal span8 offset2">
-                  <div class="control-group">
-                      <label class="control-label" for="inputEmail">Email</label>
-                      <div class="controls">
-                          <input type="text" id="inputEmail" placeholder="Email">
-                      </div>
-                  </div>
+            <input type="checkbox" id="switch-change" checked>
+          </div>
+          <pre class="language-javascript">
+$('#switch-change').on('switch-change', function (e, data) {
+  var $element = $(data.el),
+      value = data.value;
 
-                  <div class="control-group">
-                      <label class="control-label" for="notification1">Notification 1</label>
+  console.log(e, $element, value);
+});</pre>
+          <h2><a name="label-event-handler-javascript" class="anchor" href="#label-event-handler-javascript">Label Event handler <small>JavaScript</small></a></h2>
+          <div class="bs-docs-example">
+            <h5>Label 1</h5>
+            <label id="label-toggle-switch">Click on this Text to change the switch state</label>
+            <input type="checkbox" checked class="label-toggle-switch">
+            <h5>Label 2</h5>
+            <div id="label2-toggle-switch">
+              <label class="label-change-switch">Click on this Text to change the switch state
+                <input type="checkbox" checked class="label2-toggle-switch">
+              </label>
+            </div>
+          </div>
+          <pre class="language-markup">
+&lt;label id="label-toggle-switch">Click on this Text to change the switch state&lt;/label>
+&lt;input type="checkbox" checked />
 
-                      <div class="controls">
-                          <div class="make-switch" tabindex="0">
-                              <input id="notification1" type="checkbox">
-                          </div>
-                      </div>
-                  </div>
-                  <div class="control-group">
-                      <label class="control-label" for="notification2">Notification 2</label>
+&lt;div id="label2-toggle-switch">
+&lt;label class="label-change-switch">Click on this Text to change the switch state
+  &lt;input type="checkbox" checked />
+&lt;/label>
+&lt;/div></pre>
+          <pre class="language-javascript">
+$('#label-toggle-switch').on('click', function(e, data) {
+    $('.label-toggle-switch').bootstrapSwitch('toggleState');
+});
+$('.label-toggle-switch').on('switch-change', function (e, data) {
+    alert(data.value);
+});
+$('#label2-toggle-switch').on('switch-change', function(e, data) {
+    alert(data.value);
+});</pre>
+          <h2><a name="toggle-state" class="anchor" href="#toggle-state">Toggle State <small>javascript</small></a></h2>
+          <div class="bs-docs-example">
+            <input type="checkbox" id="toggle-state-switch" checked>
+            <br>
+            <br>
+            <div id="toggle-state-switch-button-status" class="btny">Status!</div>
+            <div id="toggle-state-switch-button-on" class="btn btn-default">ON!</div>
+            <div id="toggle-state-switch-button" class="btn btn-default">Toggle me!</div>
+            <div id="toggle-state-switch-button-off" class="btn btn-default">OFF!</div>
+          </div>
+          <pre class="language-javascript">
+$('#toggle-state-switch').bootstrapSwitch('status'); // true || false
+$('#toggle-state-switch').bootstrapSwitch('toggleState');
+$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false</pre>
+          <h2><a name="destroy" class="anchor" href="#destroy">Destroy <small>javascript</small></a></h2>
+          <div class="bs-docs-example">
+            <input type="checkbox" id="destroy-switch" checked >
+            <br>
+            <br>
+            <button id="btn-destroy-switch" class="btn btn-default">Destroy me!</button>
+          </div>
+          <pre class="language-javascript">$('#destroy-switch').bootstrapSwitch('destroy');</pre>
+          <h2><a name="create" class="anchor" href="#create">Create <small>javascript</small></a></h2>
+          <div class="bs-docs-example">
+            <input id="create-switch" type="checkbox" checked>
+            <br>
+            <br>
+            <div id="btn-create" class="btn btn-default">Create</div>
+          </div>
+          <pre class="language-javascript">$('#create-switch').bootstrapSwitch();</pre>
+          <h2><a name="disabled-javascript" class="anchor" href="#disabled-javascript">Disabled <small>javascript</small></a></h2>
+          <div class="bs-docs-example">
+            <label for="disable-switch-input">amazing label</label>
+            <input type="checkbox" id="disable-switch" checked>
+            <br>
+            <br>
+            <button id="btn-is-active-switch" class="btn btn-default">Is active?</button>
+            <button id="btn-toggle-activation-switch" class="btn btn-default">Toggle activation!</button>
+            <button id="btn-disable-switch" class="btn btn-default">Disable!</button>
+            <button id="btn-activate-switch" class="btn btn-default">Activate!</button>
+          </div>
+          <pre class="language-javascript">
+$('#disable-switch').bootstrapSwitch('isActive');
+$('#disable-switch').bootstrapSwitch('toggleActivation');
+$('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre>
+          <h2><a name="radio-javascript" class="anchor" href="#radio-javascript">Radio <small>javascript</small></a></h2>
+          <div class="bs-docs-example">
+            <div class="form-group">
+              <label for="option1">Option 1</label>
+              <input id="option1" type="radio" name="radio1" value="option1" class="radio1 radio-no-uncheck">
+              <label for="option2">Option 2</label>
+              <input id="option2" type="radio" name="radio1" value="option2" class="radio1 radio-no-uncheck">
+              <label for="option3">Option 3</label>
+              <input id="option3" type="radio" name="radio1" value="option3" class="radio1 radio-no-uncheck">
+            </div>
+          </div>
+          <pre class="language-markup">
+&lt;div class="form-group">
+  &lt;label for="option1">Option 1&lt;/label>
+  &lt;input id="option1" type="radio" name="radio1" value="option1">
+  &lt;label for="option2">Option 2&lt;/label>
+  &lt;input id="option2" type="radio" name="radio1" value="option2">
+  &lt;label for="option3">Option 3&lt;/label>
+  &lt;input id="option3" type="radio" name="radio1" value="option3">
+&lt;/div></pre>
+          <pre class="language-javascript">
+$('.radio1').on('switch-change', function () {
+    $('.radio1').bootstrapSwitch('toggleRadioState');
+});
 
-                      <div class="controls">
-                          <div class="make-switch" tabindex="0">
-                              <input id="notification2" type="checkbox">
-                          </div>
-                      </div>
-                  </div>
+// or
+$('.radio1').on('switch-change', function () {
+    $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck');
+});
 
-                  <div class="form-actions">
-                      <button type="reset" class="btn btn-inverse">Reset</button>
-                  </div>
-              </form>
-              <div class="clearfix"></div>
+// or
+$('.radio1').on('switch-change', function () {
+    $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
+});</pre>
+          <h2><a name="radio-javascript-allow-uncheck" class="anchor" href="#radio-javascript-allow-uncheck"><small>javascript (allow radios uncheck)</small></a></h2>
+          <div class="bs-docs-example">
+            <div class="form-group">
+              <label for="option11">Option 1</label>
+              <input id="option11" type="radio" name="radio2" value="option11" class="radio2">
+              <label for="option12">Option 2</label>
+              <input id="option12" type="radio" name="radio2" value="option12" checked="checked" class="radio2">
+              <label for="option13">Option 3</label>
+              <input id="option13" type="radio" name="radio2" value="option13" class="radio2">
+            </div>
           </div>
-          <pre class="prettyprint lang-html linenums">
-  &lt;form class="form-horizontal">
-  &lt;div class="control-group">
-      &lt;label class="control-label" for="inputEmail">Email&lt;/label>
-      &lt;div class="controls">
-          &lt;input type="text" id="inputEmail" placeholder="Email">
-      &lt;/div>
+          <pre class="language-markup">
+&lt;div class="form-group">
+    &lt;label for="option11">Option 1&lt;/label>
+    &lt;input id="option11" type="radio" name="radio2" value="option1">
+    &lt;label for="option12">Option 2&lt;/label>
+    &lt;input id="option12" type="radio" name="radio2" value="option2" checked="checked">
+    &lt;label for="option13">Option 3&lt;/label>
+    &lt;input id="option13" type="radio" name="radio2" value="option3">
+&lt;/div></pre>
+          <pre class="language-javascript">
+$('.radio2').on('switch-change', function () {
+    $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
+});</pre>
+          <h2><a name="form" class="anchor" href="#form">Form <small>- try to use tab, space and reset button</small></a></h2>
+          <div class="bs-docs-example">
+            <form class="clearfix" role="form">
+              <div class="form-group">
+                <label class="control-label" for="inputEmail">Email</label>
+                <input type="text" id="inputEmail" placeholder="Email" class="form-control">
+              </div>
+              <div class="form-group">
+                <label class="control-label" for="notification1">Notification 1</label>
+                <input id="notification1" type="checkbox">
+              </div>
+              <div class="form-group">
+                <label class="control-label" for="notification2">Notification 2</label>
+                <input id="notification2" type="checkbox">
+              </div>
+              <div class="form-actions">
+                <button type="reset" class="btn btn-default btn-warning">Reset</button>
+              </div>
+            </form>
+            <div ></div>
+          </div>
+          <pre class="language-markup">
+&lt;form class="form-horizontal">
+  &lt;div class="form-group">
+    &lt;label class="control-label" for="inputEmail">Email&lt;/label>
+    &lt;input type="text" id="inputEmail" placeholder="Email">
   &lt;/div>
-  &lt;div class="control-group">
-      &lt;label class="control-label" for="notification1">Notification 1&lt;/label>
-      &lt;div class="controls">
-          &lt;div class="make-switch" tabindex="0">
-              &lt;input id="notification1" type="checkbox">
-          &lt;/div>
-      &lt;/div>
+  &lt;div class="form-group">
+    &lt;label class="control-label" for="notification1">Notification 1&lt;/label>
+    &lt;input id="notification1" type="checkbox">
   &lt;/div>
-  &lt;div class="control-group">
-      &lt;label class="control-label" for="notification2">Notification 2&lt;/label>
-      &lt;div class="controls">
-          &lt;div class="make-switch" tabindex="0">
-              &lt;input id="notification2" type="checkbox">
-          &lt;/div>
-      &lt;/div>
+  &lt;div class="form-group">
+    &lt;label class="control-label" for="notification2">Notification 2&lt;/label>
+    &lt;input id="notification2" type="checkbox">
   &lt;/div>
   &lt;div class="form-actions">
-      &lt;button type="reset" class="btn btn-inverse">Reset&lt;/button>
+    &lt;button type="reset" class="btn btn-inverse">Reset&lt;/button>
   &lt;/div>
-  &lt;/form></pre>
-    <h2><a name="modal" class="anchor" href="#modal">Modal</a></h2>
-    <div class="bs-docs-example">
-      <a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal</a>
-    </div>
-    <pre class="prettyprint lang-html linenums">
+&lt;/form></pre>
+        <h2><a name="modal" class="anchor" href="#modal">Modal</a></h2>
+        <div class="bs-docs-example">
+          <a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal</a>
+        </div>
+        <pre class="language-markup">
 &lt;a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal&lt;/a>
 
 &lt;div class="modal-body">
-    &lt;div class="make-switch">
-        &lt;input type="checkbox" checked>
-    &lt;/div>
+  &lt;input type="checkbox" checked>
 &lt;/div></pre>
-  </div>
-  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-header">
-      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-      <h3>Modal</h3>
-    </div>
-    <div class="modal-body">
-      <div class="make-switch">
-        <input type="checkbox" checked>
+        <footer class="footer">
+          <p>&copy; by <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> (<a href="https://twitter.com/SpiritualGuru">@SpiritualGuru</a>), <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a> and <a href="http://www.lostcrew.it/" target="_blank">Emanuele Marchi</a></p>
+        </footer>
       </div>
     </div>
-    <div class="modal-footer">
-      <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
-    </div>
   </div>
-  <footer>
-    <div class="container">
-      <p>&copy; by <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> (<a href="https://twitter.com/SpiritualGuru">@SpiritualGuru</a>) and <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a></p>
+  <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <h3>Modal</h3>
+        </div>
+        <div class="modal-body">
+          <input type="checkbox" checked>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
+        </div>
+      </div>
     </div>
-  </footer>
+  </div>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-  <script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
-  <script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
   <script src="../build/js/bootstrap-switch.js"></script>
+  <script src="vendor/prism.js"></script>
   <script src="index.js"></script>
   </body>
-</html>
+</html>

docs/index.js

@@ -1,12 +1,8 @@
 $(function() {
-  $('#mySwitch').on('switch-change', function (e, data) {
-    var $el = $(data.el),
-        value = data.value;
+  // initialize all the inputs
+  $('input[type="checkbox"],[type="radio"]').not('#create-switch').bootstrapSwitch();
 
-    console.log(e, $el, value);
-  });
-
-  // DIMENSION
+  // dimension
   $('#btn-size-regular-switch').on('click', function () {
     $('#dimension-switch').bootstrapSwitch('setSizeClass', '');
   });
@@ -20,7 +16,7 @@ $(function() {
     $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');
   });
 
-  // STATE
+  // state
   $('#toggle-state-switch-button').on('click', function () {
     $('#toggle-state-switch').bootstrapSwitch('toggleState');
   });
@@ -34,15 +30,15 @@ $(function() {
     alert($('#toggle-state-switch').bootstrapSwitch('status'));
   });
 
-  // DESTROY
+  // destroy
   $('#btn-destroy-switch').on('click', function () {
     $('#destroy-switch').bootstrapSwitch('destroy');
     $(this).remove();
   });
   // CREATE
   $('#btn-create').on('click', function () {
-    $('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwitch();
-    $(this).remove()
+    $('#create-switch').bootstrapSwitch();
+    $(this).remove();
   });
 
   // ACTIVATION
@@ -77,6 +73,14 @@ $(function() {
     alert(data.value);
   });
 
+  // event handler
+  $('#switch-change').on('switch-change', function (e, data) {
+    var $element = $(data.el),
+      value = data.value;
+
+    console.log(e, $element, value);
+  });
+
   // COLOR
   $('#btn-color-on-switch').on('click', function() {
     $('#change-color-switch').bootstrapSwitch('setOnClass', 'success');

docs/vendor/prism.css

@@ -0,0 +1,107 @@
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', monospace;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #a67f59;
+  background: hsla(0,0%,100%,.5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+
+.token.regex,
+.token.important {
+  color: #e90;
+}
+
+.token.important {
+  font-weight: bold;
+}
+
+.token.entity {
+  cursor: help;
+}

src/coffee/bootstrap-switch.coffee

@@ -0,0 +1,306 @@
+(($) ->
+  $.fn.bootstrapSwitch = (method) ->
+    methods =
+      init: ->
+        @each ->
+          $element = $(@)
+          $switchLeft = $("<span>",
+            class: "switch-left"
+            html: ->
+              html = "ON"
+              label = $element.data("on-label")
+              html = label if typeof label isnt "undefined"
+              html
+          )
+          $switchRight = $("<span>",
+            class: "switch-right"
+            html: ->
+              html = "OFF"
+              label = $element.data("off-label")
+              html = label if typeof label isnt "undefined"
+              html
+          )
+          $label = $("<label>",
+            for: $element.attr("id")
+            html: ->
+              html = "&nbsp;"
+              icon = $element.data("label-icon")
+              label = $element.data("text-label")
+
+              html = "<i class=\"icon " + icon + "\"></i>" if typeof icon isnt "undefined"
+              html = label if typeof label isnt "undefined"
+
+              html
+          )
+          $div = $("<div>")
+          $wrapper = $("<div>", class: "has-switch")
+          $form = $element.closest("form")
+          changeStatus = ->
+            $label.trigger("mousedown").trigger("mouseup").trigger "click"  unless $label.hasClass("label-change-switch")
+
+          # set bootstrap-switch flag
+          $element.data "bootstrap-switch", true
+
+          # apply class
+          if $element.attr("class")
+            $.each ["switch-mini", "switch-small", "switch-large"], (i, cls) ->
+              if $element.attr("class").indexOf(cls) >= 0
+                $switchLeft.addClass cls
+                $label.addClass cls
+                $switchRight.addClass cls
+
+          # override default
+          $switchLeft.addClass "switch-" + $element.data("on") if $element.data("on") isnt `undefined`
+          $switchRight.addClass "switch-" + $element.data("off") if $element.data("off") isnt `undefined`
+
+          # set animated for div
+          $div.data("animated", false)
+          $div.addClass("switch-animate").data("animated", true) if $element.data("animated") isnt false
+
+          # reassign elements after dom modification
+          $div = $element.wrap($div).parent()
+          $wrapper = $div.wrap($wrapper).parent()
+
+          # insert label and switch parts
+          $element.before($switchLeft).before($label).before($switchRight)
+          $div.addClass(if $element.is(":checked") then "switch-on" else "switch-off")
+          $wrapper.addClass("deactivate") if $element.is(":disabled")
+
+          # element handlers
+          $element
+          .on("keydown", (e) ->
+            return unless e.keyCode is 32
+
+            e.stopImmediatePropagation()
+            e.preventDefault()
+            changeStatus $(e.target).find("span:first")
+          ).on "change", (e, skip) ->
+            isChecked = $element.is(":checked")
+            state = $div.is(".switch-off")
+
+            e.preventDefault()
+
+            $div.css("left", "")
+            return unless state is isChecked
+
+            if isChecked
+              $div.removeClass("switch-off").addClass "switch-on"
+            else
+              $div.removeClass("switch-on").addClass "switch-off"
+
+            $div.addClass "switch-animate"  if $div.data("animated") isnt false
+            return if typeof skip is "boolean" and skip
+
+            $element.trigger "switch-change",
+              el: $element
+              value: isChecked
+
+          # switch handlers
+          $switchLeft.on "click", -> changeStatus()
+          $switchRight.on "click", -> changeStatus()
+
+          # label handlers
+          $label.on "mousedown touchstart", (e) ->
+            moving = false
+
+            e.preventDefault()
+            e.stopImmediatePropagation()
+
+            $div.removeClass "switch-animate"
+            return $label.unbind "click" if $element.is(":disabled") or $element.hasClass("radio-no-uncheck")
+
+            # other label event handlers
+            $label
+            .on("mousemove touchmove", (e) ->
+              relativeX = (e.pageX or 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
+
+              $div.css "left", (percent - right) + "%"
+            )
+            .on("click touchend", (e) ->
+              e.stopImmediatePropagation()
+              e.preventDefault()
+
+              $label.unbind "mouseleave"
+
+              if moving
+                $element.prop "checked", (parseInt($label.parent().css("left"), 10) > -25)
+              else
+                $element.prop "checked", not $element.is(":checked")
+
+              moving = false
+              $element.trigger "change"
+            )
+            .on("mouseleave", (e) ->
+              e.preventDefault()
+              e.stopImmediatePropagation()
+
+              $label.unbind("mouseleave mousemove").trigger "mouseup"
+              $element.prop("checked", (parseInt($label.parent().css("left"), 10) > -25)).trigger "change"
+            )
+            .on "mouseup", (e) ->
+              e.stopImmediatePropagation()
+              e.preventDefault()
+
+              $label.trigger "mouseleave"
+
+
+          unless $form.data("bootstrap-switch")
+            $form.bind("reset", ->
+              window.setTimeout(->
+                $form.find(".has-switch").each ->
+                  $input = $(@).find("input")
+                  $input.prop("checked", $input.is(":checked")).trigger "change"
+
+              , 1)
+            ).data "bootstrap-switch", true
+
+      toggleActivation: ->
+        $element = $(@)
+
+        $element.prop("disabled", not $element.is(":disabled")).parents(".has-switch").toggleClass "deactivate"
+        $element
+
+      isActive: ->
+        not $(@).is(":disabled")
+
+      setActive: (active) ->
+        $element = $(@)
+        $wrapper = $element.parents(".has-switch")
+
+        if active
+          $wrapper.removeClass "deactivate"
+          $element.prop "disabled", false
+        else
+          $wrapper.addClass "deactivate"
+          $element.prop "disabled", true
+        $element
+
+      toggleState: (skip) ->
+        $element = $(@)
+
+        $element.prop("checked", not $element.is(":checked")).trigger "change", skip
+        $element
+
+      toggleRadioState: (skip) ->
+        $element = $(@)
+
+        $element.not(":checked").prop("checked", not $element.is(":checked")).trigger "change", skip
+        $element
+
+      toggleRadioStateAllowUncheck: (uncheck, skip) ->
+        $element = $(@)
+
+        if uncheck
+          $element.not(":checked").trigger "change", skip
+        else
+          $element.not(":checked").prop("checked", not $element.is(":checked")).trigger "change", skip
+        $element
+
+      setState: (value, skip) ->
+        $element = $(@)
+
+        $element.prop("checked", value).trigger "change", skip
+        $element
+
+      setOnLabel: (value) ->
+        $element = $(@)
+
+        $element.siblings(".switch-left").html value
+        $element
+
+      setOffLabel: (value) ->
+        $element = $(@)
+
+        $element.siblings(".switch-right").html value
+        $element
+
+      setOnClass: (value) ->
+        $element = $(@)
+        $switchLeft = $element.siblings(".switch-left")
+        cls = $element.attr("data-on")
+
+        return if typeof value is "undefined"
+
+        $switchLeft.removeClass "switch-#{cls}" if typeof cls isnt "undefined"
+        $switchLeft.addClass "switch-#{value}"
+        $element
+
+      setOffClass: (value) ->
+        $element = $(@)
+        $switchRight = $element.siblings(".switch-right")
+        cls = $element.attr("data-off")
+
+        return if typeof value is "undefined"
+
+        $switchRight.removeClass "switch-#{cls}" if typeof cls isnt "undefined"
+        $switchRight.addClass "switch-#{value}"
+        $element
+
+      setAnimated: (value) ->
+        $element = $(@)
+        $div = $element.parent()
+        value ?= false
+
+        $div
+        .data("animated", value)
+        .attr("data-animated", value)[if $div.data("animated") isnt false then "addClass" else "removeClass"]("switch-animate")
+        $element
+
+      setSizeClass: (value) ->
+        $element = $(@)
+        $switchLeft = $element.siblings(".switch-left")
+        $label = $element.siblings("label")
+        $switchRight = $element.siblings(".switch-right")
+
+        $.each ["switch-mini", "switch-small", "switch-large"], (i, cls) ->
+          if cls isnt value
+            $switchLeft.removeClass cls
+            $label.removeClass cls
+            $switchRight.removeClass cls
+          else
+            $switchLeft.addClass cls
+            $label.addClass cls
+            $switchRight.addClass cls
+
+        $element
+
+      setTextLabel: (value) ->
+        $element = $(@)
+
+        $element.siblings("label").html value or "&nbsp"
+        $element
+
+      setTextIcon: (value) ->
+        $element = $(@)
+
+        $element.siblings("label").html(if value then "<i class=\"icon #{value}\"></i>" else "&nbsp;")
+        $element
+
+      status: ->
+        $(@).is ":checked"
+
+      destroy: ->
+        $element = $(@)
+        $div = $element.parent()
+        $form = $div.closest("form")
+
+        $div.children().not($element).remove()
+        $element.unwrap().unwrap().unbind "change"
+        $form.unbind("reset").removeData "bootstrapSwitch" if $form.length
+        $element
+
+    return methods[method].apply(@, Array::slice.call(arguments, 1)) if methods[method]
+    return methods.init.apply(@, arguments) if typeof method is "object" or not method
+    $.error "Method " + method + " does not exist!"
+
+  @
+) jQuery

src/js/bootstrap-switch.js

@@ -1,430 +0,0 @@
-/*! ============================================================
- * bootstrap-switch v1.9.0 by Larentis Mattia @SpiritualGuru
- * http://www.larentis.eu/
- *
- * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
- * http://www.bdmdesign.org/
- *
- * Project site:
- * http://www.bootstrap-switch.org/
- * ============================================================
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- * ============================================================ */
-
-!function ($) {
-  "use strict";
-
-  $.fn.bootstrapSwitch = function (method) {
-    var inputSelector = 'input[type!="hidden"]';
-    var methods = {
-
-      init: function () {
-        return this.each(function () {
-            var $element = $(this),
-                $div,
-                $switchLeft,
-                $switchRight,
-                $label,
-                $form = $element.closest('form'),
-                myClasses = "",
-                classes = $element.attr('class'),
-                color,
-                moving,
-                onLabel = "ON",
-                offLabel = "OFF",
-                icon = false,
-                textLabel = 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('label-icon') !== undefined) {
-              icon = $element.data('label-icon');
-            }
-
-            if ($element.data('text-label') !== undefined) {
-              textLabel = $element.data('text-label');
-            }
-
-            $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(inputSelector).attr('id'));
-
-            if (icon) {
-              $label.html('<i class="icon ' + icon + '"></i>');
-            }
-
-            if (textLabel) {
-              $label.html('' + textLabel + '');
-            }
-
-            $div = $element.find(inputSelector).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(inputSelector).is(':checked') ? 'switch-on' : 'switch-off');
-
-            if ($element.find(inputSelector).is(':disabled')) {
-              $(this).addClass('deactivate');
-            }
-
-            var changeStatus = function ($this) {
-              if ($element.parent('label').is('.label-change-switch')) {
-
-              } else {
-                $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 () {
-              changeStatus($(this));
-            });
-
-            $switchRight.on('click', function () {
-              changeStatus($(this));
-            });
-
-            $element.find(inputSelector).on('change', function (e, skipOnChange) {
-              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");
-                }
-
-                if (typeof skipOnChange === 'boolean' && skipOnChange) {
-                  return;
-                }
-
-                $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('.has-switch').is('.deactivate')) {
-                $this.unbind('click');
-              } else if ($this.closest('.switch-on').parent().is('.radio-no-uncheck')) {
-                $this.unbind('click');
-              } else {
-                $this.on('mousemove touchmove', function (e) {
-                  var $element = $(this).closest('.make-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),
-                      $myInputBox = $this.siblings('input');
-
-                  e.stopImmediatePropagation();
-                  e.preventDefault();
-
-                  $this.unbind('mouseleave');
-
-                  if (moving) {
-                    $myInputBox.prop('checked', !(parseInt($this.parent().css('left'), 10) < -25));
-                  }
-                  else {
-                    $myInputBox.prop("checked", !$myInputBox.is(":checked"));
-                  }
-
-                  moving = false;
-                  $myInputBox.trigger('change');
-                });
-
-                $this.on('mouseleave', function (e) {
-                  var $this = $(this),
-                      $myInputBox = $this.siblings('input');
-
-                  e.preventDefault();
-                  e.stopImmediatePropagation();
-
-                  $this.unbind('mouseleave mousemove');
-                  $this.trigger('mouseup');
-
-                  $myInputBox.prop('checked', ! (parseInt($this.parent().css('left'), 10) < -25)).trigger('change');
-                });
-
-                $this.on('mouseup', function (e) {
-                  e.stopImmediatePropagation();
-                  e.preventDefault();
-
-                  $(this).trigger('mouseleave');
-                });
-              }
-            });
-
-            if ($form.data('bootstrapSwitch') !== 'injected') {
-              $form.bind('reset', function () {
-                setTimeout(function () {
-                  $form.find('.make-switch').each(function () {
-                    var $input = $(this).find(inputSelector);
-
-                    $input.prop('checked', $input.is(':checked')).trigger('change');
-                  });
-                }, 1);
-              });
-              $form.data('bootstrapSwitch', 'injected');
-            }
-          }
-        );
-      },
-
-      toggleActivation: function () {
-        var $this = $(this);
-
-        $this.toggleClass('deactivate');
-        $this.find(inputSelector).prop('disabled', $this.is('.deactivate'));
-      },
-
-      isActive: function () {
-        return !$(this).hasClass('deactivate');
-      },
-
-      setActive: function (active) {
-        var $this = $(this);
-
-        if (active) {
-          $this.removeClass('deactivate');
-          $this.find(inputSelector).removeAttr('disabled');
-        }
-        else {
-          $this.addClass('deactivate');
-          $this.find(inputSelector).attr('disabled', 'disabled');
-        }
-      },
-
-      toggleState: function (skipOnChange) {
-        var $input = $(this).find(':checkbox');
-        $input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange);
-      },
-
-      toggleRadioState: function (skipOnChange) {
-        var $radioinput = $(this).find(':radio');
-        $radioinput.not(':checked').prop('checked', !$radioinput.is(':checked')).trigger('change', skipOnChange);
-      },
-
-      toggleRadioStateAllowUncheck: function (uncheck, skipOnChange) {
-        var $radioinput = $(this).find(':radio');
-
-        if (uncheck) {
-          $radioinput.not(':checked').trigger('change', skipOnChange);
-        }
-        else {
-          $radioinput.not(':checked').prop('checked', ! $radioinput.is(':checked')).trigger('change', skipOnChange);
-        }
-      },
-
-      setState: function (value, skipOnChange) {
-        $(this).find(inputSelector).prop('checked', value).trigger('change', skipOnChange);
-      },
-
-      setOnLabel: function (value) {
-        var $switchLeft = $(this).find(".switch-left");
-
-        $switchLeft.html(value);
-      },
-
-      setOffLabel: function (value) {
-        var $switchRight = $(this).find(".switch-right");
-
-        $switchRight.html(value);
-      },
-
-      setOnClass: function (value) {
-        var $switchLeft = $(this).find('.switch-left'),
-            color = '';
-
-        if (value !== undefined) {
-          if ($(this).attr('data-on') !== undefined) {
-            color = "switch-" + $(this).attr('data-on');
-          }
-          $switchLeft.removeClass(color);
-          color = "switch-" + value;
-          $switchLeft.addClass(color);
-        }
-      },
-
-      setOffClass: function (value) {
-        var $switchRight = $(this).find('.switch-right'),
-            color = '';
-
-        if (value !== undefined) {
-          if ($(this).attr('data-off') !== undefined) {
-            color = "switch-" + $(this).attr('data-off');
-          }
-          $switchRight.removeClass(color);
-          color = "switch-" + value;
-          $switchRight.addClass(color);
-        }
-      },
-
-      setAnimated: function (value) {
-        var $element = $(this).find(inputSelector).parent();
-
-        if (value === undefined) {
-          value = false;
-        }
-
-        $element.data('animated', value);
-        $element.attr('data-animated', value);
-        $element[$element.data('animated') !== false ? 'addClass' : 'removeClass']("switch-animate");
-      },
-
-      setSizeClass: function (value) {
-        var $element = $(this);
-        var $switchLeft = $element.find(".switch-left");
-        var $switchRight = $element.find(".switch-right");
-        var $label = $element.find("label");
-        $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
-          if (el !== value) {
-            $switchLeft.removeClass(el);
-            $switchRight.removeClass(el);
-            $label.removeClass(el);
-          } else {
-            $switchLeft.addClass(el);
-            $switchRight.addClass(el);
-            $label.addClass(el);
-          }
-        });
-      },
-
-      setTextLabel: function(value) {
-        var $label = $(this).find('label');
-        $label.html('' + value || '&nbsp' + '');
-      },
-
-      setTextIcon: function(value) {
-        var $label = $(this).find('label');
-        $label.html(value ? '<i class="icon ' + value + '"></i>' : '&nbsp;');
-      },
-
-      status: function () {
-        return $(this).find(inputSelector).is(':checked');
-      },
-
-      destroy: function () {
-        var $element = $(this),
-            $div = $element.find('div'),
-            $form = $element.closest('form'),
-            $inputbox;
-
-        $div.find(':not(input)').remove();
-        $inputbox = $div.children();
-        $inputbox.unwrap().unwrap();
-        $inputbox.unbind('change');
-
-        if ($form) {
-          $form.unbind('reset');
-          $form.removeData('bootstrapSwitch');
-        }
-
-        return $inputbox;
-      }
-    };
-
-    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);
-    }
-
-    $.error('Method ' + method + ' does not exist!');
-  };
-}(jQuery);
-
-(function ($) {
-  $(function () {
-    $('.make-switch').bootstrapSwitch();
-  });
-})(jQuery);