<div class="h-100 sans-serif cf">
  <div class="w-25 ptl phm fl h-100 bg-dark-gray white">
    <h4>Select your images</h4>
    
    <div class="fl mbl db tl">
      <label class="db mbs tl w-50">Starting Image</label>
      <input type="file" class="tl" id="first-image" />
    </div>
    <div class="fl db tr">
      <label class="db mbs tl w-75">Ending Image</label>
      <input type="file" class="tr" id="second-image" />
    </div>
    
    <button id="switch-button" class="w-100 white mtm br2 bn bg-blue pvm">Switch Images</button>
    <!--<a target="_blank" id="download-button" class="cp link db tc w-100 white mtm br2 bn bg-teal pvm">Download Image</a>-->
    
    <div class="pvm">
      Created by <a href="http://iheanyi.com" class="white link heavy">Iheanyi Ekechukwu</a>
    </div>
  </div>

  <div class="fl tc w-75 ptl sans-serif center">
    <canvas id="canvas" class="ba tc center canvas" width="600" height="600"></canvas>
  </div>
</div>

.canvas {
  margin: 0 auto;
}

.container {
  width: 100%;
  text-align: center;
}

.cp {
  cursor: pointer;
}

.o-50 {
  opacity: 0.5;
}

.o-25 {
  opacity: 0.25;
}

.o-75 {
  opacity: 0.75;
}

.tr-top-image {
  z-index: 2;
  opacity: 0.50;
}

.tr-bottom-image {
  z-index: 1;
  opacity: 1;
}

.bl-bottom-image {
  z-index: 1;
  opacity: 1;
}

.bl-top-image {
  z-index: 2;
  opacity: 0.75;
}

const canvasNode = document.getElementById('canvas');
const context = canvasNode.getContext('2d');
let firstImageInput = document.getElementById('first-image');

let secondImageInput = document.getElementById('second-image');

const switchButton = document.getElementById('switch-button');

const downloadButton = document.getElementById('download-button');

let firstImage = new Image();
let secondImage = new Image();

function updateCanvas() {
  // Clear the canvas and re-draw our elements.
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = "#FFFFFF";

  if (!!firstImage.src) {
    drawFirstImage();
  }
  
  if (!!secondImage.src) {
    drawSecondImage();
  }
}

function drawFirstImage() {
  // Draw First iMage, regular opacity
  context.save();
  context.drawImage(firstImage, 0, 0, 295, 295);
  
  // Draw Top Right Image, 25% opacity.
  context.globalAlpha = 0.75;
  context.drawImage(firstImage, 305, 0, 295, 295);
  // Draw Bottom Right Image, 50% opacity.
  context.globalAlpha = 0.50;
  context.drawImage(firstImage, 0, 305, 295, 295);
  context.restore(); 
}

function drawSecondImage() {
  context.save();
  // Bottom Right Image, 1 opacity.
  context.drawImage(secondImage, 305, 305, 295, 295);
  // Top Right Image, 0.50 opacity;
  context.globalAlpha = 0.25;
  context.drawImage(secondImage, 305, 0, 295, 295);
  // Bottom Left Image, 0.5
  context.globalAlpha = 0.50;
  context.drawImage(secondImage, 0, 305, 295, 295);
  context.restore();  
}

function handleImageChange(imageObj, evt) {  
  const { files } = evt.target;
  const firstFile = files[0];  

  const reader = new FileReader();

reader.onload = (img => {
  // When a file is read, we want to update the source of the image object.
  return (e) => {
    const { result: imageFile } = e.target;
    // Set the image object's source to this
    imageObj.src = imageFile;
  }
})(firstFile);  
  reader.readAsDataURL(firstFile);
}

function switchImages() {
  const firstImageCopy = firstImage.cloneNode();
  const secondImageCopy = secondImage.cloneNode();
  
  const firstInputCopy = firstImageInput.cloneNode();
  const secondInputCopy = secondImageInput.cloneNode();
  firstImage = secondImageCopy;
  secondImage = firstImageCopy;
  updateCanvas();
  initialize();
}

function downloadCanvas(evt) {
  downloadButton.href = canvasNode.toDataURL();
  downloadButton.download = 'fading-meme.png';
}

function initialize() {
  firstImageInput.addEventListener('change', handleImageChange.bind(this, firstImage));

secondImageInput.addEventListener('change', handleImageChange.bind(this, secondImage));
switchButton.addEventListener('click', switchImages);
firstImage.onload = updateCanvas;
secondImage.onload = updateCanvas;
}

function loadDefaults() {
  
  firstImage.src = "http://cp91279.biography.com/1000509261001/1000509261001_1630293503001_BIO-Biography-Adolf-Hitler-SF.jpg";
  secondImage.src = "https://i2.cdn.turner.com/cnnnext/dam/assets/160118134132-donald-trump-nigel-parry-large-169.jpg";
}

initialize();
loadDefaults();