Add Halloween vignette

css/hues-h.css

@@ -196,4 +196,12 @@
     bottom: 0px;
     width:358px;
     height: 284px;
+}
+
+.hues-h-vignette {
+    background-image: url("../img/vignette.png");
+    background-size: 100% 100%;
+    width: 100%;
+    height: 100%;
+    position: absolute;
 }

js/HuesCore.js

@@ -460,6 +460,7 @@ HuesCore.prototype.setInvert = function(invert) {
         document.documentElement.style.filter = "";
         document.documentElement.style.webkitFilter = "";
     }
+    this.userInterface.invert(invert);
 }
 
 HuesCore.prototype.toggleInvert = function() {

js/HuesUI.js

@@ -188,6 +188,7 @@ HuesUI.prototype.resize = function() {};
 HuesUI.prototype.modeUpdated = function() {};
 HuesUI.prototype.beat = function() {};
 HuesUI.prototype.updateVolume = function(vol) {};
+HuesUI.prototype.invert = function(invert) {};
 
 HuesUI.prototype.setSongText = function() {
     var song = this.core.currentSong;
@@ -979,6 +980,10 @@ HalloweenUI.prototype.initUI = function() {
     var rightHand = document.createElement("div");
     rightHand.className = "hues-h-right-hand";
     this.beatBar.appendChild(rightHand);
+    
+    this.vignette = document.createElement("div");
+    this.vignette.className = "hues-h-vignette";
+    this.root.appendChild(this.vignette);
 }
 
 HalloweenUI.prototype.beat = function() {
@@ -991,6 +996,16 @@ HalloweenUI.prototype.beat = function() {
     }
 }
 
+HalloweenUI.prototype.invert = function(invert) {
+    if(invert) {
+        this.vignette.style.filter = "invert(100%)";
+        this.vignette.style.webkitFilter = "invert(100%)";
+    } else {
+        this.vignette.style.filter = "";
+        this.vignette.style.webkitFilter = "";
+    }
+};
+
 // Positions and angles for the Xmas lights
 var xleft = [
     {"angle": 122.529582194, "x": 19.4, "y": -19.35},