Finished commenting the editor

Also cleaned a few things, removed some unused variables

js/_layer.js

@@ -1,31 +1,27 @@
-/** TODO LIST FOR LAYERS
-
-    GENERAL REQUIREMENTS:
-    - Saving the state of an artwork to a .lospec file so that people can work on it later keeping
-      the layers they created? That'd be cool, even for the app users, that could just double click on a lospec
-      file for it to be opened right in the pixel editor
-
-    OPTIONAL:
-
-    1 - Fix issues
-*/
-
+// HTML element that contains the layer entries
 let layerList;
+// A single layer entry (used as a prototype to create the new ones)
 let layerListEntry;
-
+// NEXTPULL: remove the drag n drop system and use Sortable.js instead
 let layerDragSource = null;
 
+// Number of layers at the beginning
 let layerCount = 1;
+// Current max z index (so that I know which z-index to assign to new layers)
 let maxZIndex = 3;
 
+// When a layer is deleted, its id is added to this array and can be reused
 let unusedIDs = [];
+// Id for the next added layer
 let currentID = layerCount;
-let idToDelete;
+// Layer menu
 let layerOptions = document.getElementById("layer-properties-menu");
-
+// Is the user currently renaming a layer?
 let isRenamingLayer = false;
+// I need to save this, trust me
 let oldLayerName = null;
 
+// Binding the add layer button to the function
 on('click',"add-layer-button", addLayer, false);
 
 /** Handler class for a single canvas (a single layer)
@@ -54,6 +50,7 @@ class Layer {
 
         this.id = "layer" + id;
 
+        // Binding the events
         if (menuEntry != null) {
             this.name = menuEntry.getElementsByTagName("p")[0].innerHTML;
             menuEntry.id = "layer" + id;
@@ -78,20 +75,13 @@ class Layer {
 
     // Initializes the canvas
     initialize() {
-        /*
-        var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75);
-        var maxVerticalZoom = Math.floor(window.innerHeight/this.canvasSize[1]*0.75);
-
-        zoom = Math.min(maxHorizontalZoom,maxVerticalZoom);
-        if (zoom < 1) zoom = 1;
-        */
         //resize canvas
         this.canvas.width = this.canvasSize[0];
         this.canvas.height = this.canvasSize[1];
         this.canvas.style.width = (this.canvas.width*zoom)+'px';
         this.canvas.style.height = (this.canvas.height*zoom)+'px';
 
-        //unhide canvas
+        //show canvas
         this.canvas.style.display = 'block';
 
         //center canvas in window
@@ -103,7 +93,7 @@ class Layer {
     }
 
     hover() {
-        // Hide all the layers but the current one
+        // Hides all the layers but the current one
         for (let i=1; i<layers.length - nAppLayers; i++) {
             if (layers[i] !== this) {
                 layers[i].canvas.style.opacity = 0.3;
@@ -112,7 +102,7 @@ class Layer {
     }
 
     unhover() {
-        // Show all the layers again
+        // Shows all the layers again
         for (let i=1; i<layers.length - nAppLayers; i++) {
             if (layers[i] !== this) {
                 layers[i].canvas.style.opacity = 1;
@@ -127,6 +117,7 @@ class Layer {
         }
     }
 
+    // NEXTPULL: remove this
     layerDragStart(element) {
         layerDragSource = this;
         element.dataTransfer.effectAllowed = 'move';
@@ -135,6 +126,7 @@ class Layer {
         this.classList.add('dragElem');
     }
 
+    // NEXTPULL: remove this
     layerDragOver(element) {
         if (element.preventDefault) {
             element.preventDefault(); // Necessary. Allows us to drop.
@@ -146,10 +138,12 @@ class Layer {
         return false;
     }
 
+    // NEXTPULL: remove this
     layerDragLeave(element) {
         this.classList.remove('layerdragover');
     }
 
+    // NEXTPULL: remove this
     layerDragDrop(element) {
         if (element.stopPropagation) {
             element.stopPropagation(); // Stops some browsers from redirecting.
@@ -169,6 +163,7 @@ class Layer {
         return false;
     }
 
+    // NEXTPULL: remove this
     layerDragEnd(element) {
         this.classList.remove('layerdragover');
     }
@@ -217,20 +212,20 @@ class Layer {
 
     openOptionsMenu(event) {
         if (event.which == 3) {
+            let selectedId;
             let target = event.target;
-            let offsets = getElementAbsolutePosition(this);
 
             while (target != null && target.classList != null && !target.classList.contains("layers-menu-entry")) {
                 target = target.parentElement;
             }
 
-            idToDelete = target.id;
+            selectedId = target.id;
 
             layerOptions.style.visibility = "visible";
             layerOptions.style.top = "0";
             layerOptions.style.marginTop = "" + (event.clientY - 25) + "px";
 
-            getLayerByID(idToDelete).selectLayer();
+            getLayerByID(selectedId).selectLayer();
         }
     }
 
@@ -265,10 +260,6 @@ class Layer {
             layer.menuEntry.classList.add("selected-layer");
             currentLayer = layer;
         }
-/*
-        canvas = currentLayer.canvas;
-        context = currentLayer.context;
-*/
     }
 
     toggleLock() {