$(document).ready(function() {

	// parameter
	var navOffset 	= 15,
		fadeSpeed 	= 300,
		hoverSpeed 	= 200;	
		
	// top element, navigation is aligned to #content
	var minTop = $('#content').offset().top+'30px',
		maxTop = $('#content').height()+minTop-$('#navigation').height();		
	// place navigation
	var currentScroll = $(window).scrollTop();
	$('#navigation').css({'top' : minTop});
	// align navigation after loading
	if( currentScroll > minTop && currentScroll < maxTop ) {
		// while scrolling though the content
		$('#navigation').css({'top' : navOffset+'px'});		
	}
	if( currentScroll <= minTop ) {
		// adjust navigation top to content top
		$('#navigation').css({'top' : minTop-currentScroll});
	}
	if( currentScroll >= maxTop ) {
		// end of content
		$('#navigation').css({'top' : maxTop-currentScroll});
	}
	
	// get section positions
	var secondTop 	= Math.floor($('#second').offset().top),
		thirdTop 	= Math.floor($('#third').offset().top);	
	console.log(secondTop+" "+thirdTop);	
	// on scroll
	$(window).scroll(function() {
		// current scroll
		var winScroll = $(window).scrollTop();
		// align navigation to window scroll
		if( winScroll > minTop && winScroll < maxTop ) {
			// while scrolling though the content
			$('#navigation').css({'top' : navOffset+'px'});		
		}
		if( winScroll <= minTop ) {
			// adjust navigation top to content top
			$('#navigation').css({'top' : minTop-winScroll});
		}
		if( winScroll >= maxTop ) {
			// end of content
			$('#navigation').css({'top' : maxTop-winScroll});
		}

		// indicator for current position in the document
		if(	(winScroll + navOffset) < secondTop ) {
			// current section = first
			$('#navfirst').css({'color' : '#b36931'});
			$('#navsecond').css({'color' : '#394248'});
			$('#navthird').css({'color' : '#394248'});
			// animate
			$('#navfirst').stop().animate({ opacity: 1.0 }, fadeSpeed);
			$('#navsecond').stop().animate({ opacity: 0.2 }, fadeSpeed);
			$('#navthird').stop().animate({ opacity: 0.2 }, fadeSpeed);
			// current
			$('#navfirst').addClass('current');
			$('#navsecond').removeClass('current');
			$('#navthird').removeClass('current');			
		} else if ( (winScroll + navOffset) < thirdTop ) {
			// current section = second
			$('#navfirst').css({'color' : '#394248'});
			$('#navsecond').css({'color' : '#b36931'});
			$('#navthird').css({'color' : '#394248'});
			// animate
			$('#navsecond').stop().animate({ opacity: 1.0 }, fadeSpeed);
			$('#navfirst').stop().animate({ opacity: 0.2 }, fadeSpeed);
			$('#navthird').stop().animate({ opacity: 0.2 }, fadeSpeed);
			// current
			$('#navsecond').addClass('current');
			$('#navfirst').removeClass('current');
			$('#navthird').removeClass('current');				
		} else {
			// current section = third
			$('#navfirst').css({'color' : '#394248'});
			$('#navsecond').css({'color' : '#394248'});
			$('#navthird').css({'color' : '#b36931'});
			// animate
			$('#navthird').stop().animate({ opacity: 1.0 }, fadeSpeed);
			$('#navsecond').stop().animate({ opacity: 0.2 }, fadeSpeed);			
			$('#navfirst').stop().animate({ opacity: 0.2 }, fadeSpeed);
			// current
			$('#navthird').addClass('current');
			$('#navfirst').removeClass('current');
			$('#navsecond').removeClass('current');				
		}
		// current section = last section & if end of page is reached
		if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
			// current section = design
			$('#navfirst').css({'color' : '#394248'});
			$('#navsecond').css({'color' : '#394248'});
			$('#navthird').css({'color' : '#b36931'});
			// animate
			$('#navthird').stop().animate({ opacity: 1.0 }, fadeSpeed);
			$('#navsecond').stop().animate({ opacity: 0.2 }, fadeSpeed);			
			$('#navfirst').stop().animate({ opacity: 0.2 }, fadeSpeed);
			// current
			$('#navthird').addClass('current');
			$('#navfirst').removeClass('current');
			$('#navsecond').removeClass('current');			
		}		
	});

	//navigation click actions	
	$('#navfirst').click(function(event) {
		event.preventDefault();
		scrollToID('#first', 500);
	});	
	$('#navsecond').click(function(event) {
		event.preventDefault();
		scrollToID('#second', 500);
	});
	$('#navthird').click(function(event) {
		event.preventDefault();
		scrollToID('#third', 500);
	});
	$('#navtop').click(function(event) {
		event.preventDefault();
		$('html, body').animate({scrollTop:0}, 'slow'); 		
	});

	// on hover
	$('#navigation a').hover(function(e) {
		$(this).hoverFlow(e.type, { opacity: 1.0 }, hoverSpeed);
	}, function(e) {
		if( $(this).hasClass('current') || $('html,body').is(':animated') ) return false;
		$(this).hoverFlow(e.type, { opacity: 0.2 }, hoverSpeed);
	});		
	
});
	
function scrollToID(id, speed){
	var offSet = 15;
	var targetOffset = $(id).offset().top-offSet;
	$('html,body').animate({scrollTop:targetOffset}, speed);
}