dimmer mode improvements, new icons, new favicons, separating some sass files, fancy buttons

2015-10-17 21:34:06 -07:00 · 2015-10-17 21:34:06 -07:00 · 044780b77c
commit 044780b77c
parent 7a8527b3be
56 changed files with 626 additions and 198 deletions
--- a/README.md
+++ b/README.md
@ -4,13 +4,10 @@ Music awesomeness for hue lights.

 # TODO
 ## FEATURES
- save beat detection settings per song 
 - app intro with intro.js
 - music visualizations with three.js
- integrate with soundcloud

 ## BUGS
- can't create groups anymore
 - BUGS BUGS BUGS

 ## POSSIBLE FEATURES
--- a/app/index.html
+++ b/app/index.html
@ -11,8 +11,28 @@

    <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="apple-touch-icon" sizes="57x57" href="assets/images/favicons/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="assets/images/favicons/apple-touch-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicons/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="assets/images/favicons/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicons/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="assets/images/favicons/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="assets/images/favicons/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon-180x180.png">
+    <link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194">
+    <link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96">
+    <link rel="icon" type="image/png" href="assets/images/favicons/android-chrome-192x192.png" sizes="192x192">
+    <link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16">
+    <link rel="manifest" href="assets/images/favicons/manifest.json">
+    <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
+    <link rel="shortcut icon" href="assets/images/favicons/favicon.ico">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="msapplication-TileImage" content="assets/images/favicons/mstile-144x144.png">
+    <meta name="msapplication-config" content="assets/images/favicons/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">

    <link rel="stylesheet" href="assets/vendor.css">
    <link rel="stylesheet" href="assets/huegasm.css">
--- a/app/pods/components/add-group-modal/component.js
+++ b/app/pods/components/add-group-modal/component.js
@ -28,10 +28,8 @@ export default Em.Component.extend({
      if(selectedLights.contains(id)){
        selectedLights.removeObject(id);
      } else {
-        selectedLights.push(id);
+        selectedLights.pushObject(id);
      }
-
-      this.notifyPropertyChange('selectedLights');
    }
  },

