Facebook photo picker

facebook-photo-select.js

function FacebookPhotoSelect(options) {
  var defaultSettings = {
    button: null,
    onSelect: function(url) {}
  }
  this.options = $.extend(defaultSettings, options);
  this.init();
}

FacebookPhotoSelect.prototype.init = function() {
  var self = this;
  self.button = $(this.options.button).click(function(){
    self.launch();
    return false;
  });
  self.photos = {};
  var overlay_html = '<div class="facebook-photo-select">';
      overlay_html += '<div class="facebook-photo-select-header"><h2>Choose from your photos</h2></div>';
      overlay_html += '<div class="facebook-photo-select-body ajax-load"></div>';
      overlay_html += '<div class="facebook-photo-select-footer"><a href="#" class="close">Close</a></div>';
      overlay_html += '</div>'
  this.overlay = $(overlay_html).hide().appendTo('body');
  $('.facebook-photo-select-footer .close', this.overlay).click(function(){
    self.close();
    return false;
  })
}

FacebookPhotoSelect.prototype.launch = function(e) {
  var self = this;
  FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {
      self.uid = response.authResponse.userID;
      self.accessToken = response.authResponse.accessToken;
      self.loadAlbums();
    } else {
      self.login(function(response) {
        self.uid = response.authResponse.userID;
        self.accessToken = response.authResponse.accessToken;
        self.loadAlbums()
      });
    }
  });
}

FacebookPhotoSelect.prototype.close = function() {
  this.overlay.hide();
}

FacebookPhotoSelect.prototype.login = function(cb) {
  var self = this;
  FB.login(function(response) {
   if (response.authResponse) {
     cb.call(self, response);
   }
 }, {scope: 'user_photos'});
}

FacebookPhotoSelect.prototype.loadAlbums = function() {
  var self = this;
  this.overlay.show();
  $('.facebook-photo-select-body', this.overlay).empty().addClass('ajax-load');
  if (self.albums) {
    self.drawAlbums(self.albums);
  } else {
    FB.api('/me/albums', function(response) {
     self.albums = response.data;
     self.drawAlbums(response.data);
   });
  }
}

FacebookPhotoSelect.prototype.drawAlbums = function(data) {
  var self = this, ul = $('<ul>'), album, li, a, img_src;
  for (album in data) {
    li = $('<li>');
    album = data[album];
    img_src = "https://graph.facebook.com/" + album.id + "/picture/?type=thumbnail";
    a = $("<a href='#'><img src='" + img_src + "&access_token=" + self.accessToken + "' /></a><span>" + album.name + "</span>");
    li.data('album-id', album.id);
    li.data('album-name', album.name);
    li.click(function(){
      self.loadPhotos($(this).data('album-id'), $(this).data('album-name'));
      return false;
    });
    li.append(a);
    ul.append(li);
  }
  $('.facebook-photo-select-body', this.overlay).removeClass('ajax-load').empty().append(ul);
}

FacebookPhotoSelect.prototype.loadPhotos = function(id, name) {
  var self = this;
  $('.facebook-photo-select-body', this.overlay).empty().addClass('ajax-load');
  if (self.photos[id]) {
    self.drawPhotos(self.photos[i], name);
  } else {
    FB.api("/" + id + "/photos", function(response) {
     self.photos[id] = response.data;
     self.drawPhotos(response.data, name);
   });
  }
}

FacebookPhotoSelect.prototype.drawPhotos = function(data, name) {
  var self = this, 
      header = $('<div class="facebook-photo-select-subheader"><h3></h3><a href="#">View albums</a></div>'), 
      ul = $('<ul class="no-title">'), 
      photo, li, a;
  $('h3', header).text(name);
  $('a', header).click(function(){
    self.drawAlbums(self.albums);
    return false;
  });
  for (photo in data) {
    li = $('<li>');
    photo = data[photo];
    a = $("<a href='#'><img src='" + photo.picture + "' /></a>");
    a.data('photo-id', photo.id);
    a.data('photo-url', photo.picture);
    a.data('photo-url-large', photo.source);
    a.click(function(){
      self.selectPhoto($(this).data('photo-url-large'));
      self.close();
      return false;
    })
    li.append(a);
    ul.append(li);
  }
  
  $('.facebook-photo-select-body', this.overlay).removeClass('ajax-load').empty().append(header).append(ul);
}

FacebookPhotoSelect.prototype.selectPhoto = function(url) {
  this.options.onSelect.call(this, url);
}