$(document).ready(
	function() {
		// Make all of the sections on the left side of the page the same width. Note that
		// we don't check the width of the photos section, because I can't get a reliable
		// width from IE. It seems to have something to do with the flickr badge not being
		// totally integrated into the DOM by the time we come here and check the width.
		// Fortunately, the badge's width is fixed at 117px, which is far smaller than the
		// other two sections will ever be.
		var leftSections = ['#currentEventsContainer', '#subscribeSection', '#photosSection'];
		var maxWidth = 0;
		for(var i = 0; i < leftSections.length - 1; ++i) {
			$section = $(leftSections[i]);
			var thisWidth = $section.width() +
							parseInt($section.css('paddingLeft'), 10) +
							parseInt($section.css('paddingRight'), 10);
			if(thisWidth > maxWidth) {
				maxWidth = thisWidth;
			}
		}
		
		// Set all three sections to the max width, but honor the max-width
		// setting for the current events container. Note that I tried to use css('maxWidth')
		// to read the max-width from the stylesheet, but Google Chrome 
		var widthLimit = 295; // parseInt($('#currentEventsContainer').css('maxWidth'), 10);
		if(maxWidth > widthLimit) {
			maxWidth = widthLimit;
		}
		
		for(var i = 0; i < leftSections.length; ++i) {
			$(leftSections[i]).width(maxWidth);
		}

		var emailPrompt = 'Enter your email address';
		
		// Fiddle with the email input field when the user clicks
		// in it or moves out of it.
		$('#newsletterEmail')
			.val(emailPrompt)
			.click(
				function() {
					var inputContent = $(this).val();
					if(inputContent == emailPrompt) {
						$(this).val('');
					} else {
						$(this).select();
					}
				}
			)
			.blur(
				function() {
					var inputContent = $(this).val();
					if(inputContent == '') {
						$(this).val(emailPrompt);
					}
				}
			);
			
		// Handle the click on the newsletter signup button
		$('#newslettersignup').click(
			function() {
				var emailAddress = $('#newsletterEmail').val();
				var validEmail = echeck(emailAddress);
				if(validEmail) {
					// Ugly, but I can't find any other way to do it, and this gets me past
					// the strict xhtml validator.
					$('#subscribeForm').attr('target', '_blank');

					$('#subscribeForm').submit();
				} else {
					alert('That doesn\'t appear to be a valid email address. Try again.');
				}
				return false;
			}
		);
		
		// This is stuff for the flickr badge. I had originally put it into its own js file,
		// but I need it to happen before I try to calculate the height of its containing
		// section, and I'm not confident that I can control the order of js file loading
		// on all the different browsers. So just do it here so the height will be right.
		var zg_bg_color = 'ffffff';
		var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+
						zg_bg_color+'&zg_context=in%2Fpool-chicocorsa%2F&zg_group_id=1019749%40N23';

		$('.zg_div_inner').
			append('<iframe style="background-color:#'+
					zg_bg_color+'; border-color:#'+
					zg_bg_color+'; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="'+
					zgi_url+'" title="Flickr Badge"><\/iframe>');

		// Remove elements from the array if they make our total height too tall
		var maxHeight = $('#bigLeftSection').height();

		if(maxHeight < 1200) {
			maxHeight = 1200;	// Race team page is new, so the big left section isn't very tall yet
		}
		
		while(($('#blogger-main').height() > maxHeight) && ($('.blogger-post').length > 1)) {
			$('.blogger-post:last').remove();
		}

		$('#blogger-content').height('auto');
	}
);