var currentSection = "page1"; // The default loaded section on the page
var offset = "page1";  //the far left page
var totalPages = 2; //total number of pages in the scrolling area (hardcoded!)



function ForceScrollSection(link, scrollArea)
{
    lastSection = currentSection;
    currentSection = link;
    
    theScroll = document.getElementById(scrollArea);
    position = findElementPos(document.getElementById(link));

    if (offset != "") {
        offsetPos = findElementPos(document.getElementById(offset));
        position[0] = position[0] - offsetPos[0];
    }

    scrollStart(theScroll, theScroll.scrollLeft, position[0]);
    
    updateImages();
}


function ScrollSection(link, scrollArea)
{

	// Store the last section, and update the current section
	if (currentSection == link) {
		return;
	}
	lastSection = currentSection;
	currentSection = link;
	
	// Get the element we want to scroll, get the position of the element to scroll to
	theScroll = document.getElementById(scrollArea);
	position = findElementPos(document.getElementById(link));

	// Get the position of the offset div -- the div at the far left.
	// This is the amount we compensate for when scrolling
	if (offset != "") {
		offsetPos = findElementPos(document.getElementById(offset));
		position[0] = position[0] - offsetPos[0];
	}

	scrollStart(theScroll, theScroll.scrollLeft, position[0]);
    
    updateImages();
}


function updateImages()
{
    curr = currentSection.charAt(currentSection.length -1) * 1;
    
    for (i=1; i <= totalPages; i++)
    {
        currImg = document.getElementById("page"+i+"img");
        
        if (i == curr)
        {
            currImg.src = "resources/circle_sel.png";
        }
        else
        {
            currImg.src = "resources/circle.png";
        }
    }
}


// Scroll the page using the arrows
function ScrollArrow(direction, scrollArea) {
    curr = currentSection.charAt(currentSection.length -1) * 1;
    if (direction == "left")
    {
        if (curr == 1)
        {
            gotoPage = totalPages;
        }
        else
        {
            gotoPage = curr - 1;
        }
    }
    
    if (direction == "right")
    {
        if (curr == totalPages)
        {
            gotoPage = 1;
        }
        else
        {
            gotoPage = curr + 1;
        }
    }
	
    ScrollSection("page"+gotoPage, scrollArea);
}


var scrollanim = {time:0, begin:0, change:0.0, duration:0.0, element:null, timer:null};

function scrollStart(elem, start, end)
{
	if (scrollanim.timer != null) {
		clearInterval(scrollanim.timer);
		scrollanim.timer = null;
	}
	scrollanim.time = 0;
	scrollanim.begin = start;
	scrollanim.change = end - start;
	scrollanim.duration = 25;
	scrollanim.element = elem;
	
	scrollanim.timer = setInterval("scrollHorizAnim();", 15);
}

function scrollHorizAnim()
{
	if (scrollanim.time > scrollanim.duration) {
		clearInterval(scrollanim.timer);
		scrollanim.timer = null;
	}
	else {
		move = sineInOut(scrollanim.time, scrollanim.begin, scrollanim.change, scrollanim.duration);
		scrollanim.element.scrollLeft = move;
		scrollanim.time++;
	}
}

function sineInOut(t, b, c, d)
{
    return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}

function findElementPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        curleft = obj.offsetLeft
        curtop = obj.offsetTop
        while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft
            curtop += obj.offsetTop
        }
    }
    return [curleft,curtop];
}