sandsmade.com photo logic

gistfile1.js

// maximum time that one photo stays in the panel (in ms)
var MAXTIME = 20000,
    MINTIME = 8000,
    FADETIME = 1500;

var FLICKR_API_PARAMS = {
  apiKey: 'USE_YOUR_API_KEY_HERE',
  userId: 'USE_YOUR_USER_ID_HERE',
  tag: 'homepage',
  perPage: '125'
};

var SANDSMADE_PARAMS = {
  baseLinkUrl: 'http://sandsmade.com/',
  defaultLinkUrl: 'products'
}

// creates a photo URL based on the flickr object
function getURL(photo) {
  var basePhotoURL = 'http://farm' + photo.farm + '.static.flickr.com/';

  return basePhotoURL + photo.server + '/' + photo.id + '_' + photo.secret + '_m.jpg';
}

// loads the image urls and then call the successHandler function with the array photos
function getPhotoList(flickrParams, sandsmadeParams, successHandler) {

  jQuery.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
    'flickr.photos.search&api_key=' + flickrParams.apiKey + '&user_id=' + flickrParams.userId +
    '&tags=' + flickrParams.tag + '&per_page=' + flickrParams.perPage + '&extras=description&jsoncallback=?',
    function(data) {
      var photos;
      if (data !== undefined && data.photos !== undefined) {
        photos = jQuery(data.photos.photo).map( function (index, photo) {
          return {
            link: sandsmadeParams.baseLinkUrl + (photo.description._content || sandsmadeParams.defaultLinkUrl),
            src: getURL(photo)
          };
        });
        if (successHandler !== undefined) {
          successHandler(photos);
        }
      }
    }
  );
}



// Select a photo from the photos array, after selection it removes it from that array
function selectPhoto(photos) {

  var rnd, photo;

  if (photos === undefined || photos.length === 0) {
    return "";
  }

  rnd = Math.round(Math.random() * (photos.length - 1));
  photo = photos[rnd];

  // take it out from the array
  photos.splice(rnd,1);

  return photo;
}

function loadPhoto(photo, successHandler) {

  var img = jQuery("<img>", {
    src: photo.src
  });

  img.load( function () {
    if (successHandler !== undefined) {
      successHandler(img);
    }
  });

}

// Crossfades the src element into dst inside the container
// we create a fake image in the background with 0 opacity
// then we fade in this image
function crossFade(src, dst, container) {

  loadPhoto(dst, function (img) {
    // when the image is loaded
    img.css({
      position: "absolute",
      top: 0,
      left: 0,
      display: "none",
      zIndex: 10
    });

    container.prepend(img);

    img.fadeIn(FADETIME);

    setTimeout( function () {
      src.remove();
      img.css("z-index",0);
      // changing the link as well
      img.closest('a').attr('href', dst.link);
    }, FADETIME);
  });

}

// sets up a panel, randomly selects an image and loads it into the element
function initPanel(element, photos) {

  var newImg = selectPhoto(photos);

  var container = jQuery(element),
      img = container.find("img"),
      imgPath = img.attr("src");

  if (img.length > 0) {
    crossFade(img, newImg, container);

    if (imgPath !== "") {
      // we put the old photo back to the photos
      photos.push(img.attr("src"));
    }
  } else {
    loadPhoto(newImg, function (img) {
      container.append(img);
      container.attr('href', newImg.link);
    });
  }
}

// shedules one panel
function schedulePanel(element, photos) {

  var t = Math.random() * MAXTIME;

  if (t < MINTIME) {
    t = MINTIME;
  }

  var timer = setTimeout( function () {
    clearTimeout(timer);
    initPanel(element, photos);
    schedulePanel(element, photos);
  }, t);
}


// inits all panels
function initPanels(photos) {

  var photogrid = jQuery(".photogrid"),
      panels = photogrid.find(".panel");

  panels.each( function(index, panel) {
    // first photo
    initPanel(panel, photos);

    // make the grid visible
    photogrid.removeClass("hidden");

    // sheduling the next photo
    schedulePanel(panel, photos);
  });
}

jQuery(function() {

  // loads the images
  getPhotoList(FLICKR_API_PARAMS, SANDSMADE_PARAMS, function(photos) {
    // inits the panels
    initPanels(photos);
  });
});