var arrPhotos = new Array('#box_1', '#box_2', '#box_3', '#box_4', '#box_5', '#box_6', '#box_7', '#box_8', '#box_9', '#box_10');
var selectedPhoto = 0;
var transLock = false;

// DOM is ready, let's get started!
$(document).ready(function() {
	// init prev/next buttons
	$('.previous_button').click(function() {
		if(transLock) return; // ignore request if a transition is already happening
		else transLock = true; // otherwise lock it so requests are ignored until this transition is complete
		
		// slide to new photo
		selectedPhoto--;
		if(selectedPhoto < 0) selectedPhoto = arrPhotos.length - 1;
		
		moveToImg(selectedPhoto);
	});
	
	$('.next_button').click(function() {
		if(transLock) return; // ignore request if a transition is already happening
		else transLock = true; // otherwise lock it so requests are ignored until this transition is complete
		
		// slide to new box
		selectedPhoto++;
		if(selectedPhoto > arrPhotos.length - 1) selectedPhoto = 0;;
		
		moveToImg(selectedPhoto);
	});
	
	// slide to box one
	moveToImg(selectedPhoto);
});

function moveToImg(id)
{
	$('#transition_container').animate({'left': -(id * 580) + 'px'}, 750, 'swing', function() {
		transLock = false;
	});
}