function IS_POSITION_FIXED_SUPPORTED() {
  var isSupported = null;
  if (document.createElement) {
      var el = document.createElement("div");
      if (el && el.style) {
          el.style.width = "1px";
          el.style.height = "1px";
          el.style.position = "fixed";
          el.style.top = "10px";
          var root = document.body;
          if (root && root.appendChild && root.removeChild) {
              root.appendChild(el);
              isSupported = el.offsetTop === 10;
              root.removeChild(el);
          }
          el = null;
      }
  }
  return isSupported;
}

function ScrollbarContents(config) {
	
	// Setup navigation element
	var jqNavContainer = $("<div id='scrollbar-contents'></div>");
	var jqNavUl = $('<ul></ul>');
	$(config.containerSelector).append(jqNavContainer);
	jqNavContainer.append(jqNavUl);

	// Get Sections
	var jqSections = $(config.sectionSelector);	
	
	// Generate a unique ID
	var uniqueIdCount = 0
	function uniqueId() {
		return "scrollbar-contents-item-" + (uniqueIdCount++);
	}	
	
	
	function hideNav() {
		jqNavContainer.addClass('scrollbar-contents-hide');
		jqNavContainer.removeClass('scrollbar-contents-show');
	}
	function showNav() {
		jqNavContainer.removeClass('scrollbar-contents-hide');
		jqNavContainer.addClass('scrollbar-contents-show');
	}
	
	jqNavContainer.mouseover(showNav);
	jqNavContainer.focus(showNav);
	jqNavContainer.mouseout(hideNav);
	jqNavContainer.blur(hideNav);
	
	hideNav();
	
	var currentlySelected;
	var previousSetCurrentEvent;
	function setCurrent(navAnchorReference, sourceEvent) {
		if (sourceEvent == "scroll" && previousSetCurrentEvent == "click") {
		} else {
			if (currentlySelected !== navAnchorReference) {
				navAnchorReference.setSelected();
				if (currentlySelected) {
					currentlySelected.setDeselected();
				}
				currentlySelected = navAnchorReference;
			}
		}
		previousSetCurrentEvent = sourceEvent;
	}
	
	if (jqSections.length > 0) {
		var navAnchors = new Array();

		// navAnchor CLASS
		var navAnchor = function(sectionElem) {
		var navAnchorPub = new Object();
		
			var jqSectionElem = $(sectionElem);
			if (!jqSectionElem.attr('id')) {
				jqSectionElem.attr('id', uniqueId)
			}
		
			var linkElement = $('<a>'+jqSectionElem.text()+'</a>');
			var jqLi = $('<li></li>');
			jqLi.addClass(jqSectionElem.attr('id'));
			linkElement.attr('href', '#'+jqSectionElem.attr('id'));
			linkElement.wrap("<span></span>");
			navAnchorPub.jqSlug = linkElement.parent();
			jqLi.append(navAnchorPub.jqSlug);
			
			navAnchorPub.liElement = jqLi[0];
			navAnchorPub.yPos = 0;
			navAnchorPub.sectionHeight = 0;
			navAnchorPub.sectionTop = 0;	
			navAnchorPub.setHeight = 0;
			navAnchorPub.setTop = 0;

			linkElement.click(function() {
				setCurrent(navAnchorPub, "click");
			});

			navAnchorPub.resetYPos = function() {
				navAnchorPub.yPos = $(linkElement.attr("href")).offset().top;
			}
			
			var selected = false;
			
			navAnchorPub.setSelected = function() {
				if (selected != true) {
					navAnchorPub.jqSlug.addClass("current");
					selected = true;
				}
			}
			
			navAnchorPub.setDeselected = function() {
				if (selected == true) {
					navAnchorPub.jqSlug.removeClass("current");
					selected = false;
				}
			}
				
		return navAnchorPub;
		}
	
	
	
	
		// Create navAnchor objects
		jqSections.each(function(i){
			var tempNavAnchor = new navAnchor(this);
			navAnchors.push(tempNavAnchor);
			jqNavUl.append(tempNavAnchor.liElement);
		});




		var previousDocHeight = 0;

		// Position function
		function positionNavAnchors() {
			var docHeight = $(document).height();
			
			var viewHeight;
			if (typeof(window.innerHeight) == 'number') {
				viewHeight = window.innerHeight;
			} else {
				viewHeight = $(window).height();
			}
			
			if (docHeight != previousDocHeight) {
				for (var i = 0; i < navAnchors.length; i++) {
					navAnchors[i].resetYPos();
				}
				previousDocHeight = docHeight;
			}
			
			// Run through each item, determing the height & space from top
			for (var current = 0; current < navAnchors.length; current++) {
				var next = current + 1;
				if (current == 0) {
					// First
					navAnchors[current].sectionHeight = navAnchors[next].yPos - navAnchors[current].yPos;
					navAnchors[current].sectionTop = navAnchors[current].yPos;
				} else if (next < navAnchors.length) {
					navAnchors[current].sectionHeight = navAnchors[next].yPos - navAnchors[current].yPos;
					navAnchors[current].sectionTop = 0;
				} else {
					// Last
					navAnchors[current].sectionHeight = docHeight - navAnchors[current].yPos;					
					navAnchors[current].sectionTop = 0;
				}
			}
			
			// New array of navAnchors ordered by sectionHeight
			var compareSectionHeight = function(a, b) {
				if (a.sectionHeight < b.sectionHeight) {
					return -1;
				} else if (a.sectionHeight > b.sectionHeight) {
					return 1;
				}
				return 0;
			}	
			var navAnchorsOrdered = navAnchors.slice(0);
			navAnchorsOrdered.sort(compareSectionHeight);
			
			// Track the remaining space while assigning heights
			var docRemaining = docHeight;
			var spaceRemaining = viewHeight;
			
			// Set height to a % of spaceRemaining based on sectionHeight/docRemaining
			for (var i = 0; i < navAnchorsOrdered.length; i++) {
				// Remove inline styles
				navAnchorsOrdered[i].jqSlug.attr("style", "");
				navAnchorsOrdered[i].jqSlug.css("display", "block");
				// Default min-height to compare with computed ideal height
				var currentHeight = navAnchorsOrdered[i].jqSlug.height();
				var testHeight = (navAnchorsOrdered[i].sectionHeight / docRemaining) * spaceRemaining;
				navAnchorsOrdered[i].setTop =  (navAnchorsOrdered[i].sectionTop / docRemaining) * spaceRemaining;
				
				if (testHeight < currentHeight) {
					navAnchorsOrdered[i].setHeight = 0;
					spaceRemaining -= currentHeight;
				} else {
					navAnchorsOrdered[i].setHeight = testHeight;
					spaceRemaining -= testHeight;				
				}
				spaceRemaining -= navAnchorsOrdered[i].setTop;
				docRemaining -= navAnchorsOrdered[i].sectionHeight;
				docRemaining -= navAnchorsOrdered[i].sectionTop;	
			}
			
			
			// RENDER
			for (var i = 0; i < navAnchorsOrdered.length; i++) {
		
				if (navAnchors[i].setHeight > 0) {
					navAnchors[i].jqSlug.height(navAnchors[i].setHeight);
				}
				
				if (navAnchors[i].setTop > 0) {
					navAnchors[i].jqSlug.css("margin-top", navAnchors[i].setTop);
				}
			}

		}
		
		// Highlight the current section in view
		function checkCurrent(evt) {

			var scrollY = 0;
			if( typeof( window.pageYOffset ) == 'number' ) {
				//Netscape compliant
				scrollY = window.pageYOffset;
			} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
				//DOM compliant
				scrollY = document.body.scrollTop;
			} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
				//IE6 standards compliant mode
				scrollY = document.documentElement.scrollTop;
			}

			if (!IS_POSITION_FIXED_SUPPORTED()) {
				jqNavContainer.css("position", absolute);
				jqNavContainer.css("top", scrollY);
			}
			
			for (var i = 0; i < navAnchors.length; i++) {
				if (scrollY >= navAnchors[i].yPos && scrollY < (navAnchors[i].yPos + navAnchors[i].sectionHeight)) {
					setCurrent(navAnchors[i], "scroll");
				}
			}
		}
	
		// Position
		positionNavAnchors();
		$(window).resize(positionNavAnchors);
		// Highlight the current section in view
		checkCurrent();
		$(window).scroll(checkCurrent);
	}
}



$(document).ready(function() {
	var config = {
		sectionSelector: '.scrollbar-contents',
		containerSelector: 'body'
	}
	ScrollbarContents(config)	
});