/*
 * Navigation Item Utils
 * by Jon Park (jpark@cs.cornell.edu)
 * 4/24/14
 *
 * sets a menu item's class to 'active' when the given section is shown
 * and 'hovering' if mouse is over the menu item.
 *
 * 1. Use <li> elements surrounded by a <nav> element to code the nav panel
 * 2. Use <section> elements with specific id to map sections to the nav panel
 *    (in the case that you want to wait till the given section fills up the
 *    whole screen before the corresponding changes occur to the nav panel,
 *    locate a <header> element in each section (see $windows.scroll(...)))
 * 3. nav items can be matched to sections via: 1)text or 2)anchor in a <a> 
 *    element in each nav item. Appropriate changes needs to be made in
 *    $windows.scroll(...)
 */
var $activeNavEl;
var scrolling = 0;
var $nav = $('nav li');

$nav.bind('mouseenter', function() {
	$(this).addClass('hovering');
});

$nav.bind('mouseleave', function() {
	$(this).removeClass('hovering');
});

/*$nav.bind('click', function() {
	$('body').animate({
	    scrollTop: $('#'+$(this).attr('data-target')).offset().top
	});

	if ($activeNavEl !== $(this)) {
		$activeNavEl.removeClass('active');
		$(this).addClass('active');
		$activeNavEl = $(this);
	}
});*/

//$(window).scroll()
$(window).scroll(function() {
	//$inview = $('section:in-viewport header').parent().attr('id');
	$inview = $('section:in-viewport').attr('id');

	//method1. identify nav menu item by anchor (assumping each "nav li" has an "a" to an anchor
	$target = $('nav a[hash=#' + $inview + ']').parent();

	//method2. identify nav menu item by data-target
	//$target = $('nav li[data-target=' + $inview + ']');

	if ($target != $activeNavEl && scrolling == 0) {
		if ($('nav a[hash=#' + $inview + ']') !== null) {
		//if ($('nav li[data-target=' + $inview + ']') !== null) {
			$nav.removeClass('active');
			$activeNavEl = $target;
			$activeNavEl.addClass('active');
		}
	}
});

//only works on firefox
/*$('nav').localScroll({
	//target: '#content',
	//hash: true,
	duration: 400,
	easing: 'easeOutExpo',
	//onBefore: function() {scrolling = 1; return scrolling},
	//onAfter: function() {scrolling = 0; return scrolling}
});
*/