<div class="container">
   <section class="inputs">
    <div class="upload-wrap">
      <label for="upload-image" class="instruction">Upload an image</label>
      <input type="file" id="upload-image">
    </div>
    <span>Or choose from here:</span>
    <ul class="image-options">
      <li><img src="http://res.cloudinary.com/dlwnmz6lr/image/upload/v1525111950/voltage_emoji_icon_png_hwdaps.png"/></li>
      <li><img src="http://res.cloudinary.com/dlwnmz6lr/image/upload/v1525111951/Tongue_Emoji_xhwdn2.png"/></li>
      <li><img src="http://res.cloudinary.com/dlwnmz6lr/image/upload/v1525111944/Revolving_Pink_Hearts_Emoji_lehlnm.png"/></li>
      <li><img src="http://res.cloudinary.com/dlwnmz6lr/image/upload/v1525111938/Poop_Emoji_oh3z37.png"/></li>
      <li><img src="http://res.cloudinary.com/dlwnmz6lr/image/upload/v1525111940/Emoji_Snowflake_Download_large_hssgzt.png"/></li>
      <li><img src="http://res.cloudinary.com/dlwnmz6lr/image/upload/v1525111952/Cherry_Blossom_Emoji_xqbzxa.png"/></li>  
     </ul>
  </section>
  <section class="meme">
    <canvas id="canvas" width="594" height="592">
              Canvas requires a browser that supports HTML5.
    </canvas>
    <img id="salt-bae" src="https://media4.s-nbcnews.com/j/newscms/2017_05/1890591/170203-salt-bae-mn-1530_060e5898cdcf7b58f97126d3cfbfdf71.nbcnews-ux-2880-1000.jpg"/>
  </section>
</div>

body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}

ul li {
  list-style: none;
}

.container section {
  margin: 30px;
}

.container, .meme, .inputs, .image-options {
  display: flex;
  justify-content: center;
  align-items: center;
}

.instruction {
  display: block;  
  font-size: 16px;
  border: 2px solid black;
  padding: 12px;
  margin: 12px;
  text-align: center;
  cursor: pointer;
}

.meme, .inputs {
  height: 100%;
  flex-direction: column;
  text-align: center;
}

.meme {
  justify-content: space-around;
}

.image-options {
  padding: 0;
  flex-wrap: wrap;
  border: 2px solid black;
}

.image-options li {
  padding: 15px;
}

.image-options img {
  width: 30px;
}

#salt-bae {
  display: none;
}

.upload-wrap input[type="file"] {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: pointer;
    outline: none;
    border: none;
}

@media screen and (max-width: 800px) {
  .container {
    flex-direction: column;
  }
}

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}

function drawBackgroundImage(canvas, ctx) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const img = document.getElementById('salt-bae');  
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}

function getRandomImageSize(min, max, width, height) {
  const ratio = width / height;  // Used for aspect ratio
  width = getRandomInt(min, max);
  height = width / ratio;  
  return { width, height };
}

function drawSalt(src, canvas, ctx) {
  // Create an image object. (Not part of the dom)
  const image = new Image();
  image.src = src;
  
  // After the image has loaded, draw it to the canvas
   image.onload = function() {
    for (let i = 0; i < 8; i++) {
      const randomX = getRandomInt(10, canvas.width/2);
      const randomY = getRandomInt(canvas.height-300, canvas.height);
      const dimensions = getRandomImageSize(20, 100, image.width, image.height);
      ctx.drawImage(image, randomX, randomY, dimensions.width, dimensions.height);
    }
  }
 image.setAttribute('crossOrigin', 'anonymous'); 
  return image;
}

function updateImage(file, img){
  img.src = URL.createObjectURL(file);
}

function updateImageSrc(url, img){
  img.src = url;
}

function addLink() {
  var link = document.createElement('a');
  link.innerHTML = 'Download!';
  link.addEventListener('click', function(e) {
    link.href = canvas.toDataURL();
    link.download = "salt-bae.png";
  }, false); 
  link.className = "instruction";
  document.querySelectorAll('section')[1].appendChild(link);
}

onload = function() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  drawBackgroundImage(canvas, ctx);
  const saltImage = drawSalt('http://res.cloudinary.com/dlwnmz6lr/image/upload/v1526005050/chadwick-boseman-inspired-workout-program-wide_phczey.webp', canvas, ctx);
const input = document.querySelector("input[type='file']");
  /*
   * Add event listener to the input to listen for changes to its selected
   * value, i.e when files are selected 
   */
  input.addEventListener('change', function() {
    drawBackgroundImage(canvas, ctx);
    updateImage(this.files[0], saltImage);
  });
  
  addLink();
  
  const imgs = document.querySelector('.image-options');
  imgs.addEventListener('click', function(e) {
    drawBackgroundImage(canvas, ctx);
    let target = e.target;
    updateImageSrc(target.src, saltImage);
  });
};