Added color and brightness effects

js/Sprite.js

@@ -90,6 +90,12 @@ var Sprite = function(data) {
     this.instrument = 1;
 
     // Filter effects
+    this.colorFilterEffect = 0;
+    this.fisheyeFilterEffect = 0;
+    this.whirlFilterEffect = 0;
+    this.pixelateFilterEffect = 0;
+    this.mosaicFilterEffect = 0;
+    this.brightnessFilterEffect = 0;
     this.ghostFilterEffect = 0;
 
     // Incremented when images are loaded by the browser.
@@ -300,7 +306,10 @@ Sprite.prototype.updateTransform = function() {
     $(this.mesh).css('-o-transform-origin', rotationCenterX + 'px ' + rotationCenterY + 'px'); 
     $(this.mesh).css('transform-origin', rotationCenterX + 'px ' + rotationCenterY + 'px');
     
-    $(this.mesh).css('opacity', ((100 - this.ghostFilterEffect) / 100));
+    $(this.mesh).css('opacity', (1 - (this.ghostFilterEffect) / 100));
+    $(this.mesh).css('-webkit-filter', 
+                'hue-rotate(' + ((this.colorFilterEffect % 200) * 1.8) + 'deg) \
+                brightness(' + ((this.brightnessFilterEffect / 100) + 1) + ')');
 
     // Don't forget to update the talk bubble.
     if (this.talkBubble) {
@@ -461,3 +470,14 @@ Sprite.prototype.soundNamed = function(name) {
         return runtime.stage.sounds[name];
     return null;
 }
+
+Sprite.prototype.resetFilters = function() {
+    this.colorFilterEffect = 0;
+    this.fisheyeFilterEffect = 0;
+    this.whirlFilterEffect = 0;
+    this.pixelateFilterEffect = 0;
+    this.mosaicFilterEffect = 0;
+    this.brightnessFilterEffect = 0;
+    this.ghostFilterEffect = 0;
+    this.updateTransform();
+}

js/primitives/LooksPrims.js

@@ -168,8 +168,7 @@ LooksPrims.prototype.primSetEffect = function(b) {
 }
 
 LooksPrims.prototype.primClearEffects = function(b) {
-    var s = interp.targetSprite();
-    s.ghostFilterEffect = 0;
+    interp.targetSprite().resetFilters();
 }
 
 var showBubble = function(b, type) {