Offset spacing for unequal thumbnails

1

Hello, like a thousand other users I am requesting some kind and knowledgeable soul to offer me help on a thumbnail gallery. My gallery is a conglomeration of code from several tutorials. Please ignore the excess comments, which I have kept so that I might modify the code.

Here is the problem:
I have a grid of thumbnails (partially masked)
and the thumbnails have different widths. I am looking for a solution
to evenly space these unequally sized thumbnails in the grid.

You can see I tried to use an if statement as well as using a variable that carries hte previous width of each image

I have been thinking my code might not be working how the images load in reverse, from the top of the array to the bottom. Also, the XML file does not fill the grid perfectly, as in the last row of images do not use all the columns in that row, I am wondering if it is a problem that I do not start from the ‘end’ of the row.

I am quite confused and would GREATLY appreciate your help.
I have put the thumbnail function code in blue, as that is where the placement of the thumbs occurs.

Thanks so much for your time.

Here is the code:

var thumb_spacing = 10;
var thumb_height = 80;
var prev_width = 0;
// number of columns you want
var columns = 5;
// number of rows you want
var rows = 9;
var positionX = 0;
// var to determine how much pages there will be
var pages;
// mask scroll mc
thumbnail_mc.setMask(mask);
var activate = 0;
function loadXML(loaded) {
	if (loaded) {
		xmlNode = this.firstChild;
		image = [];
		description = [];
		thumbnails = [];
		total = xmlNode.childNodes.length;
		for (i=0; i<total; i++) {
			image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
			description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
			thumbnails* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
			thumbnails_fn(i);
		}
		//next two lines hide the thumbnail grid, until button makes them visible
		thumbnail_mc._visible = false;
		menu_mc._visible = false;
		pages = Math.floor(total/5);
		// /(rows*columns)));
		// position of the different pages
		//var pageing = pages*(columns*thumb_spacing);
		trace("there are"+pages);
		//if (pages>0) {
		for (var i = 0; i<=pages; i++) {
			// attach a button for each page
			var pag = menu_mc.attachMovie("page_btn", "page"+i, 99+i);
			// position of the btton
			pag._x = 25+i*25;
			//pag._y = 0;
			// identifier for the button
			pag.id = i;
			// button text
			pag.info.text = i+1;
			pag.onPress = function() {
				// show the right page
				// you could add some easing...
				thumbnail_mc._y = 486-(this.id*(thumb_height));
				//-(i*(300));
			};
		}
		
		firstImage();
	} else {
		content = "file not loaded!";
	}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
	if (Key.getCode() == Key.LEFT) {
		prevImage();
	} else if (Key.getCode() == Key.RIGHT) {
		nextImage();
	}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
	prevImage();
};
next_btn.onRelease = function() {
	nextImage();
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
	filesize = picture.getBytesTotal();
	loaded = picture.getBytesLoaded();
	preloader._visible = true;
	if (loaded != filesize) {
		preloader.preload_bar._xscale = 100*loaded/filesize;
	} else {
		preloader._visible = false;
		if (picture._alpha<100) {
			picture._alpha += 10;
		}
	}
};
function nextImage() {
	if (p<(total-1)) {
		p++;
		if (loaded == filesize) {
			picture._alpha = 0;
			picture.loadMovie(image[p], 1);
			desc_txt.text = description[p];
			picture_num();
		}
	}
}
function prevImage() {
	if (p>0) {
		p--;
		picture._alpha = 0;
		picture.loadMovie(image[p], 1);
		desc_txt.text = description[p];
		picture_num();
	}
}
function firstImage() {
	if (loaded == filesize) {
		picture._alpha = 0;
		picture.loadMovie(image[0], 1);
		desc_txt.text = description[0];
		picture_num();
	}
}
function picture_num() {
	current_pos = p+1;
	pos_txt.text = current_pos+" / "+total;
}
[COLOR="Blue"]function thumbnails_fn(k) {
	thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
	tlistener = new Object();
	//pages = Math.floor((k/(rows*columns)));
	//trace ("the first pages var="+pages)
	//var pageing = pages*(rows*thumb_height);
	//var pageing = pages*(columns*thumb_spacing);
	//var pageing = (columns*thumb_spacing);
	tlistener.onLoadInit = function(target_mc) {
		//not working because k starts at 44 not 0
		if ((k!=total), (k/5)!=int(k/5)) {
		target_mc._x = prev_width + thumb_spacing;
		prev_width = target_mc._width + prev_width;
		} else {
		target_mc._x = 0;
		prev_width = target_mc._width;
		}
		//target_mc._x = (k%columns)*(pageing+thumb_spacing);
		//target_mc._x = (k%columns)*(target_mc._width+10);
		//target_mc._x = (k%columns)*170
		// thumb y position
		target_mc._y = (Math.floor(k/columns)%rows)*thumb_height;
		//target_mc.createEmptyMovieClip("thumb_container", 0);
		//target_mc.thumb_container.loadMovie(currentPicture.attributes.thumb);
		//		
		target_mc.pictureValue = k;
				target_mc.onRelease = function() {
			p = this.pictureValue-1;
			nextImage();
		};
		target_mc.onRollOver = function() {
			this._alpha = 50;
			thumbNailScroller();
		};
		target_mc.onRollOut = function() {
			this._alpha = 100;
		};
	};
	image_mcl = new MovieClipLoader();
	image_mcl.addListener(tlistener);
	image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}
function showgrid() {
	if (activate==0) {
		thumbnail_mc._visible = true;
		menu_mc._visible = true;
		activate++;
	} else {
		thumbnail_mc._visible = false;
		menu_mc._visible = false;
		activate = 0;
	}
}[/COLOR]