var photoAlbumId = '197163240303529'; // facebook photo album id
var galleryHeight = 75; // 75px

$(document).ready(function() {

	var pos = $( '.image-gallery .scrollable .items' );

	var url = 'http://graph.facebook.com/' + photoAlbumId + '/photos';
	
	$.getJSON( url, function( json ) {
		var count = 0;
		var totalCount = 0;
		var watchArr = [];
		var imageBuf = '';
		
		// show images
		$.each( json.data, function( i, data ) {
			$.each( data.images, function( j, image ) {
				if( image.width != 180 ) {
					return true; // continue
				}
				else {
					var imgId = 'gallery-image-' + count;
					if( count == 0 ) {
						imageBuf += '<div>';
					}
					
					imageBuf += '<div class="image">' +
						'<a href="' + data.link + '">' +
						'<img id="' + imgId + '" src="' + image.source + '" alt="" width="118"/>' +
						'</a>' +
						'</div>';
						
					if( count == 4 ) {
						imageBuf += '</div>';
						count = 0;
					}
					else {
						count++;
					}
					
					watchArr.push( imgId );
					
					return false; // break
				}
			});
			
			if( ++totalCount == 30 ) {
				return false;
			}
			
		}); // $.each image
		
		if( count < 4 ) {
			imageBuf += '</div>';
		}
		
		$(pos).append( imageBuf );
		
		// center images
		$.each( watchArr, function( i, imgId ) {
			$('#'+imgId).load( function() {
				var h = $(this).height();
				if( h != galleryHeight ) {
					var d = parseInt((h - galleryHeight) / 2) * -1;
					$(this).css('position','relative').css('top',d+'px');						}
			});
		});
		
		$('.scrollable').scrollable();

	}); // $.getJSON

});