var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');

btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');

/* Looping through images */


var images = [
  'http://i.imgur.com/IdTKENo.jpg',
  'http://i.imgur.com/l8t6lgd.jpg',
  'http://i.imgur.com/bpUTjyu.jpg',
  'http://i.imgur.com/OhGfaXN.jpg',
  'http://i.imgur.com/wiPXNjA.jpg'
]

for (var i = 0; i < images.length; i++) {
  var newImage = document.createElement('img');
  newImage.setAttribute('src', images[i]);
  thumbBar.appendChild(newImage);
  newImage.onclick = function() {
     var imgSrc = this.getAttribute('src')
     displayedImage.setAttribute('src', imgSrc)
  }
}

/* Wiring up the Darken/Lighten button */

btn.addEventListener('click', function(e) {
  cla = btn.getAttribute('class')

  if (cla == 'dark') {
    btn.setAttribute('class', 'light');
    btn.textContent = 'Lighten';
    overlay.style.backgroundColor = 'rgba(0,0,0,0.5)'
  } else if (cla == 'light') {
    btn.setAttribute('class', 'dark');
    btn.textContent = 'Darken';
    overlay.style.backgroundColor = 'rgba(0,0,0,0)'
  }
});