$(function() {
	// add id to body tag to apply additional styles for javascript enabled browsers
	$('#wrapper').attr('class','js');
	// displays the definition list elements nicer than the non-javascript version
	lists();
});

function lists() {
	var i = 1;

	// find all dt
	$('#list dt')
		.each(function() {
			// wrap each dt with an anchor tag and
			// unique id in order to apply image background
			$(this)[0].innerHTML = '<a href="#" id="n'+ i++ +'">' + $(this)[0].innerHTML + '</a>';
			if ( i == 13 ) {
				$('#n12').attr('href',$('#n12').parent('dt').next('dd').find('span a').attr('href'));
			}
		})
		.children('a')
			.click(function() {
				$('#list .selected')
					// remove visibility and pading styles applied by previous mouseover
					.removeAttr('style')
					// remove selected class from currently selected item
					.removeClass();

				if($(this).attr('id') != "n12") {
					$(this).parent('dt')
						// give the current dt a selected class
						.addClass('selected')
						.next('dd')
							// give the current dd a selected class
							.addClass('selected');

					// get id of this object
					var id = $(this).attr('id');
					// remove 'n' from the id
					id = id.replace(/\D/g,'');
					// set hero image by id
					$('#hero img').attr('src','images/benefits/' + id + '.jpg');

					// remove focus on anchor since some browsers leave border around active links
					$(this).parent().blur();

					return false;
				}
			});

	// set initial selection
	// $('#n1').trigger('click');
}