pong = function () {
	function rnd(x,n) {
		return n + Math.floor(Math.random() * (x - n));
	}
	function hand(mode, side, css) {
		function move(s) {
			var p = r.position + s;
			if (p < 1) {
				p = 1;
			} else if (p > innerHeight) {
				p = innerHeight;
			}
			r.position = p;
			r.bpos = p + r.height;
			r.e.css('top', p);
		}
		$(window).bind('keydown', function (ev) {
			if (ev.keyCode === 40 && ev.charCode !== 40) {
				r.dir = 'down';
			} else if (ev.keyCode === 38 && ev.charCode !== 38) {
				r.dir = 'up';
			}
		}).bind('keyup', function (ev) {
			r.dir = '';
		});
		var innerHeight = params.height - css.height - 1,
			t = (params.height - css.height) / 2,
			r = {
				dir: '',
				e: $('<div class="hand"></div>').css(css).css({'position': 'absolute', 'top': t, 'left': (side === 'left'? 1 : params.width - css.width - 1), 'background': bg}).appendTo(elms.box),
				position: t,
				bpos: 1 + css.height,
				hit: (side === 'left'? 1 + css.width : params.width - css.width - 1),
				height: css.height,
				center: Math.round(css.height / 2),
				side: side,
				step: 7,
				ival: null,
				stop: function () {
					clearInterval(r.ival);
				},
				start: function () {
					r.ival = (mode === 'auto'? setInterval(function () {
						var dist = elms.ball.c - r.position - r.center, step = r.step;
						if (dist > 0) {
							if (dist > step) {
								dist = step;
							}
						} else if (dist < 0) {
							if (dist < -step) {
								dist = -step;
							}
						}
						move(dist);
					}, 30) : setInterval(function () {
						var step = 5;
						if (r.dir === 'up') {
							move(-step);
						} else if (r.dir === 'down') {
							move(step);
						}
					}, 30));
				}
			};
		return r;
	}
	function ball(size) {
		function move() {
			var x = parseFloat(r.e.css('left'), 10) + r.xspeed,
				y = parseFloat(r.e.css('top'), 10) + r.yspeed,
				pos = bounce({left: x, top: y}),
				sqs = 40,
				sqx = 0,
				sqy = 0,
				fire = false;
			r.e.css(pos);
			sqx = Math.floor(pos.left/sqs);
			sqy = Math.floor(pos.top/sqs);
			if (sqx !== r.sqx) {
				r.sqx = sqx;
				fire = true
			}
			if (sqy !== r.sqy) {
				r.sqy = sqy;
				fire = true
			}
			if (fire === true) {
				window.changeImage(sqx, sqy);
			}
			r.y = pos.top;
			r.c = r.y + r.size / 2;
		}
		function bounce(pos) {
			var hand = r.xspeed > 0? elms.hand2 : elms.hand1, f = r.xspeed > 0? (r.yspeed > 0? -1 : 1) : (r.yspeed > 0? 1 : -1), a = 0;
			if (pos.left < 0) {
				pos.left = 0;
				game.stop();
			} else if (pos.left > params.innerWidth) {
				pos.left = params.innerWidth;
				game.stop();
			}
			if (pos.top <= 0) {
				pos.top = 0;
				r.yspeed = rnd(-94, -98)/100 * r.yspeed;
			} else if (pos.top >= params.innerHeight) {
				pos.top = params.innerHeight;
				r.yspeed = rnd(-94, -98)/100 * r.yspeed;
			}
			if ((r.xspeed > 0 && pos.left + r.size >= hand.hit) || (r.xspeed < 0 && pos.left <= hand.hit)) {
				if (r.c > hand.position && r.c < hand.bpos) {
					pos.left = r.xspeed > 0? hand.hit - r.size : hand.hit;
					r.xspeed = -r.xspeed;
					// yspeed...
					if (r.yspeed > 0) {
						a = Math.abs((r.c - hand.position) / hand.height) - 0.5;
						r.yspeed = f * a * 5 + r.yspeed;
					} else {
						a = Math.abs((r.c - hand.position - hand.height) / hand.height) - 0.5;
						r.yspeed = f * a * 5 + r.yspeed;
					}
				}
			}
			return pos;
		}
		var hs = size / 2, hw = elms.box.width() / 2, hh = elms.box.height() / 2, r = {
			e: $('<div class="ball"></div>').css({'position': 'absolute', 'left': hw - hs, 'top': hh - hs, 'border': '1px solid rgba(0,0,0,.6)', '-moz-border-radius': hs, '-webkit-border-radius': hs, 'background-color': bg, 'background-repeat': 'no-repeat', 'background-position': 'center center', 'width': size, 'height': size}).appendTo(elms.box),
			xspeed: rnd(12, 8),
			yspeed: rnd(5, -5),
			y: 0,
			c: 0,
			size: size,
			ival: null,
			stop: function () {
				clearInterval(r.ival);
			},
			start: function () {
				r.ival = setInterval(move, 30);
			},
			sqx: 0,
			sqy: 0
		};
		return r;
	}
	var bg = 'rgba(255,255,255,.8)', params = {
		width: 0,
		innerWidth: 0,
		height: 0,
		innerHeight: 0
	}, elms = {
		box: null,
		hand1: null,
		hand2: null,
		ball: null
	}, game = {
		init: function (bbox) {
			$('#pongbg').css('opacity', .5);
			bbox = $(bbox).css({'position':'relative', 'overflow':'hidden'}).empty();
			var w = bbox.width(),
				h = bbox.height(),
				s = Math.floor(h/7);
			params.width = w;
			params.height = h;
			params.innerWidth = w - s;
			params.innerHeight = h - s;
			elms.box = bbox;
			elms.hand1 = hand('man', 'left', {height: Math.floor(h / 6), width: Math.floor(w / 60)});
			elms.hand2 = hand('auto', 'right', {height: Math.floor(h / 6), width: Math.floor(w / 60)});
			elms.ball = ball(s);
			return this;
		},
		stop: function () {
			elms.ball.stop();
			elms.hand1.stop();
			elms.hand2.stop();
			return this;
		},
		start: function () {
			elms.ball.start();
			elms.hand1.start();
			elms.hand2.start();
			return this;
		}
	};
	return game;
}();

window.game = pong.init('#pong');
$('#restart').click(function () {
	$(this).val('Restart');
	window.game.stop().init('#pong').start();
});
function sbmt(ev) {
	if (ev) {
		ev.preventDefault();
	}
	start_geo($('#place').val());
}
$('#control').submit(sbmt);

$('#shortcuts li a').click(function (ev) {
	ev.preventDefault();
	if (this.hash === '#1') {
		$('#place').val('London Eye');
	} else {
		$('#place').val('Eiffel Tower');
	}
	sbmt();
});