nulltask/20110524_prototype.html

## 20110524_prototype.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>20110524_prototype</title>
	<link rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
	<link rel="stylesheet" href="style.css">
	<script src="http://visionmedia.github.com/move.js/move.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
	<!-- script src="http://labs.skinkers.com/touchSwipe/demo/js/jquery.touchSwipe-1.2.3.js"></script -->
	<script src="http://plugins.jquery.com/files/jquery.touchSwipe-1.2.4.js_.txt"></script>
	<script src="https://github.com/jeresig/jquery.hotkeys/raw/master/jquery.hotkeys.js"></script>
	<script src="site.js"></script>
</head>
<body>

<div id="debug">
	<p>clientX: <span id="clientX"></span></p>
	<p>clientY: <span id="clientY"></span></p>
	<p>rad: <span id="rad"></span></p>
</div>

<div id="wrapper" class="window-height">
	<div id="container" class="window-height">
		<ul class="window-height">
			<li class="col window-height">
				<ul class="row window-height">
					<li class="page window-height" data-page-url="./test1.html">1</li>
					<li class="page window-height" data-page-url="./test2.html">2</li>
					<li class="page window-height" data-page-url="./test3.html">3</li>
					<li class="page window-height" data-page-url="./test4.html">4</li>
				</ul>
			</li>
			<li class="col window-height">
				<ul class="row window-height">
					<li class="page window-height" data-page-url="./test4.html">4</li>
					<li class="page window-height" data-page-url="./test3.html">3</li>
					<li class="page window-height" data-page-url="./test2.html">2</li>
					<li class="page window-height" data-page-url="./test1.html">1</li>
				</ul>
			</li>
		</ul>
	</div>
</div>

</body>
</html>

