$(function () {
  var projects = [{"project":{"permalink":"by-association","name":"By/Association","small_image":"/system/projects/smalls/51/normal/byassoc_small.jpg?1266890070"}},{"project":{"permalink":"healsa","name":"Healsa","small_image":"/system/projects/smalls/31/normal/healsa_small.?1262842038"}},{"project":{"permalink":"sustainable-party","name":"Sustainable Party","small_image":"/system/projects/smalls/61/normal/sustyparty_small.jpg?1266890607"}},{"project":{"permalink":"change-in-command","name":"Change In Command","small_image":"/system/projects/smalls/101/normal/cic_small.jpg?1266891744"}},{"project":{"permalink":"body-image-project","name":"The Body Image Project","small_image":"/system/projects/smalls/21/normal/bip_small.jpg?1262880908"}},{"project":{"permalink":"baking-for-good","name":"Baking For Good","small_image":"/system/projects/smalls/71/normal/bfg_small.jpg?1266875172"}},{"project":{"permalink":"medecins-sans-frontieres","name":"M\u00e9decins Sans Fronti\u00e8res","small_image":"/system/projects/smalls/11/normal/msf_small.jpg?1262842772"}},{"project":{"permalink":"50p1q","name":"Fifty People One Question","small_image":"/system/projects/smalls/2/normal/50p1q_small.jpg?1262882311"}},{"project":{"permalink":"hopkins","name":"Hopkins","small_image":"/system/projects/smalls/41/normal/hopkins_small.jpg?1266875002"}},{"project":{"permalink":"pictures-reframed","name":"Pictures Reframed","small_image":"/system/projects/smalls/91/normal/pictures_small.jpg?1266875369"}},{"project":{"permalink":"remind","name":"ReMIND","small_image":"/system/projects/smalls/1/normal/remind_small.jpg?1266867705"}},{"project":{"permalink":"mmdg","name":"Mark Morris Dance Group","small_image":"/system/projects/smalls/121/normal/mmdg_small.jpg?1266889292"}}]

  loadGridItem = function(index, max) {
    if (index < max) {
      var project = projects[index].project;
      var grid_item = $('<a id="portfolio_'+index+'" href="/'+project.permalink+'" title="'+project.name+'"></a>');
      $('p#grid').append(grid_item);
      var image = new Image();

      $(image)
        .attr({
          'src'    : project.small_image,
          'alt'    : project.name,
          'width'  : '178',
          'height' : '99'
        })
        .load(function () {
          $(grid_item).append(this);
          if (index == (max - 1)) {
            $('p#grid').fadeIn(3000, 'easeOutQuad');
          } else {
            loadGridItem((index + 1),max);
          }
        })
        .error(function () {
          $(grid_item).remove();
          loadGridItem((index + 1),max);
        });
    }
  }

  var max = projects.length;
  if (max > 0) {
    $('p#grid').hide();
    loadGridItem(0, max);
  }
});