var myBtnGallery = '<a id="btnLeftFace" class="BtnLeftFace" href="#" title="Left">Left</a><a id="btnRightFace" class="BtnRightFace" href="#" title="Right">Right</a>';

var mWidth = 0;	
var lWidth = new Array();
var vWidth = 0;
var liNum =0;
var speed = 500;	
var myListContents ='';
var defWidth;
$(document).ready( function() {
	//Show off
	$('#faceGalleryHolder').append(myBtnGallery);	
	myListContents = $('#faceList').html();
	vWidth = $('#faceListMask').width();
	liNum = $('#faceList li').size();
	
	$('#faceList li').each( function() {
		mWidth += $(this).outerWidth();
		lWidth.push($(this).outerWidth());
	});
	$('#faceList').width(mWidth);
	defWidth = mWidth;
	$('#btnLeftFace').click( moveRight );
	$('#btnRightFace').click( moveLeft );
});

function moveLeft() {
	var mLeft = $('#faceList').position().left;							  
	var cWidth = 0;	
	var i = 0;
	var mSpace = 0;
	
	while ( cWidth + mLeft < 0 ) {
		cWidth += lWidth[i];
		i++;
	}							  
	mSpace = -1 * (cWidth + lWidth[i]);
	if (mWidth + mSpace <= vWidth) { 
		mSpace = -1 * (mWidth - vWidth);	
		$('#faceList').append( myListContents );
		vWidth = $('#faceListMask').width();
		liNum = $('#faceList li').size();
		mWidth = 0;
		$('#faceList li').each( function() {
			mWidth += $(this).outerWidth();
			lWidth.push($(this).outerWidth());
		});
		$('#faceList').width(mWidth);
	}
	$('#faceList').animate( { left: mSpace },{ queue:false, duration:speed });
	return false;
}

function moveRight() {
	var mLeft = $('#faceList').position().left;
	var mRight =  vWidth - mLeft - mWidth;							  
	var cWidth = 0;	
	var i = liNum - 1;
	var mSpace = 0;
	
	while ( cWidth + mRight < 0 ) {
		cWidth += lWidth[i];
		i--;
	}
	mSpace = mLeft + (cWidth + lWidth[i] + mRight);
	if (mSpace > 0) {
		$('#faceList').prepend( myListContents );
		vWidth = $('#faceListMask').width();
		liNum = $('#faceList li').size();
		mWidth = 0;
		$('#faceList li').each( function() {
			mWidth += $(this).outerWidth();
			lWidth.push($(this).outerWidth());
		});
		$('#faceList').width(mWidth).css('left', -1*defWidth+'px');

		mLeft = $('#faceList').position().left;
		mRight =  vWidth - mLeft - mWidth;							  
		cWidth = 0;	
		i = liNum - 1;
		mSpace = 0;
		
		while ( cWidth + mRight < 0 ) {
			cWidth += lWidth[i];
			i--;
		}
		mSpace = mLeft + (cWidth + lWidth[i] + mRight);
	}
	$('#faceList').animate( { left: mSpace },{ queue:false, duration:speed });
	return false;
}