// JavaScript Document
var scrollContentWidth = 0;
var scrollOffset = 0;
var scrollViewerWidth;
var showDetails;
var showList;
var activePiece = 1;

window.addEvent('domready', function(){
	$('portfolio_display').setStyle('opacity', '0');
});

window.addEvent('load', function(){
	
	if ($('client_pieces')) {
		var piecesArray = $('client_pieces').getChildren();
		piecesArray.each(function(e){
			scrollContentWidth += (e.getSize().x);
		})
		$('client_pieces').setStyle('width', scrollContentWidth + 'px');
	
		scrollViewerWidth = $('portfolio_display').getSize().x;
		
		checkArrowVisibility();
		
		$$('.numbers').each(function(e){
			e.addEvent('click', function(){
				jumpTo(this);
			});
		});
	
		$('scrollRight').addEvent('click', scrollRight);
		$('scrollLeft').addEvent('click', scrollLeft);
		$('portfolio_display').tween('opacity', 1);
		if ($('client_list')) {
			showList = new Fx.Tween('client_list');
			showList.set('opacity', 1);
		}
	} else {
		showList = new Fx.Tween('client_list');
		showList.start('opacity', 0, 1);
	}
	if ($('client_details')) {
		showDetails = new Fx.Tween('client_details');
		showDetails.start('opacity', 0, 1);
	};
	
	return;
});

function checkArrowVisibility() {
	if (scrollOffset + scrollContentWidth > scrollViewerWidth) {
		$('scrollRight').tween('opacity', 1);
	} else {
		$('scrollRight').tween('opacity', 0);
	}
	if (scrollOffset < 0) {
		$('scrollLeft').tween('opacity', 1);
	} else {
		$('scrollLeft').tween('opacity', 0);
	}
}

function scrollRight(e) {
	if ((scrollContentWidth + scrollOffset) > 498) {
		scrollOffset = scrollOffset-498;
		$('client_pieces').tween('margin-left', scrollOffset+'px');
		checkArrowVisibility();
		updateNavigation(activePiece.toInt() + 1);
	}
	return false;
}

function scrollLeft(e) {
	if (scrollOffset < 0) {
		scrollOffset = scrollOffset + 498;
		$('client_pieces').tween('margin-left', scrollOffset+'px');
		checkArrowVisibility();
		updateNavigation(activePiece.toInt() - 1);
	}
	return false;
}

function jumpTo(element) {
	var valuen = $(element).get('text');
	updateNavigation(valuen);
	scrollOffset = (valuen - 1) * -498;
	$('client_pieces').tween('margin-left', scrollOffset+'px');
	checkArrowVisibility();
	
}

function updateNavigation(newActivePiece) {
	$('portfolioLink' + newActivePiece + '').toggleClass('active');
	$('portfolioLink' + activePiece + '').toggleClass('active');
	activePiece = newActivePiece;
}