diff --git a/.jshintrc b/.jshintrc
index 08096ef..9e3599c 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -2,7 +2,8 @@
   "predef": [
     "document",
     "window",
-    "-Promise"
+    "-Promise",
+    "Dancer"
   ],
   "browser": true,
   "boss": true,
diff --git a/app/components/bridge-controls.js b/app/components/bridge-controls.js
index 2da3c39..0f60789 100644
--- a/app/components/bridge-controls.js
+++ b/app/components/bridge-controls.js
@@ -8,7 +8,8 @@ export default Em.Component.extend({
   updateGroupsData: true,
   groupsData: null,
   lightsData: null,
-  activeLights: Em.A(),
+
+  activeLights: [],
 
   apiURL: function(){
       return 'http://' + this.get('bridgeIp') + '/api/' + this.get('bridgeUsername');
@@ -41,7 +42,7 @@ export default Em.Component.extend({
   },
 
   tabList: ["Lights", "Scenes", "Music"],
-  selectedTab: 0,
+  selectedTab: 2,
   tabData: function(){
     var tabData = [], selectedTab = this.get('selectedTab');
 
@@ -73,16 +74,6 @@ export default Em.Component.extend({
 
     Em.$.get(this.get('apiURL') + '/lights', function (result, status) {
       if (status === 'success' && JSON.stringify(self.get('lightsData')) !== JSON.stringify(result) ) {
-        if(self.get('activeLights').length === 0){
-          var ids = [];
-          for (let key in result) {
-            if(result.hasOwnProperty(key) && result[key].state.reachable){
-              ids.push(key);
-            }
-          }
-          self.set('activeLights', ids);
-        }
-
         self.set('lightsData', result);
       } else if(status !== 'success') {
         // something went terribly wrong ( user got unauthenticated? ) and we'll need to start all over
diff --git a/app/components/controls/group-control.js b/app/components/controls/group-control.js
index b6be584..bd9a1d3 100644
--- a/app/components/controls/group-control.js
+++ b/app/components/controls/group-control.js
@@ -5,7 +5,7 @@ export default Em.Component.extend({
 
   tagName: null,
 
-  groupIdSelection: '0',
+  groupIdSelection: null,
 
   actions: {
     selectGroup: function(selection){
@@ -58,8 +58,20 @@ export default Em.Component.extend({
       }
     });
 
-    if(!Em.isNone(groupIdSelection)){
+    localStorage.setItem('huegasm.selectedGroup', groupIdSelection);
+
+    if(!Em.isNone(groupIdSelection) && !Em.isEmpty(lights)){
       this.set('activeLights', lights);
     }
-  }.observes('groupIdSelection')
+  }.observes('groupIdSelection', 'groupsArrData'),
+
+  didInsertElement: function(){
+    var selectGroup = '0', storageItem = localStorage.getItem('huegasm.selectedGroup');
+
+    if(storageItem){
+      selectGroup = storageItem;
+    }
+
+    this.set('groupIdSelection', selectGroup);
+  }
 });
diff --git a/app/components/controls/light-control.js b/app/components/controls/light-control.js
index 3defeaf..b86af4c 100644
--- a/app/components/controls/light-control.js
+++ b/app/components/controls/light-control.js
@@ -4,13 +4,16 @@ export default Em.Component.extend({
 
   classNames: ['innerControlFrame'],
 
+  activeLights: [],
+  lightsData: null,
+
   lightsDataIntervalHandle: null,
 
   modalData: null,
   isShowingLightsModal: false,
   isShowingAddGroupsModal: false,
   actions: {
-    selectLight: function(id, data){
+    clickLight: function(id, data){
       if(this.get('isShowingLightsModal')){
         this.set('modalData', {data:data, id:id});
       }
diff --git a/app/components/controls/music-control.js b/app/components/controls/music-control.js
index 659e5c8..2a0f263 100644
--- a/app/components/controls/music-control.js
+++ b/app/components/controls/music-control.js
@@ -1,13 +1,54 @@
 import Em from 'ember';
 
 export default Em.Component.extend({
+  didInsertElement: function () {
+    var dancer = new Dancer(),
+      self = this,
+      briOff  = function(i){
+        Em.$.ajax(self.get('apiURL') + '/lights/' + i + '/state', {
+          data: JSON.stringify({'on': 1, 'transitiontime': 0}),
+          contentType: 'application/json',
+          type: 'PUT'
+        });
+      },
+      kick = dancer.createKick({
+        threshold : 0.45,
+        frequency: [0, 3],
+        onKick: function ( mag ) {
 
-  apiURL: null,
+          if(self.get('paused') === false){
+            for(let i=1; i <= 1; i++){
+              Em.$.ajax(self.get('apiURL') + '/lights/' + i + '/state', {
+                data: JSON.stringify({'bri': 254, 'transitiontime': 0}),
+                contentType: 'application/json',
+                type: 'PUT'
+              });
 
+              setTimeout(briOff, 50, i);
+            }
 
+            self.set('paused', true);
 
-  lightsData: null,
-  activeLights: null,
+            setTimeout(function(){ self.set('paused', false); }, 150);
 
+            console.log('Kick at ' + mag);
+          }
 
+        }
+      }),
+      a = new Audio();
+
+    kick.on();
+
+    audio_file.onchange = function(){
+      var files = this.files;
+      var file = URL.createObjectURL(files[0]);
+      a.src = file;
+      dancer.load(a);
+
+      dancer.play();
+    };
+  },
+
+  paused: false
 });
diff --git a/app/components/controls/music-control/music-player.js b/app/components/controls/music-control/music-player.js
new file mode 100644
index 0000000..218406e
--- /dev/null
+++ b/app/components/controls/music-control/music-player.js
@@ -0,0 +1,27 @@
+import Em from 'ember';
+
+export default Em.Component.extend({
+  classNames: ['container-fluid'],
+
+  actions: {
+    play: function(){
+
+    },
+    next : function(){
+
+    },
+    previous: function(){
+
+    }
+  },
+
+  status: null,
+
+  playButton: function(){
+    if(this.get('status') === 'paused'){
+      return 'pause';
+    } else {
+      return 'play-arrow';
+    }
+  }.property('status')
+});
diff --git a/app/components/huegasm-app.js b/app/components/huegasm-app.js
index c56af83..ce86901 100644
--- a/app/components/huegasm-app.js
+++ b/app/components/huegasm-app.js
@@ -7,6 +7,7 @@ export default Em.Component.extend({
 
   init: function(){
     this._super();
+
     if(localStorage.getItem('huegasm.bridgeIp')){
       this.set('bridgeIp', localStorage.getItem('huegasm.bridgeIp'));
     }
diff --git a/app/components/modals/add-group-modal.js b/app/components/modals/add-group-modal.js
index 4dcb6d8..45fb635 100644
--- a/app/components/modals/add-group-modal.js
+++ b/app/components/modals/add-group-modal.js
@@ -40,7 +40,13 @@ export default Em.Component.extend({
   selectedLights: [],
 
   onIsShowingAddGroupsModalChange: function(){
-    this.set('selectedLights', []);
+    if(this.get('isShowingAddGroupsModal')){
+
+    }
+    this.setProperties({
+      selectedLights: [],
+      groupName: null
+    });
   }.observes('isShowingAddGroupsModal'),
 
   saveDisabled: function(){
diff --git a/app/components/modals/confirm-delete-modal.js b/app/components/modals/confirm-delete-modal.js
index cb65cd6..418c354 100644
--- a/app/components/modals/confirm-delete-modal.js
+++ b/app/components/modals/confirm-delete-modal.js
@@ -6,7 +6,9 @@ export default Em.Component.extend({
       this.sendAction();
     },
     delete: function(){
-      Em.$.ajax(this.get('apiURL') + '/groups/' + this.get('groupId'), {
+      var groupId = this.get('groupId');
+
+      Em.$.ajax(this.get('apiURL') + '/groups/' + groupId, {
         contentType: 'application/json',
         type: 'DELETE'
       });
@@ -18,6 +20,10 @@ export default Em.Component.extend({
         }
       }
 
+      if(groupId === this.get('groupIdSelection')){
+        this.set('groupIdSelection', '0');
+      }
+
       this.setProperties({
         updateGroupsData: true,
         groupsData: newGroupsData
diff --git a/app/index.html b/app/index.html
index 509be89..a7b962b 100644
--- a/app/index.html
+++ b/app/index.html
@@ -9,6 +9,9 @@
 
     {{content-for 'head'}}
 
+    <link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+
     <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon" />
 
     <link rel="stylesheet" href="assets/vendor.css">
diff --git a/app/router.js b/app/router.js
index cef554b..ee31390 100644
--- a/app/router.js
+++ b/app/router.js
@@ -6,6 +6,7 @@ var Router = Ember.Router.extend({
 });
 
 Router.map(function() {
+  this.route('404', {path:'/*path'});
 });
 
 export default Router;
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 124d61c..3500671 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -3,10 +3,7 @@
 @import 'ember-modal-dialog/ember-modal-structure';
 @import 'ember-modal-dialog/ember-modal-appearance';
 
-body, html {
-  height: 100%;
-}
-
+// BRIDGE FINDER
 #pressButtonBridgeImg {
   width: 200px;
   margin: 0 auto 0 auto;
@@ -17,10 +14,43 @@ body, html {
   text-decoration: none;
 }
 
-md-list {
+md-content {
   max-width: 800px;
 }
 
+// BRIDGE CONTROLS
+.navigation {
+  margin: 0 auto 0 auto;
+  padding: 30px 0 30px 0;
+}
+
+.navigationItem {
+  text-transform: uppercase;
+  cursor: pointer;
+  font-family: 'Slabo 27px', serif;
+  font-size: 18px;
+  padding: 0 10px 0 10px;
+}
+
+.navigationItem:hover{
+  text-decoration: underline;
+}
+
+.navigationItem.active {
+  font-weight: bold;
+  cursor: default;
+}
+
+.navigationItem.active:hover {
+  color: #000;
+  text-decoration: none;
+}
+
+// LIGHT GROUP
+.lightGroup {
+  margin: 0 auto 0 auto;
+}
+
 .hueLight {
   margin-right: 10px;
   border-radius: 20px;
@@ -54,7 +84,7 @@ md-icon {
 }
 
 md-icon.menu {
-  margin: 10px 16px 0 0;
+  margin: 30px 0 0 16px;
 }
 
 .addButton {
@@ -70,6 +100,7 @@ md-icon.menu {
 
 .sideNavTitle {
   margin-left: 16px;
+  font-family: 'Slabo 27px', serif;
 }
 
 md-toolbar {
@@ -77,20 +108,85 @@ md-toolbar {
 }
 
 .innerControlFrame {
-  background-color: mintcream;
   height: 100vh;
 }
 
-.groupRow.selectedRow{
-  background-color: lightgrey !important;
+// GROUP CONTROL
+.groupRow.selectedRow {
+  background-color: #7F7F7F !important;
+  color: white;
 }
 
 .groupRow:hover {
-  background-color: #E6E6E6;
+  background-color: #c3c3c3;
+}
+
+.groupRow.selectedRow .groupSelect {
+  cursor: default;
 }
 
 .groupSelect {
   padding: 10px 0 10px 0;
   cursor: pointer;
   width: 70%;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.groupRow:hover * .close {
+  display: block;
+}
+
+.groupRow:hover * .close {
+  display: block;
+}
+
+.selectedRow * .close {
+  color: white !important;
+}
+
+.selectedRow.groupRow * .close:hover {
+  color: darken(white, 20%) !important;
+}
+
+.groupRow  * .close:hover {
+  color: darken(#333333, 20%) !important;
+}
+
+.close:hover {
+  opacity: 1;
+}
+
+.close {
+  color: rgb(51, 51, 51);
+  display: none;
+  opacity: 1;
+  text-shadow: none;
+}
+
+// MUSIC CONTROL
+#playListContainer {
+  height: 600px;
+  width: 200px;
+  color: red;
+}
+
+.playerControllIcon {
+  color: white !important;
+  cursor: pointer;
+}
+
+.playerControllIcon:hover {
+  color: darken(white, 20%) !important;
+}
+
+#playerArea {
+  height: 200px;
+  background-color: black;
+  display: inline-block;
+}
+
+#playlist {
+  height: 200px;
+  background-color: grey;
+  display: inline-block;
 }
diff --git a/app/templates/components/bridge-controls.hbs b/app/templates/components/bridge-controls.hbs
index ec02b8e..3546fac 100644
--- a/app/templates/components/bridge-controls.hbs
+++ b/app/templates/components/bridge-controls.hbs
@@ -1,30 +1,37 @@
-{{#paper-nav-container open=drawerOpen class="ember-app"}}
-  {{#paper-content flex-layout="column" flex=true}}
-      <ul class="nav nav-tabs">
-        {{#each tabData as |tab|}}
-            <li role="presentation" class="{{if tab.selected "active" ""}}"><a
-                    href="#" {{action "changeTab" tab.name}}>{{tab.name}}</a></li>
-        {{/each}}
-      </ul>
+{{#liquid-if lightsData}}
 
-      {{#liquid-if lightsTabSelected class="tabSwitch"}}
-        {{controls/light-control apiURL=apiURL lightsData=lightsData activeLights=activeLights}}
-      {{/liquid-if}}
+  {{#paper-nav-container open=drawerOpen class="ember-app"}}
 
-      {{#liquid-if scenesTabSelected class="tabSwitch"}}
-        {{controls/scene-control apiURL=apiURL lightsData=lightsData activeLights=activeLights}}
-      {{/liquid-if}}
+    {{#paper-sidenav class="md-sidenav-left md-whiteframe-z2" flex-layout="column" flex=true}}
 
-      {{#liquid-if musicTabSelected class="tabSwitch"}}
-        {{controls/music-control apiURL=apiURL lightsData=lightsData  activeLights=activeLights}}
-      {{/liquid-if}}
-  {{/paper-content}}
+      {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData}}
+    {{/paper-sidenav}}
 
-  {{#paper-sidenav-toggle class="menu-sidenav-toggle"}}
-    {{paper-icon icon="menu" size="lg"}}
-  {{/paper-sidenav-toggle}}
+    {{#paper-sidenav-toggle class="menu-sidenav-toggle"}}
+      {{paper-icon icon="menu" size="lg"}}
+    {{/paper-sidenav-toggle}}
 
-  {{#paper-sidenav class="md-sidenav-right md-whiteframe-z2" flex-layout="column" flex=true}}
-    {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData}}
-  {{/paper-sidenav}}
-{{/paper-nav-container}}
\ No newline at end of file
+    {{#paper-content flex-layout="column" flex=true}}
+        <div class="navigation">
+          {{#each tabData as |tab|}}
+              <span class="navigationItem {{if tab.selected "active" ""}}" {{action "changeTab" tab.name}}>{{tab.name}}</span>
+          {{/each}}
+        </div>
+
+        {{#liquid-if lightsTabSelected class="tabSwitch"}}
+          {{controls/light-control apiURL=apiURL lightsData=lightsData activeLights=activeLights}}
+        {{/liquid-if}}
+
+        {{#liquid-if scenesTabSelected class="tabSwitch"}}
+          {{controls/scene-control apiURL=apiURL lightsData=lightsData activeLights=activeLights}}
+        {{/liquid-if}}
+
+        {{#liquid-if musicTabSelected class="tabSwitch"}}
+          {{controls/music-control apiURL=apiURL lightsData=lightsData  activeLights=activeLights}}
+        {{/liquid-if}}
+
+    {{/paper-content}}
+
+  {{/paper-nav-container}}
+
+{{/liquid-if}}
\ No newline at end of file
diff --git a/app/templates/components/controls/group-control.hbs b/app/templates/components/controls/group-control.hbs
index 6bbe22e..36aae78 100644
--- a/app/templates/components/controls/group-control.hbs
+++ b/app/templates/components/controls/group-control.hbs
@@ -4,7 +4,7 @@
     {{#paper-list}}
       {{#each groupsArrData as |group|}}
         {{#paper-item class=group.rowClass}}
-          <div class="groupSelect" {{action "selectGroup" group.data.key}}>{{group.name}}</div> {{#if group.deletable}}<span title="Remove Group" class="removeButton" {{action "toggleConfirmDeleteGroupsModal" group.name group.data.key}}>{{paper-icon icon="remove"}}</span>{{/if}}
+          <div class="groupSelect" {{action "selectGroup" group.data.key}}>{{group.name}}</div> {{#if group.deletable}}<span title="Remove Group" class="removeButton" {{action "toggleConfirmDeleteGroupsModal" group.name group.data.key}}>{{paper-icon icon="close"}}</span>{{/if}}
         {{/paper-item}}
       {{/each}}
     {{/paper-list}}
@@ -13,4 +13,4 @@
 {{modals/add-group-modal lightsData=lightsData groupsData=groupsData isShowingAddGroupsModal=isShowingAddGroupsModal apiURL=apiURL updateGroupsData=updateGroupsData
 action="toggleAddGroupsModal"}}
 
-{{modals/confirm-delete-modal groupName=deleteGroupName groupId=deleteGroupId groupsData=groupsData isShowingConfirmDeleteModal=isShowingConfirmDeleteModal apiURL=apiURL updateGroupsData=updateGroupsData action="toggleConfirmDeleteGroupsModal"}}
\ No newline at end of file
+{{modals/confirm-delete-modal groupName=deleteGroupName groupId=deleteGroupId groupsData=groupsData isShowingConfirmDeleteModal=isShowingConfirmDeleteModal apiURL=apiURL updateGroupsData=updateGroupsData groupIdSelection=groupIdSelection action="toggleConfirmDeleteGroupsModal"}}
\ No newline at end of file
diff --git a/app/templates/components/controls/light-control.hbs b/app/templates/components/controls/light-control.hbs
index 309be73..4960ec9 100644
--- a/app/templates/components/controls/light-control.hbs
+++ b/app/templates/components/controls/light-control.hbs
@@ -22,6 +22,6 @@
     {{#paper-switch checked=strobeOn}} {{strobeOnTxt}} {{/paper-switch}}
   {{/paper-item}}
 
-  {{modals/light-control-modal modalData=modalData apiURL=apiURL action="selectLight" isShowingLightsModal=isShowingLightsModal}}
+  {{modals/light-control-modal modalData=modalData apiURL=apiURL action="clickLight" isShowingLightsModal=isShowingLightsModal}}
 
 {{/paper-list}}
\ No newline at end of file
diff --git a/app/templates/components/controls/music-control.hbs b/app/templates/components/controls/music-control.hbs
index 9e8f41e..cbb4c74 100644
--- a/app/templates/components/controls/music-control.hbs
+++ b/app/templates/components/controls/music-control.hbs
@@ -1,9 +1 @@
-{{#paper-list}}
-
-  {{#paper-item class="item"}}
-    {{paper-icon icon="music-note"}}
-      <p>Music</p>
-      {{#paper-button raised=true primary=true}}UPLOAD{{/paper-button}}
-  {{/paper-item}}
-
-{{/paper-list}}
\ No newline at end of file
+{{controls/music-control/music-player}}
\ No newline at end of file
diff --git a/app/templates/components/controls/music-control/music-player.hbs b/app/templates/components/controls/music-control/music-player.hbs
new file mode 100644
index 0000000..662dfe4
--- /dev/null
+++ b/app/templates/components/controls/music-control/music-player.hbs
@@ -0,0 +1,14 @@
+<div class="row">
+    <div id="playerArea" class="col-lg-8 col-xs-12">
+
+        <div id="playerControls">
+          {{paper-icon icon="skip-previous" action="previous" class="playerControllIcon"}}
+          {{paper-icon icon=playButton action="play" class="playerControllIcon"}}
+          {{paper-icon icon="skip-next" action="pause" class="playerControllIcon"}}
+        </div>
+    </div>
+
+    <div id="playlist" class="col-lg-4 col-xs-12">
+        <input id="audio_file" type="file" accept="audio/*" />
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/transitions.js b/app/transitions.js
index c0b4726..e70383f 100644
--- a/app/transitions.js
+++ b/app/transitions.js
@@ -1,6 +1,5 @@
 export default function(){
   this.transition(
-    this.hasClass('tabSwitch'),
     this.use('crossFade')
   );
 }
diff --git a/config/environment.js b/config/environment.js
index cab8549..588f226 100644
--- a/config/environment.js
+++ b/config/environment.js
@@ -25,7 +25,7 @@ module.exports = function(environment) {
       'connect-src': "'self' *",
       'img-src': "'self' data:",
       'media-src': "'self'",
-      'style-src': "'self' 'unsafe-inline'",
+      'style-src': "'self' 'unsafe-inline' fonts.googleapis.com",
       'object-src': "'self'",
       'frame-src': "'self'"
     }
diff --git a/ember-cli-build.js b/ember-cli-build.js
index a1204ab..630baf6 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -6,8 +6,7 @@ module.exports = function(defaults) {
     // Add options here
   });
 
-  app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse.js');
-
+  app.import('vendor/dancer.js');
   // Use `app.import` to add additional libraries to the generated
   // output files.
   //
diff --git a/tests/integration/components/controls/music-control/music-player-test.js b/tests/integration/components/controls/music-control/music-player-test.js
new file mode 100644
index 0000000..6db138b
--- /dev/null
+++ b/tests/integration/components/controls/music-control/music-player-test.js
@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('controls/music-control/music-player', 'Integration | Component | controls/music control/music player', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{controls/music-control/music-player}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#controls/music-control/music-player}}
+      template block text
+    {{/controls/music-control/music-player}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});
diff --git a/vendor/dancer.js b/vendor/dancer.js
index f8a7eac..164de84 100644
--- a/vendor/dancer.js
+++ b/vendor/dancer.js
@@ -28,7 +28,7 @@
           this.source = { src: Dancer._getMP3SrcFromAudio( source ) };
         }
 
-        // Loading an object with src, [codecs]
+      // Loading an object with src, [codecs]
       } else {
         this.source = window.Audio ? new Audio() : {};
         this.source.src = Dancer._makeSupportedPath( source.src, source.codecs );
@@ -188,9 +188,9 @@
   };
 
   function update () {
-    for ( var i in this.sections ) {
-      if ( this.sections[ i ].condition() )
-        this.sections[ i ].callback.call( this );
+    for (var i in this.sections) {
+      if (this.sections[i].condition && this.sections[i].condition() )
+        this.sections[i].callback.call(this);
     }
   }
 
@@ -200,12 +200,12 @@
 (function ( Dancer ) {
 
   var CODECS = {
-      'mp3' : 'audio/mpeg;',
-      'ogg' : 'audio/ogg; codecs="vorbis"',
-      'wav' : 'audio/wav; codecs="1"',
-      'aac' : 'audio/mp4; codecs="mp4a.40.2"'
-    },
-    audioEl = document.createElement( 'audio' );
+    'mp3' : 'audio/mpeg;',
+    'ogg' : 'audio/ogg; codecs="vorbis"',
+    'wav' : 'audio/wav; codecs="1"',
+    'aac' : 'audio/mp4; codecs="mp4a.40.2"'
+  },
+  audioEl = document.createElement( 'audio' );
 
   Dancer.options = {};
 
@@ -235,9 +235,9 @@
     var canPlay = audioEl.canPlayType;
     return !!(
       Dancer.isSupported() === 'flash' ?
-      type.toLowerCase() === 'mp3' :
-      audioEl.canPlayType &&
-      audioEl.canPlayType( CODECS[ type.toLowerCase() ] ).replace( /no/, ''));
+        type.toLowerCase() === 'mp3' :
+        audioEl.canPlayType &&
+        audioEl.canPlayType( CODECS[ type.toLowerCase() ] ).replace( /no/, ''));
   };
 
   Dancer.addPlugin = function ( name, fn ) {
@@ -333,7 +333,7 @@
       if ( !this.isOn ) { return; }
       var magnitude = this.maxAmplitude( this.frequency );
       if ( magnitude >= this.currentThreshold &&
-        magnitude >= this.threshold ) {
+          magnitude >= this.threshold ) {
         this.currentThreshold = magnitude;
         this.onKick && this.onKick.call( this.dancer, magnitude );
       } else {
@@ -342,9 +342,7 @@
       }
     },
     maxAmplitude : function ( frequency ) {
-      var
-        max = 0,
-        fft = this.dancer.getSpectrum();
+      var max = 0, fft = this.dancer.getSpectrum();
 
       // Sloppy array check
       if ( !frequency.length ) {
@@ -369,11 +367,15 @@
     SAMPLE_RATE = 44100;
 
   var adapter = function ( dancer ) {
+    var context = new AudioContext(), filter = context.createBiquadFilter();
+
+    filter.type = "lowpass";
+    filter.frequency.value = 440;
+
     this.dancer = dancer;
     this.audio = new Audio();
-    this.context = window.AudioContext ?
-      new window.AudioContext() :
-      new window.webkitAudioContext();
+    this.context = context;
+    this.filter = filter;
   };
 
   adapter.prototype = {
@@ -464,7 +466,7 @@
 
       for ( i = 0; i < resolution; i++ ) {
         this.signal[ i ] = channels > 1 ?
-        buffers.reduce( sum ) / channels :
+          buffers.reduce( sum ) / channels :
           buffers[ 0 ][ i ];
       }
 
@@ -477,8 +479,10 @@
     this.source = this.context.createMediaElementSource( this.audio );
     this.source.connect( this.proc );
     this.source.connect( this.gain );
+    //this.source.connect( this.filter );
     this.gain.connect( this.context.destination );
     this.proc.connect( this.context.destination );
+    //this.filter.connect( this.context.destination );
 
     this.isLoaded = true;
     this.progress = 1;
@@ -770,13 +774,13 @@ function FourierTransform(bufferSize, sampleRate) {
 
   this.calculateSpectrum = function() {
     var spectrum  = this.spectrum,
-      real      = this.real,
-      imag      = this.imag,
-      bSi       = 2 / this.bufferSize,
-      sqrt      = Math.sqrt,
-      rval,
-      ival,
-      mag;
+        real      = this.real,
+        imag      = this.imag,
+        bSi       = 2 / this.bufferSize,
+        sqrt      = Math.sqrt,
+        rval,
+        ival,
+        mag;
 
     for (var i = 0, N = bufferSize/2; i < N; i++) {
       rval = real[i];
@@ -841,12 +845,12 @@ function FFT(bufferSize, sampleRate) {
 FFT.prototype.forward = function(buffer) {
   // Locally scope variables for speed up
   var bufferSize      = this.bufferSize,
-    cosTable        = this.cosTable,
-    sinTable        = this.sinTable,
-    reverseTable    = this.reverseTable,
-    real            = this.real,
-    imag            = this.imag,
-    spectrum        = this.spectrum;
+      cosTable        = this.cosTable,
+      sinTable        = this.sinTable,
+      reverseTable    = this.reverseTable,
+      real            = this.real,
+      imag            = this.imag,
+      spectrum        = this.spectrum;
 
   var k = Math.floor(Math.log(bufferSize) / Math.LN2);
 
@@ -854,15 +858,15 @@ FFT.prototype.forward = function(buffer) {
   if (bufferSize !== buffer.length)  { throw "Supplied buffer is not the same size as defined FFT. FFT Size: " + bufferSize + " Buffer Size: " + buffer.length; }
 
   var halfSize = 1,
-    phaseShiftStepReal,
-    phaseShiftStepImag,
-    currentPhaseShiftReal,
-    currentPhaseShiftImag,
-    off,
-    tr,
-    ti,
-    tmpReal,
-    i;
+      phaseShiftStepReal,
+      phaseShiftStepImag,
+      currentPhaseShiftReal,
+      currentPhaseShiftImag,
+      off,
+      tr,
+      ti,
+      tmpReal,
+      i;
 
   for (i = 0; i < bufferSize; i++) {
     real[i] = buffer[reverseTable[i]];
@@ -906,202 +910,202 @@ FFT.prototype.forward = function(buffer) {
 };
 
 /*
- Copyright (c) Copyright (c) 2007, Carl S. Yestrau All rights reserved.
- Code licensed under the BSD License: http://www.featureblend.com/license.txt
- Version: 1.0.4
- */
+Copyright (c) Copyright (c) 2007, Carl S. Yestrau All rights reserved.
+Code licensed under the BSD License: http://www.featureblend.com/license.txt
+Version: 1.0.4
+*/
 var FlashDetect = new function(){
-  var self = this;
-  self.installed = false;
-  self.raw = "";
-  self.major = -1;
-  self.minor = -1;
-  self.revision = -1;
-  self.revisionStr = "";
-  var activeXDetectRules = [
-    {
-      "name":"ShockwaveFlash.ShockwaveFlash.7",
-      "version":function(obj){
-        return getActiveXVersion(obj);
-      }
-    },
-    {
-      "name":"ShockwaveFlash.ShockwaveFlash.6",
-      "version":function(obj){
-        var version = "6,0,21";
+    var self = this;
+    self.installed = false;
+    self.raw = "";
+    self.major = -1;
+    self.minor = -1;
+    self.revision = -1;
+    self.revisionStr = "";
+    var activeXDetectRules = [
+        {
+            "name":"ShockwaveFlash.ShockwaveFlash.7",
+            "version":function(obj){
+                return getActiveXVersion(obj);
+            }
+        },
+        {
+            "name":"ShockwaveFlash.ShockwaveFlash.6",
+            "version":function(obj){
+                var version = "6,0,21";
+                try{
+                    obj.AllowScriptAccess = "always";
+                    version = getActiveXVersion(obj);
+                }catch(err){}
+                return version;
+            }
+        },
+        {
+            "name":"ShockwaveFlash.ShockwaveFlash",
+            "version":function(obj){
+                return getActiveXVersion(obj);
+            }
+        }
+    ];
+    /**
+     * Extract the ActiveX version of the plugin.
+     *
+     * @param {Object} The flash ActiveX object.
+     * @type String
+     */
+    var getActiveXVersion = function(activeXObj){
+        var version = -1;
         try{
-          obj.AllowScriptAccess = "always";
-          version = getActiveXVersion(obj);
+            version = activeXObj.GetVariable("$version");
         }catch(err){}
         return version;
-      }
-    },
-    {
-      "name":"ShockwaveFlash.ShockwaveFlash",
-      "version":function(obj){
-        return getActiveXVersion(obj);
-      }
-    }
-  ];
-  /**
-   * Extract the ActiveX version of the plugin.
-   *
-   * @param {Object} The flash ActiveX object.
-   * @type String
-   */
-  var getActiveXVersion = function(activeXObj){
-    var version = -1;
-    try{
-      version = activeXObj.GetVariable("$version");
-    }catch(err){}
-    return version;
-  };
-  /**
-   * Try and retrieve an ActiveX object having a specified name.
-   *
-   * @param {String} name The ActiveX object name lookup.
-   * @return One of ActiveX object or a simple object having an attribute of activeXError with a value of true.
-   * @type Object
-   */
-  var getActiveXObject = function(name){
-    var obj = -1;
-    try{
-      obj = new ActiveXObject(name);
-    }catch(err){
-      obj = {activeXError:true};
-    }
-    return obj;
-  };
-  /**
-   * Parse an ActiveX $version string into an object.
-   *
-   * @param {String} str The ActiveX Object GetVariable($version) return value.
-   * @return An object having raw, major, minor, revision and revisionStr attributes.
-   * @type Object
-   */
-  var parseActiveXVersion = function(str){
-    var versionArray = str.split(",");//replace with regex
-    return {
-      "raw":str,
-      "major":parseInt(versionArray[0].split(" ")[1], 10),
-      "minor":parseInt(versionArray[1], 10),
-      "revision":parseInt(versionArray[2], 10),
-      "revisionStr":versionArray[2]
     };
-  };
-  /**
-   * Parse a standard enabledPlugin.description into an object.
-   *
-   * @param {String} str The enabledPlugin.description value.
-   * @return An object having raw, major, minor, revision and revisionStr attributes.
-   * @type Object
-   */
-  var parseStandardVersion = function(str){
-    var descParts = str.split(/ +/);
-    var majorMinor = descParts[2].split(/\./);
-    var revisionStr = descParts[3];
-    return {
-      "raw":str,
-      "major":parseInt(majorMinor[0], 10),
-      "minor":parseInt(majorMinor[1], 10),
-      "revisionStr":revisionStr,
-      "revision":parseRevisionStrToInt(revisionStr)
+    /**
+     * Try and retrieve an ActiveX object having a specified name.
+     *
+     * @param {String} name The ActiveX object name lookup.
+     * @return One of ActiveX object or a simple object having an attribute of activeXError with a value of true.
+     * @type Object
+     */
+    var getActiveXObject = function(name){
+        var obj = -1;
+        try{
+            obj = new ActiveXObject(name);
+        }catch(err){
+            obj = {activeXError:true};
+        }
+        return obj;
     };
-  };
-  /**
-   * Parse the plugin revision string into an integer.
-   *
-   * @param {String} The revision in string format.
-   * @type Number
-   */
-  var parseRevisionStrToInt = function(str){
-    return parseInt(str.replace(/[a-zA-Z]/g, ""), 10) || self.revision;
-  };
-  /**
-   * Is the major version greater than or equal to a specified version.
-   *
-   * @param {Number} version The minimum required major version.
-   * @type Boolean
-   */
-  self.majorAtLeast = function(version){
-    return self.major >= version;
-  };
-  /**
-   * Is the minor version greater than or equal to a specified version.
-   *
-   * @param {Number} version The minimum required minor version.
-   * @type Boolean
-   */
-  self.minorAtLeast = function(version){
-    return self.minor >= version;
-  };
-  /**
-   * Is the revision version greater than or equal to a specified version.
-   *
-   * @param {Number} version The minimum required revision version.
-   * @type Boolean
-   */
-  self.revisionAtLeast = function(version){
-    return self.revision >= version;
-  };
-  /**
-   * Is the version greater than or equal to a specified major, minor and revision.
-   *
-   * @param {Number} major The minimum required major version.
-   * @param {Number} (Optional) minor The minimum required minor version.
-   * @param {Number} (Optional) revision The minimum required revision version.
-   * @type Boolean
-   */
-  self.versionAtLeast = function(major){
-    var properties = [self.major, self.minor, self.revision];
-    var len = Math.min(properties.length, arguments.length);
-    for(i=0; i<len; i++){
-      if(properties[i]>=arguments[i]){
-        if(i+1<len && properties[i]==arguments[i]){
-          continue;
-        }else{
-          return true;
+    /**
+     * Parse an ActiveX $version string into an object.
+     *
+     * @param {String} str The ActiveX Object GetVariable($version) return value.
+     * @return An object having raw, major, minor, revision and revisionStr attributes.
+     * @type Object
+     */
+    var parseActiveXVersion = function(str){
+        var versionArray = str.split(",");//replace with regex
+        return {
+            "raw":str,
+            "major":parseInt(versionArray[0].split(" ")[1], 10),
+            "minor":parseInt(versionArray[1], 10),
+            "revision":parseInt(versionArray[2], 10),
+            "revisionStr":versionArray[2]
+        };
+    };
+    /**
+     * Parse a standard enabledPlugin.description into an object.
+     *
+     * @param {String} str The enabledPlugin.description value.
+     * @return An object having raw, major, minor, revision and revisionStr attributes.
+     * @type Object
+     */
+    var parseStandardVersion = function(str){
+        var descParts = str.split(/ +/);
+        var majorMinor = descParts[2].split(/\./);
+        var revisionStr = descParts[3];
+        return {
+            "raw":str,
+            "major":parseInt(majorMinor[0], 10),
+            "minor":parseInt(majorMinor[1], 10),
+            "revisionStr":revisionStr,
+            "revision":parseRevisionStrToInt(revisionStr)
+        };
+    };
+    /**
+     * Parse the plugin revision string into an integer.
+     *
+     * @param {String} The revision in string format.
+     * @type Number
+     */
+    var parseRevisionStrToInt = function(str){
+        return parseInt(str.replace(/[a-zA-Z]/g, ""), 10) || self.revision;
+    };
+    /**
+     * Is the major version greater than or equal to a specified version.
+     *
+     * @param {Number} version The minimum required major version.
+     * @type Boolean
+     */
+    self.majorAtLeast = function(version){
+        return self.major >= version;
+    };
+    /**
+     * Is the minor version greater than or equal to a specified version.
+     *
+     * @param {Number} version The minimum required minor version.
+     * @type Boolean
+     */
+    self.minorAtLeast = function(version){
+        return self.minor >= version;
+    };
+    /**
+     * Is the revision version greater than or equal to a specified version.
+     *
+     * @param {Number} version The minimum required revision version.
+     * @type Boolean
+     */
+    self.revisionAtLeast = function(version){
+        return self.revision >= version;
+    };
+    /**
+     * Is the version greater than or equal to a specified major, minor and revision.
+     *
+     * @param {Number} major The minimum required major version.
+     * @param {Number} (Optional) minor The minimum required minor version.
+     * @param {Number} (Optional) revision The minimum required revision version.
+     * @type Boolean
+     */
+    self.versionAtLeast = function(major){
+        var properties = [self.major, self.minor, self.revision];
+        var len = Math.min(properties.length, arguments.length);
+        for(i=0; i<len; i++){
+            if(properties[i]>=arguments[i]){
+                if(i+1<len && properties[i]==arguments[i]){
+                    continue;
+                }else{
+                    return true;
+                }
+            }else{
+                return false;
+            }
         }
-      }else{
-        return false;
-      }
-    }
-  };
-  /**
-   * Constructor, sets raw, major, minor, revisionStr, revision and installed public properties.
-   */
-  self.FlashDetect = function(){
-    if(navigator.plugins && navigator.plugins.length>0){
-      var type = 'application/x-shockwave-flash';
-      var mimeTypes = navigator.mimeTypes;
-      if(mimeTypes && mimeTypes[type] && mimeTypes[type].enabledPlugin && mimeTypes[type].enabledPlugin.description){
-        var version = mimeTypes[type].enabledPlugin.description;
-        var versionObj = parseStandardVersion(version);
-        self.raw = versionObj.raw;
-        self.major = versionObj.major;
-        self.minor = versionObj.minor;
-        self.revisionStr = versionObj.revisionStr;
-        self.revision = versionObj.revision;
-        self.installed = true;
-      }
-    }else if(navigator.appVersion.indexOf("Mac")==-1 && window.execScript){
-      var version = -1;
-      for(var i=0; i<activeXDetectRules.length && version==-1; i++){
-        var obj = getActiveXObject(activeXDetectRules[i].name);
-        if(!obj.activeXError){
-          self.installed = true;
-          version = activeXDetectRules[i].version(obj);
-          if(version!=-1){
-            var versionObj = parseActiveXVersion(version);
-            self.raw = versionObj.raw;
-            self.major = versionObj.major;
-            self.minor = versionObj.minor;
-            self.revision = versionObj.revision;
-            self.revisionStr = versionObj.revisionStr;
-          }
+    };
+    /**
+     * Constructor, sets raw, major, minor, revisionStr, revision and installed public properties.
+     */
+    self.FlashDetect = function(){
+        if(navigator.plugins && navigator.plugins.length>0){
+            var type = 'application/x-shockwave-flash';
+            var mimeTypes = navigator.mimeTypes;
+            if(mimeTypes && mimeTypes[type] && mimeTypes[type].enabledPlugin && mimeTypes[type].enabledPlugin.description){
+                var version = mimeTypes[type].enabledPlugin.description;
+                var versionObj = parseStandardVersion(version);
+                self.raw = versionObj.raw;
+                self.major = versionObj.major;
+                self.minor = versionObj.minor;
+                self.revisionStr = versionObj.revisionStr;
+                self.revision = versionObj.revision;
+                self.installed = true;
+            }
+        }else if(navigator.appVersion.indexOf("Mac")==-1 && window.execScript){
+            var version = -1;
+            for(var i=0; i<activeXDetectRules.length && version==-1; i++){
+                var obj = getActiveXObject(activeXDetectRules[i].name);
+                if(!obj.activeXError){
+                    self.installed = true;
+                    version = activeXDetectRules[i].version(obj);
+                    if(version!=-1){
+                        var versionObj = parseActiveXVersion(version);
+                        self.raw = versionObj.raw;
+                        self.major = versionObj.major;
+                        self.minor = versionObj.minor;
+                        self.revision = versionObj.revision;
+                        self.revisionStr = versionObj.revisionStr;
+                    }
+                }
+            }
         }
-      }
-    }
-  }();
+    }();
 };
 FlashDetect.JS_RELEASE = "1.0.4";