document.getElementById('open-image-browse-holder').addEventListener('change', function () {
    let fileName = document.getElementById("open-image-browse-holder").value;
    let extension = fileName.substring(fileName.lastIndexOf('.')+1, fileName.length) || fileName;

    if (this.files && this.files[0]) {
        if (extension == 'png' || extension == 'gif' || extension == 'lpe') {
            if (extension == 'lpe') {
                let file = this.files[0];  
                let reader = new FileReader();

                reader.readAsText(file, "UTF-8");
                reader.onload = function (e) {
                    let dictionary = JSON.parse(e.target.result);

                    newPixel(dictionary['canvasWidth'], dictionary['canvasHeight'], [], dictionary);
                }
            }
            else {
                //load file
                var fileReader = new FileReader();
                fileReader.onload = function(e) {
                    var img = new Image();
                    img.onload = function() {
                        //create a new pixel with the images dimentions
                        newPixel(this.width, this.height, []);

                        //draw the image onto the canvas
                        currentLayer.context.drawImage(img, 0, 0);
                        createPaletteFromLayers();

                        //track google event
                        ga('send', 'event', 'Pixel Editor Load', colorPalette.length, this.width+'/'+this.height); /*global ga*/

                    };
                    img.src = e.target.result;
                };
                fileReader.readAsDataURL(this.files[0]);
            }
        }
        else alert('Only .lpe project files, PNG and GIF files are allowed at this time.');
    }
});