var projects, pages, scrollpane, currentPage;

document.observe('dom:loaded', function() {
	scrollpane = $('scroll-area');
	projects = $$('#scroll-area li');
	pages = Math.ceil(projects.length/4);
	currentPage = 0;
	
	for(var i=0; i<projects.length; i++)
	{
		if(projects[i].className == 'active')
		{
			currentPage = Math.floor(i/4);
			break;
		}
	}
	
	jumpToPage(currentPage);
	
	Event.observe('left-arrow', 'click', moveLeft);
	Event.observe('right-arrow', 'click', moveRight);
});

function moveLeft()
{
	scrollToPage(currentPage-1);
}
function moveRight()
{
	scrollToPage(currentPage+1);
}

function scrollToPage(page)
{
	if(page < 0 || page > pages-1) return;
	
	currentPage = page;
	
	new Effect.Move(scrollpane, {
		x: -(page*864),
		mode: 'absolute',
		queue: 'end'
	});
	
	checkArrows();
}
function jumpToPage(page)
{
	if(page < 0 || page > pages-1) return;
	
	currentPage = page;
		
	scrollpane.setStyle({
		left: '-'+(page*864)+'px'
	});
	
	checkArrows();
}
function checkArrows()
{
	if(currentPage == 0)
	{
		$('left-arrow').setStyle({
			opacity: 0.1,
			cursor: 'default'
		});
	}
	else
	{
		$('left-arrow').setStyle({
			opacity: 1,
			cursor: 'pointer'
		});	
	}
	
	if(currentPage == pages-1)
	{
		$('right-arrow').setStyle({
			opacity: 0.1,
			cursor: 'default'
		});
	}
	else
	{
		$('right-arrow').setStyle({
			opacity: 1,
			cursor: 'pointer'
		});	
	}
}