var animDur = 1000;
var inset = null;

$(document).ready(function(){

	var navContainer = $('#highlightButtonContainer');
	$('#granteeCycle').cycle({
		speed: 500,
		timeout: 8000,
		pause: 1
	});
	displayInset( $('#hli-mission') );
	navContainer.css( 'backgroundPosition', '29px 0');
	$('.highlightButton').click(function(){
		if ( !$(this).hasClass('currentHL') ) {
			var liIndex = navContainer.find("li").index(this);
			//alert( liIndex );
			$(this).addClass('currentHL').siblings().removeClass('currentHL');

			switch(liIndex) {
				case 0: navContainer.css( 'backgroundPosition', '29px 0'); break;
				case 1: navContainer.css( 'backgroundPosition', '183px -57px'); break;
				case 2: navContainer.css( 'backgroundPosition', '403px -229px'); break;
				case 3: navContainer.css( 'backgroundPosition', '574px -114px'); break;
				case 4: navContainer.css( 'backgroundPosition', '780px -171px'); break;
			}

			inset = $('.highlightInset:eq('+liIndex+')');
			$('.highlightInset').stop(true, true).fadeOut( animDur );
			displayInset( inset );

			var imgContainer = $('<div></div>').appendTo('#bgImgContainer');
			loadNewImage( imgContainer, $(this).attr('data-img'), $(this).attr('data-color') );
		}
	});
});
function displayInset( itemToDisplay ) {
	itemToDisplay.stop(true, true).fadeIn( animDur );
}
function loadNewImage(vDiv, vUrl, vHex) {
	var imgNew = new Image();
	$(imgNew).load(function() {
		// all of this happens when it has loaded
		vDiv.hide().css('background', vHex).prepend(this);
		vDiv.stop(true, true).fadeIn(animDur, function(){
			vDiv.siblings().remove();
		});
		$('body').animate({
			backgroundColor: vHex
		}, animDur);
	}).attr('src', vUrl);
}