function gotoPage(link_prefix){
	$("#catalog").fadeOut("fast",function(){
	var str = '<ul id="cell_container">';
	var endPt = $.jqueryObj.projectArray.length;
	var max_img_width = 190;
	var max_img_height = 130;
	var max_row_width = 770;
	var row_width = max_row_width;
	var tmp_array = [];
	var org_sizes = [];		// original sizes
	var new_sizes = [];		// new sizes
	
	/*
	// gather all original image size
	for (var i=0; i < endPt; i++) {
		// calc the image width and height here
		$org_width = parseInt($.jqueryObj.projectArray[i].mediaArray[0]['width']);
		$org_height = parseInt($.jqueryObj.projectArray[i].mediaArray[0]['height']);
		
//		alert($org_height);
		
		if ($org_height > $org_width)
		{
			var width = Math.round( $org_width / $org_height * max_img_height);
			var height = max_img_height;
		}
		else
		{
			var height = Math.round( $org_height / $org_width * max_img_width);
			var width = max_img_width;
		}

		org_sizes.push(width);
	}
	
	// get new size
	new_sizes = calc_size(org_sizes, max_row_width, max_img_width);
	*/
	
	// apply new size
	for (var i=0; i < endPt; i++)
	{
//		var width = new_sizes[i];
//		var height = $.jqueryObj.projectArray[i].mediaArray[0]['height'] / $.jqueryObj.projectArray[i].mediaArray[0]['width'] * width;
//		
//		width = Math.round(width);
//		height = Math.round(height);		
	
		var width = 175;
		var height = 175;		
		
		str += '<li class="rg_li"><table cellpadding="0" cellspacing="0" width="100"><tr height="231"><td class="item_bg_main"><div class="cell">';
		str += '<a href="' + link_prefix + '&id=' + $.jqueryObj.projectArray[i].id + '"><img width="' + width + '" height="' + height + '" src="getimage_new.php?option=crop&w=' + width +'&h=' + height + '&file=' + $.jqueryObj.projectArray[i].mediaArray[0]['url'] + '" border="0" /></a><div class="cell_text">'+$.jqueryObj.projectArray[i].title;
           if ($.jqueryObj.projectArray[i].location != undefined)
               str += '<br>' + $.jqueryObj.projectArray[i].location + '</div>';
           
		str += '</div></td><td class="item_bg_right"><img src="images/spacer.gif" width="4"></td></tr><tr><td class="item_bg_bottom_left"><img src="images/spacer.gif" height="4"></td><td class="item_bg_bottom_right"><img src="images/spacer.gif" width="4" height="4"></td></tr></table>';
		str += '</li>';
	}
	
	str += '</ul>';
//	alert(str);
	$("#catalog").html(str);
	$("#catalog").fadeIn("fast");
	});
}

function calc_size(org_size_arr, row_width, max_img_width)
{	
	var tmp_arr = [];
	var size_arr = [];
	var buffer = Math.round(max_img_width);
	var img_buffer = Math.round(max_img_width/10);
	var spacing = 24;
	var extra_width;
	var num_item_of_last_row = 4;
	
	for (var i=0; i<org_size_arr.length; i++)
	{
		var width_so_far = get_total_width(tmp_arr, spacing);
		
		if ( width_so_far + org_size_arr[i] <= row_width)
		{
			// total width less than or larger than row width but within buffer
			// add the item, but resize all items to fit the row width
			
			// add the item first

			tmp_arr.push(org_size_arr[i]);
		}
		else
		{
			extra_width = row_width - (width_so_far - spacing);
			for (var j=0; j<tmp_arr.length; j++)
			{
				size_arr.push(tmp_arr[j] + Math.round(extra_width/tmp_arr.length));
			}
			num_item_of_last_row = tmp_arr.length;
			
			tmp_arr = [];
			tmp_arr.push(org_size_arr[i]);			
		}
//		else if (width_so_far + org_size_arr[i] > row_width + buffer) 
//		{
//			// total width will be overflow if added the new item
//			// leave the current row and put the new item into next line
//			for (var j=0; j<tmp_arr.length; j++)
//			{
//				size_arr.push(tmp_arr[j]);
//			}
//			
//			// refresh the tmp array, push the first item into it
//			tmp_arr = [];
//			tmp_arr.push(org_size_arr[i]);
//			alert('leave');
//		}
//		else
//		{
//			// the buffer area is still not yet reached
//			// add item straightly
//			tmp_arr.push(org_size_arr[i]);
//			alert('add');
//		}
	}
	
	// finally add those left and due with the extra width if over certain width
	// if in the buffer area
	var width_so_far = get_total_width(tmp_arr, spacing);
	extra_width = row_width - (width_so_far - spacing);			
	
	// only perform resize if extra_width is not large enough
	if (extra_width < row_width/3)
	{
		for (var j=0; j<tmp_arr.length; j++)
		{
			size_arr.push(tmp_arr[j] + Math.round(extra_width/tmp_arr.length));
		}
	}
	else
	{
		// resize follow the size of last row according to number of items in last row
		average_width_last_row = Math.round((row_width - spacing*(num_item_of_last_row-1)) / num_item_of_last_row);
		for (var j=0; j<tmp_arr.length; j++)
		{
			size_arr.push(average_width_last_row);
		}
	}	

//	if (width_so_far - spacing >= row_width - max_img_width)
//	{
//		extra_width = row_width - (width_so_far - spacing);
//	}
//	else
//	{
//		extra_width = 0;
//	}
	return size_arr;
}

function get_total_width(arr, spacing)
{
	var sum = 0;
	
	for (var i=0; i<arr.length; i++)
	{
		sum += (arr[i] + spacing);
	}
	
	//alert(sum.join(' '));
	return sum;
}