## site.js
(function(window, document, undefined) {

var $window = jQuery(window),
	$document = jQuery(document);

jQuery(function($) {

	var $container = $("#container"),
		contentWidth = 0,
		contentHeight = 0,
		maxRow = -1, maxCol = -1,
		curPos = {
			row: 0,
			col: 0
		}
	;

	// load external contents
	$("li.page").each(function(i, n) {
		var $this = $(this);
		var url = $(this).data("page-url");
		var jqxhr = $.ajax({
			url: url,
			dataType: "html"
		})
		.success(function(data) {
			var $data = $(data);
			$data.find("#ajaxContent").children().appendTo($this);
		})
		.error(function() {

		})
		.complete(function() {

		});
	});

	function scroll(distance, duration) {
		console.log(distance);
		console.log(duration);
		$container.css("-webkit-transition-duration", (duration / 1000).toFixed(1) + "s");
		var x = (distance < 0 ? "" : "-") + Math.abs(distance).toString();
		var y = 0;
		$container.css("-webkit-transform", "translate3d("+ x +"px, " + y + "px, 0px)");
	}

	function slide() {
		$container
			.css("-webkit-transform", "translate3d(" + ($document.width() * -curPos.col) + "px," + $window.height() * -curPos.row + "px, 0px)")
			.css("-moz-transform", "translate(" + ($document.width() * -curPos.col) + "px, " + $window.height() * -curPos.row + "px)");
	}

	var swipeStatus = {
		move: function(event, phase, direction, distance) {
			var duration = 0;

			if (direction == "left") {
				scroll((contentWidth * curPos.col) + distance, duration);
			}
			else if (direction == "right") {
				scroll((contentWidth * curPos.col) - distance, duration);
			}
		},
		cancel: function(event, phase, direction, distance) {
			$container.css("-webkit-transition-duration", "0.5s");
		},
		end: function(event, phase, direction, distance) {
			$container.css("-webkit-transition-duration", "0.5s");
		}
	};

	$window
	.bind("resize", function(event) {
		contentWidth = $document.width();
		contentHeight = $window.height();

		var params = {
			width: contentWidth,
			height: contentHeight
		};

		$(".page").css(params);
		$(".col").css(params);
		$(".row").css(params);

		$(".col").each(function(i, n) {
			$(this).css("left", params.width * i);
			$(this).find(".row").each(function(i, n) {
				$(this).find(".page").each(function(i, n) {
					$(this).css("top", params.height * i);
					maxRow = Math.max(i, maxRow);
				});
			});
			maxCol = Math.max(i, maxCol);
		});
	})
	.trigger("resize")
	.mousemove(function(event) {
		// console.log(event);
		var halfWidth = contentWidth / 2;
		var halfHeight = contentHeight / 2;

		$("#clientX").text(event.clientX - halfWidth);
		$("#clientY").text(event.clientY - halfHeight);

		var atan = Math.atan2(event.clientY - halfHeight, event.clientX - halfWidth) + (Math.PI / 8);

		if (atan < Math.atan2(-halfHeight, -halfWidth) + (Math.PI / 8)) {
			$("#rad").text("←");
		}
		else if (atan < Math.atan2(-halfHeight, halfWidth) + (Math.PI / 8)) {
			$("#rad").text("↑");
		}
		else if (atan < Math.atan2(halfHeight, halfWidth) + (Math.PI / 8)) {
			$("#rad").text("→");
		}
		else {
			$("#rad").text("↓");
		}
	});

	$container
	.bind("movetop", function(event) {
		$("#rad").text("↑!");

		if (--curPos.row < 0) {
			curPos.row = 0;
		}
		slide();
	})
	.bind("moveright", function(event) {
		$("#rad").text("→!");

		if (++curPos.col >= maxCol) {
			curPos.col = maxCol;
		}
		slide();
	})
	.bind("movebottom", function(event) {
		$("#rad").text("↓!");

		if (++curPos.row >= maxRow) {
			curPos.row = maxRow;
		}
		slide();
	})
	.bind("moveleft", function(event) {
		$("#rad").text("←!");

		if (--curPos.col < 0) {
			curPos.col = 0;
		}
		slide();
	});

	$container.swipe({
		swipeLeft: function(event) {
			$container.trigger("moveright");
		},
		swipeRight: function(event) {
			$container.trigger("moveleft");
		},
		swipeUp: function(event) {
			$container.trigger("movebottom");
		},
		swipeDown: function(event) {
			$container.trigger("movetop");
		},
		swipeStatus: function(event, phase, direction, distance) {
			if (swipeStatus[phase]) {
				swipeStatus[phase](event, phase, direction, distance);
			}
		}
	});

	$("body").click(function(event) {
		var halfWidth = $document.width() / 2;
		var halfHeight = $window.height() / 2;

		$("#clientX").text(event.clientX - halfWidth);
		$("#clientY").text(event.clientY - halfHeight);

		var atan = Math.atan2(event.clientY - halfHeight, event.clientX - halfWidth) + (Math.PI / 8);

		if (atan < Math.atan2(-halfHeight, -halfWidth) + (Math.PI / 8)) {
			$("#rad").text("←");
			$container.trigger("moveleft");
		}
		else if (atan < Math.atan2(-halfHeight, halfWidth) + (Math.PI / 8)) {
			$("#rad").text("↑");
			$container.trigger("movetop");
		}
		else if (atan < Math.atan2(halfHeight, halfWidth) + (Math.PI / 8)) {
			$("#rad").text("→");
			$container.trigger("moveright");
		}
		else {
			$("#rad").text("↓");
			$container.trigger("movebottom");
		}
	});

	$document
	.bind("keydown", "up", function(event) {
		$container.trigger("movetop");
	})
	.bind("keydown", "right", function(event) {
		$container.trigger("moveright");
	})
	.bind("keydown", "down", function(event) {
		$container.trigger("movebottom");
	})
	.bind("keydown", "left", function(event) {
		$container.trigger("moveleft");
	})
});

})(window, document);

## style.css
html {
	height: 100%;
}

body {
	height: 100%;
	overflow: hidden;
	background-color: lightgray;
}

.window-height {
	height: 100%;
}

.page {
	position: absolute;
	top: 0; left: 0;
	background-color: white;
}

.col {
	position: absolute;
}

.row {
	position: relative;
}

#wrapper {
	overflow: hidden;
	background-size: 100%;

	-webkit-transition-property: background-position;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-out;

	-moz-transition-property: background-position;
	-moz-transition-duration: 0.5s;
	-moz-transition-timing-function: ease-out;
}

#container {
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-out;
	-webkit-transform: translate3d(0px, 0px, 0px);

	-moz-transition-property: -moz-transform;
	-moz-transition-duration: 0.5s;
	-moz-transition-timing-function: ease-out;
	-moz-transform: translate(0px, 0px, 0px);

	-webkit-box-shadow: 0 0 5px #000;
}

#debug {
	position: fixed;
	bottom: 10px;
	left: 10px;
	width: 160px;
	height: 100px;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 1000;
	color: white;
	border-radius: 5px;
}

## test1.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
	<div id="ajaxContent">
		<p>test1</p>
		<img src="http://shunimoto.files.wordpress.com/2010/11/japanese-curry.jpg">
	</div>
</div>
</body>
</html>

## test2.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
	<div id="ajaxContent">
		<p>test2</p>
		<img src="http://sucurry.img.jugem.jp/20100209_746842.jpg">
	</div>
