// Created for TMARKS Design by Joel Davis of Yellow Button

var transdur = 600;

function speedup() {
	transdur = transdur - 20;
	if (transdur < 200) {
		transdur = 200;
	}
}
function changeBio(clickedbtn) {
	var clickedfeature = clickedbtn.attr('href');
	var clickedidx = parseInt(clickedfeature.substr(4,1));
	var previousfeat = $('#leadership').data('activefeat');
	$('#leadership').data('activefeat', clickedfeature);

	// play transfer effect
	clickedbtn.effect("transfer",{ to: $('#leadership'), className: 'ui-effects-transfer' },transdur);

	// reassign prev/next btns
	$('#leadership-next').attr('href', '#bio' + (clickedidx + 1));
	$('#leadership-previous').attr('href', '#bio' + (clickedidx - 1));
	
	if (clickedidx == 1) { 
		$('#leadership-previous').hide(); 
		$('#leadership-next').show(); 
	} else if (clickedidx == $('#leadership').data('bios')) {
		$('#leadership-previous').show(); 
		$('#leadership-next').hide(); 
	} else { 
		$('#leadership-previous').show(); 
		$('#leadership-next').show(); 
	}	

	if (previousfeat != clickedfeature) {
		// dim the previous bio button
		$(previousfeat + '-btn').removeClass('selected');
		$(previousfeat + '-btn').addClass('visited');

		// highlight the current bio button
		$(clickedfeature + '-btn').addClass('selected');

		// fade out previous 
		$(previousfeat).css("background", "transparent").fadeOut((transdur/2), function(){
			// fade in current
			$(clickedfeature).css("background","transparent").fadeIn((transdur/2));
		});
	}
	speedup();
}

// when document is ready
$(function() {
	// setup the bio menu
	$('#leadership').data('bios',  $('.bio').length);

	// activate the first bio
	var firstfeat = $('.bio:first');
	// store data
	$('#leadership').data('activefeat', '#' + firstfeat.attr('id'));
	// show first bio
	firstfeat.show();

	// enable page nav
	$('#leadershipnav').click(function(event){
		event.preventDefault();
		changeBio($(event.target).closest('a'));
	});

	// setup the previous/next buttons
	$('#leadership').append('<a href="#" id="leadership-previous" class="leadership-btns">&laquo;</a> <a href="#bio2" id="leadership-next" class="leadership-btns">&raquo;</a>');

	// enable buttons
	$('.leadership-btns').click(function(event){
		event.preventDefault();
		changeBio($(event.target));
	});
	
	// show the next button, hide the previous to start	
	$('#leadership-next').show(); 
	$('#leadership-previous').hide(); 

});