Add canvas background switcher

A quick integration to make our minds on different backgrounds and ask
for feedback

css/style.css

@@ -72,7 +72,7 @@ body {
 }
 
 .canvas-container .canvas-background {
-  background: url(../img/medium_canvas_background.png) repeat;
+  background: url(../img/canvas_background/medium_canvas_background.png) repeat;
   position: absolute;
   top: 0;
   right: 0;
@@ -80,6 +80,23 @@ body {
   left: 0;
 }
 
+.light-canvas-background .canvas-background {
+  background: url(../img/canvas_background/light_canvas_background.png) repeat;
+}
+
+.medium-canvas-background .canvas-background {
+  background: url(../img/canvas_background/medium_canvas_background.png) repeat;
+}
+
+.lowcont-medium-canvas-background .canvas-background {
+  background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat;
+}
+
+.lowcont-dark-canvas-background .canvas-background {
+  background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat;
+}
+
+
 .canvas.canvas-overlay {
   position: absolute;
   top: 0;

index.html

@@ -38,6 +38,15 @@
           <label for="show-grid">Show grid</label>
         </div>
       </div>
+      <div style="float: left; margin-top: 20px; color: #fff;">
+        Canvas background:
+        <select id="canvas-picker" style="width:100px;">
+          <option value="light-canvas-background">Light</option>
+          <option value="lowcont-medium-canvas-background">Medium - low contrast</option>
+          <option value="medium-canvas-background" selected="selected">Medium - high contrast</option>
+          <option value="lowcont-dark-canvas-background">Dark - low constrast</option>
+        </select>
+      </div>
     </div>
   </div>
 

js/piskel.js

@@ -70,6 +70,13 @@ $.namespace("pskl");
       $('body').tooltip({
         selector: '[rel=tooltip]'
       });
+
+      $('#canvas-picker').change(function(evt) {
+        $('#canvas-picker option:selected').each(function() {
+            console.log($(this).val());
+            $('html')[0].className = $(this).val();
+        });
+      });
     },
 
     render : function (delta) {