</div>
</body>
</html>

## test3.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
	<div id="ajaxContent">
		<p>test3</p>
		<img src="http://www.indocurry.com/img/curry.jpg">
	</div>
</div>
</body>
</html>

## test4.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
	<div id="ajaxContent">
		<p>test4</p>
		<img src="http://pakistandishes.up.seesaa.net/image/chicken_curry.jpg">
	</div>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>20110524_prototype</title>
	<link rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
	<link rel="stylesheet" href="style.css">
	<script src="http://visionmedia.github.com/move.js/move.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
	<!-- script src="http://labs.skinkers.com/touchSwipe/demo/js/jquery.touchSwipe-1.2.3.js"></script -->
	<script src="http://plugins.jquery.com/files/jquery.touchSwipe-1.2.4.js_.txt"></script>
	<script src="https://github.com/jeresig/jquery.hotkeys/raw/master/jquery.hotkeys.js"></script>
	<script src="site.js"></script>
	</head>
	<body>

	<div id="debug">
	<p>clientX: <span id="clientX"></span></p>
	<p>clientY: <span id="clientY"></span></p>
	<p>rad: <span id="rad"></span></p>
	</div>

	<div id="wrapper" class="window-height">
	<div id="container" class="window-height">
	<ul class="window-height">
	<li class="col window-height">
	<ul class="row window-height">
	<li class="page window-height" data-page-url="./test1.html">1</li>
	<li class="page window-height" data-page-url="./test2.html">2</li>
	<li class="page window-height" data-page-url="./test3.html">3</li>
	<li class="page window-height" data-page-url="./test4.html">4</li>
	</ul>
	</li>
	<li class="col window-height">
	<ul class="row window-height">
	<li class="page window-height" data-page-url="./test4.html">4</li>
	<li class="page window-height" data-page-url="./test3.html">3</li>
	<li class="page window-height" data-page-url="./test2.html">2</li>
	<li class="page window-height" data-page-url="./test1.html">1</li>
	</ul>
	</li>
	</ul>
	</div>
	</div>

	</body>
	</html>
	(function(window, document, undefined) {

	var $window = jQuery(window),
	$document = jQuery(document);

	jQuery(function($) {

	var $container = $("#container"),
	contentWidth = 0,
	contentHeight = 0,
	maxRow = -1, maxCol = -1,
	curPos = {
	row: 0,
	col: 0
	}
	;

	// load external contents
	$("li.page").each(function(i, n) {
	var $this = $(this);
	var url = $(this).data("page-url");
	var jqxhr = $.ajax({
	url: url,
	dataType: "html"
	})
	.success(function(data) {
	var $data = $(data);
	$data.find("#ajaxContent").children().appendTo($this);
	})
	.error(function() {

	})
	.complete(function() {

	});
	});

	function scroll(distance, duration) {
	console.log(distance);
	console.log(duration);
	$container.css("-webkit-transition-duration", (duration / 1000).toFixed(1) + "s");
	var x = (distance < 0 ? "" : "-") + Math.abs(distance).toString();
	var y = 0;
	$container.css("-webkit-transform", "translate3d("+ x +"px, " + y + "px, 0px)");
	}

	function slide() {
	$container
	.css("-webkit-transform", "translate3d(" + ($document.width() * -curPos.col) + "px," + $window.height() * -curPos.row + "px, 0px)")
	.css("-moz-transform", "translate(" + ($document.width() * -curPos.col) + "px, " + $window.height() * -curPos.row + "px)");
	}

	var swipeStatus = {
	move: function(event, phase, direction, distance) {
	var duration = 0;

	if (direction == "left") {
	scroll((contentWidth * curPos.col) + distance, duration);
	}
	else if (direction == "right") {
	scroll((contentWidth * curPos.col) - distance, duration);
	}
	},
	cancel: function(event, phase, direction, distance) {
	$container.css("-webkit-transition-duration", "0.5s");
	},
	end: function(event, phase, direction, distance) {
	$container.css("-webkit-transition-duration", "0.5s");
	}
	};

	$window
	.bind("resize", function(event) {
	contentWidth = $document.width();
	contentHeight = $window.height();

	var params = {
	width: contentWidth,
	height: contentHeight
	};

	$(".page").css(params);
	$(".col").css(params);
	$(".row").css(params);

	$(".col").each(function(i, n) {
	$(this).css("left", params.width * i);
	$(this).find(".row").each(function(i, n) {
	$(this).find(".page").each(function(i, n) {
	$(this).css("top", params.height * i);
	maxRow = Math.max(i, maxRow);
	});
	});
	maxCol = Math.max(i, maxCol);
	});
	})
	.trigger("resize")
	.mousemove(function(event) {
	// console.log(event);
	var halfWidth = contentWidth / 2;
	var halfHeight = contentHeight / 2;

	$("#clientX").text(event.clientX - halfWidth);
	$("#clientY").text(event.clientY - halfHeight);

	var atan = Math.atan2(event.clientY - halfHeight, event.clientX - halfWidth) + (Math.PI / 8);

	if (atan < Math.atan2(-halfHeight, -halfWidth) + (Math.PI / 8)) {
	$("#rad").text("←");
	}
	else if (atan < Math.atan2(-halfHeight, halfWidth) + (Math.PI / 8)) {
	$("#rad").text("↑");
	}
	else if (atan < Math.atan2(halfHeight, halfWidth) + (Math.PI / 8)) {
	$("#rad").text("→");
	}
	else {
	$("#rad").text("↓");
	}
	});

	$container
	.bind("movetop", function(event) {
	$("#rad").text("↑!");

	if (--curPos.row < 0) {
	curPos.row = 0;
	}
	slide();
	})
	.bind("moveright", function(event) {
	$("#rad").text("→!");

	if (++curPos.col >= maxCol) {
	curPos.col = maxCol;
	}
	slide();
	})
	.bind("movebottom", function(event) {
	$("#rad").text("↓!");

	if (++curPos.row >= maxRow) {
	curPos.row = maxRow;
	}
	slide();
	})
	.bind("moveleft", function(event) {
	$("#rad").text("←!");

	if (--curPos.col < 0) {
	curPos.col = 0;
	}
	slide();
	});

	$container.swipe({
	swipeLeft: function(event) {
	$container.trigger("moveright");
	},
	swipeRight: function(event) {
	$container.trigger("moveleft");
	},
	swipeUp: function(event) {
	$container.trigger("movebottom");
	},
	swipeDown: function(event) {
	$container.trigger("movetop");
	},
	swipeStatus: function(event, phase, direction, distance) {
	if (swipeStatus[phase]) {
	swipeStatus[phase](event, phase, direction, distance);
	}
	}
	});

	$("body").click(function(event) {
	var halfWidth = $document.width() / 2;
	var halfHeight = $window.height() / 2;

	$("#clientX").text(event.clientX - halfWidth);
	$("#clientY").text(event.clientY - halfHeight);

	var atan = Math.atan2(event.clientY - halfHeight, event.clientX - halfWidth) + (Math.PI / 8);

	if (atan < Math.atan2(-halfHeight, -halfWidth) + (Math.PI / 8)) {
	$("#rad").text("←");
	$container.trigger("moveleft");
	}
	else if (atan < Math.atan2(-halfHeight, halfWidth) + (Math.PI / 8)) {
	$("#rad").text("↑");
	$container.trigger("movetop");
	}
	else if (atan < Math.atan2(halfHeight, halfWidth) + (Math.PI / 8)) {
	$("#rad").text("→");
	$container.trigger("moveright");
	}
	else {
	$("#rad").text("↓");
	$container.trigger("movebottom");
	}
	});

	$document
	.bind("keydown", "up", function(event) {
	$container.trigger("movetop");
	})
	.bind("keydown", "right", function(event) {
	$container.trigger("moveright");
	})
	.bind("keydown", "down", function(event) {
	$container.trigger("movebottom");
	})
	.bind("keydown", "left", function(event) {
	$container.trigger("moveleft");
	})
	});

	})(window, document);
	html {
	height: 100%;
	}

	body {
	height: 100%;
	overflow: hidden;
	background-color: lightgray;
	}

	.window-height {
	height: 100%;
	}

	.page {
	position: absolute;
	top: 0; left: 0;
	background-color: white;
	}

	.col {
	position: absolute;
	}

	.row {
	position: relative;
	}

	#wrapper {
	overflow: hidden;
	background-size: 100%;

	-webkit-transition-property: background-position;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-out;

	-moz-transition-property: background-position;
	-moz-transition-duration: 0.5s;
	-moz-transition-timing-function: ease-out;
	}

	#container {
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-out;
	-webkit-transform: translate3d(0px, 0px, 0px);

	-moz-transition-property: -moz-transform;
	-moz-transition-duration: 0.5s;
	-moz-transition-timing-function: ease-out;
	-moz-transform: translate(0px, 0px, 0px);

	-webkit-box-shadow: 0 0 5px #000;
	}

	#debug {
	position: fixed;
	bottom: 10px;
	left: 10px;
	width: 160px;
	height: 100px;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 1000;
	color: white;
	border-radius: 5px;
	}