var $curr = null;
var dir = 0;

function slidein() {
	var $elem = $curr.next();
	if ($elem.length == 0) $elem = $('#banner .box:first');
	if ($elem.length == 0) return;
	
	$('#banner .box').css('z-index', 49);
	$curr.css('z-index', 50);
	$curr.animate({opacity: 0.25});
	
	$elem.css('z-index', 100);
	$elem.css('opacity', 1);
	$elem.show();
	
	switch (dir) {
		case 0: $elem.css({"top" : -800, "left": -800}).animate({"top" : 20,  "left" : 20},  1000); break;
		case 1: $elem.css({"top" : -800, "left": 0   }).animate({"top" : 20,  "left" : 0},   1000); break;
		case 2: $elem.css({"top" : -800, "left": 800 }).animate({"top" : 20,  "left" : -20}, 1000); break;
		case 3: $elem.css({"top" : 0,    "left": 800 }).animate({"top" : 0,   "left" : -20}, 1000); break;
		case 4: $elem.css({"top" : 800,  "left": 800 }).animate({"top" : -20, "left" : -20}, 1000); break;
		case 5: $elem.css({"top" : 800,  "left": 0   }).animate({"top" : -20, "left" : 0},   1000); break;
		case 6: $elem.css({"top" : 800,  "left": -800}).animate({"top" : -20, "left" : 20},  1000); break;
		case 7: $elem.css({"top" : 0,    "left": -800}).animate({"top" : 0,   "left" : 20},  1000); break;
	}
	dir++;
	if (dir == 8) dir = 0;
	
	$elem.animate({"top" : 0, "left" : 0}, 100);
	
	$curr = $elem;
	window.setTimeout("slidein()", 4000);
}

$(document).ready(function() {
	$('#banner .box').hide();
	
	$curr = $('#banner .box:first');
	$curr.show();
	
	window.setTimeout("slidein()", 4000);
});