<form class="form-search">
  <input type="text" class="search" placeholder="Search for something amazing?" required>
  <input type="submit" class="submit" />
</form>
<!-- Loader from https://codepen.io/xixao/pen/jvxFc -->
<div class="loading"></div>
<div id="photos"></div>

html, body {
  height: 100%;
  background: rgb(40,40,40);
  text-align: center;
  font: 14px/24px 'Open Sans', 'Bree Serif', 'Source Sans Pro', Helvetica, Helvetica Neue, Arial, sans-serif;
  color: #111;
}
img {
  margin: 5px;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  max-width: 140px;
  max-height: 140px;
  opacity: 0.95;
}
img:hover {
  box-shadow: 10px 5px 5px rgba(0,0,0,0.2);
  opacity: 1;
}
.loading {
  width: 150px;
  margin: auto;
  margin-top: 20px;
}
#photos {
  margin-top: 20px;
  text-align: left;
}

.form-search {
	margin: 15px auto;
	width: 450px;
}

.form-search .search {
	border: 1px solid #CCC;
  -webkit-box-shadow: 0 1px 1px #ddd inset;
  -moz-box-shadow: 0 1px 1px #ddd inset;
  box-shadow: 0 1px 1px #ddd inset;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
  color: #999;
	font: 16px Lucida Sans, Trebuchet MS, Tahoma, sans-serif;
	height: 20px;
	padding: 10px;
	width: 430px;
  opacity: 0.7;
}
.form-search .search:hover {
  opacity: 0.85;
}
.form-search .search:focus {
	border-color: #aaa;
	-webkit-box-shadow: 0 1px 1px #bbb inset;
	-moz-box-shadow: 0 1px 1px #bbb inset;
	box-shadow: 0 1px 1px #bbb inset;
  opacity: 1;
	outline: 0;
}

.form-search .search:-moz-placeholder,
.form-search .search:-ms-input-placeholder,
.form-search .search::-webkit-input-placeholder {
	color: #999;
	font-weight: normal;
}

.form-search .submit {
  display: none;
}

.loading {
  width: 30px;
  height: 30px;
  border: 8px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 25px 2px;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  color: rgba(179, 179, 179, 0.5);
  border-right-color: transparent;
  border-top-color: transparent;
  -webkit-animation: spin-right 1s linear infinite;
  margin: 30px auto 0;
}
.loading:after {
  display: block;
  width: 13px;
  height: 13px;
  margin: 3px;
  border: 6px solid rgba(255, 255, 255, 0.5);
  content: " ";
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
}
@-webkit-keyframes spin-right {
  from {
    -webkit-transform: rotate(0deg);
    opacity: 0.2;
  }
  50% {
    -webkit-transform: rotate(180deg);
    opacity: 1.0;
  }
  to {
    -webkit-transform: rotate(360deg);
    opacity: 0.2;
  }
}

var onSearch = (function () {
  var timeout = null,
      defaultOptions = {
        delay: 300,
        onEach: $.noop,
        onStart: $.noop
      };
  return function ($el, options, fn) {
    var started = false;
    $el = $el instanceof jQuery ? $el : $($el);
    fn = typeof options === 'function' && !fn ? options : fn;
    options = $.extend(null, defaultOptions, options);
    $el.on('keyup change', function (e) {
      options.onEach(e, options.delay);
      if (!started) {
        options.onStart(e, options.delay);
        started = true;
      }
      clearTimeout(timeout);
      timeout = setTimeout(function () {
        started = false;
        fn($(e.currentTarget).val());
      }, options.delay);
    });
  };
})();

_500px.init({
  sdk_key: 'a51bae00a674aa2c7f9dcbf2fb783c602a2ea6e3'
});

var popular = function () {
  loading();
  _500px.api('/photos', { feature: 'popular' }, function (res) {
    var photos = res.data.photos;
    showPhotos(photos);
  });
};

var loading = function () {
  $('#photos').hide();
  $('.loading').fadeIn();
};

var showPhotos = function (photos) {
  $('.loading').hide();
  var container = $('#photos').html('').show();
  var delay = 80;
  
  photos.forEach(function (photo, i) {
    var regExpLink = /\/(\d+)\//;
    var link = $('<a>').attr('target', '_blank').attr('href', 'http://500px.com/photo/' + regExpLink.exec(photo.image_url)[1]);
    var img = $('<img>');
    img.attr('src', photo.image_url);
    link.html(img).hide();
    setTimeout(function () {
      link.appendTo(container).fadeIn();
    }, delay * i);
  });
};

var search = (function () {
  var lastSearch = '';
  return function (q) {
    if (!q) return popular();
    if (lastSearch === q) return;
    loading();
    lastSearch = q;
    _500px.api('/photos/search', { tag: q }, function (res) {
      var photos = res.data.photos;
      showPhotos(photos);
    });
  };
})();

onSearch('.search', function (q) {
  search(q);
});

$('.form-search').submit(function (e) {
  search($('.search').val());
  return false;
});

popular();