--- a/app/pods/components/add-group-modal/template.hbs
+++ b/app/pods/components/add-group-modal/template.hbs
@ -1,7 +1,7 @@
 {{#if isShowingModal}}
  {{#modal-dialog close="close" alignment="center" translucentOverlay=true}}

-    {{light-group lightsData=lightsData activeLights=selectedLights action= 'clickLight' apiURL=apiURL noHover=true}}
+    {{light-group lightsData=lightsData activeLights=selectedLights action="clickLight" apiURL=apiURL noHover=true}}

    {{paper-input label="Group name" value=groupName max="32" max-errortext="The group name cannot exceed 32 characters"}}

--- a/app/pods/components/bridge-finder/component.js
+++ b/app/pods/components/bridge-finder/component.js
@ -82,7 +82,7 @@ export default Em.Component.extend({
            var multipleBridgeIps = this.get('multipleBridgeIps');

            result.forEach(function (item) {
-              multipleBridgeIps.push(item.internalipaddress);
+              multipleBridgeIps.pushObject(item.internalipaddress);
            });

            bridgeFindStatus = 'multiple';
--- a/app/pods/components/groups-list/template.hbs
+++ b/app/pods/components/groups-list/template.hbs
@ -1,6 +1,6 @@
 {{#paper-list}}
-  {{#paper-item class="groupRow"}}
-    <h4 class="addButton" {{action "toggleAddGroupsModal"}}>Add a new light group</h4>
+  {{#paper-item class="newGroupRow"}}
+    <div class="newGroup" {{action "toggleAddGroupsModal"}}>Add a new light group</div>
  {{/paper-item}}

  {{#each groupsArrData as |group|}}
--- a/app/pods/components/hue-controls/template.hbs
+++ b/app/pods/components/hue-controls/template.hbs
@ -28,6 +28,6 @@
    </div>
  </div>

-  {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected}}
+  {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected dimmerOn=dimmerOn}}
  {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn}}
 {{/if}}
--- a/app/pods/components/light-group/component.js
+++ b/app/pods/components/light-group/component.js
@ -41,6 +41,7 @@ export default Em.Component.extend({
      }

      this.set('isHovering', false);
+      this.onLightsDataChange();
    }
  },

@ -111,5 +112,5 @@ export default Em.Component.extend({

      this.set('lightsList', lightsList);
    }
-  }.observes('lightsData', 'activeLights.[]')
+  }.observes('lightsData', 'activeLights.[]', 'dimmerOn')
 });
--- a/app/pods/components/light-group/template.hbs
+++ b/app/pods/components/light-group/template.hbs
@ -1,5 +1,5 @@
 {{#each lightsList as |light|}}
  <div class="{{light.activeClass}} bootstrapTooltip" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
-    <img class="hueLight" width="40" src="assets/images/lights/{{light.type}}.svg">
+    <img class="hueLight" width="40" src="assets/images/lights/{{light.type}}{{if dimmerOn "w"}}.svg">
  </div>
 {{/each}}
--- a/app/pods/components/lights-tab/component.js
+++ b/app/pods/components/lights-tab/component.js
@ -46,10 +46,14 @@ export default Em.Component.extend({
    // TODO figure out how to convert this
    //this.xyToRgb(0.5,0.5);
    Em.$(document).click(function() {
-      if(self.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !Em.$(event.target).closest('.colorpicker, .colorRow').length) {
+      if(self.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !Em.$(event.target).closest('.colorpicker, #colorRow').length) {
        self.toggleProperty('colorPickerDisplayed');
      }
    });
+
+    Em.$(document).on('click', '#colorRow', () => {
+      this.send('toggleColorpicker');
+    });
  },

  rgb: [255, 255, 255],
--- a/app/pods/components/lights-tab/template.hbs
+++ b/app/pods/components/lights-tab/template.hbs
@ -1,23 +1,23 @@
 {{#paper-list class="lightsTab"}}
  {{#paper-item class="item"}}
-    {{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL classNames="horizontalLightGroup"}}
+    {{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL classNames="horizontalLightGroup" dimmerOn=dimmerOn}}
  {{/paper-item}}

  {{#paper-item}}
    {{paper-icon icon="power-settings-new"}}
-    <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Selected lights are turned on/off">Power</p>
+    <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip lightCtrlTooltip" data-title="Selected lights are turned on/off">Power</p>
    {{#paper-switch checked=lightsOn disabled=trial skipProxy=trial}} {{lightsOnTxt}} {{/paper-switch}}
  {{/paper-item}}

  {{#paper-item}}
    {{paper-icon icon="brightness-4"}}
-    <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Brightness level of the selected lights">Brightness</p>
+    <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip lightCtrlTooltip" data-title="Brightness level of the selected lights">Brightness</p>
    {{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}}
  {{/paper-item}}

-  {{#paper-item action=colorRowAction class="colorRow"}}
+  {{#paper-item elementId="colorRow"}}
    {{paper-icon icon="color-lens"}}
-    <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Color of the selected lights">Color</p>
+    <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip lightCtrlTooltip" data-title="Color of the selected lights">Color</p>
  {{/paper-item}}

  <div class="relative">
@ -30,13 +30,13 @@

  {{#paper-item}}
    {{paper-icon icon="flare"}}
-    <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Selected lights will flash in sequential order">Strobe</p>
+    <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip lightCtrlTooltip" data-title="Selected lights will flash in sequential order">Strobe</p>
    {{#paper-switch checked=strobeOn disabled=trial skipProxy=trial}} {{strobeOnTxt}} {{/paper-switch}}
  {{/paper-item}}

  {{#paper-item}}
    {{paper-icon icon="color-lens"}} {{paper-icon icon="loop" id="loopAddition"}}
-    <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Selected lights will slowly cycle through all the colors">Colorloop</p>
+    <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip lightCtrlTooltip" data-title="Selected lights will slowly cycle through all the colors">Colorloop</p>
    {{#paper-switch checked=colorLoopOn disabled=trial skipProxy=trial}} {{colorloopOnTxt}} {{/paper-switch}}
  {{/paper-item}}
 {{/paper-list}}
--- a/app/pods/components/music-tab/template.hbs
+++ b/app/pods/components/music-tab/template.hbs
@ -76,6 +76,8 @@
            <div class="playlistItem cursorPointer track{{index}} {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
              {{#if item.picture}}
                <img class="albumArt" src={{item.picture}}>
+              {{else}}
+                  <img class="albumArt" src="assets/images/missingArtwork.png">
              {{/if}}

              <div class="songInfo">
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@ -3,6 +3,7 @@
@import 'ember-modal-dialog/ember-modal-structure';
@import 'ember-modal-dialog/ember-modal-appearance';
@import "bower_components/font-awesome/scss/font-awesome";
+@import "fancy-speaker";

 $playerHeight: 400px;
 $playerDefaultIconColor: #BBBBBB;
@ -23,12 +24,6 @@ body {
  position: static;
 }

-body.dimmerOn {
-  .navigationItem {
-    text-shadow: $glowingText;
-  }
-}
-
 // temporary HAX...not working in FF
 md-progress-circular[md-mode=indeterminate] .md-spinner-wrapper {
  transform: none !important;
@ -166,11 +161,15 @@ md-list-item .md-no-style {
  min-height: 400px;
 }

-.lightsTab * .tooltip {
+.lightCtrlTooltip + .tooltip {
  left: -20px !important;
 }

-.colorRow * .tooltip {
+#colorRow {
+  cursor: pointer;
+}
+
+#colorRow * .tooltip {
  left: -7px !important;
 }

@ -347,6 +346,7 @@ md-toolbar {
  transition: 0.1s all ease-in-out;
 }

+
 .groupRow.selectedRow {
  background-color: #7F7F7F !important;
  color: white;
@ -367,6 +367,26 @@ md-toolbar {
  font-family: 'Open Sans', sans-serif;
 }

+.newGroup {
+  font-size: 18px;
+  min-height: 100%;
+  width: 100%;
+  padding: 10px 0 10px 10px;
+  margin: 0;
+}
+
+.newGroupRow{
+  border-style: solid;
+  border-width: 3px;
+  border-color: #f6c653 #bd6a23 #b6631f #e8ab4a;
+  background: #d79922;
+  color: black;
+}
+
+.newGroupRow:hover {
+  background-color: lighten(#d79922, 10%);
+}
+
 .groupRow:hover * .close {
  display: block;
 }
@ -659,6 +679,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
    height: 60px;
    float: left;
    margin-right: 5px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
  }
  .songInfo {
    .songTitle {
@ -794,168 +815,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
  }
 }

-// FANCY SPEAKER
-/* Variables */
-$centersize: 100px;
-$center1size: 250px;
-$bezelsize: 285px;
-$vibratesize: $centersize*1.06;
-$vibratemargin:-$vibratesize/2;
-$vibrateblurinner: 3px;
-$vibrateblurouter: 2px;

-/* Extenders */
-%base {
-  border-radius: 100%;
-}
-%rivet {
-  position: absolute;
-  height: 8px;
-  width: 8px;
-  background-color: #555;
-  border-radius: 100%;
-  box-shadow: inset 0 0 3px #000, 0 0 2px #000;
-}
-
-/* Keyframes */
-@keyframes vibrateInner {
-  50% {
-    -webkit-filter: blur($vibrateblurinner);
-    filter: blur($vibrateblurinner);
-    transform: scale(1.05);
-  }
-}
-
-@keyframes vibrateOuter {
-  0% {
-    -webkit-filter: blur($vibrateblurouter);
-    filter: blur($vibrateblurouter);
-    border: 15px solid #333;
-  }
-  30% {
-    -webkit-filter: blur(0);
-    filter: blur(0);
-    border: 17px solid #333;
-  }
-  50% {
-    -webkit-filter: blur($vibrateblurouter);
-    filter: blur($vibrateblurouter);
-    border: 15px solid #333;
-  }
-  65% {
-    -webkit-filter: blur(0);
-    filter: blur(0);
-    border: 17px solid #333;
-  }
-  70% {
-    -webkit-filter: blur($vibrateblurouter);
-    filter: blur($vibrateblurouter);
-    border: 15px solid #333;
-  }
-  80% {
-    -webkit-filter: blur($vibrateblurouter);
-    filter: blur($vibrateblurouter);
-    border: 17px solid #333;
-  }
-  100% {
-    -webkit-filter: blur($vibrateblurouter);
-    filter: blur($vibrateblurouter);
-    border: 15px solid #333;
-  }
-}
-
-#beatSpeakerCenterInner {
-  @extend %base;
-  height: $centersize;
-  width: $centersize;
-  position: absolute;
-  bottom: 60px;
-  right: 60px;
-  -webkit-filter: blur(1px);
-  filter: blur(1px);
-  background: rgb(0,0,0);
-  background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(79,79,79,1) 0%, rgba(0,0,0,1) 100%);
-  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,1)), color-stop(0%,rgba(79,79,79,1)), color-stop(100%,rgba(0,0,0,1)));
-  background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%);
-  background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%);
-  background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%);
-  background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 1);
-}
-.vibrateInner{
-  -webkit-animation: vibrateInner 0.15s linear 1;
-  animation: vibrateInner 0.15s linear 1;
-}
-#beatSpeakerCenterOuter {
-  @extend %base;
-  position: absolute;
-  top: 16px;
-  left: 16px;
-  height: $center1size;
-  width: $center1size;
-  border: 15px solid #333;
-  box-shadow: -3px -3px 15px rgba(0, 0, 0, 0.4), inset -3px -3px 15px rgba(0, 0, 0, 0.5);
-  background: -moz-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
-  background: -webkit-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
-  background: -o-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
-  background: -ms-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
-  background: linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
-}
-.vibrateOuter {
-  -webkit-animation: vibrateOuter 0.15s linear 1;
-  animation: vibrateOuter 0.15s linear 1;
-}
-.bezel {
-  @extend %base;
-  margin: 0 auto;
-  height: $bezelsize;
-  width: $bezelsize;
-  position: relative;
-  background-color: #A8A8A8;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.8), inset 0 0 30px -5px rgba(0, 0, 0, 0.8);
-  top: 50%;
-  transform: translateY(-50%);
-}
-.rivet1 {
-  @extend %rivet;
-  top: 6px;
-  left: 50%;
-}
-.rivet2 {
-  @extend %rivet;
-  bottom: 6px;
-  left: 50%;
-}
-.rivet3 {
-  @extend %rivet;
-  top: 50%;
-  left: 6px;
-}
-.rivet4 {
-  @extend %rivet;
-  top: 50%;
-  right: 6px;
-}
-.rivet5 {
-  @extend %rivet;
-  top: 18%;
-  left: 13.7%;
-}
-.rivet6 {
-  @extend %rivet;
-  top: 18%;
-  right: 13.5%;
-}
-.rivet7 {
-  @extend %rivet;
-  bottom: 17%;
-  left: 13.5%;
-}
-.rivet8 {
-  @extend %rivet;
-  bottom: 17%;
-  right: 13.5%;
-}

 #ytplayer{
  display: block;
@ -978,7 +838,6 @@ body.dimmerOn {
  background: #242424;
 }

-body.dimmerOn #bridgeInput label,
 .power-settings-new.dimmerOn,
 .brightness-4.dimmerOn,
 .color-lens.dimmerOn,
@ -1029,7 +888,7 @@ body.dimmerOn {
  position: absolute;
  top: 0;
  left: 0;
-  color: #F12B24 !important;
+  color: $secondaryThemeColor !important;
  font-size: 25px;
 }

@ -1039,6 +898,7 @@ button.md-warn {

 .ember-modal-dialog {
  padding: 20px;
+  color: black;
 }

 .addMusicButton {
@ -1051,16 +911,20 @@ button.md-warn {
  right: 0;
  left: initial;
  width: 100px;
-  top: 28px;
+  top: 30px;
 }

 .addNewMusic {
+  font-size: 16px;
  padding: 4px;
-  background: none;
-  color: $playerDefaultIconColor;
+  color: white;
  border: none;
+  text-shadow: 1px 1px 2px rgba(0,0,0,.8);
+  box-shadow: inset 1px 1px 9px rgba(135,30,10,.8),inset -1px -1px 5px rgba(181,60,2,.8);
+  border-radius: 5px;
+  background: linear-gradient(#db8e01,#871e0a);
 }

 .addNewMusic:hover {
-  color: lighten($playerDefaultIconColor, 30%);
+  background: linear-gradient(lighten(#db8e01,5%), lighten(#871e0a,5%));
 }
--- a/app/styles/fancy-speaker.scss
+++ b/app/styles/fancy-speaker.scss
@ -0,0 +1,161 @@
+/* Variables */
+$centersize: 100px;
+$center1size: 250px;
+$bezelsize: 285px;
+$vibratesize: $centersize*1.06;
+$vibratemargin:-$vibratesize/2;
+$vibrateblurinner: 3px;
+$vibrateblurouter: 2px;
+
+/* Extenders */
+%base {
+  border-radius: 100%;
+}
+%rivet {
+  position: absolute;
+  height: 8px;
+  width: 8px;
+  background-color: #555;
+  border-radius: 100%;
+  box-shadow: inset 0 0 3px #000, 0 0 2px #000;
+}
+
+/* Keyframes */
+@keyframes vibrateInner {
+  50% {
+    -webkit-filter: blur($vibrateblurinner);
+    filter: blur($vibrateblurinner);
+    transform: scale(1.05);
+  }
+}
+
+@keyframes vibrateOuter {
+  0% {
+    -webkit-filter: blur($vibrateblurouter);
+    filter: blur($vibrateblurouter);
+    border: 15px solid #333;
+  }
+  30% {
+    -webkit-filter: blur(0);
+    filter: blur(0);
+    border: 17px solid #333;
+  }
+  50% {
+    -webkit-filter: blur($vibrateblurouter);
+    filter: blur($vibrateblurouter);
+    border: 15px solid #333;
+  }
+  65% {
+    -webkit-filter: blur(0);
+    filter: blur(0);
+    border: 17px solid #333;
+  }
+  70% {
+    -webkit-filter: blur($vibrateblurouter);
+    filter: blur($vibrateblurouter);
+    border: 15px solid #333;
+  }
+  80% {
+    -webkit-filter: blur($vibrateblurouter);
+    filter: blur($vibrateblurouter);
+    border: 17px solid #333;
+  }
+  100% {
+    -webkit-filter: blur($vibrateblurouter);
+    filter: blur($vibrateblurouter);
+    border: 15px solid #333;
+  }
+}
+
+#beatSpeakerCenterInner {
+  @extend %base;
+  height: $centersize;
+  width: $centersize;
+  position: absolute;
+  bottom: 60px;
+  right: 60px;
+  -webkit-filter: blur(1px);
+  filter: blur(1px);
+  background: rgb(0,0,0);
+  background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(79,79,79,1) 0%, rgba(0,0,0,1) 100%);
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,1)), color-stop(0%,rgba(79,79,79,1)), color-stop(100%,rgba(0,0,0,1)));
+  background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%);
+  background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%);
+  background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%);
+  background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 1);
+}
+.vibrateInner{
+  -webkit-animation: vibrateInner 0.15s linear 1;
+  animation: vibrateInner 0.15s linear 1;
+}
+#beatSpeakerCenterOuter {
+  @extend %base;
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  height: $center1size;
+  width: $center1size;
+  border: 15px solid #333;
+  box-shadow: -3px -3px 15px rgba(0, 0, 0, 0.4), inset -3px -3px 15px rgba(0, 0, 0, 0.5);
+  background: -moz-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
+  background: -webkit-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
+  background: -o-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
+  background: -ms-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
+  background: linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
+}
+.vibrateOuter {
+  -webkit-animation: vibrateOuter 0.15s linear 1;
+  animation: vibrateOuter 0.15s linear 1;
+}
+.bezel {
+  @extend %base;
+  margin: 0 auto;
+  height: $bezelsize;
+  width: $bezelsize;
+  position: relative;
+  background-color: #A8A8A8;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.8), inset 0 0 30px -5px rgba(0, 0, 0, 0.8);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.rivet1 {
+  @extend %rivet;
+  top: 6px;
+  left: 50%;
+}
+.rivet2 {
+  @extend %rivet;
+  bottom: 6px;
+  left: 50%;
+}
+.rivet3 {
+  @extend %rivet;
+  top: 50%;
+  left: 6px;
+}
+.rivet4 {
+  @extend %rivet;
+  top: 50%;
+  right: 6px;
+}
+.rivet5 {
+  @extend %rivet;
+  top: 18%;
+  left: 13.7%;
+}
+.rivet6 {
+  @extend %rivet;
+  top: 18%;
+  right: 13.5%;
+}
+.rivet7 {
+  @extend %rivet;
+  bottom: 17%;
+  left: 13.5%;
+}
+.rivet8 {
+  @extend %rivet;
+  bottom: 17%;
+  right: 13.5%;
+}
--- a/assets/missingArtwork.psd
+++ b/assets/missingArtwork.psd
--- a/public/assets/images/favicon.ico
+++ b/public/assets/images/favicon.ico
--- a/public/assets/images/favicons/android-chrome-144x144.png
+++ b/public/assets/images/favicons/android-chrome-144x144.png
--- a/public/assets/images/favicons/android-chrome-192x192.png
+++ b/public/assets/images/favicons/android-chrome-192x192.png
--- a/public/assets/images/favicons/android-chrome-36x36.png
+++ b/public/assets/images/favicons/android-chrome-36x36.png
--- a/public/assets/images/favicons/android-chrome-48x48.png
+++ b/public/assets/images/favicons/android-chrome-48x48.png
--- a/public/assets/images/favicons/android-chrome-72x72.png
+++ b/public/assets/images/favicons/android-chrome-72x72.png
--- a/public/assets/images/favicons/android-chrome-96x96.png
+++ b/public/assets/images/favicons/android-chrome-96x96.png
--- a/public/assets/images/favicons/apple-touch-icon-114x114.png
+++ b/public/assets/images/favicons/apple-touch-icon-114x114.png
--- a/public/assets/images/favicons/apple-touch-icon-120x120.png
+++ b/public/assets/images/favicons/apple-touch-icon-120x120.png
--- a/public/assets/images/favicons/apple-touch-icon-144x144.png
+++ b/public/assets/images/favicons/apple-touch-icon-144x144.png
--- a/public/assets/images/favicons/apple-touch-icon-152x152.png
+++ b/public/assets/images/favicons/apple-touch-icon-152x152.png
--- a/public/assets/images/favicons/apple-touch-icon-180x180.png
+++ b/public/assets/images/favicons/apple-touch-icon-180x180.png
--- a/public/assets/images/favicons/apple-touch-icon-57x57.png
+++ b/public/assets/images/favicons/apple-touch-icon-57x57.png
--- a/public/assets/images/favicons/apple-touch-icon-60x60.png
+++ b/public/assets/images/favicons/apple-touch-icon-60x60.png
--- a/public/assets/images/favicons/apple-touch-icon-72x72.png
+++ b/public/assets/images/favicons/apple-touch-icon-72x72.png
--- a/public/assets/images/favicons/apple-touch-icon-76x76.png
+++ b/public/assets/images/favicons/apple-touch-icon-76x76.png
--- a/public/assets/images/favicons/apple-touch-icon-precomposed.png
+++ b/public/assets/images/favicons/apple-touch-icon-precomposed.png
--- a/public/assets/images/favicons/apple-touch-icon.png
+++ b/public/assets/images/favicons/apple-touch-icon.png
--- a/public/assets/images/favicons/browserconfig.xml
+++ b/public/assets/images/favicons/browserconfig.xml
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="assets\images/mstile-70x70.png"/>
+      <square150x150logo src="assets\images/mstile-150x150.png"/>
+      <square310x310logo src="assets\images/mstile-310x310.png"/>
+      <wide310x150logo src="assets\images/mstile-310x150.png"/>
+      <TileColor>#da532c</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>
--- a/public/assets/images/favicons/favicon-16x16.png
+++ b/public/assets/images/favicons/favicon-16x16.png
--- a/public/assets/images/favicons/favicon-194x194.png
+++ b/public/assets/images/favicons/favicon-194x194.png
--- a/public/assets/images/favicons/favicon-32x32.png
+++ b/public/assets/images/favicons/favicon-32x32.png
--- a/public/assets/images/favicons/favicon-96x96.png
+++ b/public/assets/images/favicons/favicon-96x96.png
--- a/public/assets/images/favicons/favicon.ico
+++ b/public/assets/images/favicons/favicon.ico
--- a/public/assets/images/favicons/manifest.json
+++ b/public/assets/images/favicons/manifest.json
@ -0,0 +1,41 @@
+{
+	"name": "Huegasm",
+	"icons": [
+		{
+			"src": "assets\\images\/android-chrome-36x36.png",
+			"sizes": "36x36",
+			"type": "image\/png",
+			"density": "0.75"
+		},
+		{
+			"src": "assets\\images\/android-chrome-48x48.png",
+			"sizes": "48x48",
+			"type": "image\/png",
+			"density": "1.0"
+		},
+		{
+			"src": "assets\\images\/android-chrome-72x72.png",
+			"sizes": "72x72",
+			"type": "image\/png",
+			"density": "1.5"
+		},
+		{
+			"src": "assets\\images\/android-chrome-96x96.png",
+			"sizes": "96x96",
+			"type": "image\/png",
+			"density": "2.0"
+		},
+		{
+			"src": "assets\\images\/android-chrome-144x144.png",
+			"sizes": "144x144",
+			"type": "image\/png",
+			"density": "3.0"
+		},
+		{
+			"src": "assets\\images\/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image\/png",
+			"density": "4.0"
+		}
+	]
+}
--- a/public/assets/images/favicons/mstile-144x144.png
+++ b/public/assets/images/favicons/mstile-144x144.png
--- a/public/assets/images/favicons/mstile-150x150.png
+++ b/public/assets/images/favicons/mstile-150x150.png
--- a/public/assets/images/favicons/mstile-310x150.png
+++ b/public/assets/images/favicons/mstile-310x150.png
--- a/public/assets/images/favicons/mstile-310x310.png
+++ b/public/assets/images/favicons/mstile-310x310.png
--- a/public/assets/images/favicons/mstile-70x70.png
+++ b/public/assets/images/favicons/mstile-70x70.png
--- a/public/assets/images/favicons/safari-pinned-tab.svg
+++ b/public/assets/images/favicons/safari-pinned-tab.svg
@ -0,0 +1,29 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="260.000000pt" height="260.000000pt" viewBox="0 0 260.000000 260.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,260.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M940 2554 c-335 -29 -443 -59 -540 -150 -91 -85 -129 -211 -100 -335
+13 -56 138 -309 170 -344 43 -48 146 -350 179 -525 11 -63 27 -186 35 -272 16
+-170 24 -194 81 -250 l37 -36 2 -148 c3 -177 10 -197 96 -276 189 -173 188
+-173 395 -173 186 0 226 9 287 65 24 21 69 62 101 92 33 29 65 64 72 79 25 48
+55 193 58 280 2 84 3 87 35 114 36 30 66 82 76 130 3 17 11 91 17 165 16 198
+66 426 133 606 31 83 56 158 56 167 0 9 -7 23 -16 31 -14 14 -68 16 -444 16
+-247 0 -439 -4 -454 -10 -49 -18 -50 -39 -8 -164 21 -63 45 -122 52 -131 10
+-13 46 -15 236 -15 123 0 224 -3 224 -8 0 -4 -13 -68 -30 -143 -16 -74 -35
+-196 -43 -271 l-13 -136 -47 -49 c-29 -29 -52 -63 -58 -88 -6 -22 -17 -57 -25
+-77 -8 -21 -13 -73 -12 -125 1 -109 -5 -128 -41 -143 -16 -6 -41 -25 -57 -41
+-25 -26 -34 -29 -94 -29 -60 0 -69 3 -94 29 -16 16 -42 35 -58 42 l-30 12 5
+76 c3 42 1 96 -4 121 -30 164 -29 160 -85 221 -51 55 -54 62 -54 110 0 125
+-59 428 -117 599 -19 58 -86 209 -149 336 -63 127 -114 236 -114 242 0 40 153
+68 458 84 251 13 535 2 755 -28 150 -21 178 -31 202 -77 11 -20 28 -40 38 -43
+28 -9 209 54 235 83 26 28 23 50 -14 128 -71 152 -171 200 -502 241 -121 15
+-719 28 -832 18z"/>
+</g>
+</svg>
--- a/public/assets/images/lights/a19w.svg
+++ b/public/assets/images/lights/a19w.svg
@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
+	 height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<rect display="inline" width="500" height="500"/>
+</g>
+<g id="Layer_2">
+	<g>
+		<polyline fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" points="341.939,163.139 247.72,163.139 
+			246.876,163.139 158.423,163.139 		"/>
+		<polyline fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" points="300.502,364.005 248.822,364.005 
+			248.376,364.005 199.884,364.005 		"/>
+		
+			<polyline fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+			304.533,379.239 248.705,384.044 248.212,384.067 195.853,388.567 		"/>
+		
+			<polyline fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+			305.307,395.106 249.525,399.888 249.033,399.958 196.673,404.435 		"/>
+		
+			<polyline fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+			304.533,410.974 248.705,415.755 248.212,415.802 195.853,420.302 		"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M342.314,163.139
+			c0,0,12.234-21.234,26.039-61.078c4.781-14.344,6.398-32.953-19.664-45.703c-22.734-11.133-69.75-16.969-97.922-16.477
+			c-28.219-0.492-75.234,5.344-97.969,16.477c-26.062,12.75-24.469,31.359-19.688,45.703c13.828,39.844,26.062,61.078,26.062,61.078
+			c29.766,93.003,27.633,183.851,27.633,183.851l14.883,17.016c0,0,0,55.781,0,63.211s11.672,12.773,20.695,14.883
+			c1.594,3.188,6.398,8.508,11.695,14.344c7.125,2.391,26.204,2.391,33.329,0c5.297-5.836,10.078-11.156,11.672-14.344
+			c9.047-2.109,20.742-7.453,20.742-14.883s0-63.211,0-63.211l14.883-17.016C314.705,346.989,312.549,256.142,342.314,163.139z"/>
+	</g>
+</g>
+</svg>
--- a/public/assets/images/lights/br30w.svg
+++ b/public/assets/images/lights/br30w.svg
@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
+	 height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<rect display="inline" width="500" height="500"/>
+</g>
+<g id="Layer_2">
+	<g>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M276.748,445.245c0,0-4.406,6.281-6,8.625
+			c-1.57,2.344-3.047,9.586-20.602,9h0.023c-17.555,0.586-18.984-6.656-20.578-9c-1.547-2.344-7.078-8.273-7.078-8.273"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M250.17,377.042c0,0,36.844,0.422,40.969-3.188
+			c4.383-3.844,5.25-15.539,5.25-15.539s3.516-82.336,17.391-114.746c12.656-29.695,36.188-58.852,36.188-58.852
+			s24.234-4.711,35.25-34.945c11.016-30.211,12.094-47.367,12.094-47.367H247.709H101.436c0,0,1.125,17.156,12.117,47.367
+			c11.016,30.234,35.297,34.945,35.297,34.945s23.484,29.156,36.164,58.852c13.875,32.41,17.391,114.746,17.391,114.746
+			s0.891,11.695,5.297,15.539C211.779,377.464,250.17,377.042,250.17,377.042z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M98.881,87.405h302.273
+			c0,0,8.531-54.352-151.734-54.352S98.881,87.405,98.881,87.405z"/>
+		<polyline fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" points="113.951,60.265 246.654,60.265 
+			385.381,60.265 		"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M148.029,184.858
+			c0,0,52.711,8.648,101.367,8.648c48.633,0,101.391-8.648,101.391-8.648"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M207.396,386.815"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M206.646,386.136"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M209.154,424.784
+			c1.125,0.984,2.203,5.367,0.094,7.195c-2.133,1.758,0,3.164,0,3.164c0.117,1.992,18.914,2.414,41.953,0.938
+			c21.609-1.383,39.258-4.008,41.273-5.977c0,0,1.875-2.578,0-3.797c-1.852-1.242-4.172-4.289-2.812-6.844"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M210.795,412.573
+			c0.281,2.438,1.547,5.062-3.188,8.227c-2.344,1.523,0,3.164,0,3.164c4.734,2.344,18.891,2.438,41.953,0.938
+			c21.562-1.383,39.258-3.984,41.297-5.953c0,0,1.828-2.578,0-3.797c-1.875-1.266-3.094-4.219-2.859-6.867"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M210.795,400.737
+			c0.281,2.461,1.547,5.086-3.188,8.227c-2.344,1.523,0,3.188,0,3.188c4.734,2.32,18.891,2.391,41.953,0.938
+			c21.562-1.406,39.258-4.008,41.297-6c0,0,1.828-2.531,0-3.773c-1.875-1.242-3.094-4.219-2.859-6.891"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M210.795,388.597
+			c0.281,2.461,1.547,5.086-3.188,8.203c-2.344,1.523,0,3.211,0,3.211c4.734,2.297,18.891,2.438,41.953,0.938
+			c21.562-1.406,39.258-3.984,41.297-5.977c0,0,1.828-2.555,0-3.82c-1.875-1.219-3.094-4.195-2.859-6.844"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M212.576,436.995c0,0,1.594,7.312,12.141,9.047
+			c10.547,1.781,17.672,1.359,24.375,1.359s13.828,0.188,24.422-1.359c12.047-1.734,14.812-14.391,14.812-14.391"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M290.998,375.964c0,0,0,6.727-1.008,7.711
+			c-1.008,1.031-3.352,1.242-3.352,1.242s-74.859,5.484-78.328,2.836c-2.062-1.523-1.758-11.789-1.758-11.789"/>
+		
+			<line fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" x1="137.436" y1="87.405" x2="143.365" y2="100.483"/>
+		
+			<line fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" x1="361.732" y1="87.405" x2="355.826" y2="100.483"/>
+	</g>
+</g>
+</svg>
--- a/public/assets/images/lights/gu10w.svg
+++ b/public/assets/images/lights/gu10w.svg
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
+	 height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<rect display="inline" width="500" height="500"/>
+</g>
+<g id="Layer_2">
+	<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M251.452,55.93
+		c-4.196,0-88.923-0.258-129.892,8.508v12c0,0,3.984,3.492,10.992,4.992c0,0,0.516,95.555,13.008,134.555
+		c12.516,39,18,40.523,27.516,50.015c9.516,9.516,20.508,20.016,20.508,40.5c0,20.531,0,84.047,0,84.047l23.508,19.5h3v14.508
+		h-6.984v15.516h26.484v-15.516h-6v-15.023h17.672h0.353h17.649v15.023h-6v15.516h26.531v-15.516h-7.031v-14.508h3l23.531-19.5
+		c0,0,0-63.516,0-84.047c0-20.484,10.992-30.984,20.484-40.5c9.516-9.492,15.023-11.016,27.516-50.015
+		c12.516-39,13.031-134.555,13.031-134.555c6.984-1.5,10.992-4.992,10.992-4.992v-12C340.352,55.672,255.625,55.93,251.452,55.93z"
+		/>
+</g>
+</svg>
--- a/public/assets/images/lights/huegow.svg
+++ b/public/assets/images/lights/huegow.svg
@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
+	 height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<rect display="inline" width="500" height="500"/>
+</g>
+<g id="Layer_2">
+	<g>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-linecap="round" stroke-miterlimit="10" d="M185.782,359.98
+			c-4.172,5.203-10.594,8.531-17.766,8.531c-12.562,0-22.734-10.172-22.734-22.734c0-1.922,0.234-3.797,0.703-5.578"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-linecap="round" stroke-miterlimit="10" d="M444.813,174.026
+			c0,106.829-86.625,197.345-193.453,197.345c-38.86,0-75.047-11.438-105.375-31.172c-53.016-34.5-88.078-99.423-88.078-167.392"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M251.501,126.073
+			c106.828,0.328,193.359,21.797,193.312,47.953c-0.094,26.062-86.766,47.016-193.594,46.688
+			c-106.829-0.281-193.36-21.75-193.313-47.906C58,146.698,144.625,125.745,251.501,126.073z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M251.454,131.417
+			c98.203,0.281,177.75,16.969,177.703,37.266c-0.141,20.344-79.734,36.609-177.891,36.328
+			c-98.204-0.281-177.75-16.969-177.704-37.312C73.61,147.401,153.297,131.089,251.454,131.417z"/>
+	</g>
+</g>
+</svg>
--- a/public/assets/images/lights/lc_auraw.svg
+++ b/public/assets/images/lights/lc_auraw.svg
@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
+	 height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<rect display="inline" width="500" height="500"/>
+</g>
+<g id="Layer_2">
+	<g>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M114.314,82.195
+			c26.32-1.031,66.891,15.984,120.938,54.375c18,12.844,85.828,65.906,132.093,124.313c36.234,44.25,72.211,104.344,53.719,129.469
+			c-4.453,5.719-18.516,15.703-67.359-5.438c-48.891-21.094-105-65.766-139.148-97.641c-28.266-25.266-70.43-69.891-105.023-126.141
+			C94.58,134.742,72.97,83.695,114.314,82.195z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M421.063,390.352
+			c-4.453,5.719-18.516,15.703-67.359-5.438c-48.891-21.094-105-65.766-139.148-97.641c-28.266-25.266-70.43-69.891-105.023-126.141
+			c-11.695-20.625-27.422-56.344-14.062-71.625c-8.18,9.328-8.531,21.75-2.789,44.812c5.789,23.109,18.586,78.75,20.766,89.578
+			c2.203,10.734,18.211,59.907,13.945,99.329c-3.141,22.312-0.281,35.625,9.938,44.859c10.219,9.281,13.125,12.094,57,7.734
+			c21.938-2.25,29.438-2.906,91.593,7.312c53.766,9.188,94.312,16.734,106.148,16.453S413.376,399.117,421.063,390.352z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M145.392,119.929
+			c20.203-0.797,51.328,12.328,92.766,41.672c13.781,9.891,65.789,50.578,101.273,95.391
+			c27.773,33.891,56.789,83.016,42.633,102.328c-3.422,4.312-19.031,16.734-56.484,0.516c-37.477-16.125-84.281-54-110.46-78.422
+			c-21.68-19.406-54.258-53.954-80.789-97.079C122.892,164.132,113.705,121.054,145.392,119.929z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M192.267,185.601
+			c10.406-0.422,26.484,6.422,47.953,21.75c7.125,5.156,34.007,26.391,52.382,49.735c14.367,17.672,29.391,43.266,22.055,53.297
+			c-1.781,2.25-9.844,8.719-29.203,0.328c-19.383-8.438-43.593-28.219-57.14-40.969c-11.203-10.125-28.055-28.079-41.789-50.579
+			C180.595,208.617,175.861,186.164,192.267,185.601z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M114.08,226.57
+			c10.477,21.047,24,50.344,68.906,92.344c44.906,42.047,81.609,57.703,99.07,63.562"/>
+	</g>
+</g>
+</svg>
--- a/public/assets/images/lights/lc_bloomw.svg
+++ b/public/assets/images/lights/lc_bloomw.svg
@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
+	 height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<rect display="inline" width="500" height="500"/>
+</g>
+<g id="Layer_2">
+	<g>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M287.609,219.602
+			c32.25,29.578,49.617,63.141,38.719,75c-10.852,11.859-45.844-2.484-78.091-32.109c-32.273-29.578-49.594-63.188-38.719-75.094
+			C220.393,175.539,255.338,189.93,287.609,219.602z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M299.422,203.102
+			c54.656,50.203,84.516,106.594,66.656,126.094c-17.859,19.453-76.641-5.344-131.341-55.5
+			c-54.656-50.109-84.516-106.641-66.656-126.094C185.94,128.102,244.721,152.945,299.422,203.102z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M313.953,187.445
+			c75.984,69.703,117.422,148.125,92.625,175.219c-24.844,27.047-106.547-7.453-182.529-77.156
+			c-75.961-69.656-117.445-148.125-92.625-175.219C156.245,83.242,237.948,117.789,313.953,187.445z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M149.752,298.773
+			c0,0-39.656-40.125-45.422-108.609c-3.211-33.938,12.844-87.844,37.078-92.156c24.305-4.312,38.391,2.203,61.406,11.203
+			c0,0,44.016,19.078,100.263,66.047c56.203,46.969,94.5,102.891,111.844,146.156c1.969,4.828,12.469,28.781,0.188,45.656
+			c-3.492,4.781-17.906,15-22.594,16.969c-5.719,2.391-20.578,11.625-57.234,15.656c0,0-45.422,6.422-104.623-29.719
+			c0,0-3.844,7.031-6.047,10.219c-2.25,3.188-48.633,11.859-87,8.016c-38.391-3.844-55.031-13.781-55.031-13.781s-1.266,0,0-2.578
+			C83.846,369.32,149.752,298.773,149.752,298.773z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M149.752,298.773
+			c0,0,39.656,48.609,80.906,71.203"/>
+	</g>
+</g>
+</svg>
--- a/public/assets/images/lights/lc_irisw.svg
+++ b/public/assets/images/lights/lc_irisw.svg
@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
+	 height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<rect display="inline" width="500" height="500"/>
+</g>
+<g id="Layer_2">
+	<g>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M441.079,276.902
+			c-11.391,22.406-65.766,30-182.438-56.388c-59.576-46.547-97.919-101.297-98.904-133.031c0.047-5.812,0.188-14.156,7.5-20.156
+			c-26.297,23.531-115.406,123-103.828,222.56c11.625,99.656,102.234,142.125,144.281,147.234
+			c26.625,3.188,57.326,0.047,86.294-11.625C355.438,400.793,414.267,339.105,441.079,276.902z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M365.61,232.936
+			c-5.672,11.203-32.859,13.875-91.219-29.297c-29.857-23.344-46.873-45.281-47.435-63.328c0.047-4.969-1.828-17.578,15.938-17.812
+			c18.513,0.234,49.357,13.125,82.732,42.047C342.735,177.999,375.501,211.092,365.61,232.936z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M195.597,59.827
+			c36.984,0.562,98.763,26.25,165.513,84.234c56.953,48.562,92.344,105.937,79.969,132.935
+			c-11.391,22.406-65.766,30.047-182.484-56.388c-59.576-46.594-97.966-101.344-98.951-133.125
+			C159.738,77.639,160.113,60.342,195.597,59.827z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M136.535,348.434
+			c-2.766-0.094-5.344,0.516-7.734,2.062c-4.969,3.422-9.094,17.203,6.469,29.812c15.609,12.562,32.672,18.938,41.859,11.578
+			c3.656-2.953,3.516-7.172,1.219-11.812 M172.16,267.434c-7.406,24.047-14.766,62.625-40.594,85.875
+			c-1.359,6.375,0,16.969,11.203,24.75c11.203,7.828,19.594,11.625,30.75,8.812c3.422-6.609,40.406-51.891,76.64-60.234
+			 M102.785,147.483c1.031,15.703,9.094,77.812,106.5,151.169c96.091,72.422,154.169,71.203,178.732,58.641"/>
+	</g>
+</g>
+</svg>
--- a/public/assets/images/lights/lightstripw.svg
+++ b/public/assets/images/lights/lightstripw.svg
@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
+	 height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<rect display="inline" width="500" height="500"/>
+</g>
+<g id="Layer_2">
+	<g>
+		<path fill="none" stroke="#FFFFFF" stroke-width="6.9898" stroke-miterlimit="10" d="M404.109,402.393v-64.711H186.448
+			c0,0-92.288,2.23-92.288-61.205c0,57.201,0,59.703,0,59.703s-2.002,66.213,95.292,66.213
+			C266.178,402.393,404.109,402.393,404.109,402.393z"/>
+		
+			<rect x="127.516" y="116.977" fill="none" stroke="#FFFFFF" stroke-width="6.9898" stroke-miterlimit="10" width="15.563" height="15.518"/>
+		
+			<rect x="187.722" y="116.977" fill="none" stroke="#FFFFFF" stroke-width="6.9898" stroke-miterlimit="10" width="15.563" height="15.518"/>
+		
+			<rect x="247.926" y="116.977" fill="none" stroke="#FFFFFF" stroke-width="6.9898" stroke-miterlimit="10" width="15.499" height="15.518"/>
+		
+			<rect x="308.09" y="116.977" fill="none" stroke="#FFFFFF" stroke-width="6.9898" stroke-miterlimit="10" width="15.541" height="15.518"/>
+		<polygon fill="none" stroke="#FFFFFF" stroke-width="6.9898" stroke-miterlimit="10" points="380.354,149.172 366.339,142.506 
+			366.111,126.192 380.127,132.836 		"/>
+		
+			<rect x="361.311" y="365.078" fill="none" stroke="#FFFFFF" stroke-width="6.9898" stroke-miterlimit="10" width="15.54" height="15.562"/>
+		
+			<rect x="301.104" y="365.078" fill="none" stroke="#FFFFFF" stroke-width="6.9898" stroke-miterlimit="10" width="15.54" height="15.562"/>
+		
+			<rect x="240.919" y="365.078" fill="none" stroke="#FFFFFF" stroke-width="6.9898" stroke-miterlimit="10" width="15.566" height="15.562"/>
+		
+			<rect x="180.737" y="365.078" fill="none" stroke="#FFFFFF" stroke-width="6.9898" stroke-miterlimit="10" width="15.563" height="15.562"/>
+		<polygon fill="none" stroke="#FFFFFF" stroke-width="6.9898" stroke-miterlimit="10" points="130.884,350.697 144.945,357.342 
+			144.809,373.678 130.748,367.035 		"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="6.9898" stroke-miterlimit="10" d="M94.114,91.924v64.666h217.707
+			c0,0,83.278-5.506,92.288,61.207c0-57.18,0-59.705,0-59.705s2.002-66.168-95.291-66.168
+			C232.045,91.924,94.114,91.924,94.114,91.924z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="6.9898" stroke-miterlimit="10" d="M129.382,326.67
+			c0.819-11.195,7.281-26.826,34.494-35.654c20.068-6.508,139.185-13.289,139.185-13.289s97.498-1.25,100.911-60.75
+			c-3.709-25.414-18.293-40.182-34.812-48.76c-0.5,11.832-6.735,28.146-34.768,35.041c-38.612,9.51-139.208,13.287-139.208,13.287
+			s-98.659-1.684-100.957,61.728C94.934,303.779,110.906,318.342,129.382,326.67z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="6.9898" stroke-miterlimit="10" d="M94.16,279.957
+			c0,0.182-0.045,0.342-0.045,0.547c0,0.158,0.045,0.295,0.045,0.477C94.16,280.617,94.16,280.299,94.16,279.957z"/>
+	</g>
+</g>
+</svg>
--- a/public/assets/images/lights/storylightw.svg
+++ b/public/assets/images/lights/storylightw.svg
@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
+	 height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<rect display="inline" width="500" height="500"/>
+</g>
+<g id="Layer_2">
+	<g>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M249.167,347.182
+			c46.219,49.922,139.031,114.234,209.227,74.719c49.617-28.172,21.727-114.234-6.75-152.016
+			c-38.648-52.129-67.758-73.879-84.258-84.004c-2.602-2.016-7.875-5.203-1.852-5.203c6,0,35.156,3.188,34.969-29.672
+			c-0.211-32.906-39.305-77.25-78.961-95.906c-39.68-18.609-72.375-6.562-66.188,25.359c6.188,32.016,34.219,59.438,46.828,69.797
+			c2.625,2.438,5.812,6-1.312,3.938c-7.172-2.062-41.766-9.984-65.812-2.25c-24.094,7.688-32.156,21.234-35.156,25.172
+			c-0.188,1.547-2.836,4.5-5.086-1.5s-16.359-48.094-68.062-78.188C96.026,79.521,50.229,66.208,23.534,91.943
+			s9.398,84.234,32.344,102.281s76.898,57.895,124.828,32.907c2.836-1.312,8.086-6.563,9.023,2.813
+			C190.667,239.367,196.128,288.588,249.167,347.182z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M176.792,229.006
+			c-1.734,22.175-12.984,95.16,64.828,169.597c77.859,74.438,188.531,62.203,227.016,15.656"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M210.917,363.447
+			c-8.859,7.969-31.406,30.562-33.703,32.766c-2.25,2.297-15.469,11.859-3.656,19.172c11.859,7.359,30.984,15.75,70.805,14.953
+			c8.461,0,24.375-1.734,33.633-4.219"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M176.464,396.916
+			c5.859,6.656,19.172,24.188,85.734,18.891"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M235.62,161.927
+			c-27.094,9.562-83.109,78.284,40.594,201.52c36.867,32.156,126.727,88.922,180.891,44.578
+			c54.117-44.391-14.297-139.172-25.594-153.047c-5.766-7.125-31.781-40.551-71.438-66.192
+			C322.245,164.318,269.37,148.896,235.62,161.927z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M251.183,193.99
+			c-21.797,7.734-66.891,63.051,32.672,162.239c29.672,25.828,101.977,71.484,145.547,35.812
+			c43.594-35.719-11.484-111.984-20.578-123.188c-4.641-5.719-25.547-32.627-57.492-53.254
+			C320.909,195.912,278.37,183.49,251.183,193.99z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M52.011,92.13
+			c-17.812,5.391-49.875,36.516,20.953,100.5c20.016,15.984,68.977,44.393,98.414,22.219c29.461-22.172-4.734-69.188-10.898-76.172
+			c-3.117-3.562-20.297-20.578-41.883-33.375C97.995,93.115,70.386,85.662,52.011,92.13z"/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="4.8" stroke-miterlimit="10" d="M282.894,58.943
+			c-16.57,4.172-30.914,30.516,20.508,80.297c14.531,12.516,55.969,40.5,77.344,23.25c21.375-17.297-8.062-55.969-12.867-61.078
+			c-4.055-4.312-17.039-18.562-32.695-28.547C320.229,63.349,296.229,53.88,282.894,58.943z"/>
+	</g>
+</g>
+</svg>
--- a/public/assets/images/missingArtwork.png
+++ b/public/assets/images/missingArtwork.png