hack.js

var J500px = function () {
  this.ajaxLoader = 'images/ajax-loader.gif';
  this.categories = ['Travel', 'Popular', 'sports', 'Journal']; // look into 500px doc to get a full list of categories
};

J500px.prototype = {
  // Displays the AJAX loader
  displayLoader: function () {
    var $loader = $('<div id="ajax-loader">');
    var $imgLoader = $('<img>');
    $loader.append($imgLoader.attr('src', this.ajaxLoader));
    $('#photos').prepend($loader);
  },

  // Dynamically creates page links for pagination
  buildLinks: function (page, total_pages) {
    var $pages = $('<div id="links">');
    for (var i = page; i < page + 10; i++) $pages.append('<a data-id="' + i + '" href="#">' + i + '</a> ');
    $pages.append(' ... ' + '<a data-id="' + total_pages + '" href="#">' + total_pages + '</a>');
    $pages.append('<div></div><input type="text" id="pageTo" name="pageTo" placeholder="Go to page #" />');
    $pages.append('<input type="submit" name="submit" value="Submit" />');
    $('body').append($pages);
  },

  // Creates a dropdown of all 500px categories
  listCategories: function () {
    var $div = $('<div id="listCategories">');
    var $select = $('<select id="categories" name="categories">');
    $.each(this.categories, function (index, el) {
      $select.prepend('<option value="' + el + '">' + el + '</option>');
    });

    $div.append($select);
    $div.prepend('Categories: ');

    $('body').prepend($div);
  },

  // Reset after user has clicked on the close href
  close: function () {
    $('#feature').html('');
    $('#photos').slideDown();
    $('#close').remove();
    $('#links').show();
  },

  // Event listener on 500px images
  imgClick: function () {
    var context = this;
    $('img').each(function (index, el) {
      $(el).on('click', function (evt) {
        evt.preventDefault();
        context.fetchPhoto(parseInt($(el).data('id')));
      });
    });
  },

  // Event listener on page links
  linkClick: function () {
    var context = this;
    $('#links a').each(function (index, el) {
      $(el).on('click', function (evt) {
        evt.preventDefault();
        context.fetchPhotos(parseInt($(el).data('id')));
      });
    });
  },

  // Event listener on submit button
  submitClick: function () {
    var context = this;
    $('input[type="submit"]').on('click', function (evt) {
      evt.preventDefault();
      context.fetchPhotos(parseInt($('#pageTo').val()));
    });
  },

  // Event listener on categories
  changeCategory: function () {
    var context = this;
    $('select[name="categories"]').on('change', function (evt) {
      evt.preventDefault();
      context.fetchPhotos(null, $('select[name="categories"]').val());
    });
  },

  // Insert close href into DOM
  insertClose: function () {
    var $div = $('<div id="close">');
    $div.append('<a href="#">Close</a>');
    $('body').prepend($div);
  },

  // Insert 500px feature photo into DOM
  insertFeature: function (data) {
    var $img = $('<img>');
    $img.attr('src', data.photo.image_url);
    $('#feature').html($img);
  },

  // Insert 500px feature description into DOM
  featureDescription: function (data) {
    var $div = $('<div>');
    $div.append('<div><strong>' + data.photo.name + '</strong></div>');
    $div.append(data.photo.description);
    $('#feature').append($div);
  },

  // Insert 500px popular photos into DOM
  populatePhotos: function (data) {
    for (var i = 0; i < data.photos.length; i++) {
      var $a = $('<a href="#">');
      var $img = $('<img data-id=' + data.photos[i].id + '>').attr('src', data.photos[i].image_url);
      $a.append($img);
      $('#photos').append($a);
    }
  },

  // Get the user selected photo from 500px
  fetchPhoto: function (id) {
    var context = this;
    $.ajax({
      url: 'https://api.500px.com/v1/photos/' + id + '?image_size=4&consumer_key=jfvYEpvJLv06t0blEKNPuJyU3vjqQP6vnXh6KX3O',
      type: 'get',
      dataType: 'json'
    }).
    done(function (data) {
      $('#photos').slideUp();
      $('#links').hide();
      context.insertFeature(data);
      context.featureDescription(data);
    }).
    complete(function () {
      context.insertClose();
      $('#close').on('click', context.close);
    });
  },

  // Get the most popular photos from 500px
  fetchPhotos: function (page, category) {
    var context = this;
    var page = page || 1;
    var category = category || 'popular';
    this.displayLoader();
    $.ajax({
      url: 'https://api.500px.com/v1/photos?feature=' + category + '&consumer_key=jfvYEpvJLv06t0blEKNPuJyU3vjqQP6vnXh6KX3O&page=' + page + '&rpp=24',
      type: 'get',
      dataType: 'json'
    }).
    done(function (data) {
      $('#photos').html('');
      $('#links').remove();
      $('#listCategories').remove();
      context.buildLinks(page, data.total_pages);
      context.populatePhotos(data);
    }).
    complete(function () {
      $('#ajax-loader').remove();
      context.imgClick();
      context.linkClick();
      context.submitClick();
      context.listCategories();
      context.changeCategory();
    });
  }
};