From b2f55217507ba237c94d23ceb9aa011eda1dc345 Mon Sep 17 00:00:00 2001
From: unsettledgames <47360416+unsettledgames@users.noreply.github.com>
Date: Mon, 6 Dec 2021 17:37:43 +0100
Subject: [PATCH] Removed all global variables, worked on File class and put
 canvas resizing functions in File

---
 js/ColorModule.js                    |  17 +-
 js/EditorState.js                    |   6 +-
 js/File.js                           | 327 ++++++++++++++++++++++++++-
 js/FileManager.js                    |  30 +--
 js/History.js                        |  76 +++----
 js/Input.js                          |   6 +-
 js/LayerList.js                      | 100 ++++----
 js/Settings.js                       |   2 +-
 js/Startup.js                        |  51 ++---
 js/Tool.js                           |  18 +-
 js/ToolManager.js                    |   2 +-
 js/_resizeCanvas.js                  | 311 -------------------------
 js/_resizeSprite.js                  |  40 ++--
 js/data/variables.js                 |  27 ---
 js/layers/Checkerboard.js            |  14 +-
 js/layers/Layer.js                   |  60 ++---
 js/layers/PixelGrid.js               |   2 +-
 js/lib/jscolor.js                    |   1 -
 js/pixel-editor.js                   |   4 +-
 js/tools/BrushTool.js                |  10 +-
 js/tools/EraserTool.js               |  10 +-
 js/tools/EyeDropperTool.js           |  16 +-
 js/tools/FillTool.js                 |  24 +-
 js/tools/LineTool.js                 |  24 +-
 js/tools/MoveSelectionTool.js        |  36 +--
 js/tools/PanTool.js                  |  12 +-
 js/tools/RectangleTool.js            |  34 ++-
 js/tools/RectangularSelectionTool.js |  34 +--
 js/tools/ResizableTool.js            |   2 +-
 js/tools/ZoomTool.js                 |  70 +++---
 js/{ => tools}/_ellipse.js           |   0
 views/main-menu.hbs                  |   6 +-
 32 files changed, 668 insertions(+), 704 deletions(-)
 delete mode 100644 js/data/variables.js
 rename js/{ => tools}/_ellipse.js (100%)

