function initTabs() {
	var counter = 0;
	//$('.tab-container').addClass('tab-container-on'); //can be enabled if there are issues with having styles for disabled JS vs enabled JS
	$('.tab-container h2').addClass('tab-head');	
	//find out the amount of tabs then calculate size
	$('.tab-container').each(function(){
		$tb = $(this).children('h2.tab-head');
		if ($tb.size() > 6) {
			$tb.addClass('tab-head-small');
		} else if ($tb.size() > 4) {
			$tb.addClass('tab-head-medium');
		}
	});
	$('.tab-container div.tab-content').hide();
	
	//add a unique identifier to all instances of tab-head & tab-content pairs
	$('.tab-container h2.tab-head').each(function(){
		var subcount = 0;
		counter++;
		$class = 'upf-tab-'+counter;
		$(this).attr('id', $class);
		$label = $(this).children();
		//calculates the position of the tab label/heading. can only be maximum two lines long, else it overflows underneath	
		if ($label.height() < 20) {
			$label.css('top','8px');
		} else {
			$label.css('top','1px');
		}	
		$(this).next('div.tab-content').addClass($class);
		
		//find any sub content tabs, if so, add functionality to it
		if ($(this).next('div.tab-content').children('.tab-subhead').size() > 0) {
			$(this).next('div.tab-content').children('.tab-subhead').each(function() {
				subcount++;
				$subval = 'tab-subhead'+counter+'-'+subcount;
				$(this).attr('id', $subval);
				$(this).addClass('tab-subhead-btn');
				$(this).next('div.tab-subcont').addClass($subval).hide();
			});
		}

	});
	
	$('.tab-container').append('<div style="clear: both; margin: 0; height: 0; line-height: 0;"></div>');
	
	//find everywhere there is a tab-container, and display its first tab's content
	$('.tab-container').each(function(){
		$(this).children('h2.tab-head').first().addClass('tab-head-selected');
		$(this).append($(this).children('div.tab-content').first().show() );
		$(this).children('h2.tab-head').last().css('margin', '0');
	}) 
	$('.tab-container .tab-content').each(function(){
		$(this).children('.tab-subhead').first().addClass('tab-subhead-first tab-subhead-selected');
		$(this).children('div.tab-subcont').parent().append('<div style="clear: both; margin: 0; height: 0; line-height: 0;"></div>'); //.children('div.tab-subcont').parent() checks whether this element has a tab-subcont and if it does append a clearer
		$(this).children('div.tab-subcont').parent().append($(this).children('div.tab-subcont').first().show());
	});
	
	//tab controls
	$title = $('.tab-container h2.tab-head');
	
	$title.click(function() {
		$(this).siblings('div.tab-content').hide();
		$(this).siblings('h2.tab-head').removeClass('tab-head-selected');
		$(this).addClass('tab-head-selected');
		$content = $('.tab-container div.' + $(this).attr('id'));
		$(this).parent().append($content.show());
	});

	//sub tab controls
	$('.tab-container div.tab-content .tab-subhead').click(function(){
		$(this).siblings('.tab-subhead').removeClass('tab-subhead-selected');
		$(this).addClass('tab-subhead-selected');
		$(this).siblings('div.tab-subcont').hide();
		$(this).parent().append($(this).siblings( 'div.'+$(this).attr('id') ).show());
		/*  //hide and show other elements with this:
		$(this).siblings('.img-toggle').hide();
		$(this).siblings( '.'+$(this).attr('id') ).show();  */
	});
	
}