Lay out IFCB ROIs using JS impl of Jim Scott's rectangle packer

ifcb_packing.js

// now refactored as jquery plugin
(function($) {
    $.fn.extend({
        packedMultiImage: function(width, height) {
            return this.each(function() {
		var k = 4; // FIXME hardcoded
                var $this = $(this);
		// set up the rectangle packer
		var rootNode = new Node();
		rootNode.rect = new Rect(0, 0, width, height);
		// add the canvas
		$this.empty().append('<canvas width="'+width+'px" height="'+height+'px"></canvas>');
		var ctx = $this.find('canvas:last')[0].getContext('2d');
		$this.bind('addImage', function(event, url, success, failure) {
		    console.log('handler firing for '+url);
		    var image = new Image();
		    $(image).load(function() {
			console.log('image loaded: '+url);
			var t_width = image.width / k;
			var t_height = image.height / k;
			// ask the packer to insert a rectangle the size of the target / k
			var imageNode = rootNode.insert_rect(new Rect(0, 0, t_width, t_height));
			if(imageNode) { // if it fits,
			    console.log('image fit. drawing image '+url);
			    var r = imageNode.rect; // get its coordinates
			    // add image url to target node
			    ctx.drawImage(image, r.x, r.y, r.w, r.h);
			    if(success != undefined) {
				console.log('calling success handler');
				success(url);
			    }
			    return;
			}
			console.log('image did not fit');
			if(failure != undefined) {
			    console.log('calling failure handler');
			    failure(url);
			}
		    });
		    image.src = url; // initiate loading
		});
            });
        }
    });
})(jQuery);
$(document).ready(function() {
    // scaling factor for images
    var k = 4;
    // width / height of canvas
    var width = 1024;
    var height = 768;
    // add a canvas
    $('#main').append('<div id="multi"></div>');
    $('#main').append('<div id="status">idle</div>');
    $('#multi').packedMultiImage(width, height);
    // now set up generalized layout routine
    layoutImages = function(urls) {
	$('#status').empty().append('Laying out images...');
	var layoutNextImage = function() {
	    var url = urls.pop();
	    if(url) {
		$('#multi').trigger('addImage', [url, function() {
		    console.log('success callback');
		    $('#status').empty().append('packed ' + url);
		    layoutNextImage();
		}, function() {
		    console.log('failure callback');
		    $('#status').empty().append('No more images will fit');
		}]);
		console.log('triggered addImage for '+url);
	    }
	};
	layoutNextImage();
    };
    // IFCB impl
    getIfcbImages = function(callback) {
	var pid = 'http://demi.whoi.edu/mvco/IFCB1_2011_270_185023';
	$('#status').empty().append('Requesting image list for ' + pid + '...');
	$.getJSON(pid+'.json', function(r) {
	    var urls = [];
	    $.each(r.targets, function(i,t) {
		urls.push(t.pid + '.jpg');
	    });
	    layoutImages(urls);
	});
    };
    //getIfcbImages();
    // CPICS impl
    CPICS_pfx = 'http://atlantica.whoi.edu/cgi-bin/get_image.pl?imagename=';
    CPICS_pids = ["20130828_214943.757.4","20130829_081442.982.1","20130829_081443.244.1","20130901_082307.798.2","20130902_225221.332.1","20130905_010446.273.0","20130905_052008.951.0","20130905_060625.934.2","20130905_064801.671.0","20130905_093452.242.0","20130905_094605.730.0","20130908_202210.668.2","20130909_193940.531.0","20130912_024118.204.0","20130912_031522.749.0","20130912_202211.366.0","20130913_012557.439.0","20130913_103154.287.0","20130913_231418.363.0","20130914_003135.990.0","20130914_161740.561.0","20130915_072924.396.0","20130915_110355.739.0","20130915_145749.198.1","20130915_201605.285.0","20130916_015829.282.0","20130916_073204.014.0","20130916_073204.014.1","20130916_091907.238.0","20130916_091907.451.0","20130916_113554.018.0","20130916_122838.295.0","20130916_132238.834.0","20130916_151348.932.0","20130916_173640.284.0","20130917_064000.341.0","20130917_175816.808.0","20130917_184452.070.0","20130918_034218.580.0","20130918_034218.772.0","20130918_050539.371.1","20130918_102924.985.1","20130918_194706.600.0","20130919_035732.286.0","20130919_093106.814.0","20130919_120713.819.0","20130919_133552.946.0","20130919_140714.389.1","20130920_054039.514.0","20130920_083312.707.0","20130921_022759.058.0","20130921_131123.755.0","20130922_061447.357.0","20130922_142121.502.0","20130924_213545.439.0","20130925_072648.723.0","20130925_195757.994.0","20130927_121214.661.0","20130929_113436.084.1","20130929_145745.113.0","20130929_212352.149.2","20130929_212352.149.3","20131001_110528.272.0","20131002_015050.984.2","20131002_022640.682.0","20131002_140813.657.0","20131005_173134.205.0","20131012_174810.535.0","20131016_092422.881.0","20131018_214828.928.0","20131024_113559.210.1","20131024_225341.999.0","20131025_014158.150.0","20131025_053148.191.0","20131027_131335.586.0","20131027_150442.319.0","20131030_225810.330.1","20131102_071150.047.1","20131120_033201.449.0","20131126_060845.684.0","20131126_120824.452.0","20131126_142835.439.0","20131127_155420.499.0","20131129_050103.591.0","20131129_172858.138.0","20131130_034742.715.0","20131203_032734.831.1","20131203_032734.831.2","20131209_060448.276.1"];
    CPICS_urls = [];
    $.each(CPICS_pids, function(i, pid) {
	CPICS_urls.push(CPICS_pfx + pid + '.png');
    });
    layoutImages(CPICS_urls);
});