var bio_menu, bio_menu_input, num_bios;
var showing_bio = -1;


var show_bio = function(bio_index) {

	$('li.bio.active').removeClass('active');
	$('li.bio:eq(' + bio_index + ')').addClass('active');

	$('li.bio.active').show();
	$('li.bio:not(.active)').hide();


	var bio_width = 480 / num_bios; // beware numerical problems
	var int_bio_width = Math.floor(bio_width);

	var window_position = Math.floor(bio_index * bio_width);

	$('.bio_menu_mask.left').animate(
		{ width: window_position + 'px' },
		{ duration: 500, queue: false, step: 
			function(current_width) { // handle synchronization with this callback that updates the right mask every time the left mask's width (current_width) is updated)
				$('.bio_menu_mask.right').css({
					width: (481 - int_bio_width - current_width) + 'px', // sync still not perfect except in FF so using 481 to make the glitch harder to see
					left:  (current_width + int_bio_width) + 'px'
				});
			}	
		}
	);

}

var menu_click_handler = function(event) {
	var x_relative_to_menu = event.pageX - bio_menu.offset().left;
	showing_bio = Math.floor((x_relative_to_menu * num_bios) / $('.bio_menu_space').width());

	show_bio(showing_bio);
}

$(document).ready(function(){

	// Autoformat bio headers by inserting a comma between name and position
	//   (when position exists) and by converting the email address to an
	//   anchor / link

	// Insert comma + space between bio_name and bio_position elements
	$('div.bio_position').prepend(', ');
	$('div.bio_position').css('margin-left', '0px'); // undo the no-javascript styling

	// Replace 'address' with <a href="mailto:address">address</a>
	$('div.bio_contact').each(
		function(){
			$(this).wrapInner('<a href="mailto:' + this.innerHTML + '"></a>');
		}
	);
			


	// The bio page works by taking a list (<ul id="bios_list">) of 
	//   bio elements (<li class="bio">) and using jquery to hide all but
	//   one of the bio elements.  


	// Make all the bios the same height so that switching them doesn't affect the rest of the layout
	var	max_bio_body_height= 0;
	$('div.bio_body').each(
		function() {
			var this_dom = $(this);
			max_bio_body_height = Math.max(this_dom.height(), max_bio_body_height);
		}
	);
	$('div.bio_body').height(max_bio_body_height);


	// Prep stuff
	num_bios = $('li.bio').length;

	$('li.bio:eq(' + (num_bios - 1) + ')').after( // inject the menu and indicator
		'<div class="bio_menu_space">' +
			'<div class="bio_menu"><img src="images/bios/formals.jpg" alt="Formal Photo Thumbnails"/></div>' + 
			'<div class="bio_menu_mask left"></div><div class="bio_menu_mask right"></div>' + 
			'<div class="bio_menu_input"></div>' +
		'</div>'
	);
	$('.bio_menu_mask.left'). css({ 'left': '0px'   });
	$('.bio_menu_mask.right').css({ 'left': '480px' });	

	$('.bio_menu_mask'). pulse({ opacityRange: [0.4, 0.6], speed: 600});


	bio_menu = $('div.bio_menu');
	bio_menu_input = $('div.bio_menu_input');

	// Pick a random bio to show initially
	showing_bio = Math.floor(Math.random() * $('li.bio').length);
	show_bio(showing_bio);

	

	// Enable selection by hover (manually, since the menu is all one image for now)
	var hovering = false;
	var index_of_hovered_bio = -1;

	bio_menu_input.mouseover( function(event) {
		hovering = true;

		$('.bio_menu_mask').recover();
		$('.bio_menu_mask').css({ 'opacity': 0.5 });

		var x_relative_to_menu = event.pageX - bio_menu_input.offset().left;
		index_of_hovered_bio = Math.floor((x_relative_to_menu * num_bios) / this.clientWidth);

		show_bio(index_of_hovered_bio);
	});
	
	bio_menu_input.mouseout( function(event) {
		hovering = false;
		index_of_hovered_bio = -1;
	});

	bio_menu_input.mousemove( function(event) {
		if (hovering) {
			var x_relative_to_menu = event.pageX - bio_menu_input.offset().left;
			var	new_index_of_hovered_bio = Math.floor((x_relative_to_menu * num_bios) / this.clientWidth);

			if (new_index_of_hovered_bio != index_of_hovered_bio) {
				index_of_hovered_bio = new_index_of_hovered_bio;
				show_bio(index_of_hovered_bio);
			}
		}
	});

});