/**
 * make the search label a 'toggle',
 * rather than focusing the input every time
 *
 * should, instead, i put a button inside the label and toggle visibility?
 */

var search = {};

search.input = document.getElementById('searchInput');
search.label = document.getElementById('searchLabel');
search.active = false;

function toggleSearchLabel (event) {
  event.preventDefault();
  event.stopPropagation();
  if (search.active === true) {
    search.input.blur();    
  	search.active = !search.active;
    if (search.input.value !== '') {
    	setImages(search.input.value);
      search.input.value = '';
    }
  }
  else {
    search.input.focus();
    search.active = !search.active;
  }
}

function toggleSearchActive (event) {
  search.active = !search.active;
}

function setImages (searchTerm) {
  var gallery = document.querySelector('.content__gallery'),
    img = document.createElement('img'),
      temp = document.createElement('div');
  
  img.src = 'http://p-hold.com/' + searchTerm + '/555/444';
  
  img.classList.add('content__image');
  temp.classList.add('content__image--loading');
  
  gallery.appendChild(temp);
  
  img.onload = function () {
  	gallery.removeChild(temp);
    gallery.appendChild(img);
  };
}

function enterKey (event) {
	var key = (event.keyCode ? event.keyCode : event.which);

  if(key === 13) { /** keycode 13 = enter key */
  	toggleSearchLabel(event);
  }
}

search.input.addEventListener('focus', toggleSearchActive, false);
search.input.addEventListener('blur', toggleSearchActive, false);
search.label.addEventListener('click', toggleSearchLabel, false);
search.input.addEventListener('keyup', enterKey, false);