Panel Tracking

panel-tracking.js

jQuery(document).ready(function($){
	
	//vars
	var pagePanels = [],
		panelsId = [],
		panelsOffset = [];

    // Stores the links to the panels
	$('#navigation div > div.navMenuLeft a, #navigation div > div.navMenuRight a')
		.each( function(i) {
			pagePanels[i] = $(this);
		});
    
    // Stores the panel anchores
	$(pagePanels)
		.each( function(i) {
			panelsId[i] = $(this).attr('href');
		});

    // Stores the offset of each panel
    $(panelsId)
        .each( function(i) {
            panelsOffset[i] = returnOffset($(panelsId[i]));
        });
        
	// Returns Document Position
	function returnDocumentScoll() {
		var docPos = $(document).scrollTop();
		return docPos;
	}
    
    // Returns the offset of onobject
	function returnOffset(obj) {
        var objectOffset = $(obj).offset();
        return objectOffset.top;      

	}
	
	// Finds the active anchor in the navigation
	function findActiveAnchor() {
	    
	    var docOffset = returnDocumentScoll(),
	        i = docOffset;

        $('.navMenuWrap .active')
            .removeClass('active');
        
        if(i < panelsOffset[1]) {
            $(pagePanels[0])
                .addClass('active');
        } else if(i < panelsOffset[2] && i >= panelsOffset[1]) {
             $(pagePanels[1])
                    .addClass('active');
        } else if(i < panelsOffset[3] && i >= panelsOffset[2] - 1) {
            $(pagePanels[2])
                .addClass('active');
        } else {
            $(pagePanels[3])
                .addClass('active');
        }
	}
	
	// If there isn't enough height for the donate navigation to transition this fixes the issue
	var footerHeight = $('#footer').height();
	 
	function setFooterHeight() {
	    if($('#donateWrap').height() < $(window).height()) {
	        
	        var remainder = $(window).height() - $('#donateWrap').height();
	            
	        $('#footer')
	            .css({
	                'height': footerHeight + remainder
	            });
	    } else {
	        $('#footer')
	            .css({
	                'height': footerHeight
	            });
	    }
	}
	
	$(window)
        .load( function(){
			findActiveAnchor();
			setFooterHeight();
			$(pagePanels[0])
                .addClass('active');
		})
		.resize( function() {
            setFooterHeight();
		})
		.scroll( function(){
            findActiveAnchor();
		});
});