$(
	function () {
		/* Grid to align for different number of cards */
		var zIndex = 101;
		$('.card, .card-small, .cube').draggable(
			{
				distance: 5,
				containment: 'parent',
				start: function (e, ui) {
					$(this)
					.css('z-index', zIndex++);
				},
				drag: function (e, ui) {
					var o = $(this);
					var ot = o.data('ot');
					if (ot && (e.timeStamp - ot[2]) < 500) {
						/* drop t > 500 */
						o.data(
							'dr',
							[
								(e.screenY - ot[0])/(e.timeStamp - ot[2]),
								(e.screenX - ot[1])/(e.timeStamp - ot[2])
							]
						);
					}
					o.data('ot', [e.screenY, e.screenX, e.timeStamp]);
				},
				stop: function (e, ui) {
					var o = $(this);
					var dr = $(this).data('dr');
					if (!dr) {
						//The browser fail to fire drag event fast enough
						//Don't show the slide effect.
						return;
					}
					(function () {
						var p = o.offset();
						var $body = $(document.body);
						p.top += dr[0]*10;
						p.left += dr[1]*10;
						while (true) {
							if (p.top < 0) { 
								p.top = - p.top;
								dr[0] = - dr[0];
							} else if (p.top > ($body.height() - o.height())) {
								p.top = 2*($body.height() - o.height()) - p.top;
								dr[0] = - dr[0];
							} else {
								break;
							}
						}
						while (true) {
							if (p.left < 0) {
								p.left = - p.left;
								dr[1] = - dr[1];
							} else if (p.left > ($body.width() - o.width())) {
								p.left = 2*($body.width() - o.width()) - p.left;
								dr[1] = - dr[1];
							} else {
								break;
							}
						}
						o.css(p);
						dr = [
							dr[0]*0.9,
							dr[1]*0.9
						];
						if (dr[0] > 0.1 || dr[1] > 0.1) {
							setTimeout(arguments.callee, 10);
							//alert();
						}
					})();
				}
			}
		);
		$(window).bind(
			'load',
			function () {
				$('#front').animate(
					{
						top: 80,
						left: 50
					},
					700
				);
			}
		);
		$('a.more').bind(
			'click',
			function () {
				return false;
			}
		);
	}
);