$(window).load(function() { 
	arrangeBoxes();
	setInterval('shiftLeft()', 3000);
});

// arrange the boxes to be aligned in a row
function arrangeBoxes() {
	$('.box').each( function(i, item) {
		var position = $('#window').position().left + 3 + i * ( $(item).width() + 10 );
		$(item).css('left', position+'px')
	});
}

// shifts all the boxes to the left, then checks if any left the window
function shiftLeft() {
	$('.box').animate({'left' : "-=100px"}, 3000, 'linear', checkEdge());
}

// returns the new location for the box that exited the window
function getNewPosition() {
	return $('.box:last').position().left + $('.box:last').outerWidth() + 10;
}

// if the box is outside the window, move it to the end
function checkEdge() {
	var windowsLeftEdge = $('#window').position().left;

	$('.box').each( function(i, box) {
		// right edge of the sliding box
		var boxRightEdge = $(box).position().left + $(box).width();

		// position of last box + width + 10px
		var newPosition = getNewPosition();

		if ( parseFloat(boxRightEdge) < parseFloat(windowsLeftEdge) ) { 
			$(box).css('left', newPosition);
			$(box).remove().appendTo('#window');
			first = $('.box:first').attr('class');
		}
	});
}