$(function () {
	function up() {
		preMove();
		$('#globe .row:last').hide().insertBefore($('#globe .row:first')).slideDown(function () {
			postMove();
		});
		return false;
	}
	function down() {
		preMove();
		$('#globe .row:first').slideUp(function () {
			$(this).insertAfter($('#globe .row:last')).show(postMove);
		});
		return false;
	}
	function left() {
		preMove();
		$('#globe .row').each(function () {
			$(this).find('.col:last').css('width', 0).insertBefore($(this).find('.col:first')).animate({width: 640}, postMove);
		});
		return false;
	}
	function right() {
		preMove();
		$('#globe .row').each(function () {
			var self = $(this);
			var col = self.find('.col:first');
			col.animate({width: 0}, function () {
				col.insertAfter(self.find('.col:last')).css('width', 640);
				postMove();
			});
		});
		return false;
	}
	function preMove() {
		$('.spotlight').removeClass('spotlight');
	}
	function postMove() {
		var selected = $('.row:eq(2) .col:eq(2)');
		selected.addClass('spotlight');
		$('#status').text(selected.attr('id'));
		$('.spotlight .hit').css('zIndex',1000);
		$('.spotlight .images a').each(function() {
			pic = new Image(); 
			pic.src = $(this).attr('href');	
		});
	}

	postMove();

	$('#up').click(up);
	$('#down').click(down);
	$('#left').click(left);
	$('#right').click(right);

	$('#upandleft').click(function () {up(); left();})
	$('#upandright').click(function () {up(); right();})
	$('#downandleft').click(function () {down(); left();})
	$('#downandright').click(function () {down(); right();})

	$(window).keydown(function(event){
	  switch (event.keyCode) {
	    case 37: left(); break;
		case 38: up(); break;
		case 39: right(); break;
		case 40: down(); break;
	  }
	  return false;
	});
});