var number = 3;
var width = 820;
var speed = 500;
var current = 1;


$(function() {
	init();
	unlock();
});

function init()
{
	for (var i=1; i<=number; i++)
	{
		var margin = i*width-width;
		$('#box-'+i).css('margin-left', margin);
	}
}

/*
 *	if (dir==1) swap left elseif (dir==2) swap right
 */
function swap(dir)
{
	lock();

	/* als einde is bereikt, gooi alles naar de andere kant */
	if ( (dir == 1 && current == 1) || (dir == 2 && current == number) )
	{
		$('#swap .box').each(
			function() {
				var current_margin = $(this).css('margin-left');
				
				if (dir == 1)
				{
					new_margin = parseInt(current_margin) - (width*number);
					current = number+1;
				} else {
					new_margin = parseInt(current_margin) + (width*number);
					current = 0;
				}
				$(this).css('margin-left', new_margin);
			}
		);		
	}
	
	/* animeer de nieuwe margin */
	$('#swap .box').each(
		function() {
			var current_margin = $(this).css('margin-left');
			
			if (dir == 1)
				new_margin = parseInt(current_margin) + width;
			else
				new_margin = parseInt(current_margin) - width;
				
			$(this).animate({marginLeft: new_margin}, speed);
		}
	);

	if (dir == 1)
		current--;
	else
		current++;
	
	unlock();
}

function lock()
{
	$('#arrow-left-btn').unbind();
	$('#arrow-right-btn').unbind();
}

function unlock()
{
	$('#arrow-left-btn').bind("click", function(e){
		swap(1);
	});
	$('#arrow-right-btn').bind("click", function(e){
		swap(2);
	});
}