(function($) {
    $(function() {
	var landmarkRoles = {
	    'banner' : 'The page heading.',
	    'complementary' : 'Supplementary information.',
	    'main' : 'The main page content.',
	    'navigation' : 'The page’s navigation.',
	    'search' : 'The page’s search box.'
	};

	var landmarkSelectors = [];

	for (var role in landmarkRoles) {
	    landmarkSelectors.push('*[role=' + role + ']');
	}

	var landmarks = $(landmarkSelectors.join(','));

	// Filter out landmarks that don't have focusable elements
	var landmarks = landmarks.filter(function() {
	    return $(this).find('*').filter(function() {
		return this.tabIndex >= 0;
	    }).length > 0;
	});

	if (landmarks.length == 0) {
	    return;
	}

	var landmarkList = $('<dl class="ui-widget-content ui-corner-bottom">');

	$.each(landmarks, function(landmark) {
	    var role = $(this).attr('role');
	    var title = $('<dt>');
	    
	    var link = $('<a href="#">' + role.replace(/\b[a-z]/g, function(match) {
		return match.toUpperCase();
	    }) + '</a>');
	    
	    (function(link, landmark) {
		link.click(function(evt) {
		    evt.preventDefault();
		    landmark.find('*').filter(function() {
			return this.tabIndex >= 0;
		    }).eq(0).focus();

		    landmarkListContainer.addClass('hidden');
		});

		link.focus(function() {
		    landmarkListContainer.removeClass('hidden');
		});

		link.blur(function() {
		    landmarkListContainer.addClass('hidden');
		});
	    })(link, $(this));

	    title.append(link);
	    landmarkList.append(title);

	    var dd = $('<dd>' + landmarkRoles[role] + '</dd>');
	    landmarkList.append(dd);
	});

	var landmarkListContainer = $('<div class="ui-widget hidden" id="landmark-navigator">');
	landmarkListContainer.append('<h2 class="ui-widget-header ui-corner-top">Page Sections</h2>');

	landmarkListContainer.append(landmarkList);
	$('body').prepend(landmarkListContainer);
    });
})(jQuery);