var PORTFOLIO_PAGE_WIDTH = 475;
var PAGE_INDICATOR_WIDTH = 20;

var scrollRegion = document.getElementById("portfolioScrollRegion");
var pageIndicator = document.getElementById("currentPageIndicator");
var pageIndicatorStart = PORTFOLIO_PAGE_WIDTH - (pageCount * PAGE_INDICATOR_WIDTH);
var currentPageButton;

// Scrolling done in percentages to avoid floating point issues
var currentPct = 0;
var finalPct   = 0;

var scrollTimer = null;
var SCROLL_PCT = 10;
var SCROLL_PAUSE = 50;  // milliseconds


function SetUp() {
	pageIndicator.style.left = pageIndicatorStart + "px";
	pageIndicator.style.display = "block";
	}



function ScrollToPage(whichPageButton, newPageNumber) {
	if(currentPageButton) {
		currentPageButton.id = ""
		}
	currentPageButton = whichPageButton;
	finalPct = newPageNumber * 100;
	if(!scrollTimer) {
		scrollTimer = setInterval(SlidePage, SCROLL_PAUSE);
		}
	}



function SlidePage() {
	if(currentPct == finalPct) {
		clearInterval(scrollTimer);
		scrollTimer = null;
		currentPageButton.id = "currentPageNumber";
		}
	else {
		if(currentPct < finalPct) {
			currentPct += SCROLL_PCT;
			}
		if(currentPct > finalPct) {
			currentPct -= SCROLL_PCT;
			}
		pageIndicator.style.left = (pageIndicatorStart + Math.ceil(currentPct * PAGE_INDICATOR_WIDTH / 100)) + "px";
		scrollRegion.scrollLeft = Math.ceil(currentPct * PORTFOLIO_PAGE_WIDTH / 100);
		}
	}