$(document).ready(function() {
  $('a[rel*=facebox]').facebox();
  $('.raptorz').raptorize();
  
  // http://www.projectatomic.com/2008/04/05/jquery-flickr
  $("#photos").flickr({     
      api_key: "e58f3ed940064124ad5a5c1f3b78c541",
      type: "search",
      user_id: "8567644@N02",
      per_page: "240",
      callback: setupLightbox
  });
  
  function setupLightbox(element){
    $('#photos a').facebox();
    $('#photos ul').randomize('li');
    
    var photos = []
    $('#photos ul li').each(function(){
      photos.push($(this).find("img").attr("src"));
    })
    
    $.preload(
      photos, 
      { loaded: function(img, loaded, total){
          $($('#photos ul').find('img')[loaded-1]).fadeIn(300);
        },
        loaded_all: function(){
          $('#photos ul').find('img').fadeIn(300);
        } 
      }
    );
  }
  
});

(function($) {

  // http://stackoverflow.com/questions/1533910/randomize-a-sequence-of-div-elements-with-jquery
  $.fn.randomize = function(childElem) {
    return this.each(function() {
      var $this = $(this);
      var elems = $this.children(childElem);
      
      elems.sort(function() { return (Math.round(Math.random())-0.5); });  

      $this.remove(childElem);  

      for(var i=0; i < elems.length; i++)
        $this.append(elems[i]);
    });    
  }
  
  // http://ditio.net/2010/02/14/jquery-preload-images-tutorial-and-example/
  var imgList = [];
	$.extend({
		preload: function(imgArr, option) {
			var setting = $.extend({
				init: function(loaded, total) {},
				loaded: function(img, loaded, total) {},
				loaded_all: function(loaded, total) {}
			}, option);
			var total = imgArr.length;
			var loaded = 0;
			
			setting.init(0, total);
			for(var i in imgArr) {
				imgList.push($("<img />")
					.attr("src", imgArr[i]+"?"+Math.random()*999999)
					.load(function() {
						loaded++;
						setting.loaded(this, loaded, total);
						if(loaded == total) {
							setting.loaded_all(loaded, total);
						}
					})
				);
			}
			
		}
	});
	
  
})(jQuery);