Added tmp layer

The temporary layer (tmp layer) will store selections while the user decides where to put them, so that content below it doesn't get overridden.

css/pixel-editor.scss

@@ -63,6 +63,11 @@ svg {
   background:transparent;
 }
 
+#tmp-canvas {
+  z-index:1;
+  background:transparent;
+}
+
 #vfx-canvas {
   z-index:-5000;
   background:transparent;

js/_layer.js

@@ -1,3 +1,10 @@
+/** TODO LIST FOR LAYERS
+    - move the tmp layer so that it's always right below the active layer
+    - when the move tool is selected (to move a selection), the tmp layer must be put right above the 
+        active layer to show a preview
+*/
+
+
 /** Handler class for a single canvas (a single layer)
  *
  * @param width Canvas width

js/_newPixel.js

@@ -12,6 +12,9 @@ function newPixel (width, height, palette) {
     VFXLayer = new Layer(width, height, VFXCanvas);
     VFXLayer.initialize();
 
+    TMPLayer = new Layer(width, height, TMPCanvas);
+    TMPLayer.initialize();
+
 	canvasSize = currentLayer.canvasSize;
 
 	// Adding the first layer and the checkerboard to the list of layers

js/_variables.js

@@ -41,4 +41,9 @@ var currentLayer;
 // VFX layer used to draw previews of the selection and things like that
 var VFXLayer;
 // VFX canvas
-var VFXCanvas = document.getElementById("vfx-canvas");
+var VFXCanvas = document.getElementById("vfx-canvas");
+
+// TMP layer
+var TMPLayer;
+// TMP canvas
+var TMPCanvas = document.getElementById("tmp-canvas");

views/pixel-editor.hbs

@@ -104,6 +104,7 @@
 
     <div id="canvas-view">
         <canvas id="vfx-canvas" class = "drawingCanvas"></canvas>
+        <canvas id = "tmp-canvas" class = "drawingCanvas"></canvas>
         <canvas id="pixel-canvas" class = "drawingCanvas"></canvas>
         <canvas id="checkerboard" class = "drawingCanvas"></canvas>
     </div>