diff --git a/src/js/components/ImageEditor/3dHandler.js b/src/js/includes/3dHandler.js
similarity index 100%
rename from src/js/components/ImageEditor/3dHandler.js
rename to src/js/includes/3dHandler.js
diff --git a/src/js/components/ImageEditor/ApertureHandler.js b/src/js/includes/ApertureHandler.js
similarity index 100%
rename from src/js/components/ImageEditor/ApertureHandler.js
rename to src/js/includes/ApertureHandler.js
diff --git a/src/js/components/ImageEditor/ButtonMenu.js b/src/js/includes/ButtonMenu.js
similarity index 98%
rename from src/js/components/ImageEditor/ButtonMenu.js
rename to src/js/includes/ButtonMenu.js
index b39290c..a6fdb13 100644
--- a/src/js/components/ImageEditor/ButtonMenu.js
+++ b/src/js/includes/ButtonMenu.js
@@ -1,7 +1,7 @@
 'use strict';
 
 var TextButton = require('./TextButton');
-var config = require('../config');
+var config = require('./config');
 
 /**
  * Creates the menu with text-buttons settings provided. Settings will override
diff --git a/src/js/components/ImageEditor/Canvas.js b/src/js/includes/Canvas.js
similarity index 98%
rename from src/js/components/ImageEditor/Canvas.js
rename to src/js/includes/Canvas.js
index 25e9788..846f5da 100644
--- a/src/js/components/ImageEditor/Canvas.js
+++ b/src/js/includes/Canvas.js
@@ -1,6 +1,6 @@
 'use strict';
-var config = require('../config');
-var util = require('../util');
+var config = require('./config');
+var util = require('./util');
 var ApertureHandler = require('./ApertureHandler');
 var ButtonMenu = require('./ButtonMenu');
 var DragbarHandler = require('./DragbarHandler');
diff --git a/src/js/components/ImageEditor/DragHandle.js b/src/js/includes/DragHandle.js
similarity index 98%
rename from src/js/components/ImageEditor/DragHandle.js
rename to src/js/includes/DragHandle.js
index 90251ce..0e87d8b 100644
--- a/src/js/components/ImageEditor/DragHandle.js
+++ b/src/js/includes/DragHandle.js
@@ -1,6 +1,6 @@
 'use strict';
 
-var config = require('../config');
+var config = require('./config');
 
 var DragHandle = function (handler) {
     var _currentAxis;
diff --git a/src/js/components/ImageEditor/DragbarHandler.js b/src/js/includes/DragbarHandler.js
similarity index 98%
rename from src/js/components/ImageEditor/DragbarHandler.js
rename to src/js/includes/DragbarHandler.js
index b1e604a..d581d6a 100644
--- a/src/js/components/ImageEditor/DragbarHandler.js
+++ b/src/js/includes/DragbarHandler.js
@@ -1,7 +1,7 @@
 'use strict';
 
 var DragHandle = require('./DragHandle');
-var config = require('../config');
+var config = require('./config');
 
 function DragbarHandler(canvas) {
     var _dragbars = {
diff --git a/src/js/components/ImageEditor/Draggable.js b/src/js/includes/Draggable.js
similarity index 97%
rename from src/js/components/ImageEditor/Draggable.js
rename to src/js/includes/Draggable.js
index 29ce57c..1903e04 100644
--- a/src/js/components/ImageEditor/Draggable.js
+++ b/src/js/includes/Draggable.js
@@ -1,6 +1,6 @@
 'use strict';
 
-var util = require('../util');
+var util = require('./util');
 
 /**
  * @param {fabric.Image} img
diff --git a/src/js/components/ImageEditor/FrameHandler.js b/src/js/includes/FrameHandler.js
similarity index 99%
rename from src/js/components/ImageEditor/FrameHandler.js
rename to src/js/includes/FrameHandler.js
index bcf7b21..8b39ace 100644
--- a/src/js/components/ImageEditor/FrameHandler.js
+++ b/src/js/includes/FrameHandler.js
@@ -1,6 +1,6 @@
 'use strict';
 
-var config = require('../config');
+var config = require('./config');
 
 function FrameHandler(viewport) {
     var _frames;
diff --git a/src/js/components/ImageEditor/GoreHandler.js b/src/js/includes/GoreHandler.js
similarity index 100%
rename from src/js/components/ImageEditor/GoreHandler.js
rename to src/js/includes/GoreHandler.js
diff --git a/src/js/components/ImageEditor/ImageEditor.js b/src/js/includes/ImageEditor.js
similarity index 99%
rename from src/js/components/ImageEditor/ImageEditor.js
rename to src/js/includes/ImageEditor.js
index bec418e..2c5de7e 100644
--- a/src/js/components/ImageEditor/ImageEditor.js
+++ b/src/js/includes/ImageEditor.js
@@ -1,7 +1,7 @@
 'use strict';
 
 var Canvas = require('./Canvas');
-var util = require('../util');
+var util = require('./util');
 
 function ImageEditor(canvasId, args) {
     var _canvas;
diff --git a/src/js/components/ImageEditor/ImageTransformationHandler.js b/src/js/includes/ImageTransformationHandler.js
similarity index 100%
rename from src/js/components/ImageEditor/ImageTransformationHandler.js
rename to src/js/includes/ImageTransformationHandler.js
diff --git a/src/js/components/ImageEditor/RulerHandler.js b/src/js/includes/RulerHandler.js
similarity index 97%
rename from src/js/components/ImageEditor/RulerHandler.js
rename to src/js/includes/RulerHandler.js
index 9475677..a8e8c29 100644
--- a/src/js/components/ImageEditor/RulerHandler.js
+++ b/src/js/includes/RulerHandler.js
@@ -1,8 +1,8 @@
 'use strict';
 
-var util = require('../util');
+var util = require('./util');
 var TextButton = require('./TextButton');
-var config = require('../config');
+var config = require('./config');
 
 function RulerHandler(viewport) {
     var _enabled = false;
diff --git a/src/js/components/ImageEditor/TextButton.js b/src/js/includes/TextButton.js
similarity index 98%
rename from src/js/components/ImageEditor/TextButton.js
rename to src/js/includes/TextButton.js
index c15e720..f1520de 100644
--- a/src/js/components/ImageEditor/TextButton.js
+++ b/src/js/includes/TextButton.js
@@ -1,6 +1,6 @@
 'use strict';
 
-var config = require('../config');
+var config = require('./config');
 
 /**
  * Creates a text-button with text/settings provided.
diff --git a/src/js/components/ImageEditor/Viewport.js b/src/js/includes/Viewport.js
similarity index 99%
rename from src/js/components/ImageEditor/Viewport.js
rename to src/js/includes/Viewport.js
index d88333b..21fc0c6 100644
--- a/src/js/components/ImageEditor/Viewport.js
+++ b/src/js/includes/Viewport.js
@@ -3,7 +3,7 @@
 var FrameHandler = require('./FrameHandler');
 var GoreHandler = require('./GoreHandler');
 var RulerHandler = require('./RulerHandler');
-var util = require('../util');
+var util = require('./util');
 
 function Viewport(canvas) {
     var _beams = [];
diff --git a/src/js/components/config.js b/src/js/includes/config.js
similarity index 100%
rename from src/js/components/config.js
rename to src/js/includes/config.js
diff --git a/src/js/components/config/button-menu.js b/src/js/includes/config/button-menu.js
similarity index 100%
rename from src/js/components/config/button-menu.js
rename to src/js/includes/config/button-menu.js
diff --git a/src/js/components/config/drag-bar.js b/src/js/includes/config/drag-bar.js
similarity index 100%
rename from src/js/components/config/drag-bar.js
rename to src/js/includes/config/drag-bar.js
diff --git a/src/js/components/config/drag-handle.js b/src/js/includes/config/drag-handle.js
similarity index 100%
rename from src/js/components/config/drag-handle.js
rename to src/js/includes/config/drag-handle.js
diff --git a/src/js/components/config/frames.js b/src/js/includes/config/frames.js
similarity index 100%
rename from src/js/components/config/frames.js
rename to src/js/includes/config/frames.js
diff --git a/src/js/components/config/ruler-handle.js b/src/js/includes/config/ruler-handle.js
similarity index 100%
rename from src/js/components/config/ruler-handle.js
rename to src/js/includes/config/ruler-handle.js
diff --git a/src/js/components/config/text-button.js b/src/js/includes/config/text-button.js
similarity index 100%
rename from src/js/components/config/text-button.js
rename to src/js/includes/config/text-button.js
diff --git a/src/js/components/extend-fabric-functionality.js b/src/js/includes/extend-fabric-functionality.js
similarity index 93%
rename from src/js/components/extend-fabric-functionality.js
rename to src/js/includes/extend-fabric-functionality.js
index 3b2223e..3a2ba86 100644
--- a/src/js/components/extend-fabric-functionality.js
+++ b/src/js/includes/extend-fabric-functionality.js
@@ -1,7 +1,7 @@
 'use strict';
 
-var Draggable = require('./ImageEditor/Draggable');
-var ImageTransformationHandler = require('./ImageEditor/ImageTransformationHandler');
+var Draggable = require('./Draggable');
+var ImageTransformationHandler = require('./ImageTransformationHandler');
 var util = require('./util');
 
 function ExtendFabricFunctionality() {
diff --git a/src/js/components/util.js b/src/js/includes/util.js
similarity index 100%
rename from src/js/components/util.js
rename to src/js/includes/util.js
diff --git a/src/js/components/utils/assert-between.js b/src/js/includes/utils/assert-between.js
similarity index 100%
rename from src/js/components/utils/assert-between.js
rename to src/js/includes/utils/assert-between.js
diff --git a/src/js/components/utils/assert-key-value-pair.js b/src/js/includes/utils/assert-key-value-pair.js
similarity index 100%
rename from src/js/components/utils/assert-key-value-pair.js
rename to src/js/includes/utils/assert-key-value-pair.js
diff --git a/src/js/components/utils/calc-crop.js b/src/js/includes/utils/calc-crop.js
similarity index 100%
rename from src/js/components/utils/calc-crop.js
rename to src/js/includes/utils/calc-crop.js
diff --git a/src/js/components/utils/set-position-inside.js b/src/js/includes/utils/set-position-inside.js
similarity index 100%
rename from src/js/components/utils/set-position-inside.js
rename to src/js/includes/utils/set-position-inside.js
diff --git a/src/js/components/utils/set-properties.js b/src/js/includes/utils/set-properties.js
similarity index 100%
rename from src/js/components/utils/set-properties.js
rename to src/js/includes/utils/set-properties.js
diff --git a/src/js/components/utils/toggle-fullscreen.js b/src/js/includes/utils/toggle-fullscreen.js
similarity index 100%
rename from src/js/components/utils/toggle-fullscreen.js
rename to src/js/includes/utils/toggle-fullscreen.js
diff --git a/src/js/init.js b/src/js/init.js
index ea9e2b4..8e2d5fc 100644
--- a/src/js/init.js
+++ b/src/js/init.js
@@ -1,30 +1,29 @@
 'use strict';
 
+
+/**
+ * This is just an example usage of the image editor. Also this is used for testing.
+ * This code can be pretty messy, but that is fine because nothing of this will come to
+ * production.
+ */
 (function() {
     var $document = $(document);
     var $window = $(window);
     var $wrapper = $('#wrapper');
+    var $formControl = $('#form-control');
+    var editor = null;
 
     // Inputs for the editor
     var $input = {
-        w: $('#form-control input[name="w"]'),
-        h: $('#form-control input[name="h"]'),
-        image_id: $('#form-control input[name="image_id"]'),
-        mirror: $('#form-control input[name="mirror"]'),
-        noCrop: $('#form-control input[name="no-crop"]'),
-        border: $('#form-control select[name="canvas-border"]'),
+        w: $formControl.find('input[name="w"]'),
+        h: $formControl.find('input[name="h"]'),
+        image_id: $formControl.find('input[name="image_id"]'),
+        mirror: $formControl.find('input[name="mirror"]'),
+        noCrop: $formControl.find('input[name="no-crop"]'),
+        border: $formControl.find('select[name="canvas-border"]'),
     };
-
     var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';
 
-    var editor = new ImageEditor('canvas-editor', {
-            type: 'canvas',
-        })
-        .loadImage(imageUrl, function() {
-            $input.w.trigger('input');
-            Event.handleResize();
-        });
-
     function getOptimalDimension(values, currentDimension, ratio) {
         if (currentDimension === 'h') {
             values.width = Math.round(values.height * ratio);
@@ -35,63 +34,83 @@
         return values;
     }
 
-    var Event = {
-        DimensionChange: function() {
-            var noCropIsChecked = $input.noCrop.is(':checked');
-            var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
-            var data = editor.canvas.getViewport().getData();
-            var values = {
-                width: $input.w.val(),
-                height: $input.h.val(),
-            };
+    function handleDimensionChange() {
+        var noCropIsChecked = $input.noCrop.is(':checked');
+        var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
+        var data = editor.canvas.getViewport().getData();
+        var values = {
+            width: $input.w.val(),
+            height: $input.h.val(),
+        };
 
-            if (noCropIsChecked) {
-                values = getOptimalDimension(values, currentDimension, data.objectRatio);
-            }
-
-            $input.w.val(values.width);
-            $input.h.val(values.height);
-
-            editor.crop(values.width, values.height);
-        },
-        Mirror: function() {
-            editor.canvas.getImage().transformation.set('mirror', this.checked);
-        },
-        NoCrop: function() {
-            $input.w.trigger('input');
-        },
-        SetBorder: function () {
-            editor.canvas.getViewport().setFrame($(this).val());
-        },
-        handleResize: function() {
-            var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
-            var width = $wrapper.width();
-            var height = isFullScreen ? ($window.height() < 800 ? $window.height() : 800) : $wrapper.height();
-            editor.canvas.resize({width: width, height: height});
+        if (noCropIsChecked) {
+            values = getOptimalDimension(values, currentDimension, data.objectRatio);
         }
-    };
 
-    $input.w.on('input', Event.DimensionChange);
-    $input.h.on('input', Event.DimensionChange);
-    $input.mirror.on('change', Event.Mirror);
-    $input.noCrop.on('change', Event.NoCrop);
-    $input.border.on('change', Event.SetBorder);
-    $document
-        .on('PIE:dragged', function() {
-           console.log('Dragged the image/dragbar!');
-        })
-        .on('PIE:needs-dragging', function(e, data) {
-           console.log('Image needs dragging on: ' + data.axis);
-        })
-        .on('PIE:dragbar-click', function(e, data) {
-           console.log('Clicked on a dragbar! Axis: ' + data.axis);
-        })
-        .on('PIE:image-start-load', function() {
-           console.log('Start loading image');
-        })
-        .on('PIE:image-end-load', function() {
-           console.log('Image loaded');
-        });
-    $window.on('resize', Event.handleResize);
+        $input.w.val(values.width);
+        $input.h.val(values.height);
+
+        editor.crop(values.width, values.height);
+    }
+
+    function handleMirrorChange() {
+        editor.canvas.getImage().transformation.set('mirror', this.checked);
+    }
+
+    function handleNoCropChange() {
+        $input.w.trigger('input');
+    }
+
+    function handleFrameChange() {
+        editor.canvas.getViewport().setFrame($(this).val());
+    }
+
+    function handleResize() {
+        var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+        var width = $wrapper.width();
+        var height = isFullScreen ? $window.height() : $wrapper.height();
+        editor.canvas.resize({width: width, height: height});
+    }
+
+    function eventHandlers() {
+        $input.w.on('input', handleDimensionChange);
+        $input.h.on('input', handleDimensionChange);
+        $input.mirror.on('change', handleMirrorChange);
+        $input.noCrop.on('change', handleNoCropChange);
+        $input.border.on('change', handleFrameChange);
+
+        $document
+            .on('PIE:dragged', function() {
+                console.log('Dragged the image/dragbar!');
+            })
+            .on('PIE:needs-dragging', function(e, data) {
+                console.log('Image needs dragging on: ' + data.axis);
+            })
+            .on('PIE:dragbar-click', function(e, data) {
+                console.log('Clicked on a dragbar! Axis: ' + data.axis);
+            })
+            .on('PIE:image-start-load', function() {
+                console.log('Start loading image');
+            })
+            .on('PIE:image-end-load', function() {
+                console.log('Image loaded');
+            });
+
+        $window.on('resize', handleResize);
+    }
+
+    function init() {
+        editor = new ImageEditor('canvas-editor', {
+                type: 'canvas',
+            })
+            .loadImage(imageUrl, function() {
+                $input.w.trigger('input');
+                handleResize();
+            });
+
+        eventHandlers();
+    }
+
+    init();
 
 }());
diff --git a/src/js/main.js b/src/js/main.js
index 3db5d79..e248e3e 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -2,10 +2,17 @@
 
 (function() {
 
-    var ExtendFabricFunctionality = require('./components/extend-fabric-functionality');
-    var ImageEditor = require('./components/ImageEditor/ImageEditor');
+    /**
+     * Fabric functionality is extended with some custom functionality. This is done before
+     * we do anything else.
+     */
+    require('./includes/extend-fabric-functionality')();
 
-    ExtendFabricFunctionality();
-    window.ImageEditor = ImageEditor;
+    /**
+     * ImageEditor is the starting point of all files. Here the image editor is created and
+     * it receives attributes from the initialisation. As this is done from outside of this file,
+     * the ImageEditor should be available on globally.
+     */
+    window.ImageEditor = require('./includes/ImageEditor');
 
 }());