function retrieveList(area, filename, direction) {
	//create references
	$container = $('#' + area + ' .listContainer');
	$list = $('#' + area + ' .listContainer .list');

	
	//create loading image
	$list.append('<div id="' + area + 'LoaderImage" class="loading"><b></b></div>');
	//create reference to loader image
	var $loaderImage = $('#' + area + 'LoaderImage');
	//get center of container
	var x = ($container.width() / 2) - ($loaderImage.width() / 2);
	var y = ($container.height() / 2) - ($loaderImage.height() / 2);
	//set position of loading image
	$loaderImage.css('top', y);
	$loaderImage.css('left', x);
	
	//create new list page container
	$container.append('<div class="list loaded"></div>');
	// create reference
	$loaded = $('#' + area + ' .listContainer .list.loaded');
	//position new list
	$loaded.css('left',600 * direction);
	$loaded.css('top',0);
	
	//load list from server
	$loaded.load(filename, function() {
		//remove loading image
		$loaderImage.remove();
		//move first list page away
		$list.animate({'left':-600 * direction}, 1150);
		//bring new list page
		$loaded.animate({'left':'0'}, 1150, function(){
			//remove old list page
			$list.remove();
			//remove loaded class from new list page
			$loaded.removeClass('loaded');
			});
		});
	
}