$(document).ready(function() {

	$('#highlightControls div.highlightBlurb').removeClass('first');
	
	$('#highlightControls').prepend('<a class="prev" href="#"><span class="hideContent">Previous</span></a>');
	$('#highlightControls').append('<a class="next" href="#"></a>');
	$('#headerContainer_refresh h2').css('width','240px');
	$('#headerContainer_refresh').append('<a href="#" id="refreshButton"><img src="images/layout/js_refresh_button.gif" alt="refresh" /></a>');

	
	$('#highlightFader').cycle({
		fx: 'fade',
		next: '#highlightControls .next',
		prev: '#highlightControls .prev'
	});
	
	$('#highlightInfoContainer').cycle({
		fx: 'fade',
		next: '#highlightControls .next',
		prev: '#highlightControls .prev'
	});
	
	//work out the correct height the links should be
	linkHeight('#highlightControls', '#highlightInfoContainer');
	
	makeTextFader('.headerContainer #refreshButton', '#onlineTourContainer div.tourItemPair', 'block');

});

//matches the height of the links with the height of its container
function linkHeight(linkContainer, desiredHeightContainer) {
	
	var height = $(desiredHeightContainer).height();
	
	$(linkContainer).find('a.next').height(height);
	$(linkContainer).find('a.prev').height(height);
	
}

// Function to fade text in and out of a container
// containerSelector: The ID of the container of the text 
// contentSelector: The components that will be faded in and out
function makeTextFader(linkSelector, contentSelector, displayType) {
	$(contentSelector+':first').css('display', displayType);
	$(contentSelector+':first').removeClass('first');
	
	$(linkSelector).click(function(){
		
		$(contentSelector).each(function() {
			if($(this).css('display') == displayType){
				$(this).fadeOut('medium', function() {
					if($(this).next(contentSelector).length) {
						$(this).next(contentSelector).fadeIn('medium');
					}
					else {
						$(contentSelector+':first').fadeIn('medium');
					}
				});
			}
		});
	
	return false;
	});
	
}