diff --git a/js/ColorModule.js b/js/ColorModule.js
index 80019a2..2a194e6 100644
--- a/js/ColorModule.js
+++ b/js/ColorModule.js
@@ -318,7 +318,7 @@ const ColorModule = (() => {
         if (typeof newColor === 'string') newColor = Color.hexToRgb(newColor);
 
         //create temporary image from canvas to search through
-        var tempImage = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+        var tempImage = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
 
         //loop through all pixels
         for (var i=0;i<tempImage.data.length;i+=4) {
@@ -332,7 +332,7 @@ const ColorModule = (() => {
         }
 
         //put temp image back onto canvas
-        currentLayer.context.putImageData(tempImage,0,0);
+        currFile.currentLayer.context.putImageData(tempImage,0,0);
     }
 
     function getCurrentPalette() {
@@ -395,9 +395,10 @@ const ColorModule = (() => {
         //create array out of colors object
         let colorPaletteArray = [];
 
-        for (let i=0; i<layers.length; i++) {
-            if (layers[i].menuEntry != null) {
-                let imageData = layers[i].context.getImageData(0, 0, layers[i].canvasSize[0], layers[i].canvasSize[1]).data;
+        for (let i=0; i<currFile.layers.length; i++) {
+            if (currFile.layers[i].hasCanvas()) {
+                let imageData = currFile.layers[i].context.getImageData(
+                    0, 0, currFile.canvasSize[0], currFile.canvasSize[1]).data;
                 let dataLength = imageData.length;
 
                 for (let j=0; j<dataLength; j += 4) {
@@ -429,9 +430,9 @@ const ColorModule = (() => {
         if (refLayer)
             color = refLayer.context.fillStyle;
         
-        for (let i=0; i<layers.length - 1; i++) {
-            layers[i].context.fillStyle = color;
-            layers[i].context.strokeStyle = color;
+        for (let i=0; i<currFile.layers.length - 1; i++) {
+            currFile.layers[i].context.fillStyle = color;
+            currFile.layers[i].context.strokeStyle = color;
         }
     }
 
diff --git a/js/EditorState.js b/js/EditorState.js
index 8227ae3..c8cce1d 100644
--- a/js/EditorState.js
+++ b/js/EditorState.js
@@ -21,7 +21,7 @@ const EditorState = (() => {
             document.getElementById("switch-mode-button").innerHTML = 'Switch to basic mode';
     
             //turn pixel grid off
-            pixelGrid.togglePixelGrid('off');
+            currFile.pixelGrid.togglePixelGrid('off');
         }
         //switch to basic mode
         else {
@@ -32,7 +32,7 @@ const EditorState = (() => {
                 }
     
                 // Selecting the current layer
-                currentLayer.selectLayer();
+                currFile.currentLayer.selectLayer();
                 // Flatten the layers
                 LayerList.flatten(true);
             }
@@ -47,7 +47,7 @@ const EditorState = (() => {
 
             pixelEditorMode = 'Basic';
             document.getElementById("switch-mode-button").innerHTML = 'Switch to advanced mode';
-            pixelGrid.togglePixelGrid('on');
+            currFile.pixelGrid.togglePixelGrid('on');
         }
     }
 
diff --git a/js/File.js b/js/File.js
index 147d5e0..8b0bf82 100644
--- a/js/File.js
+++ b/js/File.js
@@ -1,12 +1,319 @@
-// A file has layers
-    // It probably contains the LayerList, which should include the layers array
-// A file contains sprite scaling and canvas resizing
+class File {
+    // Canvas, canvas state
+    canvasSize = [];
+    zoom = 7;
+    canvasView = document.getElementById("canvas-view");
 
-/*
-    let canvasSize
-    let canvasView
-    let layerList
+    // Layers
+    layers = [];
+    currentLayer = undefined;
+    VFXLayer = undefined;
+    TMPLayer = undefined;
+    pixelGrid = undefined;
+    checkerBoard = undefined
 
-    resizeCanvas()
-    scaleSprite()
-*/
\ No newline at end of file
+    // Canvas resize attributes
+    // Resize canvas pop up window
+    resizeCanvasContainer = document.getElementById("resize-canvas");
+    // Start pivot
+    rcPivot = "middle";
+    // Selected pivot button
+    currentPivotObject = undefined;
+    // Border offsets
+    rcBorders = {left: 0, right: 0, top: 0, bottom: 0};
+
+    // Sprite scaling attributes
+
+    openResizeCanvasWindow() {
+        // Initializes the inputs
+        this.initResizeCanvasInputs();
+        Dialogue.showDialogue('resize-canvas');
+    }
+
+    initResizeCanvasInputs() {
+        // Getting the pivot buttons
+        let buttons = document.getElementsByClassName("pivot-button");
+    
+        // Adding the event handlers for them
+        for (let i=0; i<buttons.length; i++) {
+            Events.on("click", buttons[i], this.changePivot.bind(this));
+            if (buttons[i].getAttribute("value").includes("middle")) {
+                this.currentPivotObject = buttons[i];
+            }
+        }
+    
+        document.getElementById("rc-width").value = currFile.canvasSize[0];
+        document.getElementById("rc-height").value = currFile.canvasSize[1];
+    
+        Events.on("change", "rc-border-left", this.rcChangedBorder.bind(this));
+        Events.on("change", "rc-border-right", this.rcChangedBorder.bind(this));
+        Events.on("change", "rc-border-top", this.rcChangedBorder.bind(this));
+        Events.on("change", "rc-border-bottom", this.rcChangedBorder.bind(this));
+    
+        Events.on("change", "rc-width", this.rcChangedSize.bind(this));
+        Events.on("change", "rc-height", this.rcChangedSize.bind(this));
+
+        Events.on("click", "resize-canvas-confirm", this.resizeCanvas.bind(this));
+    }
+
+    /** Fired when a border offset is changed: it updates the width and height
+     */
+    rcChangedBorder() {
+        this.rcUpdateBorders();
+        
+        document.getElementById("rc-width").value = parseInt(currFile.canvasSize[0]) + 
+            this.rcBorders.left + this.rcBorders.right;
+        document.getElementById("rc-height").value = parseInt(currFile.canvasSize[1]) + 
+            this.rcBorders.top + this.rcBorders.bottom;
+    }
+    
+    /** Fired when width or height are changed: updates the border offsets
+     */
+    rcChangedSize() {
+        let widthOffset = Math.abs(document.getElementById("rc-width").value) - currFile.canvasSize[0];
+        let heightOffset = Math.abs(document.getElementById("rc-height").value) - currFile.canvasSize[1];
+
+        let left = Math.round(widthOffset / 2);
+        let right = widthOffset - left;
+        let top = Math.round(heightOffset / 2);
+        let bottom = heightOffset - top;
+
+        document.getElementById("rc-border-left").value = left;
+        document.getElementById("rc-border-right").value = right;
+        document.getElementById("rc-border-top").value = top;
+        document.getElementById("rc-border-bottom").value = bottom;
+
+        this.rcBorders.left = left;
+        this.rcBorders.right = right;
+        this.rcBorders.top = top;
+        this.rcBorders.bottom = bottom;
+    }
+
+    /** Resizes the canvas
+     * 
+     * @param {*} event The event that triggered the canvas resizing
+     * @param {*} size The new size of the picture
+     * @param {*} customData Used when ctrl+z ing
+     * @param {*} saveHistory Should I save the history? You shouldn't if you're undoing
+     */
+    resizeCanvas(event, size, customData, saveHistory = true) {
+        console.log("resizing");
+        let imageDatas = [];
+        let leftOffset = 0;
+        let topOffset = 0;
+        let copiedDataIndex = 0;
+
+        // If I'm undoing and I'm not trimming, I manually put the values in the window
+        if (size != null && customData == null) {
+            document.getElementById("rc-width").value = size.x;
+            document.getElementById("rc-height").value = size.y;
+
+            this.rcChangedSize();
+        }
+        
+        this.rcUpdateBorders();
+
+        // Save all imageDatas
+        for (let i=0; i<currFile.layers.length; i++) {
+            if (currFile.layers[i].hasCanvas()) {
+                imageDatas.push(currFile.layers[i].context.getImageData(
+                    0, 0, currFile.canvasSize[0], currFile.canvasSize[1])
+                );
+            }
+        }
+
+        // Saving the history only if I'm not already undoing or redoing
+        if (saveHistory && event != null) {
+            // Saving history
+            new HistoryState().ResizeCanvas(
+                {x: parseInt(currFile.canvasSize[0]) + this.rcBorders.left + this.rcBorders.right, 
+                y: parseInt(currFile.canvasSize[1]) + this.rcBorders.top + this.rcBorders.bottom},
+
+                {x: currFile.canvasSize[0],
+                y: currFile.canvasSize[1]},
+                imageDatas.slice(), customData != null && saveHistory
+            );
+        }
+
+        currFile.canvasSize[0] = parseInt(currFile.canvasSize[0]) + 
+                this.rcBorders.left + this.rcBorders.right;
+        currFile.canvasSize[1] = parseInt(currFile.canvasSize[1]) + 
+            this.rcBorders.top + this.rcBorders.bottom;
+
+        // Resize the canvases
+        for (let i=0; i<currFile.layers.length; i++) {
+            currFile.layers[i].canvas.width = currFile.canvasSize[0];
+            currFile.layers[i].canvas.height = currFile.canvasSize[1];
+
+            currFile.layers[i].resize();
+        }
+
+        // Regenerate the checkerboard
+        currFile.checkerBoard.fillCheckerboard();
+        currFile.pixelGrid.fillPixelGrid();
+        // Put the imageDatas in the right position
+        switch (this.rcPivot)
+        {
+            case 'topleft':
+                leftOffset = 0;
+                topOffset = 0;
+                break;
+            case 'top':
+                leftOffset = (this.rcBorders.left + this.rcBorders.right) / 2;
+                topOffset = 0;
+                break;
+            case 'topright':
+                leftOffset = this.rcBorders.left + this.rcBorders.right;
+                topOffset = 0;
+                break;
+            case 'left':
+                leftOffset = 0;
+                topOffset = (this.rcBorders.top + this.rcBorders.bottom) / 2;
+                break;
+            case 'middle':
+                leftOffset = (this.rcBorders.left + this.rcBorders.right) / 2;
+                topOffset = (this.rcBorders.top + this.rcBorders.bottom) / 2;
+                break;
+            case 'right':
+                leftOffset = this.rcBorders.left + this.rcBorders.right;
+                topOffset = (this.rcBorders.top + this.rcBorders.bottom) / 2;
+                break;
+            case 'bottomleft':
+                leftOffset = 0;
+                topOffset = this.rcBorders.top + this.rcBorders.bottom;
+                break;
+            case 'bottom':
+                leftOffset = (this.rcBorders.left + this.rcBorders.right) / 2;
+                topOffset = this.rcBorders.top + this.rcBorders.bottom;
+                break;
+            case 'bottomright':
+                leftOffset = this.rcBorders.left + this.rcBorders.right;
+                topOffset = this.rcBorders.top + this.rcBorders.bottom;
+                break;
+            default:
+                break;
+        }
+        
+        // Putting all the data for each layer with the right offsets (decided by the pivot)
+        for (let i=0; i<currFile.layers.length; i++) {
+            if (currFile.layers[i].hasCanvas()) {
+                if (customData == undefined) {
+                    currFile.layers[i].context.putImageData(imageDatas[copiedDataIndex], leftOffset, topOffset);
+                }
+                else {
+                    currFile.layers[i].context.putImageData(customData[copiedDataIndex], 0, 0);
+                }
+                currFile.layers[i].updateLayerPreview();
+                copiedDataIndex++;
+            }
+        }
+
+        Dialogue.closeDialogue();
+    }
+
+    /** Trims the canvas so tat the sprite is perfectly contained in it
+     * 
+     * @param {*} event 
+     * @param {*} saveHistory Should I save the history? You shouldn't if you're undoing
+     */
+    trimCanvas(event, saveHistory) {
+        let minY = Infinity;
+        let minX = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        let tmp;
+        let imageDatas = [];
+        let historySave = saveHistory == null;
+        let prevPivot = rcPivot;
+
+        this.rcPivot = "topleft";
+
+        // Computing the min and max coordinates in which there's a non empty pixel
+        for (let i=1; i<currFile.layers.length - nAppLayers; i++) {
+            let imageData = currFile.layers[i].context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
+            let pixelPosition;
+
+            for (let i=imageData.data.length - 1; i>= 0; i-=4) {
+                if (!Util.isPixelEmpty(
+                    [imageData.data[i - 3], imageData.data[i - 2], 
+                    -imageData.data[i - 1], imageData.data[i]])) {
+                    pixelPosition = getPixelPosition(i);        
+
+                    // max x
+                    if (pixelPosition[0] > maxX) {
+                        maxX = pixelPosition[0];
+                    }
+                    // min x
+                    if (pixelPosition[0] < minX) {
+                        minX = pixelPosition[0];
+                    }
+                    // max y
+                    if (pixelPosition[1] > maxY) {
+                        maxY = pixelPosition[1];
+                    }
+                    // min y
+                    if (pixelPosition[1] < minY) {
+                        minY = pixelPosition[1];
+                    }
+                }
+            }
+        }
+
+        tmp = minY;
+        minY = maxY;
+        maxY = tmp;
+
+        minY = currFile.canvasSize[1] - minY;
+        maxY = currFile.canvasSize[1] - maxY;
+
+        // Setting the borders coherently with the values I've just computed
+        this.rcBorders.right = (maxX - currFile.canvasSize[0]) + 1;
+        this.rcBorders.left = -minX;
+        this.rcBorders.top = maxY - currFile.canvasSize[1] + 1;
+        this.rcBorders.bottom = -minY;
+
+        // Saving the data
+        for (let i=0; i<currFile.layers.length; i++) {
+            if (currFile.layers[i].hasCanvas()) {
+                imageDatas.push(currFile.layers[i].context.getImageData(minX - 1, currFile.layers[i].canvasSize[1] - maxY, maxX-minX + 1, maxY-minY + 1));
+            }
+        }
+
+        //console.log("sx: " + borders.left + "dx: " + borders.right + "top: " + borders.top + "btm: " + borders.bottom);
+
+        document.getElementById("rc-border-left").value = this.rcBorders.left;
+        document.getElementById("rc-border-right").value = this.rcBorders.right;
+        document.getElementById("rc-border-top").value = this.rcBorders.top;
+        document.getElementById("rc-border-bottom").value = this.rcBorders.bottom;
+
+        // Resizing the canvas with the decided border offsets
+        this.resizeCanvas(null, null, imageDatas.slice(), historySave);
+        // Resetting the previous pivot
+        this.rcPivot = prevPivot;
+    }
+
+    rcUpdateBorders() {
+        // Getting input
+        this.rcBorders.left = document.getElementById("rc-border-left").value;
+        this.rcBorders.right = document.getElementById("rc-border-right").value;
+        this.rcBorders.top = document.getElementById("rc-border-top").value;
+        this.rcBorders.bottom = document.getElementById("rc-border-bottom").value;
+
+        // Validating input
+        this.rcBorders.left == "" ? this.rcBorders.left = 0 : this.rcBorders.left = Math.round(parseInt(this.rcBorders.left));
+        this.rcBorders.right == "" ? this.rcBorders.right = 0 : this.rcBorders.right = Math.round(parseInt(this.rcBorders.right));
+        this.rcBorders.top == "" ? this.rcBorders.top = 0 : this.rcBorders.top = Math.round(parseInt(this.rcBorders.top));
+        this.rcBorders.bottom == "" ? this.rcBorders.bottom = 0 : this.rcBorders.bottom = Math.round(parseInt(this.rcBorders.bottom));
+    }
+
+    changePivot(event) {
+        this.rcPivot = event.target.getAttribute("value");
+
+        // Setting the selected class
+        this.currentPivotObject.classList.remove("rc-selected-pivot");
+        this.currentPivotObject = event.target;
+        this.currentPivotObject.classList.add("rc-selected-pivot");
+    }
+}
+
+let currFile = new File();
\ No newline at end of file
diff --git a/js/FileManager.js b/js/FileManager.js
index 4acb112..b633730 100644
--- a/js/FileManager.js
+++ b/js/FileManager.js
@@ -13,9 +13,9 @@ const FileManager = (() => {
 
         if (selectedPalette != 'Choose a palette...'){
             var paletteAbbreviation = palettes[selectedPalette].abbreviation;
-            var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1];
+            var fileName = 'pixel-'+paletteAbbreviation+'-'+currFile.canvasSize[0]+'x'+currFile.canvasSize[1];
         } else {
-            var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1];
+            var fileName = 'pixel-'+currFile.canvasSize[0]+'x'+currFile.canvasSize[1];
             selectedPalette = 'none';
         }
     
@@ -33,7 +33,7 @@ const FileManager = (() => {
             var paletteAbbreviation = palettes[selectedPalette].name;
             var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
         } else {
-            var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
+            var fileName = 'pixel-'+currFile.canvasSize[0]+'x'+currFile.canvasSize[1]+'.png';
             selectedPalette = 'none';
         }
     
@@ -58,7 +58,7 @@ const FileManager = (() => {
         linkHolder.click();
 
         if (typeof ga !== 'undefined')
-            ga('send', 'event', 'Pixel Editor Save', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/
+            ga('send', 'event', 'Pixel Editor Save', selectedPalette, currFile.canvasSize[0]+'/'+currFile.canvasSize[1]); /*global ga*/
     }
 
     function exportProject() {
@@ -70,20 +70,20 @@ const FileManager = (() => {
             // Creating a tmp canvas to flatten everything
             var exportCanvas = document.createElement("canvas");
             var emptyCanvas = document.createElement("canvas");
-            var layersCopy = layers.slice();
+            var layersCopy = currFile.layers.slice();
 
-            exportCanvas.width = layers[0].canvasSize[0];
-            exportCanvas.height = layers[0].canvasSize[1];
+            exportCanvas.width = currFile.canvasSize[0];
+            exportCanvas.height = currFile.canvasSize[1];
 
-            emptyCanvas.width = layers[0].canvasSize[0];
-            emptyCanvas.height = layers[0].canvasSize[1];
+            emptyCanvas.width = currFile.canvasSize[0];
+            emptyCanvas.height = currFile.canvasSize[1];
 
             // Sorting the layers by z index
             layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
 
             // Merging every layer on the export canvas
             for (let i=0; i<layersCopy.length; i++) {
-                if (layersCopy[i].menuEntry != null && layersCopy[i].isVisible) {
+                if (layersCopy[i].hasCanvas() && layersCopy[i].isVisible) {
                     LayerList.mergeLayers(exportCanvas.getContext('2d'), layersCopy[i].context);
                 }
                 // I'm not going to find out why the layer ordering screws up if you don't copy
@@ -105,7 +105,7 @@ const FileManager = (() => {
 
             //track google event
             if (typeof ga !== 'undefined')
-                ga('send', 'event', 'Pixel Editor Export', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/
+                ga('send', 'event', 'Pixel Editor Export', selectedPalette, currFile.canvasSize[0]+'/'+currFile.canvasSize[1]); /*global ga*/
         }
     }
 
@@ -157,7 +157,7 @@ const FileManager = (() => {
                 EditorState.switchMode('Advanced');
 
                 //draw the image onto the canvas
-                currentLayer.context.drawImage(img, 0, 0);
+                currFile.currentLayer.context.drawImage(img, 0, 0);
                 ColorModule.createPaletteFromLayers();
 
                 //track google event
@@ -195,11 +195,11 @@ const FileManager = (() => {
         // use a dictionary
         let dictionary = {};
         // sorting layers by increasing z-index
-        let layersCopy = layers.slice();
+        let layersCopy = currFile.layers.slice();
         layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
         // save canvas size
-        dictionary['canvasWidth'] = currentLayer.canvasSize[0];
-        dictionary['canvasHeight'] = currentLayer.canvasSize[1];
+        dictionary['canvasWidth'] = currFile.canvasSize[0];
+        dictionary['canvasHeight'] = currFile.canvasSize[1];
         // save editor mode
         dictionary['editorMode'] = EditorState.getCurrentMode();
         // save palette
diff --git a/js/History.js b/js/History.js
index de11904..1afe5d9 100644
--- a/js/History.js
+++ b/js/History.js
@@ -108,11 +108,11 @@ class HistoryState {
             resizeSprite(null, [1 / this.xRatio, 1 / this.yRatio]);
 
             // Also putting the old data
-            for (let i=0; i<layers.length; i++) {
-                if (layers[i].menuEntry != null) {
-                    layers[i].context.putImageData(this.oldData[layerIndex], 0, 0);
+            for (let i=0; i<currFile.layers.length; i++) {
+                if (currFile.layers[i].hasCanvas()) {
+                    currFile.layers[i].context.putImageData(this.oldData[layerIndex], 0, 0);
                     layerIndex++;
-                    layers[i].updateLayerPreview();
+                    currFile.layers[i].updateLayerPreview();
                 }
             }
         };
@@ -132,11 +132,11 @@ class HistoryState {
         this.undo = function() {
             let dataIndex = 0;
             // Resizing the canvas
-            resizeCanvas(null, oldSize, null, false);
+            currFile.resizeCanvas(null, oldSize, null, false);
             // Putting the image datas
-            for (let i=0; i<layers.length; i++) {
-                if (layers[i].menuEntry != null) {
-                    layers[i].context.putImageData(this.imageDatas[dataIndex], 0, 0);
+            for (let i=0; i<currFile.layers.length; i++) {
+                if (currFile.layers[i].hasCanvas()) {
+                    currFile.layers[i].context.putImageData(this.imageDatas[dataIndex], 0, 0);
                     dataIndex++;
                 }
             }
@@ -144,10 +144,10 @@ class HistoryState {
 
         this.redo = function() {
             if (!this.trim) {
-                resizeCanvas(null, newSize, null, false);
+                currFile.resizeCanvas(null, newSize, null, false);
             }
             else {
-                trimCanvas(null, false);
+                currFile.trimCanvas(null, false);
             }
         };
     }
@@ -174,14 +174,14 @@ class HistoryState {
         this.belowImageData = belowImageData;
 
         this.undo = function() {
-            canvasView.append(aboveLayer.canvas);
+            currFile.canvasView.append(aboveLayer.canvas);
             LayerList.getLayerListEntries().insertBefore(aboveLayer.menuEntry, afterAbove);
 
-            belowLayer.context.clearRect(0, 0, belowLayer.canvasSize[0], belowLayer.canvasSize[1]);
+            belowLayer.context.clearRect(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
             belowLayer.context.putImageData(this.belowImageData, 0, 0);
             belowLayer.updateLayerPreview();
 
-            layers.splice(layerIndex, 0, aboveLayer);
+            currFile.layers.splice(layerIndex, 0, aboveLayer);
         };
 
         this.redo = function() {
@@ -190,7 +190,7 @@ class HistoryState {
             // Deleting the above layer
             aboveLayer.canvas.remove();
             aboveLayer.menuEntry.remove();
-            layers.splice(layers.indexOf(aboveLayer), 1);
+            currFile.layers.splice(currFile.layers.indexOf(aboveLayer), 1);
         };
     }
 
@@ -218,13 +218,13 @@ class HistoryState {
 
         this.undo = function() {
             LayerList.getLayerListEntries().insertBefore(this.aboveLayer.menuEntry, this.belowLayer.menuEntry);
-            canvasView.append(this.aboveLayer.canvas);
+            currFile.canvasView.append(this.aboveLayer.canvas);
 
-            belowLayer.context.clearRect(0, 0, this.belowLayer.canvasSize[0], this.belowLayer.canvasSize[1]);
+            belowLayer.context.clearRect(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
             belowLayer.context.putImageData(this.belowData, 0, 0);
             belowLayer.updateLayerPreview();
 
-            layers.splice(this.aboveIndex, 0, this.aboveLayer);
+            currFile.layers.splice(this.aboveIndex, 0, this.aboveLayer);
         };
 
         this.redo = function() {
@@ -268,14 +268,14 @@ class HistoryState {
         this.index = index;
 
         this.undo = function() {
-            canvasView.append(this.deleted.canvas);
+            currFile.canvasView.append(this.deleted.canvas);
             if (this.before != null) {
                 LayerList.getLayerListEntries().insertBefore(this.deleted.menuEntry, this.before);
             }
             else {
                 LayerList.getLayerListEntries().prepend(this.deleted.menuEntry);
             }
-            layers.splice(this.index, 0, this.deleted);
+            currFile.layers.splice(this.index, 0, this.deleted);
         };
 
         this.redo = function() {
@@ -327,21 +327,21 @@ class HistoryState {
         this.index = index;
 
         this.undo = function() {
-            if (layers.length - nAppLayers > this.index + 1) {
-                layers[this.index + 1].selectLayer();
+            if (currFile.layers.length - nAppLayers > this.index + 1) {
+                currFile.layers[this.index + 1].selectLayer();
             }
             else {
-                layers[this.index - 1].selectLayer();
+                currFile.layers[this.index - 1].selectLayer();
             }
 
             this.added.canvas.remove();
             this.added.menuEntry.remove();
 
-            layers.splice(index, 1);
+            currFile.layers.splice(index, 1);
         };
 
         this.redo = function() {
-            canvasView.append(this.added.canvas);
+            currFile.canvasView.append(this.added.canvas);
             LayerList.getLayerListEntries().prepend(this.added.menuEntry);
             layers.splice(this.index, 0, this.added);
         };
@@ -349,12 +349,12 @@ class HistoryState {
 
     //prototype for undoing canvas changes
     EditCanvas() {
-        this.canvasState = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
-        this.layerID = currentLayer.id;
+        this.canvasState = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
+        this.layerID = currFile.currentLayer.id;
 
         this.undo = function () {
             var stateLayer = LayerList.getLayerByID(this.layerID);
-            var currentCanvas = stateLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+            var currentCanvas = stateLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
             stateLayer.context.putImageData(this.canvasState, 0, 0);
 
             this.canvasState = currentCanvas;
@@ -364,7 +364,7 @@ class HistoryState {
 
         this.redo = function () {
             var stateLayer = LayerList.getLayerByID(this.layerID);
-            var currentCanvas = stateLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+            var currentCanvas = stateLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
 
             stateLayer.context.putImageData(this.canvasState, 0, 0);
 
@@ -390,11 +390,11 @@ class HistoryState {
     //prototype for undoing deleted colors
     DeleteColor(colorValue) {
         this.colorValue = colorValue;
-        this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+        this.canvas = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
 
         this.undo = function () {
-            var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
-            currentLayer.context.putImageData(this.canvas, 0, 0);
+            var currentCanvas = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
+            currFile.currentLayer.context.putImageData(this.canvas, 0, 0);
 
             ColorModule.addColor(this.colorValue);
 
@@ -402,8 +402,8 @@ class HistoryState {
         };
 
         this.redo = function () {
-            var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
-            currentLayer.context.putImageData(this.canvas, 0, 0);
+            var currentCanvas = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
+            currFile.currentLayer.context.putImageData(this.canvas, 0, 0);
 
             ColorModule.deleteColor(this.colorValue);
 
@@ -415,11 +415,11 @@ class HistoryState {
     EditColor(newColorValue, oldColorValue) {
         this.newColorValue = newColorValue;
         this.oldColorValue = oldColorValue;
-        this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+        this.canvas = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
 
         this.undo = function () {
-            let currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
-            currentLayer.context.putImageData(this.canvas, 0, 0);
+            let currentCanvas = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
+            currFile.currentLayer.context.putImageData(this.canvas, 0, 0);
 
             //find new color in palette and change it back to old color
             let colors = document.getElementsByClassName('color-button');
@@ -435,8 +435,8 @@ class HistoryState {
         };
 
         this.redo = function () {
-            let currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
-            currentLayer.context.putImageData(this.canvas, 0, 0);
+            let currentCanvas = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
+            currFile.currentLayer.context.putImageData(this.canvas, 0, 0);
 
             //find old color in palette and change it back to new color
             let colors = document.getElementsByClassName('color-button');
diff --git a/js/Input.js b/js/Input.js
index 2f9fd38..03d6c19 100644
--- a/js/Input.js
+++ b/js/Input.js
@@ -31,7 +31,7 @@ const Input = (() => {
         currentMouseEvent = event;
         dragging = false;
         
-        if (currentLayer != null && !Util.isChildOfByClass(event.target, "layers-menu-entry")) {
+        if (currFile.currentLayer != null && !Util.isChildOfByClass(event.target, "layers-menu-entry")) {
             LayerList.closeOptionsMenu();	
         }
     }
@@ -49,8 +49,8 @@ const Input = (() => {
             y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;			
         }
     
-        x -= currentLayer.canvas.offsetLeft;
-        y -= currentLayer.canvas.offsetTop;
+        x -= currFile.currentLayer.canvas.offsetLeft;
+        y -= currFile.currentLayer.canvas.offsetTop;
     
         return [Math.round(x), Math.round(y)];
     }
diff --git a/js/LayerList.js b/js/LayerList.js
index 4407e4b..2b0d546 100644
--- a/js/LayerList.js
+++ b/js/LayerList.js
@@ -21,11 +21,11 @@ const LayerList = (() => {
 
     function addLayer(id, saveHistory = true) {
         // layers.length - 3
-        let index = layers.length - 3;
+        let index = currFile.layers.length - 3;
         // Creating a new canvas
         let newCanvas = document.createElement("canvas");
         // Setting up the new canvas
-        canvasView.append(newCanvas);
+        currFile.canvasView.append(newCanvas);
         Layer.maxZIndex+=2;
         newCanvas.style.zIndex = Layer.maxZIndex;
         newCanvas.classList.add("drawingCanvas");
@@ -42,11 +42,11 @@ const LayerList = (() => {
         Layer.layerCount++;
     
         // Creating a layer object
-        let newLayer = new Layer(currentLayer.canvasSize[0], currentLayer.canvasSize[1], newCanvas, toAppend);
-        newLayer.context.fillStyle = currentLayer.context.fillStyle;
-        newLayer.copyData(currentLayer);
+        let newLayer = new Layer(currFile.canvasSize[0], currFile.canvasSize[1], newCanvas, toAppend);
+        newLayer.context.fillStyle = currFile.currentLayer.context.fillStyle;
+        newLayer.copyData(currFile.currentLayer);
     
-        layers.splice(index, 0, newLayer);
+        currFile.layers.splice(index, 0, newLayer);
         
         // Insert it before the Add layer button
         layerList.insertBefore(toAppend, layerList.childNodes[0]);
@@ -134,10 +134,10 @@ const LayerList = (() => {
 
     // Finds a layer given its id
     function getLayerByID(id) {
-        for (let i=0; i<layers.length; i++) {
-            if (layers[i].menuEntry != null) {
-                if (layers[i].menuEntry.id == id) {
-                    return layers[i];
+        for (let i=0; i<currFile.layers.length; i++) {
+            if (currFile.layers[i].hasCanvas()) {
+                if (currFile.layers[i].menuEntry.id == id) {
+                    return currFile.layers[i];
                 }
             }
         }
@@ -147,10 +147,10 @@ const LayerList = (() => {
 
     // Finds a layer given its name
     function getLayerByName(name) {
-        for (let i=0; i<layers.length; i++) {
-            if (layers[i].menuEntry != null) {
-                if (layers[i].menuEntry.getElementsByTagName("p")[0].innerHTML == name) {
-                    return layers[i];
+        for (let i=0; i<currFile.layers.length; i++) {
+            if (currFile.layers[i].hasCanvas()) {
+                if (currFile.layers[i].menuEntry.getElementsByTagName("p")[0].innerHTML == name) {
+                    return currFile.layers[i];
                 }
             }
         }
@@ -159,9 +159,9 @@ const LayerList = (() => {
     }
 
     function startRenamingLayer(event) {
-        let p = currentLayer.menuEntry.getElementsByTagName("p")[0];
+        let p = currFile.currentLayer.menuEntry.getElementsByTagName("p")[0];
     
-        currentLayer.oldLayerName = p.innerHTML;
+        currFile.currentLayer.oldLayerName = p.innerHTML;
     
         p.setAttribute("contenteditable", true);
         p.classList.add("layer-name-editable");
@@ -182,8 +182,8 @@ const LayerList = (() => {
             return -1;
         }
     
-        let layerIndex = layers.indexOf(currentLayer);
-        let toDuplicate = currentLayer;
+        let layerIndex = currFile.layers.indexOf(currFile.currentLayer);
+        let toDuplicate = currFile.currentLayer;
         let menuEntries = layerList.children;
     
         // Increasing z-indexes of the layers above
@@ -195,14 +195,14 @@ const LayerList = (() => {
         // Creating a new canvas
         let newCanvas = document.createElement("canvas");
         // Setting up the new canvas
-        canvasView.append(newCanvas);
-        newCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex) + 2;
+        currFile.canvasView.append(newCanvas);
+        newCanvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex) + 2;
         newCanvas.classList.add("drawingCanvas");
     
         if (!layerListEntry) return console.warn('skipping adding layer because no document');
     
         // Clone the default layer
-        let toAppend = currentLayer.menuEntry.cloneNode(true);
+        let toAppend = currFile.currentLayer.menuEntry.cloneNode(true);
         // Setting the default name for the layer
         toAppend.getElementsByTagName('p')[0].innerHTML += " copy";
         // Removing the selected class
@@ -211,41 +211,41 @@ const LayerList = (() => {
         Layer.layerCount++;
     
         // Creating a layer object
-        let newLayer = new Layer(currentLayer.canvasSize[0], currentLayer.canvasSize[1], newCanvas, toAppend);
-        newLayer.context.fillStyle = currentLayer.context.fillStyle;
-        newLayer.copyData(currentLayer);
+        let newLayer = new Layer(currFile.canvasSize[0], currFile.canvasSize[1], newCanvas, toAppend);
+        newLayer.context.fillStyle = currFile.currentLayer.context.fillStyle;
+        newLayer.copyData(currFile.currentLayer);
     
-        layers.splice(layerIndex, 0, newLayer);
+        currFile.layers.splice(layerIndex, 0, newLayer);
         
         // Insert it before the Add layer button
-        layerList.insertBefore(toAppend, currentLayer.menuEntry);
+        layerList.insertBefore(toAppend, currFile.currentLayer.menuEntry);
     
         // Copy the layer content
-        newLayer.context.putImageData(currentLayer.context.getImageData(
-            0, 0, currentLayer.canvasSize[0], currentLayer.canvasSize[1]), 0, 0);
+        newLayer.context.putImageData(currFile.currentLayer.context.getImageData(
+            0, 0, currFile.canvasSize[0], currFile.canvasSize[1]), 0, 0);
         newLayer.updateLayerPreview();
         // Basically "if I'm not adding a layer because redo() is telling meto do so", then I can save the history
         if (saveHistory) {
-            new HistoryState().DuplicateLayer(newLayer, currentLayer);
+            new HistoryState().DuplicateLayer(newLayer, currFile.currentLayer);
         }
     }
 
     function deleteLayer(saveHistory = true) {
         // Cannot delete all the layers
-        if (layers.length != 4) {
-            let layerIndex = layers.indexOf(currentLayer);
-            let toDelete = layers[layerIndex];
+        if (currFile.layers.length != 4) {
+            let layerIndex = currFile.layers.indexOf(currFile.currentLayer);
+            let toDelete = currFile.layers[layerIndex];
             let previousSibling = toDelete.menuEntry.previousElementSibling;
             // Adding the ids to the unused ones
             Layer.unusedIDs.push(toDelete.id);
     
             // Selecting the next layer
-            if (layerIndex != (layers.length - 4)) {
-                layers[layerIndex + 1].selectLayer();
+            if (layerIndex != (currFile.layers.length - 4)) {
+                currFile.layers[layerIndex + 1].selectLayer();
             }
             // or the previous one if the next one doesn't exist
             else {
-                layers[layerIndex - 1].selectLayer();
+                currFile.layers[layerIndex - 1].selectLayer();
             }
     
             // Deleting canvas and entry
@@ -253,7 +253,7 @@ const LayerList = (() => {
             toDelete.menuEntry.remove();
     
             // Removing the layer from the list
-            layers.splice(layerIndex, 1);
+            currFile.layers.splice(layerIndex, 1);
     
             if (saveHistory) {
                 new HistoryState().DeleteLayer(toDelete, previousSibling, layerIndex);
@@ -266,10 +266,10 @@ const LayerList = (() => {
 
     function merge(saveHistory = true) {
         // Saving the layer that should be merged
-        let toMerge = currentLayer;
-        let toMergeIndex = layers.indexOf(toMerge);
+        let toMerge = currFile.currentLayer;
+        let toMergeIndex = currFile.layers.indexOf(toMerge);
         // Getting layer below
-        let layerBelow = LayerList.getLayerByID(currentLayer.menuEntry.nextElementSibling.id);
+        let layerBelow = LayerList.getLayerByID(currFile.currentLayer.menuEntry.nextElementSibling.id);
     
         // If I have something to merge with
         if (layerBelow != null) {
@@ -278,19 +278,19 @@ const LayerList = (() => {
     
             if (saveHistory) {
                 new HistoryState().MergeLayer(toMergeIndex, toMerge,
-                    layerBelow.context.getImageData(0, 0, layerBelow.canvasSize[0], layerBelow.canvasSize[1]),
+                    layerBelow.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]),
                     layerBelow);
             }
     
-            LayerList.mergeLayers(currentLayer.context, toMerge.context);
+            LayerList.mergeLayers(currFile.currentLayer.context, toMerge.context);
     
             // Deleting the above layer
             toMerge.canvas.remove();
             toMerge.menuEntry.remove();
-            layers.splice(toMergeIndex, 1);
+            currFile.layers.splice(toMergeIndex, 1);
     
             // Updating the layer preview
-            currentLayer.updateLayerPreview();
+            currFile.currentLayer.updateLayerPreview();
         }
     }
 
@@ -312,9 +312,9 @@ const LayerList = (() => {
             let visibleLayers = [];
             let nToFlatten = 0;
     
-            for (let i=0; i<layers.length; i++) {
-                if (layers[i].menuEntry != null && layers[i].isVisible) {
-                    visibleLayers.push(layers[i]);
+            for (let i=0; i<currFile.layers.length; i++) {
+                if (currFile.layers[i].hasCanvas() && currFile.layers[i].isVisible) {
+                    visibleLayers.push(currFile.layers[i]);
                 }
             }
     
@@ -328,7 +328,7 @@ const LayerList = (() => {
                 nToFlatten++;
                 console.log(visibleLayers[i].menuEntry.nextElementSibling);
                 new HistoryState().FlattenTwoVisibles(
-                    visibleLayers[i + 1].context.getImageData(0, 0, visibleLayers[i].canvasSize[0], visibleLayers[i].canvasSize[1]),
+                    visibleLayers[i + 1].context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]),
                     visibleLayers[i].menuEntry.nextElementSibling,
                     layers.indexOf(visibleLayers[i]),
                     visibleLayers[i], visibleLayers[i + 1]
@@ -339,12 +339,12 @@ const LayerList = (() => {
                 // Deleting the above layer
                 visibleLayers[i].canvas.remove();
                 visibleLayers[i].menuEntry.remove();
-                layers.splice(layers.indexOf(visibleLayers[i]), 1);
+                currFile.layers.splice(currFile.layers.indexOf(visibleLayers[i]), 1);
             }
     
             new HistoryState().FlattenVisible(nToFlatten);
             // Updating the layer preview
-            currentLayer.updateLayerPreview();
+            currFile.currentLayer.updateLayerPreview();
         }
     }
 
@@ -369,7 +369,7 @@ const LayerList = (() => {
 
     function closeOptionsMenu(event) {
         Layer.layerOptions.style.visibility = "hidden";
-        currentLayer.rename();
+        currFile.currentLayer.rename();
         renamingLayer = false;
     }
 
diff --git a/js/Settings.js b/js/Settings.js
index 20c6a1a..dd66fa8 100644
--- a/js/Settings.js
+++ b/js/Settings.js
@@ -45,7 +45,7 @@ const Settings = (() => {
         settings.numberOfHistoryStates = Util.getValue('setting-numberOfHistoryStates');
         settings.pixelGridColour = Util.getValue('setting-pixelGridColour');
         // Filling pixel grid again if colour changed
-        pixelGrid.fillPixelGrid();
+        currFile.pixelGrid.fillPixelGrid();
     
         //save settings object to cookie
         var cookieValue = JSON.stringify(settings);
diff --git a/js/Startup.js b/js/Startup.js
index 7e4d133..44c5cb3 100644
--- a/js/Startup.js
+++ b/js/Startup.js
@@ -53,7 +53,7 @@ const Startup = (() => {
             // Deleting the default layer
             LayerList.deleteLayer(false);
             // Selecting the new one
-            layers[1].selectLayer();
+            currFile.layers[1].selectLayer();
         }
 
         console.log("Starting with mode " + EditorState.getCurrentMode());
@@ -63,17 +63,20 @@ const Startup = (() => {
     }
 
     function initLayers(width, height) {
+        // Setting the general canvasSize
+        currFile.canvasSize = [width, height];
+
         // If this is the first pixel I'm creating since the app has started
         if (firstPixel) {
             // Creating the first layer
-            currentLayer = new Layer(width, height, 'pixel-canvas', "");
-            currentLayer.canvas.style.zIndex = 2;
+            currFile.currentLayer = new Layer(width, height, 'pixel-canvas', "");
+            currFile.currentLayer.canvas.style.zIndex = 2;
         }
         else {
             // Deleting all the extra layers and canvases, leaving only one
-            let nLayers = layers.length;
-            for (let i=2; i < layers.length - nAppLayers; i++) {
-                let currentEntry = layers[i].menuEntry;
+            let nLayers = currFile.layers.length;
+            for (let i=2; i < currFile.layers.length - nAppLayers; i++) {
+                let currentEntry = currFile.layers[i].menuEntry;
                 let associatedLayer;
 
                 if (currentEntry != null) {
@@ -84,7 +87,7 @@ const Startup = (() => {
                     associatedLayer.canvas.remove();
 
                     // Adding the id to the unused ones
-                    unusedIDs.push(currentEntry.id);
+                    Layer.unusedIDs.push(currentEntry.id);
                     // Removing the entry from the menu
                     currentEntry.remove();
                 }
@@ -92,40 +95,32 @@ const Startup = (() => {
 
             // Removing the old layers from the list
             for (let i=2; i<nLayers - nAppLayers; i++) {
-                layers.splice(2, 1);
+                currFile.layers.splice(2, 1);
             }
 
             // Setting up the current layer
-            layers[1] = new Layer(width, height, layers[1].canvas, layers[1].menuEntry);
-            currentLayer = layers[1];
-            currentLayer.canvas.style.zIndex = 2;
-            
-            // Updating canvas size to the new size
-            for (let i=0; i<nLayers; i++) {
-                layers[i].canvasSize = [width, height];
-            }
+            currFile.layers[1] = new Layer(width, height, currFile.layers[1].canvas, currFile.layers[1].menuEntry);
+            currFile.currentLayer = currFile.layers[1];
+            currFile.currentLayer.canvas.style.zIndex = 2;
         }
 
         // Adding the checkerboard behind it
-        checkerBoard = new Checkerboard(width, height, null);
+        currFile.checkerBoard = new Checkerboard(width, height, null);
         // Pixel grid
-        pixelGrid = new PixelGrid(width, height, "pixel-grid");
+        currFile.pixelGrid = new PixelGrid(width, height, "pixel-grid");
 
         // Creating the vfx layer on top of everything
-        VFXLayer = new Layer(width, height, 'vfx-canvas');
+        currFile.VFXLayer = new Layer(width, height, 'vfx-canvas');
         // Tmp layer to draw previews on
-        TMPLayer = new Layer(width, height, 'tmp-canvas');
-        
-        // Setting the general canvasSize
-        canvasSize = currentLayer.canvasSize;
+        currFile.TMPLayer = new Layer(width, height, 'tmp-canvas');
 
         if (firstPixel) {            
             // Adding the first layer and the checkerboard to the list of layers
-            layers.push(checkerBoard);
-            layers.push(currentLayer);
-            layers.push(TMPLayer);
-            layers.push(pixelGrid);
-            layers.push(VFXLayer);
+            currFile.layers.push(currFile.checkerBoard);
+            currFile.layers.push(currFile.currentLayer);
+            currFile.layers.push(currFile.TMPLayer);
+            currFile.layers.push(currFile.pixelGrid);
+            currFile.layers.push(currFile.VFXLayer);
         }
     }
 
diff --git a/js/Tool.js b/js/Tool.js
index 26704f1..38ec763 100644
--- a/js/Tool.js
+++ b/js/Tool.js
@@ -40,11 +40,11 @@ class Tool {
 
 		switch (this.cursorType.type) {
 			case 'html':
-				canvasView.style.cursor = 'none';
+				currFile.canvasView.style.cursor = 'none';
 				break;
 			case 'cursor':
 				this.cursor = this.cursorType.style;
-				canvasView.style.cursor = this.cursor || 'default';
+				currFile.canvasView.style.cursor = this.cursor || 'default';
 				break;
 			default:
 				break;
@@ -53,8 +53,8 @@ class Tool {
 
 	updateCursor() {
 		this.brushPreview.style.display = 'block';
-		this.brushPreview.style.width = this.currSize * zoom + 'px';
-		this.brushPreview.style.height = this.currSize * zoom + 'px';
+		this.brushPreview.style.width = this.currSize * currFile.zoom + 'px';
+		this.brushPreview.style.height = this.currSize * currFile.zoom + 'px';
 	}
 
 	onMouseWheel(mousePos, mode) {}
@@ -71,17 +71,17 @@ class Tool {
             toSub = 0.5;
         }        
 
-        this.brushPreview.style.left = (Math.floor(cursorLocation[0] / zoom) * zoom + currentLayer.canvas.offsetLeft - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px';
-        this.brushPreview.style.top = (Math.floor(cursorLocation[1] / zoom) * zoom + currentLayer.canvas.offsetTop - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px';
+        this.brushPreview.style.left = (Math.floor(cursorLocation[0] / currFile.zoom) * currFile.zoom + currFile.currentLayer.canvas.offsetLeft - this.currSize * currFile.zoom / 2 - currFile.zoom / 2 + toSub * currFile.zoom) + 'px';
+        this.brushPreview.style.top = (Math.floor(cursorLocation[1] / currFile.zoom) * currFile.zoom + currFile.currentLayer.canvas.offsetTop - this.currSize * currFile.zoom / 2 - currFile.zoom / 2 + toSub * currFile.zoom) + 'px';
 
 		if (this.cursorType.type == 'html') {
 			if (cursorTarget.className == 'drawingCanvas'|| cursorTarget.className == 'drawingCanvas') {
 				this.brushPreview.style.visibility = 'visible';
-				canvasView.style.cursor = 'none';
+				currFile.canvasView.style.cursor = 'none';
 			}
 			else {
 				this.brushPreview.style.visibility = 'hidden';
-				canvasView.style.cursor = 'default';
+				currFile.canvasView.style.cursor = 'default';
 			}
 		}
 	}
@@ -92,7 +92,7 @@ class Tool {
 		this.isSelected = false;
 
 		this.brushPreview.style.visibility = 'hidden';
-		canvasView.style.cursor = 'default';
+		currFile.canvasView.style.cursor = 'default';
 	}
 
 	onStart(mousePos) {
diff --git a/js/ToolManager.js b/js/ToolManager.js
index 34e80aa..f025ef2 100644
--- a/js/ToolManager.js
+++ b/js/ToolManager.js
@@ -19,7 +19,7 @@ const ToolManager = (() => {
     
     currTool = tools["brush"];
     currTool.onSelect();
-    canvasView.style.cursor = 'default';
+    currFile.canvasView.style.cursor = 'default';
 
     Events.on("mouseup", window, onMouseUp);
     Events.on("mousemove", window, onMouseMove);
diff --git a/js/_resizeCanvas.js b/js/_resizeCanvas.js
index e6e28c1..e69de29 100644
--- a/js/_resizeCanvas.js
+++ b/js/_resizeCanvas.js
@@ -1,311 +0,0 @@
-// REFACTOR: method of File class probably
-
-/* This scripts contains all the code used to handle the canvas resizing */
-
-// Resize canvas pop up window
-let resizeCanvasContainer = document.getElementById("resize-canvas");
-// Start pivot
-let rcPivot = "middle";
-// Selected pivot button
-let currentPivotObject;
-// Border offsets
-let rcBorders = {left: 0, right: 0, top: 0, bottom: 0};
-
-/** Opens the canvas resize window
- * 
- */
-function openResizeCanvasWindow() {
-    // Initializes the inputs
-    initResizeCanvasInputs();
-    Dialogue.showDialogue('resize-canvas');
-}
-
-/** Initializes the canvas resizing input
- * 
- */
-function initResizeCanvasInputs() {
-    // Getting the pivot buttons
-    let buttons = document.getElementsByClassName("pivot-button");
-
-    // Adding the event handlers for them
-    for (let i=0; i<buttons.length; i++) {
-        buttons[i].addEventListener("click", changePivot);
-        if (buttons[i].getAttribute("value").includes("middle")) {
-            currentPivotObject = buttons[i];
-        }
-    }
-
-    document.getElementById("rc-width").value = layers[0].canvasSize[0];
-    document.getElementById("rc-height").value = layers[0].canvasSize[1];
-
-    document.getElementById("rc-border-left").addEventListener("change", rcChangedBorder);
-    document.getElementById("rc-border-right").addEventListener("change", rcChangedBorder);
-    document.getElementById("rc-border-top").addEventListener("change", rcChangedBorder);
-    document.getElementById("rc-border-bottom").addEventListener("change", rcChangedBorder);
-
-    document.getElementById("rc-width").addEventListener("change", rcChangedSize);
-    document.getElementById("rc-height").addEventListener("change", rcChangedSize);
-
-    document.getElementById("resize-canvas-confirm").addEventListener("click", resizeCanvas);
-    console.log("Pivot selezionato: " + currentPivotObject);
-}
-
-/** Fired when a border offset is changed: it updates the width and height
- * 
- * @param {*} event 
- */
-function rcChangedBorder(event) {
-    rcUpdateBorders();
-    
-    document.getElementById("rc-width").value = parseInt(layers[0].canvasSize[0]) + rcBorders.left + rcBorders.right;
-    document.getElementById("rc-height").value = parseInt(layers[0].canvasSize[1]) + rcBorders.top + rcBorders.bottom;
-}
-
-/** Fired when width or height are changed: updates the border offsets
- * 
- * @param {*} event 
- */
-function rcChangedSize(event) {
-    let widthOffset = Math.abs(document.getElementById("rc-width").value) - layers[0].canvasSize[0];
-    let heightOffset = Math.abs(document.getElementById("rc-height").value) - layers[0].canvasSize[1];
-
-    let left = Math.round(widthOffset / 2);
-    let right = widthOffset - left;
-    let top = Math.round(heightOffset / 2);
-    let bottom = heightOffset - top;
-
-    document.getElementById("rc-border-left").value = left;
-    document.getElementById("rc-border-right").value = right;
-    document.getElementById("rc-border-top").value = top;
-    document.getElementById("rc-border-bottom").value = bottom;
-
-    rcBorders.left = left;
-    rcBorders.right = right;
-    rcBorders.top = top;
-    rcBorders.bottom = bottom;
-}
-
-/** Resizes the canvas
- * 
- * @param {*} event The event that triggered the canvas resizing
- * @param {*} size The new size of the picture
- * @param {*} customData Used when ctrl+z ing
- * @param {*} saveHistory Should I save the history? You shouldn't if you're undoing
- */
-function resizeCanvas(event, size, customData, saveHistory = true) {
-    let imageDatas = [];
-    let leftOffset = 0;
-    let topOffset = 0;
-    let copiedDataIndex = 0;
-
-    // If I'm undoing and I'm not trimming, I manually put the values in the window
-    if (size != null && customData == null) {
-        document.getElementById("rc-width").value = size.x;
-        document.getElementById("rc-height").value = size.y;
-
-        rcChangedSize();
-    }
-    
-    rcUpdateBorders();
-
-    // Save all imageDatas
-    for (let i=0; i<layers.length; i++) {
-        if (layers[i].menuEntry != null) {
-            imageDatas.push(layers[i].context.getImageData(0, 0, layers[0].canvasSize[0], layers[0].canvasSize[1]));
-        }
-    }
-
-    // Saving the history only if I'm not already undoing or redoing
-    if (saveHistory && event != null) {
-        // Saving history
-        new HistoryState().ResizeCanvas(
-            {x: parseInt(layers[0].canvasSize[0]) + rcBorders.left + rcBorders.right, 
-            y: parseInt(layers[0].canvasSize[1]) + rcBorders.top + rcBorders.bottom},
-
-            {x: layers[0].canvasSize[0],
-            y: layers[0].canvasSize[1]},
-            imageDatas.slice(), customData != null && saveHistory
-        );
-    }
-
-    // Resize the canvases
-    for (let i=0; i<layers.length; i++) {
-        layers[i].canvasSize[0] = parseInt(layers[i].canvasSize[0]) + rcBorders.left + rcBorders.right;
-        layers[i].canvasSize[1] = parseInt(layers[i].canvasSize[1]) + rcBorders.top + rcBorders.bottom;
-
-        layers[i].canvas.width = layers[i].canvasSize[0];
-        layers[i].canvas.height = layers[i].canvasSize[1];
-
-        layers[i].resize();
-    }
-
-    // Regenerate the checkerboard
-    checkerBoard.fillCheckerboard();
-    pixelGrid.fillPixelGrid();
-    // Put the imageDatas in the right position
-    switch (rcPivot)
-    {
-        case 'topleft':
-            leftOffset = 0;
-            topOffset = 0;
-            break;
-        case 'top':
-            leftOffset = (rcBorders.left + rcBorders.right) / 2;
-            topOffset = 0;
-            break;
-        case 'topright':
-            leftOffset = rcBorders.left + rcBorders.right;
-            topOffset = 0;
-            break;
-        case 'left':
-            leftOffset = 0;
-            topOffset = (rcBorders.top + rcBorders.bottom) / 2;
-            break;
-        case 'middle':
-            leftOffset = (rcBorders.left + rcBorders.right) / 2;
-            topOffset = (rcBorders.top + rcBorders.bottom) / 2;
-            break;
-        case 'right':
-            leftOffset = rcBorders.left + rcBorders.right;
-            topOffset = (rcBorders.top + rcBorders.bottom) / 2;
-            break;
-        case 'bottomleft':
-            leftOffset = 0;
-            topOffset = rcBorders.top + rcBorders.bottom;
-            break;
-        case 'bottom':
-            leftOffset = (rcBorders.left + rcBorders.right) / 2;
-            topOffset = rcBorders.top + rcBorders.bottom;
-            break;
-        case 'bottomright':
-            leftOffset = rcBorders.left + rcBorders.right;
-            topOffset = rcBorders.top + rcBorders.bottom;
-            break;
-        default:
-            console.log('Pivot does not exist, please report an issue at https://github.com/lospec/pixel-editor');
-            break;
-    }
-    
-    // Putting all the data for each layer with the right offsets (decided by the pivot)
-    for (let i=0; i<layers.length; i++) {
-        if (layers[i].menuEntry != null) {
-            if (customData == undefined) {
-                layers[i].context.putImageData(imageDatas[copiedDataIndex], leftOffset, topOffset);
-            }
-            else {
-                layers[i].context.putImageData(customData[copiedDataIndex], 0, 0);
-            }
-            layers[i].updateLayerPreview();
-            copiedDataIndex++;
-        }
-    }
-
-    Dialogue.closeDialogue();
-}
-
-/** Trims the canvas so tat the sprite is perfectly contained in it
- * 
- * @param {*} event 
- * @param {*} saveHistory Should I save the history? You shouldn't if you're undoing
- */
-function trimCanvas(event, saveHistory) {
-    let minY = Infinity;
-    let minX = Infinity;
-    let maxX = -Infinity;
-    let maxY = -Infinity;
-    let tmp;
-    let imageDatas = [];
-    let historySave = saveHistory == null;
-    let prevPivot = rcPivot;
-
-    rcPivot = "topleft";
-    console.log("debug");
-
-    // Computing the min and max coordinates in which there's a non empty pixel
-    for (let i=1; i<layers.length - nAppLayers; i++) {
-        let imageData = layers[i].context.getImageData(0, 0, layers[0].canvasSize[0], layers[0].canvasSize[1]);
-        let pixelPosition;
-
-        for (let i=imageData.data.length - 1; i>= 0; i-=4) {
-            if (!Util.isPixelEmpty(
-                [imageData.data[i - 3], imageData.data[i - 2], 
-                -imageData.data[i - 1], imageData.data[i]])) {
-                pixelPosition = getPixelPosition(i);        
-
-                // max x
-                if (pixelPosition[0] > maxX) {
-                    maxX = pixelPosition[0];
-                }
-                // min x
-                if (pixelPosition[0] < minX) {
-                    minX = pixelPosition[0];
-                }
-                // max y
-                if (pixelPosition[1] > maxY) {
-                    maxY = pixelPosition[1];
-                }
-                // min y
-                if (pixelPosition[1] < minY) {
-                    minY = pixelPosition[1];
-                }
-            }
-        }
-    }
-
-    tmp = minY;
-    minY = maxY;
-    maxY = tmp;
-
-    minY = layers[0].canvasSize[1] - minY;
-    maxY = layers[0].canvasSize[1] - maxY;
-
-    // Setting the borders coherently with the values I've just computed
-    rcBorders.right = (maxX - layers[0].canvasSize[0]) + 1;
-    rcBorders.left = -minX;
-    rcBorders.top = maxY - layers[0].canvasSize[1] + 1;
-    rcBorders.bottom = -minY;
-
-    // Saving the data
-    for (let i=0; i<layers.length; i++) {
-        if (layers[i].menuEntry != null) {
-            imageDatas.push(layers[i].context.getImageData(minX - 1, layers[i].canvasSize[1] - maxY, maxX-minX + 1, maxY-minY + 1));
-        }
-    }
-
-    console.log(imageDatas);
-    //console.log("sx: " + borders.left + "dx: " + borders.right + "top: " + borders.top + "btm: " + borders.bottom);
-
-    document.getElementById("rc-border-left").value = rcBorders.left;
-    document.getElementById("rc-border-right").value = rcBorders.right;
-    document.getElementById("rc-border-top").value = rcBorders.top;
-    document.getElementById("rc-border-bottom").value = rcBorders.bottom;
-
-    // Resizing the canvas with the decided border offsets
-    resizeCanvas(null, null, imageDatas.slice(), historySave);
-    // Resetting the previous pivot
-    rcPivot = prevPivot;
-}
-
-function rcUpdateBorders() {
-    // Getting input
-    rcBorders.left = document.getElementById("rc-border-left").value;
-    rcBorders.right = document.getElementById("rc-border-right").value;
-    rcBorders.top = document.getElementById("rc-border-top").value;
-    rcBorders.bottom = document.getElementById("rc-border-bottom").value;
-
-    // Validating input
-    rcBorders.left == "" ? rcBorders.left = 0 : rcBorders.left = Math.round(parseInt(rcBorders.left));
-    rcBorders.right == "" ? rcBorders.right = 0 : rcBorders.right = Math.round(parseInt(rcBorders.right));
-    rcBorders.top == "" ? rcBorders.top = 0 : rcBorders.top = Math.round(parseInt(rcBorders.top));
-    rcBorders.bottom == "" ? rcBorders.bottom = 0 : rcBorders.bottom = Math.round(parseInt(rcBorders.bottom));
-}
-
-function changePivot(event) {
-    rcPivot = event.target.getAttribute("value");
-
-    // Setting the selected class
-    currentPivotObject.classList.remove("rc-selected-pivot");
-    currentPivotObject = event.target;
-    currentPivotObject.classList.add("rc-selected-pivot");
-}
-
diff --git a/js/_resizeSprite.js b/js/_resizeSprite.js
index aa2e00d..22a2069 100644
--- a/js/_resizeSprite.js
+++ b/js/_resizeSprite.js
@@ -20,13 +20,13 @@ function openResizeSpriteWindow() {
     initResizeSpriteInputs();
 
     // Computing the current ratio
-    currentRatio = layers[0].canvasSize[0] / layers[0].canvasSize[1];
+    currentRatio = currFile.canvasSize[0] / currFile.canvasSize[1];
 
     console.log("Current ratio: " + currentRatio);
 
     // Initializing the input fields
-    data.width = layers[0].canvasSize[0];
-    data.height = layers[1].canvasSize[1];
+    data.width = currFile.canvasSize[0];
+    data.height = currFile.canvasSize[1];
 
     startData.width = parseInt(data.width);
     startData.height = parseInt(data.height);
@@ -41,8 +41,8 @@ function openResizeSpriteWindow() {
  * 
  */
 function initResizeSpriteInputs() {
-    document.getElementById("rs-width").value = layers[0].canvasSize[0];
-    document.getElementById("rs-height").value = layers[0].canvasSize[1];
+    document.getElementById("rs-width").value = currFile.canvasSize[0];
+    document.getElementById("rs-height").value = currFile.canvasSize[1];
 
     document.getElementById("rs-width-percentage").value = 100;
     document.getElementById("rs-height-percentage").value = 100;
@@ -76,8 +76,8 @@ function resizeSprite(event, ratio) {
     // Copy of the imageDatas that will be stored in the history
     let imageDatasCopy = [];
 
-    oldWidth = layers[0].canvasSize[0];
-    oldHeight = layers[1].canvasSize[1];
+    oldWidth = currFile.canvasSize[0];
+    oldHeight = currFile.canvasSize[1];
     rcPivot = "middle";
 
     // Updating values if the user didn't press enter
@@ -105,15 +105,15 @@ function resizeSprite(event, ratio) {
         newHeight = data.height;
     }
     else {
-        newWidth = layers[0].canvasSize[0] * ratio[0];
-        newHeight = layers[1].canvasSize[1] * ratio[1];
+        newWidth = currFile.canvasSize[0] * ratio[0];
+        newHeight = currFile.canvasSize[1] * ratio[1];
     }
     
     // Get all the image datas
-    for (let i=0; i<layers.length; i++) {
-        if (layers[i].menuEntry != null) {
-            rsImageDatas.push(layers[i].context.getImageData(
-                0, 0, layers[0].canvasSize[0], layers[0].canvasSize[1])
+    for (let i=0; i<currFile.layers.length; i++) {
+        if (currFile.layers[i].hasCanvas()) {
+            rsImageDatas.push(currFile.layers[i].context.getImageData(
+                0, 0, currFile.canvasSize[0], currFile.canvasSize[1])
             );
         }
     }
@@ -127,15 +127,15 @@ function resizeSprite(event, ratio) {
     }
 
     // Resizing the canvas
-    resizeCanvas(null, {x: newWidth, y: newHeight});
+    currFile.resizeCanvas(null, {x: newWidth, y: newHeight});
 
     // Put the image datas on the new canvases
-    for (let i=0; i<layers.length; i++) {
-        if (layers[i].menuEntry != null) {
-            layers[i].context.putImageData(
+    for (let i=0; i<currFile.layers.length; i++) {
+        if (currFile.layers[i].hasCanvas()) {
+            currFile.layers[i].context.putImageData(
                 resizeImageData(rsImageDatas[layerIndex], newWidth, newHeight, currentAlgo), 0, 0
             );
-            layers[i].updateLayerPreview();
+            currFile.layers[i].updateLayerPreview();
             layerIndex++;
         }
     }
@@ -147,8 +147,8 @@ function resizeSprite(event, ratio) {
         startData.height = data.height;
     }
     else {
-        startData.width = layers[0].canvasSize[0];
-        startData.height = layers[0].canvasSize[1];
+        startData.width = currFile.canvasSize[0];
+        startData.height = currFile.canvasSize[1];
     }
 
     startData.widthPercentage = 100;
diff --git a/js/data/variables.js b/js/data/variables.js
deleted file mode 100644
index a531570..0000000
--- a/js/data/variables.js
+++ /dev/null
@@ -1,27 +0,0 @@
-//init variables
-var canvasSize; // REFACTOR: Canvas class / getCanvasSize method
-var zoom = 7; // REFACTOR: EditorState class/IIFE? Leave this one for later
-var lastMouseClickPos = [0,0]; // REFACTOR: Input IIFE via getter? <- probably editor state as it is changed by tools
-
-// REFACTOR: File class?
-var canvasView = document.getElementById("canvas-view");
-
-// Layers
-// REFACTOR: File class / IIFE?
-var layers = [];
-// REFACTOR: File class?
-var currentLayer;
-
-// VFX layer used to draw previews of the selection and things like that
-// REFACTOR: File class
-var VFXLayer;
-// TMP layer
-// REFACTOR: File class
-var TMPLayer;
-
-// Pixel grid layer
-// REFACTOR: File class
-let pixelGrid;
-
-// REFACTOR: File class
-let checkerBoard;
\ No newline at end of file
diff --git a/js/layers/Checkerboard.js b/js/layers/Checkerboard.js
index 9553ae9..1202271 100644
--- a/js/layers/Checkerboard.js
+++ b/js/layers/Checkerboard.js
@@ -27,29 +27,29 @@ class Checkerboard extends Layer {
      * 
      */
     fillCheckerboard() {
-        this.context.clearRect(0, 0, this.canvasSize[0], this.canvasSize[1]);
+        this.context.clearRect(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
 
         // Cycling through the canvas (using it as a matrix)
-        for (let i=0; i<this.canvasSize[0] / this.checkerBoardSquareSize; i++) {
+        for (let i=0; i<currFile.canvasSize[0] / this.checkerBoardSquareSize; i++) {
             this.nSquaresFilled = 0;
 
-            for (let j=0; j<this.canvasSize[1] / this.checkerBoardSquareSize; j++) {
+            for (let j=0; j<currFile.canvasSize[1] / this.checkerBoardSquareSize; j++) {
                 let rectX;
                 let rectY;
 
                 // Managing the not perfect squares (the ones at the sides if the canvas' sizes are not powers of checkerBoardSquareSize
-                if (i * this.checkerBoardSquareSize < this.canvasSize[0]) {
+                if (i * this.checkerBoardSquareSize < currFile.canvasSize[0]) {
                     rectX = i * this.checkerBoardSquareSize;
                 }
                 else {
-                    rectX = this.canvasSize[0];
+                    rectX = currFile.canvasSize[0];
                 }
 
-                if (j * this.checkerBoardSquareSize < this.canvasSize[1]) {
+                if (j * this.checkerBoardSquareSize < currFile.canvasSize[1]) {
                     rectY = j * this.checkerBoardSquareSize;
                 }
                 else {
-                    rectY = this.canvasSize[1];
+                    rectY = currFile.canvasSize[1];
                 }
 
                 // Selecting the colour
diff --git a/js/layers/Layer.js b/js/layers/Layer.js
index 3300839..fca2b23 100644
--- a/js/layers/Layer.js
+++ b/js/layers/Layer.js
@@ -19,10 +19,10 @@ class Layer {
     // If it's an HTML element it is added, if it's a string nothing happens, if it's undefined the 
     // first menuEntry is used (the one that appears on load)
     constructor(width, height, canvas, menuEntry) {
-        // REFACTOR: this could just be an attribute of a Canvas class
-        this.canvasSize = [width, height];
         // REFACTOR: the canvas should actually be a Canvas instance
         this.canvas = Util.getElement(canvas);
+        this.canvas.width = width;
+        this.canvas.height = height;
         // REFACTOR: the context could be an attribute of the canvas class, but it's a bit easier
         // to just type layer.context, we should discuss this
         this.context = this.canvas.getContext('2d');
@@ -69,20 +69,22 @@ class Layer {
         this.initialize();
     }
 
+    hasCanvas() {
+        return this.menuEntry != null;
+    }
+
     // Initializes the canvas
     initialize() {
         //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';
+        this.canvas.style.width = (this.canvas.width*currFile.zoom)+'px';
+        this.canvas.style.height = (this.canvas.height*currFile.zoom)+'px';
 
         //show canvas
         this.canvas.style.display = 'block';
 
         //center canvas in window
-        this.canvas.style.left = 64+canvasView.clientWidth/2-(this.canvasSize[0]*zoom/2)+'px';
-        this.canvas.style.top = 48+canvasView.clientHeight/2-(this.canvasSize[1]*zoom/2)+'px';
+        this.canvas.style.left = 64+currFile.canvasView.clientWidth/2-(currFile.canvasSize[0]*currFile.zoom/2)+'px';
+        this.canvas.style.top = 48+currFile.canvasView.clientHeight/2-(currFile.canvasSize[1]*currFile.zoom/2)+'px';
 
         this.context.imageSmoothingEnabled = false;
         this.context.mozImageSmoothingEnabled = false;
@@ -94,8 +96,8 @@ class Layer {
         if (this.oldLayerName != null) {
             let name = this.menuEntry.getElementsByTagName("p")[0].innerHTML;
             
-            for (let i=0; i<layers.length; i++) {
-                if (name === layers[i].name) {
+            for (let i=0; i<currFile.layers.length; i++) {
+                if (name === currFile.layers[i].name) {
                     name += ' (1)';
                     i = 0;
                 }
@@ -103,25 +105,25 @@ class Layer {
             this.name = name;
             this.menuEntry.getElementsByTagName("p")[0].innerHTML = name;
 
-            new HistoryState().RenameLayer(this.oldLayerName, name, currentLayer);
+            new HistoryState().RenameLayer(this.oldLayerName, name, currFile.currentLayer);
             this.oldLayerName = null;
         }
     }
 
     hover() {
         // 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;
+        for (let i=1; i<currFile.layers.length - nAppLayers; i++) {
+            if (currFile.layers[i] !== this) {
+                currFile.layers[i].canvas.style.opacity = 0.3;
             }
         }
     }
 
     unhover() {
         // Shows all the layers again
-        for (let i=1; i<layers.length - nAppLayers; i++) {
-            if (layers[i] !== this) {
-                layers[i].canvas.style.opacity = 1;
+        for (let i=1; i<currFile.layers.length - nAppLayers; i++) {
+            if (currFile.layers[i] !== this) {
+                currFile.layers[i].canvas.style.opacity = 1;
             }
         }
     }
@@ -135,8 +137,8 @@ class Layer {
 
     // Resizes canvas
     resize() {
-        let newWidth = (this.canvas.width * zoom) + 'px';
-        let newHeight = (this.canvas.height *zoom)+ 'px';
+        let newWidth = (this.canvas.width * currFile.zoom) + 'px';
+        let newHeight = (this.canvas.height *currFile.zoom)+ 'px';
 
         this.canvas.style.width = newWidth;
         this.canvas.style.height = newHeight;
@@ -144,7 +146,7 @@ class Layer {
 
     setCanvasOffset (offsetLeft, offsetTop) {
         //horizontal offset
-        var minXOffset = -this.canvasSize[0] * zoom;
+        var minXOffset = -currFile.canvasSize[0] * currFile.zoom;
         var maxXOffset = window.innerWidth - 300;
     
         if 	(offsetLeft < minXOffset)
@@ -155,7 +157,7 @@ class Layer {
             this.canvas.style.left = offsetLeft +'px';
     
         //vertical offset
-        var minYOffset = -this.canvasSize[1] * zoom + 164;
+        var minYOffset = -currFile.canvasSize[1] * currFile.zoom + 164;
         var maxYOffset = window.innerHeight - 100;
     
         if 	(offsetTop < minYOffset)
@@ -178,19 +180,19 @@ class Layer {
     selectLayer(layer) {
         if (layer == null) {
             // Deselecting the old layer
-            currentLayer.deselectLayer();
+            currFile.currentLayer.deselectLayer();
 
             // Selecting the current layer
             this.isSelected = true;
             this.menuEntry.classList.add("selected-layer");
-            currentLayer = LayerList.getLayerByName(this.menuEntry.getElementsByTagName("p")[0].innerHTML);
+            currFile.currentLayer = LayerList.getLayerByName(this.menuEntry.getElementsByTagName("p")[0].innerHTML);
         }
         else {
-            currentLayer.deselectLayer();
+            currFile.currentLayer.deselectLayer();
 
             layer.isSelected = true;
             layer.menuEntry.classList.add("selected-layer");
-            currentLayer = layer;
+            currFile.currentLayer = layer;
         }
     }
 
@@ -256,8 +258,8 @@ class Layer {
     updateLayerPreview() {
         // Getting the canvas
         let destination = this.menuEntry.getElementsByTagName("canvas")[0];
-        let widthRatio = this.canvasSize[0] / this.canvasSize[1];
-        let heightRatio = this.canvasSize[1] / this.canvasSize[0];
+        let widthRatio = currFile.canvasSize[0] / currFile.canvasSize[1];
+        let heightRatio = currFile.canvasSize[1] / currFile.canvasSize[0];
 
         // Computing width and height for the preview image
         let previewWidth = destination.width;
@@ -291,10 +293,10 @@ class Layer {
             // If the current tool is the brush
             if (ToolManager.currentTool().name == 'brush' || ToolManager.currentTool().name == 'rectangle' || ToolManager.currentTool().name == 'ellipse') {
                 // I fill the rect
-                currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
+                currFile.currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
             } else if (ToolManager.currentTool().name == 'eraser') {
                 // In case I'm using the eraser I must clear the rect
-                currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
+                currFile.currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
             }
     
             //if we've reached the end goal, exit the loop
diff --git a/js/layers/PixelGrid.js b/js/layers/PixelGrid.js
index a6a8341..aba8ffd 100644
--- a/js/layers/PixelGrid.js
+++ b/js/layers/PixelGrid.js
@@ -63,7 +63,7 @@ class PixelGrid extends Layer {
      * 
      */
     fillPixelGrid() {
-        let originalSize = this.canvasSize;
+        let originalSize = currFile.canvasSize;
 
         // The pixelGridCanvas is lineDistance times bigger so that the lines don't take 1 canvas pixel 
         // (which would cover the whole canvas with the pixelGridColour), but they take 1/lineDistance canvas pixels
diff --git a/js/lib/jscolor.js b/js/lib/jscolor.js
index dc5fd29..3b840f0 100644
--- a/js/lib/jscolor.js
+++ b/js/lib/jscolor.js
@@ -550,7 +550,6 @@ if (!window.jscolor) { window.jscolor = (function () {
                     //console.log(e.target,'=====================================')
                     //if they clicked on the delete button [lospec]
                     if (e.target.className == 'delete-color-button') {
-                        //saveHistoryState({type: 'deletecolor', colorValue: jsc.picker.owner.toString(), canvas: canvas.context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
                         new HistoryState().DeleteColor(jsc.picker.owner.toString());
 
                         ColorModule.deleteColor(jsc.picker.owner.styleElement);
diff --git a/js/pixel-editor.js b/js/pixel-editor.js
index 3695712..f5bce99 100644
--- a/js/pixel-editor.js
+++ b/js/pixel-editor.js
@@ -9,6 +9,7 @@
 //=include Dialogue.js
 //=include History.js
 
+//=include File.js
 //=include ColorModule.js
 
 //=include Tool.js
@@ -50,10 +51,9 @@
 //=include PaletteBlock.js
 //=include SplashPage.js
 
-/**buttons**/
+/**menus**/
 //=include FileManager.js
 //=include TopMenuModule.js
-//=include _ellipse.js
 
 /**event listeners**/
 //=include Input.js
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index 5fbf1e7..70776b9 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -19,15 +19,15 @@ class BrushTool extends ResizableTool {
             return;
         //draw line to current pixel
         if (cursorTarget.className == 'drawingCanvas' || cursorTarget.className == 'drawingCanvas') {
-            currentLayer.drawLine(Math.floor(this.prevMousePos[0]/zoom),
-                Math.floor(this.prevMousePos[1]/zoom),
-                Math.floor(this.currMousePos[0]/zoom),
-                Math.floor(this.currMousePos[1]/zoom), 
+            currFile.currentLayer.drawLine(Math.floor(this.prevMousePos[0]/currFile.zoom),
+                Math.floor(this.prevMousePos[1]/currFile.zoom),
+                Math.floor(this.currMousePos[0]/currFile.zoom),
+                Math.floor(this.currMousePos[1]/currFile.zoom), 
                 this.currSize
             );
         }
 
-        currentLayer.updateLayerPreview();
+        currFile.currentLayer.updateLayerPreview();
 	}
 
 	onEnd(mousePos) {
diff --git a/js/tools/EraserTool.js b/js/tools/EraserTool.js
index 4061ed0..7a296c2 100644
--- a/js/tools/EraserTool.js
+++ b/js/tools/EraserTool.js
@@ -19,15 +19,15 @@ class EraserTool extends ResizableTool {
             return;
         //draw line to current pixel
         if (cursorTarget.className == 'drawingCanvas' || cursorTarget.className == 'drawingCanvas') {
-            currentLayer.drawLine(Math.floor(this.prevMousePos[0]/zoom),
-                Math.floor(this.prevMousePos[1]/zoom),
-                Math.floor(this.currMousePos[0]/zoom),
-                Math.floor(this.currMousePos[1]/zoom), 
+            currFile.currentLayer.drawLine(Math.floor(this.prevMousePos[0]/currFile.zoom),
+                Math.floor(this.prevMousePos[1]/currFile.zoom),
+                Math.floor(this.currMousePos[0]/currFile.zoom),
+                Math.floor(this.currMousePos[1]/currFile.zoom), 
                 this.currSize
             );
         }
 
-        currentLayer.updateLayerPreview();
+        currFile.currentLayer.updateLayerPreview();
 	}
 
 	onEnd(mousePos) {
diff --git a/js/tools/EyeDropperTool.js b/js/tools/EyeDropperTool.js
index 14fde97..bacd62f 100644
--- a/js/tools/EyeDropperTool.js
+++ b/js/tools/EyeDropperTool.js
@@ -24,8 +24,8 @@ class EyedropperTool extends Tool {
         this.selectedColor = this.pickColor(mousePos);
 
         this.eyedropperPreview.style.borderColor = '#' + Color.rgbToHex(this.selectedColor);
-        this.eyedropperPreview.style.left = mousePos[0] + currentLayer.canvas.offsetLeft - 30 + 'px';
-        this.eyedropperPreview.style.top = mousePos[1] + currentLayer.canvas.offsetTop - 30 + 'px';
+        this.eyedropperPreview.style.left = mousePos[0] + currFile.currentLayer.canvas.offsetLeft - 30 + 'px';
+        this.eyedropperPreview.style.top = mousePos[1] + currFile.currentLayer.canvas.offsetTop - 30 + 'px';
 
         const colorLightness = Math.max(this.selectedColor.r,this.selectedColor.g,this.selectedColor.b);
 
@@ -53,8 +53,8 @@ class EyedropperTool extends Tool {
                 document.querySelector("#colors-menu li.selected")?.classList.remove("selected");
 
                 //set current color
-                for (let i=2; i<layers.length; i++) {
-                    layers[i].context.fillStyle = '#' + colorHex;
+                for (let i=2; i<currFile.layers.length; i++) {
+                    currFile.layers[i].context.fillStyle = '#' + colorHex;
                 }
 
                 //make color selected
@@ -77,13 +77,13 @@ class EyedropperTool extends Tool {
         // Returned colour
         let selectedColor;
 
-        for (let i=1; i<layers.length-3; i++) {
+        for (let i=1; i<currFile.layers.length-3; i++) {
             // Getting the colour of the pixel in the cursorLocation
-            tmpColour = layers[i].context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
+            tmpColour = currFile.layers[i].context.getImageData(Math.floor(cursorLocation[0]/currFile.zoom),Math.floor(cursorLocation[1]/currFile.zoom),1,1).data;
 
             // If it's not empty, I check if it's on the top of the previous colour
-            if (layers[i].canvas.style.zIndex > max || Util.isPixelEmpty(selectedColor) || selectedColor === undefined) {
-                max = layers[i].canvas.style.zIndex;
+            if (currFile.layers[i].canvas.style.zIndex > max || Util.isPixelEmpty(selectedColor) || selectedColor === undefined) {
+                max = currFile.layers[i].canvas.style.zIndex;
 
                 if (!Util.isPixelEmpty(tmpColour)) {
                     selectedColor = tmpColour;
diff --git a/js/tools/FillTool.js b/js/tools/FillTool.js
index b9f7d45..b96c4fc 100644
--- a/js/tools/FillTool.js
+++ b/js/tools/FillTool.js
@@ -11,7 +11,7 @@ class FillTool extends Tool {
         if (target.className != 'drawingCanvas')
             return;
         this.fill(mousePos);
-        currentLayer.updateLayerPreview();
+        currFile.currentLayer.updateLayerPreview();
         
         new HistoryState().EditCanvas();
 	}
@@ -40,20 +40,20 @@ class FillTool extends Tool {
         }
 
         //temporary image holds the data while we change it
-        let tempImage = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
+        let tempImage = currFile.currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
 
         //this is an array that holds all of the pixels at the top of the cluster
-        let topmostPixelsArray = [[Math.floor(cursorLocation[0]/zoom), Math.floor(cursorLocation[1]/zoom)]];
+        let topmostPixelsArray = [[Math.floor(cursorLocation[0]/currFile.zoom), Math.floor(cursorLocation[1]/currFile.zoom)]];
         //console.log('topmostPixelsArray:',topmostPixelsArray)
 
         //the offset of the pixel in the temp image data to start with
-        let startingPosition = (topmostPixelsArray[0][1] * canvasSize[0] + topmostPixelsArray[0][0]) * 4;
+        let startingPosition = (topmostPixelsArray[0][1] * currFile.canvasSize[0] + topmostPixelsArray[0][0]) * 4;
 
         //the color of the cluster that is being filled
         let clusterColor = [tempImage.data[startingPosition],tempImage.data[startingPosition+1],tempImage.data[startingPosition+2], tempImage.data[startingPosition+3]];
 
         //the color to fill with
-        let fillColor = Color.hexToRgb(currentLayer.context.fillStyle);
+        let fillColor = Color.hexToRgb(currFile.currentLayer.context.fillStyle);
         
         //if you try to fill with the same color that's already there, exit the function
         if (clusterColor[0] == fillColor.r &&
@@ -78,18 +78,18 @@ class FillTool extends Tool {
             //this variable holds the index of where the starting values for the current pixel are in the data array
             //we multiply the number of rows down (y) times the width of each row, then add x. at the end we multiply by 4 because
             //each pixel has 4 values, rgba
-            let pixelPos = (y * canvasSize[0] + x) * 4;
+            let pixelPos = (y * currFile.canvasSize[0] + x) * 4;
 
             //move up in the image until you reach the top or the pixel you hit was not the right color
             while (y-- >= 0 && matchStartColor(tempImage, pixelPos, clusterColor)) {
-                pixelPos -= canvasSize[0] * 4;
+                pixelPos -= currFile.canvasSize[0] * 4;
             }
-            pixelPos += canvasSize[0] * 4;
+            pixelPos += currFile.canvasSize[0] * 4;
             ++y;
             reachLeft = false;
             reachRight = false;
             
-            while (y++ < canvasSize[1] - 1 && matchStartColor(tempImage, pixelPos, clusterColor)) {
+            while (y++ < currFile.canvasSize[1] - 1 && matchStartColor(tempImage, pixelPos, clusterColor)) {
                 colorPixel(tempImage, pixelPos, fillColor);
                 if (x > 0) {
                     if (matchStartColor(tempImage, pixelPos - 4, clusterColor)) {
@@ -103,7 +103,7 @@ class FillTool extends Tool {
                     }
                 }
 
-                if (x < canvasSize[0] - 1) {
+                if (x < currFile.canvasSize[0] - 1) {
                     if (matchStartColor(tempImage, pixelPos + 4, clusterColor)) {
                         if (!reachRight) {
                             topmostPixelsArray.push([x + 1, y]);
@@ -115,10 +115,10 @@ class FillTool extends Tool {
                     }
                 }
 
-                pixelPos += canvasSize[0] * 4;
+                pixelPos += currFile.canvasSize[0] * 4;
             }
         }
-        currentLayer.context.putImageData(tempImage, 0, 0);
+        currFile.currentLayer.context.putImageData(tempImage, 0, 0);
     }
 
 	onDrag(mousePos, cursorTarget) {
diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index 78f66b9..8fb8006 100644
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -11,7 +11,7 @@ class LineTool extends ResizableTool {
         super.onStart(mousePos);
 
         // Putting the tmp layer on top of everything
-        TMPLayer.canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
+        currFile.TMPLayer.canvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex, 10) + 1;
 
         this.startMousePos[0] = Math.floor(mousePos[0]) + 0.5;
         this.startMousePos[1] = Math.floor(mousePos[1]) + 0.5;
@@ -34,18 +34,18 @@ class LineTool extends ResizableTool {
 	onEnd(mousePos) {
         super.onEnd(mousePos);
 
-        const tmpContext = TMPLayer.context;
-        const tmpCanvas = TMPLayer.canvas;
+        const tmpContext = currFile.TMPLayer.context;
+        const tmpCanvas = currFile.TMPLayer.canvas;
         // Setting the correct linewidth and colour
-        currentLayer.context.lineWidth = this.currSize;
+        currFile.currentLayer.context.lineWidth = this.currSize;
 
         // Drawing the line
-		currentLayer.context.drawImage(tmpCanvas, 0, 0);
+		currFile.currentLayer.context.drawImage(tmpCanvas, 0, 0);
 
         // Update the layer preview
-        currentLayer.updateLayerPreview();
+        currFile.currentLayer.updateLayerPreview();
         // Clearing the tmp canvas
-        tmpContext.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
+        tmpContext.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
 	}
 
     onSelect() {
@@ -57,10 +57,10 @@ class LineTool extends ResizableTool {
     }
 
     drawLine(mousePos) {
-        let x0 = Math.floor(this.startMousePos[0]/zoom);
-        let y0 = Math.floor(this.startMousePos[1]/zoom);
-        let x1 = Math.floor(mousePos[0]/zoom);
-        let y1 = Math.floor(mousePos[1]/zoom);
+        let x0 = Math.floor(this.startMousePos[0]/currFile.zoom);
+        let y0 = Math.floor(this.startMousePos[1]/currFile.zoom);
+        let x1 = Math.floor(mousePos[0]/currFile.zoom);
+        let y1 = Math.floor(mousePos[1]/currFile.zoom);
 
         let dx = Math.abs(x1-x0);
         let dy = Math.abs(y1-y0);
@@ -72,7 +72,7 @@ class LineTool extends ResizableTool {
         const context = canvas.getContext('2d');
 
         context.clearRect(0, 0, canvas.width, canvas.height);
-        canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
+        canvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex, 10) + 1;
 
         while (true) {
             context.fillRect(x0-Math.floor(this.currSize/2), y0-Math.floor(this.currSize/2), this.currSize, this.currSize);
diff --git a/js/tools/MoveSelectionTool.js b/js/tools/MoveSelectionTool.js
index bd57383..bc9c2ed 100644
--- a/js/tools/MoveSelectionTool.js
+++ b/js/tools/MoveSelectionTool.js
@@ -30,7 +30,7 @@ class MoveSelectionTool extends Tool {
         this.endSelection();
         this.currSelection = this.lastCopiedSelection;
         // Cut the data
-        currentLayer.context.clearRect(this.currSelection.left-0.5, this.currSelection.top-0.5,
+        currFile.currentLayer.context.clearRect(this.currSelection.left-0.5, this.currSelection.top-0.5,
             this.currSelection.width, this.currSelection.height);
     }
 
@@ -47,7 +47,7 @@ class MoveSelectionTool extends Tool {
         this.currSelection = this.lastCopiedSelection;
 
         // Putting the vfx layer on top of everything
-        VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
+        currFile.VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
         this.onDrag(this.currMousePos);
 
         new HistoryState().EditCanvas();
@@ -65,16 +65,16 @@ class MoveSelectionTool extends Tool {
     onDrag(mousePos) {
         super.onDrag(mousePos);
 
-        this.currSelection = this.selectionTool.moveAnts(mousePos[0]/zoom, 
-            mousePos[1]/zoom, this.currSelection.width, this.currSelection.height);
+        this.currSelection = this.selectionTool.moveAnts(mousePos[0]/currFile.zoom, 
+            mousePos[1]/currFile.zoom, this.currSelection.width, this.currSelection.height);
 
         // clear the entire tmp layer
-        TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
+        TMPLayer.context.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
         // put the image data on the tmp layer with offset
-        TMPLayer.context.putImageData(
+        currFile.TMPLayer.context.putImageData(
             this.currSelection.data, 
-            Math.round(mousePos[0] / zoom) - this.currSelection.width / 2, 
-            Math.round(mousePos[1] / zoom) - this.currSelection.height / 2);
+            Math.round(mousePos[0] / currFile.zoom) - this.currSelection.width / 2, 
+            Math.round(mousePos[1] / currFile.zoom) - this.currSelection.height / 2);
     }
 
     onEnd(mousePos) {
@@ -99,17 +99,17 @@ class MoveSelectionTool extends Tool {
         super.onHover(mousePos);
 
         if (this.cursorInSelectedArea(mousePos)) {
-            canvasView.style.cursor = 'move';
+            currFile.canvasView.style.cursor = 'move';
         }
         else {
-            canvasView.style.cursor = 'default';
+            currFile.canvasView.style.cursor = 'default';
         }
     }
 
     cursorInSelectedArea(cursorPos) {        
         // Getting the coordinates relatively to the canvas
-        let x = cursorPos[0] / zoom;
-        let y = cursorPos[1] / zoom;
+        let x = cursorPos[0] / currFile.zoom;
+        let y = cursorPos[1] / currFile.zoom;
     
         if (this.currSelection.left <= x && x <= this.currSelection.right) {
             if (y <= this.currSelection.bottom && y >= this.currSelection.top) {
@@ -124,12 +124,12 @@ class MoveSelectionTool extends Tool {
         if (this.currSelection == undefined)
             return;
         // Clearing the tmp (move preview) and vfx (ants) layers
-        TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
-        VFXLayer.context.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
+        currFile.TMPLayer.context.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
+        currFile.VFXLayer.context.clearRect(0, 0, currFile.VFXLayer.canvas.width, currFile.VFXLayer.canvas.height);
 
         // I have to save the underlying data, so that the transparent pixels in the clipboard 
         // don't override the coloured pixels in the canvas
-        let underlyingImageData = currentLayer.context.getImageData(
+        let underlyingImageData = currFile.currentLayer.context.getImageData(
             this.currSelection.left, this.currSelection.top, 
             this.currSelection.width+1, this.currSelection.height+1
         );
@@ -162,13 +162,13 @@ class MoveSelectionTool extends Tool {
             }
         }
 
-        currentLayer.context.putImageData(new ImageData(pasteData, this.currSelection.width+1),
+        currFile.currentLayer.context.putImageData(new ImageData(pasteData, this.currSelection.width+1),
             this.currSelection.left, this.currSelection.top
         );
 
         this.currSelection = undefined;
-        currentLayer.updateLayerPreview();
-        VFXLayer.canvas.style.zIndex = MIN_Z_INDEX;
+        currFile.currentLayer.updateLayerPreview();
+        currFile.VFXLayer.canvas.style.zIndex = MIN_Z_INDEX;
         
         // Switch to brush
         this.switchFunc(this.endTool);
diff --git a/js/tools/PanTool.js b/js/tools/PanTool.js
index c4fb842..a35f68c 100644
--- a/js/tools/PanTool.js
+++ b/js/tools/PanTool.js
@@ -8,29 +8,29 @@ class PanTool extends Tool {
 
     onStart(mousePos) {
         super.onStart(mousePos);
-        canvasView.style.cursor = "url(\'/pixel-editor/pan-held.png\'), auto";
+        currFile.canvasView.style.cursor = "url(\'/pixel-editor/pan-held.png\'), auto";
 	}
 
 	onDrag(mousePos) {
         super.onDrag(mousePos);
 
         // Setting first layer position
-        layers[0].setCanvasOffset(layers[0].canvas.offsetLeft + (mousePos[0] - this.startMousePos[0]), layers[0].canvas.offsetTop + (mousePos[1] - this.startMousePos[1]));
+        currFile.layers[0].setCanvasOffset(currFile.layers[0].canvas.offsetLeft + (mousePos[0] - this.startMousePos[0]), currFile.layers[0].canvas.offsetTop + (mousePos[1] - this.startMousePos[1]));
         // Copying that position to the other layers
-        for (let i=1; i<layers.length; i++) {
-            layers[i].copyData(layers[0]);
+        for (let i=1; i<currFile.layers.length; i++) {
+            currFile.layers[i].copyData(currFile.layers[0]);
         }
 	}
 
 	onEnd(mousePos) {
         super.onEnd(mousePos);
 
-        canvasView.style.cursor = "url(\'/pixel-editor/pan.png\'), auto";
+        currFile.canvasView.style.cursor = "url(\'/pixel-editor/pan.png\'), auto";
 	}
 
     onSelect() {
         super.onSelect();        
-        canvasView.style.cursor = "url(\'/pixel-editor/pan.png\'), auto";
+        currFile.canvasView.style.cursor = "url(\'/pixel-editor/pan.png\'), auto";
     }
 
     onDeselect() {
diff --git a/js/tools/RectangleTool.js b/js/tools/RectangleTool.js
index e9ac5c5..4176233 100644
--- a/js/tools/RectangleTool.js
+++ b/js/tools/RectangleTool.js
@@ -39,10 +39,10 @@ class RectangleTool extends ResizableTool {
         super.onStart(mousePos);
 
         // Putting the tmp layer on top of everything
-        TMPLayer.canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
+        currFile.TMPLayer.canvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex, 10) + 1;
 
-        this.startMousePos[0] = Math.floor(mousePos[0] / zoom) + 0.5;
-        this.startMousePos[1] = Math.floor(mousePos[1] / zoom) + 0.5;
+        this.startMousePos[0] = Math.floor(mousePos[0] / currFile.zoom) + 0.5;
+        this.startMousePos[1] = Math.floor(mousePos[1] / currFile.zoom) + 0.5;
 
         new HistoryState().EditCanvas();
 	}
@@ -50,7 +50,7 @@ class RectangleTool extends ResizableTool {
 	onDrag(mousePos, cursorTarget) {
 
         // Drawing the rect at the right position
-	    this.drawRect(Math.floor(mousePos[0] / zoom) + 0.5, Math.floor(mousePos[1] / zoom) + 0.5);
+	    this.drawRect(Math.floor(mousePos[0] / currFile.zoom) + 0.5, Math.floor(mousePos[1] / currFile.zoom) + 0.5);
 	}
 
     /** Finishes drawing the rect, decides the end coordinates and moves the preview rectangle to the
@@ -60,12 +60,10 @@ class RectangleTool extends ResizableTool {
      */
 	onEnd(mousePos) {
         super.onEnd(mousePos);
-        console.log("Rect end");
+        let tmpContext = currFile.TMPLayer.context;
 
-        let tmpContext = TMPLayer.context;
-
-        let endRectX = Math.floor(mousePos[0] / zoom) + 0.5;
-        let endRectY = Math.floor(mousePos[1] / zoom) + 0.5;
+        let endRectX = Math.floor(mousePos[0] / currFile.zoom) + 0.5;
+        let endRectY = Math.floor(mousePos[1] / currFile.zoom) + 0.5;
         let startRectX = this.startMousePos[0];
         let startRectY = this.startMousePos[1];
 
@@ -89,23 +87,23 @@ class RectangleTool extends ResizableTool {
         startRectX -= 0.5;
 
         // Setting the correct linewidth and colour
-        currentLayer.context.lineWidth = this.currSize;
+        currFile.currentLayer.context.lineWidth = this.currSize;
 
         // Drawing the rect using 4 lines
         currentLayer.drawLine(startRectX, startRectY, endRectX, startRectY, this.currSize);
-        currentLayer.drawLine(endRectX, startRectY, endRectX, endRectY, this.currSize);
-        currentLayer.drawLine(endRectX, endRectY, startRectX, endRectY, this.currSize);
-        currentLayer.drawLine(startRectX, endRectY, startRectX, startRectY, this.currSize);
+        currFile.currentLayer.drawLine(endRectX, startRectY, endRectX, endRectY, this.currSize);
+        currFile.currentLayer.drawLine(endRectX, endRectY, startRectX, endRectY, this.currSize);
+        currFile.currentLayer.drawLine(startRectX, endRectY, startRectX, startRectY, this.currSize);
 
         // If I have to fill it, I do so
         if (this.currFillMode == 'fill') {
-            currentLayer.context.fillRect(startRectX, startRectY, endRectX - startRectX, endRectY - startRectY);
+            currFile.currentLayer.context.fillRect(startRectX, startRectY, endRectX - startRectX, endRectY - startRectY);
         }
 
         // Update the layer preview
-        currentLayer.updateLayerPreview();
+        currFile.currentLayer.updateLayerPreview();
         // Clearing the tmp canvas
-        tmpContext.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
+        tmpContext.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
 	}
 
     onSelect() {
@@ -124,10 +122,10 @@ class RectangleTool extends ResizableTool {
      */
     drawRect(x, y) {
         // Getting the tmp context
-        let tmpContext = TMPLayer.context;
+        let tmpContext = currFile.TMPLayer.context;
 
         // Clearing the tmp canvas
-        tmpContext.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
+        tmpContext.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
 
         // Drawing the rect
         tmpContext.lineWidth = this.currSize;
diff --git a/js/tools/RectangularSelectionTool.js b/js/tools/RectangularSelectionTool.js
index 93e222d..1aeae28 100644
--- a/js/tools/RectangularSelectionTool.js
+++ b/js/tools/RectangularSelectionTool.js
@@ -15,25 +15,25 @@ class RectangularSelectionTool extends SelectionTool {
         super.onStart(mousePos);
 
         // Putting the vfx layer on top of everything
-        VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
+        currFile.VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
 
         // Saving the start coords of the rect
-        this.startMousePos[0] = Math.round(this.startMousePos[0] / zoom) - 0.5;
-        this.startMousePos[1] = Math.round(this.startMousePos[1] / zoom) - 0.5;
+        this.startMousePos[0] = Math.round(this.startMousePos[0] / currFile.zoom) - 0.5;
+        this.startMousePos[1] = Math.round(this.startMousePos[1] / currFile.zoom) - 0.5;
 
         // Avoiding external selections
         if (this.startMousePos[0] < 0) {
             this.startMousePos[0] = 0;
         }
-        else if (this.startMousePos[0] > currentLayer.canvas.width) {
-            this.startMousePos[0] = currentLayer.canvas.width;
+        else if (this.startMousePos[0] > currFile.currentLayer.canvas.width) {
+            this.startMousePos[0] = currFile.currentLayer.canvas.width;
         }
 
         if (this.startMousePos[1] < 0) {
             this.startMousePos[1] = 0;
         }
-        else if (this.startMousePos[1] > currentLayer.canvas.height) {
-            this.startMousePos[1] = currentLayer.canvas.height;
+        else if (this.startMousePos[1] > currFile.currentLayer.canvas.height) {
+            this.startMousePos[1] = currFile.currentLayer.canvas.height;
         }
 
         // Drawing the rect
@@ -44,7 +44,7 @@ class RectangularSelectionTool extends SelectionTool {
         super.onDrag(mousePos);
 
         // Drawing the rect
-        this.drawSelection(Math.round(mousePos[0] / zoom) + 0.5, Math.round(mousePos[1] / zoom) + 0.5);
+        this.drawSelection(Math.round(mousePos[0] / currFile.zoom) + 0.5, Math.round(mousePos[1] / currFile.zoom) + 0.5);
     }
 
     onEnd(mousePos) {
@@ -52,8 +52,8 @@ class RectangularSelectionTool extends SelectionTool {
         new HistoryState().EditCanvas();
 
         // Getting the end position
-        this.endMousePos[0] = Math.round(this.endMousePos[0] / zoom) + 0.5;
-        this.endMousePos[1] = Math.round(this.endMousePos[1] / zoom) + 0.5;
+        this.endMousePos[0] = Math.round(this.endMousePos[0] / currFile.zoom) + 0.5;
+        this.endMousePos[1] = Math.round(this.endMousePos[1] / currFile.zoom) + 0.5;
 
         // Inverting end and start (start must always be the top left corner)
         if (this.endMousePos[0] < this.startMousePos[0]) {
@@ -81,17 +81,17 @@ class RectangularSelectionTool extends SelectionTool {
             width: dataWidth,
             height: dataHeight,
             
-            data: currentLayer.context.getImageData(
+            data: currFile.currentLayer.context.getImageData(
                 this.startMousePos[0], this.startMousePos[1], 
                 dataWidth + 1, dataHeight + 1)
         };
         
         // Moving the selection to the TMP layer. It will be moved back to the original
         // layer if the user will cancel or end the selection
-        currentLayer.context.clearRect(this.startMousePos[0] - 0.5, this.startMousePos[1] - 0.5, 
+        currFile.currentLayer.context.clearRect(this.startMousePos[0] - 0.5, this.startMousePos[1] - 0.5, 
             dataWidth + 1, dataHeight + 1);
         // Moving those pixels from the current layer to the tmp layer
-        TMPLayer.context.putImageData(this.currSelection.data, this.startMousePos[0], this.startMousePos[1]);
+        currFile.TMPLayer.context.putImageData(this.currSelection.data, this.startMousePos[0], this.startMousePos[1]);
 
         this.moveTool.setSelectionData(this.currSelection, this);
         console.log("data set");
@@ -107,10 +107,10 @@ class RectangularSelectionTool extends SelectionTool {
 
     drawSelection(x, y) {
         // Getting the vfx context
-        let vfxContext = VFXLayer.context;
+        let vfxContext = currFile.VFXLayer.context;
     
         // Clearing the vfx canvas
-        vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
+        vfxContext.clearRect(0, 0, currFile.VFXLayer.canvas.width, currFile.VFXLayer.canvas.height);
         vfxContext.lineWidth = 1;
         vfxContext.strokeStyle = 'black';
         vfxContext.setLineDash([4]);
@@ -133,11 +133,11 @@ class RectangularSelectionTool extends SelectionTool {
      */
     moveAnts(x, y, width, height) {
         // Getting the vfx context
-        let vfxContext = VFXLayer.context;
+        let vfxContext = currFile.VFXLayer.context;
         let ret = this.currSelection;
 
         // Clearing the vfx canvas
-        vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
+        vfxContext.clearRect(0, 0, currFile.VFXLayer.canvas.width, currFile.VFXLayer.canvas.height);
         vfxContext.lineWidth = 1;
         vfxContext.setLineDash([4]);
 
diff --git a/js/tools/ResizableTool.js b/js/tools/ResizableTool.js
index 29b4214..e291251 100644
--- a/js/tools/ResizableTool.js
+++ b/js/tools/ResizableTool.js
@@ -13,7 +13,7 @@ class ResizableTool extends Tool {
 
     onRightDrag(mousePos, mouseEvent) {
         //get new brush size based on x distance from original clicking location
-        let distanceFromClick = mousePos[0]/zoom - this.startResizePos[0]/zoom;
+        let distanceFromClick = mousePos[0]/currFile.zoom - this.startResizePos[0]/currFile.zoom;
 
         let brushSizeChange = Math.round(distanceFromClick/10);
         let newBrushSize = this.currSize + brushSizeChange;
diff --git a/js/tools/ZoomTool.js b/js/tools/ZoomTool.js
index e7e0de0..a945bb6 100644
--- a/js/tools/ZoomTool.js
+++ b/js/tools/ZoomTool.js
@@ -6,77 +6,77 @@ class ZoomTool extends Tool {
         super.onMouseWheel(mousePos, mode);
 
         // Computing current width and height
-        let oldWidth = canvasSize[0] * zoom;
-        let oldHeight = canvasSize[1] * zoom;
+        let oldWidth = currFile.canvasSize[0] * currFile.zoom;
+        let oldHeight = currFile.canvasSize[1] * currFile.zoom;
         let newWidth, newHeight;
-        let prevZoom = zoom;
+        let prevZoom = currFile.zoom;
         let zoomed = false;
 
         //change zoom level
         //if you want to zoom out, and the zoom isnt already at the smallest level
-        if (mode == 'out' && zoom > MIN_ZOOM_LEVEL) {
+        if (mode == 'out' && currFile.zoom > MIN_ZOOM_LEVEL) {
             zoomed = true;
-            if (zoom > 2)
-                zoom -= Math.ceil(zoom / 10);
+            if (currFile.zoom > 2)
+                currFile.zoom -= Math.ceil(currFile.zoom / 10);
             else
-                zoom -= Math.ceil(zoom * 2 / 10) / 2;
+            currFile.zoom -= Math.ceil(currFile.zoom * 2 / 10) / 2;
 
-            newWidth = canvasSize[0] * zoom;
-            newHeight = canvasSize[1] * zoom;
+            newWidth = currFile.canvasSize[0] * currFile.zoom;
+            newHeight = currFile.canvasSize[1] * currFile.zoom;
 
             //adjust canvas position
-            layers[0].setCanvasOffset(
-                layers[0].canvas.offsetLeft + (oldWidth - newWidth) * mousePos[0]/oldWidth, 
-                layers[0].canvas.offsetTop + (oldHeight - newHeight) * mousePos[1]/oldHeight);
+            currFile.layers[0].setCanvasOffset(
+                currFile.layers[0].canvas.offsetLeft + (oldWidth - newWidth) * mousePos[0]/oldWidth, 
+                currFile.layers[0].canvas.offsetTop + (oldHeight - newHeight) * mousePos[1]/oldHeight);
         }
         //if you want to zoom in
-        else if (mode == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4) {
+        else if (mode == 'in' && currFile.zoom + Math.ceil(currFile.zoom/10) < window.innerHeight/4) {
             zoomed = true;
-            if (zoom > 2)
-                zoom += Math.ceil(zoom/10);
+            if (currFile.zoom > 2)
+                currFile.zoom += Math.ceil(currFile.zoom/10);
             else {
-                if (zoom + zoom/10 > 2) {
-                    zoom += Math.ceil(zoom/10);
-                    zoom = Math.ceil(zoom);
+                if (currFile.zoom + currFile.zoom/10 > 2) {
+                    currFile.zoom += Math.ceil(currFile.zoom/10);
+                    currFile.zoom = Math.ceil(currFile.zoom);
                 }
                 else {
-                    zoom += Math.ceil(zoom * 2 / 10) / 2;
+                    currFile.zoom += Math.ceil(currFile.zoom * 2 / 10) / 2;
                 }
             }
                 
-            newWidth = canvasSize[0] * zoom;
-            newHeight = canvasSize[1] * zoom;
+            newWidth = currFile.canvasSize[0] * currFile.zoom;
+            newHeight = currFile.canvasSize[1] * currFile.zoom;
 
             //adjust canvas position
-            layers[0].setCanvasOffset(
-                layers[0].canvas.offsetLeft - Math.round((newWidth - oldWidth)*mousePos[0]/oldWidth), 
-                layers[0].canvas.offsetTop - Math.round((newHeight - oldHeight)*mousePos[1]/oldHeight));
+            currFile.layers[0].setCanvasOffset(
+                currFile.layers[0].canvas.offsetLeft - Math.round((newWidth - oldWidth)*mousePos[0]/oldWidth), 
+                currFile.layers[0].canvas.offsetTop - Math.round((newHeight - oldHeight)*mousePos[1]/oldHeight));
         }
 
         //resize canvas
-        layers[0].resize();
+        currFile.layers[0].resize();
         // adjust brush size
         ToolManager.currentTool().updateCursor();
 
         // Adjust pixel grid thickness
         if (zoomed) {
-            if (zoom <= 7)
-                pixelGrid.disablePixelGrid();
-            else if (zoom >= 20 && mode == 'in') {
-                pixelGrid.enablePixelGrid();
-                pixelGrid.repaintPixelGrid((zoom - prevZoom) * 0.6);
+            if (currFile.zoom <= 7)
+                currFile.pixelGrid.disablePixelGrid();
+            else if (currFile.zoom >= 20 && mode == 'in') {
+                currFile.pixelGrid.enablePixelGrid();
+                currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
             }
             else if (prevZoom >= 20 && mode == 'out') {
-                pixelGrid.enablePixelGrid();
-                pixelGrid.repaintPixelGrid((zoom - prevZoom) * 0.6);
+                currFile.pixelGrid.enablePixelGrid();
+                currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
             }
             else {
-                pixelGrid.enablePixelGrid();
+                currFile.pixelGrid.enablePixelGrid();
             }
         }
 
-        for (let i=1; i<layers.length; i++) {
-            layers[i].copyData(layers[0]);
+        for (let i=1; i<currFile.layers.length; i++) {
+            currFile.layers[i].copyData(currFile.layers[0]);
         }
     }
 }
\ No newline at end of file
diff --git a/js/_ellipse.js b/js/tools/_ellipse.js
similarity index 100%
rename from js/_ellipse.js
rename to js/tools/_ellipse.js
diff --git a/views/main-menu.hbs b/views/main-menu.hbs
index 2442171..350b067 100644
--- a/views/main-menu.hbs
+++ b/views/main-menu.hbs
@@ -13,9 +13,9 @@
 	<li>
 		<button>Edit</button>
 		<ul>
-			<li><button id="resize-canvas-button" onclick = "openResizeCanvasWindow()">Resize canvas</button></li>
-			<li><button id="resize-sprite-button" onclick = "openResizeSpriteWindow()">Scale sprite</button></li>
-			<li><button onclick = "trimCanvas()">Trim canvas</button></li>
+			<li><button id="resize-canvas-button" onclick = "currFile.openResizeCanvasWindow()">Resize canvas</button></li>
+			<li><button id="resize-sprite-button" onclick = "currFile.openResizeSpriteWindow()">Scale sprite</button></li>
+			<li><button onclick = "currFile.trimCanvas()">Trim canvas</button></li>
 			<li><button id="undo-button" class="disabled">Undo</button></li>
 			<li><button id="redo-button" class="disabled">Redo</button></li>
 		</ul>