first commit 2

2026-06-11 18:47:38 +09:00
parent c768729ce6
commit 6f534e33a6
11095 changed files with 1595758 additions and 0 deletions
@@ -0,0 +1,67 @@
+/* Basic sample */
+
+body{
+	overflow:hidden;
+	background-color:#fcfcfc;
+	margin:0;
+	padding:0;
+}
+
+.flipbook-viewport{
+	overflow:hidden;
+	width:100%;
+	height:100%;
+}
+
+.flipbook-viewport .container{
+	position:absolute;
+	top:50%;
+	left:50%;
+	margin:auto;
+}
+
+.flipbook-viewport .flipbook{
+	width:922px;
+	height:600px;
+	left:-461px;
+	top:-300px;
+}
+
+.flipbook-viewport .page{
+	width:461px;
+	height:600px;
+	background-color:white;
+	background-repeat:no-repeat;
+	background-size:100% 100%;
+}
+
+.flipbook .page{
+	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	box-shadow:0 0 20px rgba(0,0,0,0.2);
+}
+
+.flipbook-viewport .page img{
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	margin:0;
+}
+
+.flipbook-viewport .shadow{
+	-webkit-transition: -webkit-box-shadow 0.5s;
+	-moz-transition: -moz-box-shadow 0.5s;
+	-o-transition: -webkit-box-shadow 0.5s;
+	-ms-transition: -ms-box-shadow 0.5s;
+
+	-webkit-box-shadow:0 0 20px #ccc;
+	-moz-box-shadow:0 0 20px #ccc;
+	-o-box-shadow:0 0 20px #ccc;
+	-ms-box-shadow:0 0 20px #ccc;
+	box-shadow:0 0 20px #ccc;
+}
@@ -0,0 +1,77 @@
+<!doctype html>
+<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
+<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
+<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
+<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
+<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
+<head>
+<meta name="viewport" content="width = 1050, user-scalable = no" />
+<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
+<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>
+</head>
+<body>
+
+<div class="flipbook-viewport">
+	<div class="container">
+		<div class="flipbook">
+			<div style="background-image:url(pages/1.jpg)"></div>
+			<div style="background-image:url(pages/2.jpg)"></div>
+			<div style="background-image:url(pages/3.jpg)"></div>
+			<div style="background-image:url(pages/4.jpg)"></div>
+			<div style="background-image:url(pages/5.jpg)"></div>
+			<div style="background-image:url(pages/6.jpg)"></div>
+			<div style="background-image:url(pages/7.jpg)"></div>
+			<div style="background-image:url(pages/8.jpg)"></div>
+			<div style="background-image:url(pages/9.jpg)"></div>
+			<div style="background-image:url(pages/10.jpg)"></div>
+			<div style="background-image:url(pages/11.jpg)"></div>
+			<div style="background-image:url(pages/12.jpg)"></div>
+		</div>
+	</div>
+</div>
+
+
+<script type="text/javascript">
+
+function loadApp() {
+
+	// Create the flipbook
+
+	$('.flipbook').turn({
+			// Width
+
+			width:922,
+			
+			// Height
+
+			height:600,
+
+			// Elevation
+
+			elevation: 50,
+			
+			// Enable gradients
+
+			gradients: true,
+			
+			// Auto center this flipbook
+
+			autoCenter: true
+
+	});
+}
+
+// Load the HTML4 version if there's not CSS transform
+
+yepnope({
+	test : Modernizr.csstransforms,
+	yep: ['../../lib/turn.js'],
+	nope: ['../../lib/turn.html4.min.js'],
+	both: ['css/basic.css'],
+	complete: loadApp
+});
+
+</script>
+
+</body>
+</html>
@@ -0,0 +1,94 @@
+/*
+ * Basic sample
+*/
+
+function addPage(page, book) {
+
+	var id, pages = book.turn('pages');
+
+	// Create a new element for this page
+	var element = $('<div />', {});
+
+	// Add the page to the flipbook
+	if (book.turn('addPage', element, page)) {
+
+		// Add the initial HTML
+		// It will contain a loader indicator and a gradient
+		element.html('<div class="gradient"></div><div class="loader"></div>');
+
+		// Load the page
+		loadPage(page, element);
+	}
+
+}
+
+function loadPage(page, pageElement) {
+
+	// Create an image element
+
+	var img = $('<img />');
+
+	img.mousedown(function(e) {
+		e.preventDefault();
+	});
+
+	img.load(function() {
+		
+		// Set the size
+		$(this).css({width: '100%', height: '100%'});
+
+		// Add the image to the page after loaded
+
+		$(this).appendTo(pageElement);
+
+		// Remove the loader indicator
+		
+		pageElement.find('.loader').remove();
+	});
+
+	// Load the page
+
+	img.attr('src', 'pages/' +  page + '.jpg');
+
+}
+
+
+function loadLargePage(page, pageElement) {
+	
+	var img = $('<img />');
+
+	img.load(function() {
+
+		var prevImg = pageElement.find('img');
+		$(this).css({width: '100%', height: '100%'});
+		$(this).appendTo(pageElement);
+		prevImg.remove();
+		
+	});
+
+	// Loadnew page
+	
+	img.attr('src', 'pages/' +  page + '-large.jpg');
+}
+
+
+function loadSmallPage(page, pageElement) {
+	
+	var img = pageElement.find('img');
+
+	img.css({width: '100%', height: '100%'});
+
+	img.unbind('load');
+	// Loadnew page
+
+	img.attr('src', 'pages/' +  page + '.jpg');
+}
+
+
+
+// http://code.google.com/p/chromium/issues/detail?id=128488
+function isChrome() {
+
+	return navigator.userAgent.indexOf('Chrome')!=-1;
+
+}
@@ -0,0 +1,73 @@
+/* Basic sample */
+
+body{
+	overflow:hidden;
+	background-color:#fcfcfc;
+	margin:0;
+	padding:0;
+}
+
+.flipbook-viewport{
+	overflow:hidden;
+	width:100%;
+	height:100%;
+}
+
+.flipbook-viewport .container{
+	position:absolute;
+	top:50%;
+	left:50%;
+	margin:auto;
+}
+
+.flipbook-viewport .flipbook{
+	width:800px;
+	height:400px;
+	left:-400px;
+	top:-200px;
+}
+
+.flipbook-viewport .page{
+	width:400px;
+	height:400px;
+	background-color:white;
+	background-repeat:no-repeat;
+	background-size:100% 100%;
+}
+
+.flipbook .page{
+	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	box-shadow:0 0 20px rgba(0,0,0,0.2);
+}
+
+.flipbook-viewport .page img{
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	margin:0;
+}
+
+.flipbook-viewport .shadow{
+	-webkit-transition: -webkit-box-shadow 0.5s;
+	-moz-transition: -moz-box-shadow 0.5s;
+	-o-transition: -webkit-box-shadow 0.5s;
+	-ms-transition: -ms-box-shadow 0.5s;
+
+	-webkit-box-shadow:0 0 20px #ccc;
+	-moz-box-shadow:0 0 20px #ccc;
+	-o-box-shadow:0 0 20px #ccc;
+	-ms-box-shadow:0 0 20px #ccc;
+	box-shadow:0 0 20px #ccc;
+}
+
+.flipbook-viewport .double{
+	width:800px;
+	height:400px;
+	background-size:100% 100%;
+}
@@ -0,0 +1,75 @@
+<!doctype html>
+<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
+<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
+<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
+<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
+<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
+<head>
+<meta name="viewport" content="width = 1050, user-scalable = no" />
+<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
+<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>
+</head>
+<body>
+
+<div class="flipbook-viewport">
+	<div class="container">
+		<div class="flipbook">
+			<div class="page" style="background-image:url(pages/1.jpg)"></div>
+			<div class="double" style="background-image:url(pages/2.jpg)"></div>
+			<div class="double" style="background-image:url(pages/3.jpg)"></div>
+			<div class="double" style="background-image:url(pages/4.jpg)"></div>
+			<div class="double" style="background-image:url(pages/5.jpg)"></div>
+			<div class="double" style="background-image:url(pages/6.jpg)"></div>
+			<div class="page" style="background-image:url(pages/7.jpg)"></div>
+		</div>
+	</div>
+</div>
+
+
+<script type="text/javascript">
+
+function loadApp() {
+
+	var flipbook = $('.flipbook');
+
+ 	// Check if the CSS was already loaded
+	
+	if (flipbook.width()==0 || flipbook.height()==0) {
+		setTimeout(loadApp, 10);
+		return;
+	}
+
+	$('.flipbook .double').scissor();
+
+	// Create the flipbook
+
+	$('.flipbook').turn({
+			// Elevation
+
+			elevation: 50,
+			
+			// Enable gradients
+
+			gradients: true,
+			
+			// Auto center this flipbook
+
+			autoCenter: true
+
+	});
+}
+
+// Load the HTML4 version if there's not CSS transform
+
+yepnope({
+	test : Modernizr.csstransforms,
+	yep: ['../../lib/turn.min.js'],
+	nope: ['../../lib/turn.html4.min.js'],
+	both: ['../../lib/scissor.min.js', 'css/double-page.css'],
+	complete: loadApp
+});
+
+</script>
+
+</body>
+</html>
@@ -0,0 +1,143 @@
+.turnjs-slider{
+	width:600px;
+	height:8px;
+	background:rgba(0,0,0, 0.2);
+	-webkit-border-radius:5px;
+	-moz-border-radius:5px;
+	-o-border-radius:5px;
+	-ms-border-radius:5px;
+	border-radius:5px;
+	margin:20px auto;
+}
+
+.turnjs-slider .thumbnail{
+	width:115px;
+	height:85px;
+	position:absolute;
+	background:rgba(0,0,0, 0.5);
+	z-index:10000;
+	top:-100px;
+	left:-17px;
+	display:none;
+
+	-webkit-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-webkit-transition:-webkit-transform 0.2s;
+	-webkit-border-radius:5px;
+
+	-moz-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-moz-transition:-moz-transform 0.2s;
+	-moz-border-radius:5px;
+
+	-o-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-o-transition:-o-transform 0.2s;
+	-o-border-radius:5px;
+
+	-ms-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-ms-transition:-ms-transform 0.2s;
+	-ms-border-radius:5px;
+
+	transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	transition:transform: 0.2s;
+	border-radius:5px;
+}
+
+.no-transition{
+	-webkit-transition:none;
+	-moz-transition:none;
+	-o-transition:none;
+	-ms-transition:none;
+}
+
+.turnjs-slider .thumbnail div{
+	width:100px;
+	margin:7px;
+	height:70px;
+	background-color:white;
+}
+
+.turnjs-slider .ui-state-hover .thumbnail{
+	display:block;
+	opacity:0;
+}
+
+.turnjs-slider .ui-state-active .thumbnail{
+	display:block;
+	opacity:1;
+	-webkit-transform:scale(1, 1);
+	-moz-transform:scale(1, 1);
+	-o-transform:scale(1, 1);
+	-ms-transform:scale(1, 1);
+	transform:scale(1, 1);
+}
+
+/* Layout helpers
+----------------------------------*/
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+}
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.turnjs-slider .ui-widget-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.turnjs-slider .ui-slider {
+	position: relative;
+	text-align: left;
+}
+
+.turnjs-slider .ui-slider-handle{
+	position: absolute;
+	z-index:0;
+	width:80px;
+	height: 8px;
+	cursor: default;
+	-webkit-border-radius:5px;
+	-moz-border-radius:5px;
+	-ms-border-radius:5px;
+	border-radius:5px;
+}
+
+.turnjs-slider .ui-slider-horizontal {
+	height: 8px;
+	width:520px;
+	margin-left:39px;
+}
+
+.turnjs-slider .ui-slider-horizontal .ui-slider-handle {
+	margin-left:-40px;
+	margin-top:-1px;
+}
+
+/* Interaction states
+----------------------------------*/
+.turnjs-slider .ui-slider-handle{
+	border:1px solid white;
+	background-color:black;
+	opacity:0.2;
+	display:block;
+	-webkit-transition:opacity 0.2s;
+	-moz-transition:opacity 0.2s;
+	-ms-transition:opacity 0.2s;
+	-o-transition:opacity 0.2s;
+	transition:opacity 0.2s;
+}
+
+.turnjs-slider .ui-state-hover{
+	opacity:0.4;
+}
+
+.turnjs-slider .ui-state-active{
+	opacity:1;
+}
+
@@ -0,0 +1,16 @@
+.turnjs-slide{
+	width:600px;
+	height:8px;
+	background-color:#B4B4B4;
+	border-radius:5px;
+	margin:20px auto;
+}
+
+.turnjs-slide .ui-slider .ui-slider-handle{
+	background-color:#8F8F8F;
+	z-index:10000;
+}
+
+.turnjs-slide .thumbnail{
+	background: #666;
+}
@@ -0,0 +1,384 @@
+body{
+	overflow:hidden;
+	background-color:#fcfcfc;
+	margin:0;
+	padding:0;
+}
+
+.magazine-viewport .container{
+	position:absolute;
+	top:50%;
+	left:50%;
+	width:922px;
+	height:600px;
+	margin:auto;
+}
+
+.magazine-viewport .magazine{
+	width:922px;
+	height:600px;
+	left:-461px;
+	top:-300px;
+}
+
+.magazine-viewport .page{
+	width:461px;
+	height:600px;
+	background-color:white;
+	background-repeat:no-repeat;
+	background-size:100% 100%;
+}
+
+.magazine-viewport .zoomer .region{
+	display:none;
+}
+
+.magazine .region{
+	position:absolute;
+	overflow:hidden;
+	background:#0066FF;
+	opacity:0.2;
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	-ms-border-radius:10px;
+	-o-border-radius:10px;
+	border-radius:10px;
+	cursor:pointer;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+	filter: alpha(opacity=20);
+}
+
+.magazine .region:hover{
+	opacity:0.5;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	filter: alpha(opacity=50);
+}
+
+.magazine .region.zoom{
+	opacity:0.01;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
+	filter: alpha(opacity=1);
+}
+
+.magazine .region.zoom:hover{
+	opacity:0.2;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+	filter: alpha(opacity=20);
+}
+
+.magazine .page{
+	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	box-shadow:0 0 20px rgba(0,0,0,0.2);
+}
+
+.magazine-viewport .page img{
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	margin:0;
+}
+
+.magazine .even .gradient{
+	position:absolute;
+	top:0;
+	left:0;
+	width:100%;
+	height:100%;
+
+	background:-webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
+	background-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
+	background-image:-moz-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
+	background-image:-ms-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
+	background-image:-o-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
+	background-image:linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
+}
+
+.magazine .odd .gradient{
+	position:absolute;
+	top:0;
+	left:0;
+	width:100%;
+	height:100%;
+
+	background:-webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
+	background-image:-webkit-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
+	background-image:-moz-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
+	background-image:-ms-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
+	background-image:-o-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
+	background-image:linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
+}
+
+.magazine-viewport .zoom-in .even .gradient,
+.magazine-viewport .zoom-in .odd .gradient{
+
+	display:none;
+
+}
+
+.magazine-viewport .loader{
+	background-image:url(../pics/loader.gif);
+	width:22px;
+	height:22px;
+	position:absolute;
+	top:280px;
+	left:219px;
+}
+
+.magazine-viewport .shadow{
+	-webkit-transition: -webkit-box-shadow 0.5s;
+	-moz-transition: -moz-box-shadow 0.5s;
+	-o-transition: -webkit-box-shadow 0.5s;
+	-ms-transition: -ms-box-shadow 0.5s;
+
+	-webkit-box-shadow:0 0 20px #ccc;
+	-moz-box-shadow:0 0 20px #ccc;
+	-o-box-shadow:0 0 20px #ccc;
+	-ms-box-shadow:0 0 20px #ccc;
+	box-shadow:0 0 20px #ccc;
+}
+
+.magazine-viewport .next-button,
+.magazine-viewport .previous-button{
+	width:22px;
+	height:600px;
+	position:absolute;
+	top:0;
+}
+
+.magazine-viewport .next-button{
+	right:-22px;
+	-webkit-border-radius:0 15px 15px 0;
+	-moz-border-radius:0 15px 15px 0;
+	-ms-border-radius:0 15px 15px 0;
+	-o-border-radius:0 15px 15px 0;
+	border-radius:0 15px 15px 0;
+}
+
+.magazine-viewport .previous-button{
+	left:-22px;
+	-webkit-border-radius:15px 0 0 15px;
+	-moz-border-radius:15px 0 0 15px;
+	-ms-border-radius:15px 0 0 15px;
+	-o-border-radius:15px 0 0 15px;
+	border-radius:15px 0 0 15px;
+}
+
+.magazine-viewport .previous-button-hover,
+.magazine-viewport .next-button-hover{
+	background-color:rgba(0,0,0, 0.2);
+}
+
+.magazine-viewport .previous-button-hover,
+.magazine-viewport .previous-button-down{
+	background-image:url(../pics/arrows.png);
+	background-position:-4px 284px;
+	background-repeat:no-repeat;
+}
+
+.magazine-viewport .previous-button-down,
+.magazine-viewport .next-button-down{
+	background-color:rgba(0,0,0, 0.4);
+}
+
+.magazine-viewport .next-button-hover,
+.magazine-viewport .next-button-down{
+	background-image:url(../pics/arrows.png);
+	background-position:-38px 284px;
+	background-repeat:no-repeat;
+}
+
+.magazine-viewport .zoom-in .next-button,
+.magazine-viewport .zoom-in .previous-button{
+	display:none;
+}
+
+.animated{
+	-webkit-transition:margin-left 0.5s;
+	-moz-transition:margin-left 0.5s;
+	-ms-transition:margin-left 0.5s;
+	-o-transition:margin-left 0.5s;
+	transition:margin-left 0.5s;
+}
+
+.thumbnails{
+	position:absolute;
+	bottom:0;
+	left:0;
+	width:100%;
+	height:140px;
+	z-index:1;
+}
+
+.thumbnails > div{
+	width:1050px;
+	height:100px;
+	margin:20px auto;
+}
+
+.thumbnails ul{
+	margin:0;
+	padding:0;
+	text-align:center;
+	-webkit-transform:scale3d(0.5, 0.5, 1);
+	-moz-transform:scale3d(0.5, 0.5, 1);
+	-o-transform:scale3d(0.5, 0.5, 1);
+	-ms-transform:scale3d(0.5, 0.5, 1);
+	transform:scale3d(0.5, 0.5, 1);
+	-webkit-transition:-webkit-transform ease-in-out 100ms;
+	-moz-transition:-moz-transform ease-in-out 100ms;
+	-ms-transition:-ms-transform ease-in-out 100ms;
+	-o-transition:-o-transform ease-in-out 100ms;
+	transition:transform ease-in-out 100ms;
+}
+
+.thumbanils-touch ul{
+	-webkit-transform:none;
+	-moz-transform:none;
+	-o-transform:none;
+	-ms-transform:none;
+	transform:none;
+}
+
+.thumbnails-hover ul{
+	-webkit-transform:scale3d(0.6, 0.6, 1);
+	-moz-transform:scale3d(0.6, 0.6, 1);
+	-o-transform:scale3d(0.6, 0.6, 1);
+	-ms-transform:scale3d(0.6, 0.6, 1);
+	transform:scale3d(0.6, 0.6, 1);
+}
+
+.thumbnails li{
+	list-style:none;
+	display:inline-block;
+	margin:0 5px;
+	-webkit-box-shadow:0 0 10px #ccc;
+	-moz-box-shadow:0 0 10px #ccc;
+	-ms-box-shadow:0 0 10px #ccc;
+	-o-box-shadow:0 0 10px #ccc;
+	box-shadow:0 0 10px  #ccc;
+	-webkit-transition:-webkit-transform 60ms;
+	-moz-transition:-webkit-transform 60ms;
+	-o-transition:-webkit-transform 60ms;
+	-ms-transition:-webkit-transform 60ms;
+	transition:-webkit-transform 60ms;
+}
+
+.thumbnails li span{
+	display:none;
+}
+
+.thumbnails .current{
+	-webkit-box-shadow:0 0 10px red;
+	-moz-box-shadow:0 0 10px red;
+	-ms-box-shadow:0 0 10px red;
+	-o-box-shadow:0 0 10px red;
+	box-shadow:0 0 10px red;
+}
+
+.thumbnails .thumb-hover{
+	-webkit-transform:scale3d(1.3, 1.3, 1);
+	-moz-transform:scale3d(1.3, 1.3, 1);
+	-o-transform:scale3d(1.3, 1.3, 1);
+	-ms-transform:scale3d(1.3, 1.3, 1);
+	transform:scale3d(1.3, 1.3, 1);
+
+	-webkit-box-shadow:0 0 10px #666;
+	-moz-box-shadow:0 0 10px #666;
+	-ms-box-shadow:0 0 10px #666;
+	-o-box-shadow:0 0 10px #666;
+	box-shadow:0 0 10px #666;
+}
+
+.thumbanils-touch .thumb-hover{
+	-webkit-transform:none;
+	-moz-transform:none;
+	-o-transform:none;
+	-ms-transform:none;
+	transform:none;
+}
+
+.thumbnails .thumb-hover span{
+	position:absolute;
+	bottom:-30px;
+	left:0;
+	z-index:2;
+	width:100%;
+	height:30px;
+	font:bold 15px arial;
+	line-height:30px;
+	color:#666;
+	display:block;
+	cursor:default;
+}
+
+.thumbnails img{
+	float:left;
+}
+
+.exit-message{
+	position: absolute;
+	top:10px;
+	left:0;
+	width:100%;
+	height:40px;
+	z-index:10000;
+}
+
+.exit-message > div{
+	width:140px;
+	height:30px;
+	margin:auto;
+	background:rgba(0,0,0,0.5);
+	text-align:center;
+	font:12px arial;
+	line-height:30px;
+	color:white;
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	-ms-border-radius:10px;
+	-o-border-radius:10px;
+	border-radius:10px;
+}
+
+.zoom-icon{
+	position:absolute;
+	z-index:1000;
+	width:22px;
+	height:22px;
+	top:10px;
+	right:10px;
+	background-image:url(../pics/zoom-icons.png);
+	background-size:88px 22px;
+}
+
+.zoom-icon-in{
+	background-position:0 0;
+	cursor: pointer;
+}
+
+.zoom-icon-in.zoom-icon-in-hover{
+	background-position:-22px 0;
+	cursor: pointer;
+}
+
+.zoom-icon-out{
+	background-position:-44px 0;
+}
+
+.zoom-icon-out.zoom-icon-out-hover{
+	background-position:-66px 0;
+	cursor: pointer;
+}
+
+.bottom{
+	position:absolute;
+	left:0;
+	bottom:0;
+	width:100%;
+}
@@ -0,0 +1,469 @@
+<!doctype html>
+<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
+<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
+<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
+<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
+<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
+<head>
+<title>Using turn.js and the new zoom feature</title>
+<meta name="viewport" content="width = 1050, user-scalable = no" />
+<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
+<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>
+<script type="text/javascript" src="../../lib/hash.js"></script>
+
+</head>
+<body>
+
+<div id="canvas">
+
+<div class="zoom-icon zoom-icon-in"></div>
+
+<div class="magazine-viewport">
+	<div class="container">
+		<div class="magazine">
+			<!-- Next button -->
+			<div ignore="1" class="next-button"></div>
+			<!-- Previous button -->
+			<div ignore="1" class="previous-button"></div>
+		</div>
+	</div>
+</div>
+
+<!-- Thumbnails -->
+<div class="thumbnails">
+	<div>
+		<ul>
+			<li class="i">
+				<img src="pages/1-thumb.jpg" width="76" height="100" class="page-1">
+				<span>1</span>
+			</li>
+			<li class="d">
+				<img src="pages/2-thumb.jpg" width="76" height="100" class="page-2">
+				<img src="pages/3-thumb.jpg" width="76" height="100" class="page-3">
+				<span>2-3</span>
+			</li>
+			<li class="d">
+				<img src="pages/4-thumb.jpg" width="76" height="100" class="page-4">
+				<img src="pages/5-thumb.jpg" width="76" height="100" class="page-5">
+				<span>4-5</span>
+			</li>
+			<li class="d">
+				<img src="pages/6-thumb.jpg" width="76" height="100" class="page-6">
+				<img src="pages/7-thumb.jpg" width="76" height="100" class="page-7">
+				<span>6-7</span>
+			</li>
+			<li class="d">
+				<img src="pages/8-thumb.jpg" width="76" height="100" class="page-8">
+				<img src="pages/9-thumb.jpg" width="76" height="100" class="page-9">
+				<span>8-9</span>
+			</li>
+			<li class="d">
+				<img src="pages/10-thumb.jpg" width="76" height="100" class="page-10">
+				<img src="pages/11-thumb.jpg" width="76" height="100" class="page-11">
+				<span>10-11</span>
+			</li>
+			<li class="i">
+				<img src="pages/12-thumb.jpg" width="76" height="100" class="page-12">
+				<span>12</span>
+			</li>
+		<ul>
+	<div>	
+</div>
+</div>
+
+<script type="text/javascript">
+
+function loadApp() {
+
+ 	$('#canvas').fadeIn(1000);
+
+ 	var flipbook = $('.magazine');
+
+ 	// Check if the CSS was already loaded
+	
+	if (flipbook.width()==0 || flipbook.height()==0) {
+		setTimeout(loadApp, 10);
+		return;
+	}
+	
+	// Create the flipbook
+
+	flipbook.turn({
+			
+			// Magazine width
+
+			width: 922,
+
+			// Magazine height
+
+			height: 600,
+
+			// Duration in millisecond
+
+			duration: 1000,
+
+			// Hardware acceleration
+
+			acceleration: !isChrome(),
+
+			// Enables gradients
+
+			gradients: true,
+			
+			// Auto center this flipbook
+
+			autoCenter: true,
+
+			// Elevation from the edge of the flipbook when turning a page
+
+			elevation: 50,
+
+			// The number of pages
+
+			pages: 12,
+
+			// Events
+
+			when: {
+				turning: function(event, page, view) {
+					
+					var book = $(this),
+					currentPage = book.turn('page'),
+					pages = book.turn('pages');
+			
+					// Update the current URI
+
+					Hash.go('page/' + page).update();
+
+					// Show and hide navigation buttons
+
+					disableControls(page);
+					
+
+					$('.thumbnails .page-'+currentPage).
+						parent().
+						removeClass('current');
+
+					$('.thumbnails .page-'+page).
+						parent().
+						addClass('current');
+
+
+
+				},
+
+				turned: function(event, page, view) {
+
+					disableControls(page);
+
+					$(this).turn('center');
+
+					if (page==1) { 
+						$(this).turn('peel', 'br');
+					}
+
+				},
+
+				missing: function (event, pages) {
+
+					// Add pages that aren't in the magazine
+
+					for (var i = 0; i < pages.length; i++)
+						addPage(pages[i], $(this));
+
+				}
+			}
+
+	});
+
+	// Zoom.js
+
+	$('.magazine-viewport').zoom({
+		flipbook: $('.magazine'),
+
+		max: function() { 
+			
+			return largeMagazineWidth()/$('.magazine').width();
+
+		}, 
+
+		when: {
+
+			swipeLeft: function() {
+
+				$(this).zoom('flipbook').turn('next');
+
+			},
+
+			swipeRight: function() {
+				
+				$(this).zoom('flipbook').turn('previous');
+
+			},
+
+			resize: function(event, scale, page, pageElement) {
+
+				if (scale==1)
+					loadSmallPage(page, pageElement);
+				else
+					loadLargePage(page, pageElement);
+
+			},
+
+			zoomIn: function () {
+
+				$('.thumbnails').hide();
+				$('.made').hide();
+				$('.magazine').removeClass('animated').addClass('zoom-in');
+				$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
+				
+				if (!window.escTip && !$.isTouch) {
+					escTip = true;
+
+					$('<div />', {'class': 'exit-message'}).
+						html('<div>Press ESC to exit</div>').
+							appendTo($('body')).
+							delay(2000).
+							animate({opacity:0}, 500, function() {
+								$(this).remove();
+							});
+				}
+			},
+
+			zoomOut: function () {
+
+				$('.exit-message').hide();
+				$('.thumbnails').fadeIn();
+				$('.made').fadeIn();
+				$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
+
+				setTimeout(function(){
+					$('.magazine').addClass('animated').removeClass('zoom-in');
+					resizeViewport();
+				}, 0);
+
+			}
+		}
+	});
+
+	// Zoom event
+
+	if ($.isTouch)
+		$('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
+	else
+		$('.magazine-viewport').bind('zoom.tap', zoomTo);
+
+
+	// Using arrow keys to turn the page
+
+	$(document).keydown(function(e){
+
+		var previous = 37, next = 39, esc = 27;
+
+		switch (e.keyCode) {
+			case previous:
+
+				// left arrow
+				$('.magazine').turn('previous');
+				e.preventDefault();
+
+			break;
+			case next:
+
+				//right arrow
+				$('.magazine').turn('next');
+				e.preventDefault();
+
+			break;
+			case esc:
+				
+				$('.magazine-viewport').zoom('zoomOut');	
+				e.preventDefault();
+
+			break;
+		}
+	});
+
+	// URIs - Format #/page/1 
+
+	Hash.on('^page\/([0-9]*)$', {
+		yep: function(path, parts) {
+			var page = parts[1];
+
+			if (page!==undefined) {
+				if ($('.magazine').turn('is'))
+					$('.magazine').turn('page', page);
+			}
+
+		},
+		nop: function(path) {
+
+			if ($('.magazine').turn('is'))
+				$('.magazine').turn('page', 1);
+		}
+	});
+
+
+	$(window).resize(function() {
+		resizeViewport();
+	}).bind('orientationchange', function() {
+		resizeViewport();
+	});
+
+	// Events for thumbnails
+
+	$('.thumbnails').click(function(event) {
+		
+		var page;
+
+		if (event.target && (page=/page-([0-9]+)/.exec($(event.target).attr('class'))) ) {
+		
+			$('.magazine').turn('page', page[1]);
+		}
+	});
+
+	$('.thumbnails li').
+		bind($.mouseEvents.over, function() {
+			
+			$(this).addClass('thumb-hover');
+
+		}).bind($.mouseEvents.out, function() {
+			
+			$(this).removeClass('thumb-hover');
+
+		});
+
+	if ($.isTouch) {
+	
+		$('.thumbnails').
+			addClass('thumbanils-touch').
+			bind($.mouseEvents.move, function(event) {
+				event.preventDefault();
+			});
+
+	} else {
+
+		$('.thumbnails ul').mouseover(function() {
+
+			$('.thumbnails').addClass('thumbnails-hover');
+
+		}).mousedown(function() {
+
+			return false;
+
+		}).mouseout(function() {
+
+			$('.thumbnails').removeClass('thumbnails-hover');
+
+		});
+
+	}
+
+
+	// Regions
+
+	if ($.isTouch) {
+		$('.magazine').bind('touchstart', regionClick);
+	} else {
+		$('.magazine').click(regionClick);
+	}
+
+	// Events for the next button
+
+	$('.next-button').bind($.mouseEvents.over, function() {
+		
+		$(this).addClass('next-button-hover');
+
+	}).bind($.mouseEvents.out, function() {
+		
+		$(this).removeClass('next-button-hover');
+
+	}).bind($.mouseEvents.down, function() {
+		
+		$(this).addClass('next-button-down');
+
+	}).bind($.mouseEvents.up, function() {
+		
+		$(this).removeClass('next-button-down');
+
+	}).click(function() {
+		
+		$('.magazine').turn('next');
+
+	});
+
+	// Events for the next button
+	
+	$('.previous-button').bind($.mouseEvents.over, function() {
+		
+		$(this).addClass('previous-button-hover');
+
+	}).bind($.mouseEvents.out, function() {
+		
+		$(this).removeClass('previous-button-hover');
+
+	}).bind($.mouseEvents.down, function() {
+		
+		$(this).addClass('previous-button-down');
+
+	}).bind($.mouseEvents.up, function() {
+		
+		$(this).removeClass('previous-button-down');
+
+	}).click(function() {
+		
+		$('.magazine').turn('previous');
+
+	});
+
+
+	resizeViewport();
+
+	$('.magazine').addClass('animated');
+
+}
+
+// Zoom icon
+
+ $('.zoom-icon').bind('mouseover', function() { 
+ 	
+ 	if ($(this).hasClass('zoom-icon-in'))
+ 		$(this).addClass('zoom-icon-in-hover');
+
+ 	if ($(this).hasClass('zoom-icon-out'))
+ 		$(this).addClass('zoom-icon-out-hover');
+ 
+ }).bind('mouseout', function() { 
+ 	
+ 	 if ($(this).hasClass('zoom-icon-in'))
+ 		$(this).removeClass('zoom-icon-in-hover');
+ 	
+ 	if ($(this).hasClass('zoom-icon-out'))
+ 		$(this).removeClass('zoom-icon-out-hover');
+
+ }).bind('click', function() {
+
+ 	if ($(this).hasClass('zoom-icon-in'))
+ 		$('.magazine-viewport').zoom('zoomIn');
+ 	else if ($(this).hasClass('zoom-icon-out'))	
+		$('.magazine-viewport').zoom('zoomOut');
+
+ });
+
+ $('#canvas').hide();
+
+
+// Load the HTML4 version if there's not CSS transform
+
+yepnope({
+	test : Modernizr.csstransforms,
+	yep: ['../../lib/turn.js'],
+	nope: ['../../lib/turn.html4.min.js'],
+	both: ['../../lib/zoom.min.js', 'js/magazine.js', 'css/magazine.css'],
+	complete: loadApp
+});
+
+</script>
+
+</body>
+</html>
@@ -0,0 +1,385 @@
+/*
+ * Magazine sample
+*/
+
+function addPage(page, book) {
+
+	var id, pages = book.turn('pages');
+
+	// Create a new element for this page
+	var element = $('<div />', {});
+
+	// Add the page to the flipbook
+	if (book.turn('addPage', element, page)) {
+
+		// Add the initial HTML
+		// It will contain a loader indicator and a gradient
+		element.html('<div class="gradient"></div><div class="loader"></div>');
+
+		// Load the page
+		loadPage(page, element);
+	}
+
+}
+
+function loadPage(page, pageElement) {
+
+	// Create an image element
+
+	var img = $('<img />');
+
+	img.mousedown(function(e) {
+		e.preventDefault();
+	});
+
+	img.load(function() {
+		
+		// Set the size
+		$(this).css({width: '100%', height: '100%'});
+
+		// Add the image to the page after loaded
+
+		$(this).appendTo(pageElement);
+
+		// Remove the loader indicator
+		
+		pageElement.find('.loader').remove();
+	});
+
+	// Load the page
+
+	img.attr('src', 'pages/' +  page + '.jpg');
+
+	loadRegions(page, pageElement);
+
+}
+
+// Zoom in / Zoom out
+
+function zoomTo(event) {
+
+		setTimeout(function() {
+			if ($('.magazine-viewport').data().regionClicked) {
+				$('.magazine-viewport').data().regionClicked = false;
+			} else {
+				if ($('.magazine-viewport').zoom('value')==1) {
+					$('.magazine-viewport').zoom('zoomIn', event);
+				} else {
+					$('.magazine-viewport').zoom('zoomOut');
+				}
+			}
+		}, 1);
+
+}
+
+
+
+// Load regions
+
+function loadRegions(page, element) {
+
+	$.getJSON('pages/'+page+'-regions.json').
+		done(function(data) {
+
+			$.each(data, function(key, region) {
+				addRegion(region, element);
+			});
+		});
+}
+
+// Add region
+
+function addRegion(region, pageElement) {
+	
+	var reg = $('<div />', {'class': 'region  ' + region['class']}),
+		options = $('.magazine').turn('options'),
+		pageWidth = options.width/2,
+		pageHeight = options.height;
+
+	reg.css({
+		top: Math.round(region.y/pageHeight*100)+'%',
+		left: Math.round(region.x/pageWidth*100)+'%',
+		width: Math.round(region.width/pageWidth*100)+'%',
+		height: Math.round(region.height/pageHeight*100)+'%'
+	}).attr('region-data', $.param(region.data||''));
+
+
+	reg.appendTo(pageElement);
+}
+
+// Process click on a region
+
+function regionClick(event) {
+
+	var region = $(event.target);
+
+	if (region.hasClass('region')) {
+
+		$('.magazine-viewport').data().regionClicked = true;
+		
+		setTimeout(function() {
+			$('.magazine-viewport').data().regionClicked = false;
+		}, 100);
+		
+		var regionType = $.trim(region.attr('class').replace('region', ''));
+
+		return processRegion(region, regionType);
+
+	}
+
+}
+
+// Process the data of every region
+
+function processRegion(region, regionType) {
+
+	data = decodeParams(region.attr('region-data'));
+
+	switch (regionType) {
+		case 'link' :
+
+			window.open(data.url);
+
+		break;
+		case 'zoom' :
+
+			var regionOffset = region.offset(),
+				viewportOffset = $('.magazine-viewport').offset(),
+				pos = {
+					x: regionOffset.left-viewportOffset.left,
+					y: regionOffset.top-viewportOffset.top
+				};
+
+			$('.magazine-viewport').zoom('zoomIn', pos);
+
+		break;
+		case 'to-page' :
+
+			$('.magazine').turn('page', data.page);
+
+		break;
+	}
+
+}
+
+// Load large page
+
+function loadLargePage(page, pageElement) {
+	
+	var img = $('<img />');
+
+	img.load(function() {
+
+		var prevImg = pageElement.find('img');
+		$(this).css({width: '100%', height: '100%'});
+		$(this).appendTo(pageElement);
+		prevImg.remove();
+		
+	});
+
+	// Loadnew page
+	
+	img.attr('src', 'pages/' +  page + '-large.jpg');
+}
+
+// Load small page
+
+function loadSmallPage(page, pageElement) {
+	
+	var img = pageElement.find('img');
+
+	img.css({width: '100%', height: '100%'});
+
+	img.unbind('load');
+	// Loadnew page
+
+	img.attr('src', 'pages/' +  page + '.jpg');
+}
+
+// http://code.google.com/p/chromium/issues/detail?id=128488
+
+function isChrome() {
+
+	return navigator.userAgent.indexOf('Chrome')!=-1;
+
+}
+
+function disableControls(page) {
+		if (page==1)
+			$('.previous-button').hide();
+		else
+			$('.previous-button').show();
+					
+		if (page==$('.magazine').turn('pages'))
+			$('.next-button').hide();
+		else
+			$('.next-button').show();
+}
+
+// Set the width and height for the viewport
+
+function resizeViewport() {
+
+	var width = $(window).width(),
+		height = $(window).height(),
+		options = $('.magazine').turn('options');
+
+	$('.magazine').removeClass('animated');
+
+	$('.magazine-viewport').css({
+		width: width,
+		height: height
+	}).
+	zoom('resize');
+
+
+	if ($('.magazine').turn('zoom')==1) {
+		var bound = calculateBound({
+			width: options.width,
+			height: options.height,
+			boundWidth: Math.min(options.width, width),
+			boundHeight: Math.min(options.height, height)
+		});
+
+		if (bound.width%2!==0)
+			bound.width-=1;
+
+			
+		if (bound.width!=$('.magazine').width() || bound.height!=$('.magazine').height()) {
+
+			$('.magazine').turn('size', bound.width, bound.height);
+
+			if ($('.magazine').turn('page')==1)
+				$('.magazine').turn('peel', 'br');
+
+			$('.next-button').css({height: bound.height, backgroundPosition: '-38px '+(bound.height/2-32/2)+'px'});
+			$('.previous-button').css({height: bound.height, backgroundPosition: '-4px '+(bound.height/2-32/2)+'px'});
+		}
+
+		$('.magazine').css({top: -bound.height/2, left: -bound.width/2});
+	}
+
+	var magazineOffset = $('.magazine').offset(),
+		boundH = height - magazineOffset.top - $('.magazine').height(),
+		marginTop = (boundH - $('.thumbnails > div').height()) / 2;
+
+	if (marginTop<0) {
+		$('.thumbnails').css({height:1});
+	} else {
+		$('.thumbnails').css({height: boundH});
+		$('.thumbnails > div').css({marginTop: marginTop});
+	}
+
+	if (magazineOffset.top<$('.made').height())
+		$('.made').hide();
+	else
+		$('.made').show();
+
+	$('.magazine').addClass('animated');
+	
+}
+
+
+// Number of views in a flipbook
+
+function numberOfViews(book) {
+	return book.turn('pages') / 2 + 1;
+}
+
+// Current view in a flipbook
+
+function getViewNumber(book, page) {
+	return parseInt((page || book.turn('page'))/2 + 1, 10);
+}
+
+function moveBar(yes) {
+	if (Modernizr && Modernizr.csstransforms) {
+		$('#slider .ui-slider-handle').css({zIndex: yes ? -1 : 10000});
+	}
+}
+
+function setPreview(view) {
+
+	var previewWidth = 112,
+		previewHeight = 73,
+		previewSrc = 'pages/preview.jpg',
+		preview = $(_thumbPreview.children(':first')),
+		numPages = (view==1 || view==$('#slider').slider('option', 'max')) ? 1 : 2,
+		width = (numPages==1) ? previewWidth/2 : previewWidth;
+
+	_thumbPreview.
+		addClass('no-transition').
+		css({width: width + 15,
+			height: previewHeight + 15,
+			top: -previewHeight - 30,
+			left: ($($('#slider').children(':first')).width() - width - 15)/2
+		});
+
+	preview.css({
+		width: width,
+		height: previewHeight
+	});
+
+	if (preview.css('background-image')==='' ||
+		preview.css('background-image')=='none') {
+
+		preview.css({backgroundImage: 'url(' + previewSrc + ')'});
+
+		setTimeout(function(){
+			_thumbPreview.removeClass('no-transition');
+		}, 0);
+
+	}
+
+	preview.css({backgroundPosition:
+		'0px -'+((view-1)*previewHeight)+'px'
+	});
+}
+
+// Width of the flipbook when zoomed in
+
+function largeMagazineWidth() {
+	
+	return 2214;
+
+}
+
+// decode URL Parameters
+
+function decodeParams(data) {
+
+	var parts = data.split('&'), d, obj = {};
+
+	for (var i =0; i<parts.length; i++) {
+		d = parts[i].split('=');
+		obj[decodeURIComponent(d[0])] = decodeURIComponent(d[1]);
+	}
+
+	return obj;
+}
+
+// Calculate the width and height of a square within another square
+
+function calculateBound(d) {
+	
+	var bound = {width: d.width, height: d.height};
+
+	if (bound.width>d.boundWidth || bound.height>d.boundHeight) {
+		
+		var rel = bound.width/bound.height;
+
+		if (d.boundWidth/rel>d.boundHeight && d.boundHeight*rel<=d.boundWidth) {
+			
+			bound.width = Math.round(d.boundHeight*rel);
+			bound.height = d.boundHeight;
+
+		} else {
+			
+			bound.width = d.boundWidth;
+			bound.height = Math.round(d.boundWidth/rel);
+		
+		}
+	}
+		
+	return bound;
+}
@@ -0,0 +1,12 @@
+[{
+	"x":22,
+	"y":568,
+	"width":130,
+	"height":12,
+	"class":"link",
+	"data":
+		{
+			"url": "http://latimes.com/shopping/vegas"
+		}
+}
+]
@@ -0,0 +1,8 @@
+[{
+	"x":0,
+	"y":135,
+	"width":423,
+	"height":182,
+	"class":"zoom"
+}
+]
@@ -0,0 +1,15 @@
+[{
+	"x":181,
+	"y":386,
+	"width":102,
+	"height":214,
+	"class":"zoom"
+},
+{
+	"x":289,
+	"y":253,
+	"width":173,
+	"height":312,
+	"class":"zoom"
+}
+]
@@ -0,0 +1 @@
+[]
@@ -0,0 +1 @@
+[]
@@ -0,0 +1,45 @@
+[{
+	"x":256,
+	"y":161,
+	"width":128,
+	"height":15,
+	"class":"to-page",
+	"data":
+		{
+			"page": 8
+		}
+},
+{
+	"x":256,
+	"y":202,
+	"width":114,
+	"height":15,
+	"class":"to-page",
+	"data":
+		{
+			"page": 10
+		}
+},
+{
+	"x":256,
+	"y":244,
+	"width":126,
+	"height":15,
+	"class":"to-page",
+	"data":
+		{
+			"page": 12
+		}
+},
+{
+	"x":256,
+	"y":286,
+	"width":68,
+	"height":15,
+	"class":"to-page",
+	"data":
+		{
+			"page": 12
+		}
+}
+]
@@ -0,0 +1,22 @@
+[{
+	"x":287,
+	"y":0,
+	"width":171,
+	"height":143,
+	"class":"zoom"
+},
+{
+	"x":287,
+	"y":155,
+	"width":175,
+	"height":134,
+	"class":"zoom"
+},
+{
+	"x":0,
+	"y":264,
+	"width":177,
+	"height":123,
+	"class":"zoom"
+}
+]
@@ -0,0 +1 @@
+[]
@@ -0,0 +1,22 @@
+[{
+	"x":270,
+	"y":0,
+	"width":161,
+	"height":148,
+	"class":"zoom"
+},
+{
+	"x":51,
+	"y":77,
+	"width":174,
+	"height":141,
+	"class":"zoom"
+},
+{
+	"x":33,
+	"y":448,
+	"width":398,
+	"height":113,
+	"class":"zoom"
+}
+]
@@ -0,0 +1 @@
+[]
@@ -0,0 +1,29 @@
+[{
+	"x":33,
+	"y":145,
+	"width":186,
+	"height":99,
+	"class":"zoom"
+},
+{
+	"x":33,
+	"y":247,
+	"width":186,
+	"height":99,
+	"class":"zoom"
+},
+{
+	"x":33,
+	"y":349,
+	"width":186,
+	"height":99,
+	"class":"zoom"
+},
+{
+	"x":33,
+	"y":450,
+	"width":186,
+	"height":99,
+	"class":"zoom"
+}
+]
@@ -0,0 +1,12 @@
+[{
+	"x":29,
+	"y":558,
+	"width":117,
+	"height":14,
+	"class":"link",
+	"data" : 
+		{
+			"url": "http://www.celineinvegas.com"
+		}
+}
+]
@@ -0,0 +1,400 @@
+<!doctype html>
+<html lang="en">
+<head>
+<title>Using turn.js and the new zoom feature</title>
+<meta name="viewport" content="width = 1050, user-scalable = no" />
+<link rel="icon" type="image/png" href="../../pics/favicon.png" />
+<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
+<script type="text/javascript" src="../../extras/jquery-ui-1.8.20.custom.min.js"></script>
+<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>
+<script type="text/javascript" src="../../lib/hash.js"></script>
+</head>
+<body>
+
+<div id="canvas">
+
+<div class="zoom-icon zoom-icon-in"></div>
+
+<div class="magazine-viewport">
+	<div class="container">
+		<div class="magazine">
+			<!-- Next button -->
+			<div ignore="1" class="next-button"></div>
+			<!-- Previous button -->
+			<div ignore="1" class="previous-button"></div>
+		</div>
+	</div>
+	<div class="bottom">
+		<div id="slider-bar" class="turnjs-slider">
+			<div id="slider"></div>
+		</div>
+	</div>
+</div>
+
+<script type="text/javascript">
+
+function loadApp() {
+
+ 	$('#canvas').fadeIn(1000);
+
+ 	var flipbook = $('.magazine');
+
+ 	// Check if the CSS was already loaded
+	
+	if (flipbook.width()==0 || flipbook.height()==0) {
+		setTimeout(loadApp, 10);
+		return;
+	}
+	
+	// Create the flipbook
+
+	flipbook.turn({
+			
+			// Magazine width
+
+			width: 922,
+
+			// Magazine height
+
+			height: 600,
+
+			// Duration in millisecond
+
+			duration: 1000,
+
+			// Enables gradients
+
+			gradients: true,
+			
+			// Auto center this flipbook
+
+			autoCenter: true,
+
+			// Elevation from the edge of the flipbook when turning a page
+
+			elevation: 50,
+
+			// The number of pages
+
+			pages: 12,
+
+			// Events
+
+			when: {
+				turning: function(event, page, view) {
+					
+					var book = $(this),
+					currentPage = book.turn('page'),
+					pages = book.turn('pages');
+			
+					// Update the current URI
+
+					Hash.go('page/' + page).update();
+
+					// Show and hide navigation buttons
+
+					disableControls(page);
+
+				},
+
+				turned: function(event, page, view) {
+
+					disableControls(page);
+
+					$(this).turn('center');
+
+					$('#slider').slider('value', getViewNumber($(this), page));
+
+					if (page==1) { 
+						$(this).turn('peel', 'br');
+					}
+
+				},
+
+				missing: function (event, pages) {
+
+					// Add pages that aren't in the magazine
+
+					for (var i = 0; i < pages.length; i++)
+						addPage(pages[i], $(this));
+
+				}
+			}
+
+	});
+
+	// Zoom.js
+
+	$('.magazine-viewport').zoom({
+		flipbook: $('.magazine'),
+
+		max: function() { 
+			
+			return largeMagazineWidth()/$('.magazine').width();
+
+		}, 
+
+		when: {
+			swipeLeft: function() {
+
+				$(this).zoom('flipbook').turn('next');
+
+			},
+
+			swipeRight: function() {
+				
+				$(this).zoom('flipbook').turn('previous');
+
+			},
+
+			resize: function(event, scale, page, pageElement) {
+
+				if (scale==1)
+					loadSmallPage(page, pageElement);
+				else
+					loadLargePage(page, pageElement);
+
+			},
+
+			zoomIn: function () {
+
+				$('#slider-bar').hide();
+				$('.made').hide();
+				$('.magazine').removeClass('animated').addClass('zoom-in');
+				$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
+				
+				if (!window.escTip && !$.isTouch) {
+					escTip = true;
+
+					$('<div />', {'class': 'exit-message'}).
+						html('<div>Press ESC to exit</div>').
+							appendTo($('body')).
+							delay(2000).
+							animate({opacity:0}, 500, function() {
+								$(this).remove();
+							});
+				}
+			},
+
+			zoomOut: function () {
+
+				$('#slider-bar').fadeIn();
+				$('.exit-message').hide();
+				$('.made').fadeIn();
+				$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
+
+				setTimeout(function(){
+					$('.magazine').addClass('animated').removeClass('zoom-in');
+					resizeViewport();
+				}, 0);
+
+			}
+		}
+	});
+
+	// Zoom event
+
+	if ($.isTouch)
+		$('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
+	else
+		$('.magazine-viewport').bind('zoom.tap', zoomTo);
+
+
+	// Using arrow keys to turn the page
+
+	$(document).keydown(function(e){
+
+		var previous = 37, next = 39, esc = 27;
+
+		switch (e.keyCode) {
+			case previous:
+
+				// left arrow
+				$('.magazine').turn('previous');
+				e.preventDefault();
+
+			break;
+			case next:
+
+				//right arrow
+				$('.magazine').turn('next');
+				e.preventDefault();
+
+			break;
+			case esc:
+				
+				$('.magazine-viewport').zoom('zoomOut');	
+				e.preventDefault();
+
+			break;
+		}
+	});
+
+	// URIs - Format #/page/1 
+
+	Hash.on('^page\/([0-9]*)$', {
+		yep: function(path, parts) {
+			var page = parts[1];
+
+			if (page!==undefined) {
+				if ($('.magazine').turn('is'))
+					$('.magazine').turn('page', page);
+			}
+
+		},
+		nop: function(path) {
+
+			if ($('.magazine').turn('is'))
+				$('.magazine').turn('page', 1);
+		}
+	});
+
+
+	$(window).resize(function() {
+		resizeViewport();
+	}).bind('orientationchange', function() {
+		resizeViewport();
+	});
+
+	// Regions
+
+	if ($.isTouch) {
+		$('.magazine').bind('touchstart', regionClick);
+	} else {
+		$('.magazine').click(regionClick);
+	}
+
+	// Events for the next button
+
+	$('.next-button').bind($.mouseEvents.over, function() {
+		
+		$(this).addClass('next-button-hover');
+
+	}).bind($.mouseEvents.out, function() {
+		
+		$(this).removeClass('next-button-hover');
+
+	}).bind($.mouseEvents.down, function() {
+		
+		$(this).addClass('next-button-down');
+
+	}).bind($.mouseEvents.up, function() {
+		
+		$(this).removeClass('next-button-down');
+
+	}).click(function() {
+		
+		$('.magazine').turn('next');
+
+	});
+
+	// Events for the next button
+	
+	$('.previous-button').bind($.mouseEvents.over, function() {
+		
+		$(this).addClass('previous-button-hover');
+
+	}).bind($.mouseEvents.out, function() {
+		
+		$(this).removeClass('previous-button-hover');
+
+	}).bind($.mouseEvents.down, function() {
+		
+		$(this).addClass('previous-button-down');
+
+	}).bind($.mouseEvents.up, function() {
+		
+		$(this).removeClass('previous-button-down');
+
+	}).click(function() {
+		
+		$('.magazine').turn('previous');
+
+	});
+
+
+	// Slider
+
+	$( "#slider" ).slider({
+		min: 1,
+		max: numberOfViews(flipbook),
+
+		start: function(event, ui) {
+
+			if (!window._thumbPreview) {
+				_thumbPreview = $('<div />', {'class': 'thumbnail'}).html('<div></div>');
+				setPreview(ui.value);
+				_thumbPreview.appendTo($(ui.handle));
+			} else
+				setPreview(ui.value);
+
+			moveBar(false);
+
+		},
+
+		slide: function(event, ui) {
+
+			setPreview(ui.value);
+
+		},
+
+		stop: function() {
+
+			if (window._thumbPreview)
+				_thumbPreview.removeClass('show');
+			
+			$('.magazine').turn('page', Math.max(1, $(this).slider('value')*2 - 2));
+
+		}
+	});
+
+	resizeViewport();
+
+	$('.magazine').addClass('animated');
+
+}
+
+// Zoom icon
+
+ $('.zoom-icon').bind('mouseover', function() { 
+ 	
+ 	if ($(this).hasClass('zoom-icon-in'))
+ 		$(this).addClass('zoom-icon-in-hover');
+
+ 	if ($(this).hasClass('zoom-icon-out'))
+ 		$(this).addClass('zoom-icon-out-hover');
+ 
+ }).bind('mouseout', function() { 
+ 	
+ 	 if ($(this).hasClass('zoom-icon-in'))
+ 		$(this).removeClass('zoom-icon-in-hover');
+ 	
+ 	if ($(this).hasClass('zoom-icon-out'))
+ 		$(this).removeClass('zoom-icon-out-hover');
+
+ }).bind('click', function() {
+
+ 	if ($(this).hasClass('zoom-icon-in'))
+ 		$('.magazine-viewport').zoom('zoomIn');
+ 	else if ($(this).hasClass('zoom-icon-out'))	
+		$('.magazine-viewport').zoom('zoomOut');
+
+ });
+
+ $('#canvas').hide();
+
+
+// Load the HTML4 version if there's not CSS transform
+
+yepnope({
+	test : Modernizr.csstransforms,
+	yep: ['../../lib/turn.min.js'],
+	nope: ['../../lib/turn.html4.min.js', 'css/jquery.ui.html4.css'],
+	both: ['../../lib/zoom.min.js', 'css/jquery.ui.css', 'js/magazine.js', 'css/magazine.css'],
+	complete: loadApp
+});
+
+</script>
+
+</body>
+</html>
@@ -0,0 +1,143 @@
+.turnjs-slider{
+	width:600px;
+	height:8px;
+	background:rgba(0,0,0, 0.2);
+	-webkit-border-radius:5px;
+	-moz-border-radius:5px;
+	-o-border-radius:5px;
+	-ms-border-radius:5px;
+	border-radius:5px;
+	margin:20px auto;
+}
+
+.turnjs-slider .thumbnail{
+	width:115px;
+	height:85px;
+	position:absolute;
+	background:rgba(0,0,0, 0.5);
+	z-index:10000;
+	top:-100px;
+	left:-17px;
+	display:none;
+
+	-webkit-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-webkit-transition:-webkit-transform 0.2s;
+	-webkit-border-radius:5px;
+
+	-moz-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-moz-transition:-moz-transform 0.2s;
+	-moz-border-radius:5px;
+
+	-o-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-o-transition:-o-transform 0.2s;
+	-o-border-radius:5px;
+
+	-ms-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-ms-transition:-ms-transform 0.2s;
+	-ms-border-radius:5px;
+
+	transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	transition:transform 0.2s;
+	border-radius:5px;
+}
+
+.no-transition{
+	-webkit-transition:none;
+	-moz-transition:none;
+	-o-transition:none;
+	-ms-transition:none;
+}
+
+.turnjs-slider .thumbnail div{
+	width:100px;
+	margin:7px;
+	height:70px;
+	background-color:white;
+}
+
+.turnjs-slider .ui-state-hover .thumbnail{
+	display:block;
+	opacity:0;
+}
+
+.turnjs-slider .ui-state-active .thumbnail{
+	display:block;
+	opacity:1;
+	-webkit-transform:scale(1, 1);
+	-moz-transform:scale(1, 1);
+	-o-transform:scale(1, 1);
+	-ms-transform:scale(1, 1);
+	transform:scale(1, 1);
+}
+
+/* Layout helpers
+----------------------------------*/
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+}
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.turnjs-slider .ui-widget-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.turnjs-slider .ui-slider {
+	position: relative;
+	text-align: left;
+}
+
+.turnjs-slider .ui-slider-handle{
+	position: absolute;
+	z-index:0;
+	width:80px;
+	height: 8px;
+	cursor: default;
+	-webkit-border-radius:5px;
+	-moz-border-radius:5px;
+	-ms-border-radius:5px;
+	border-radius:5px;
+}
+
+.turnjs-slider .ui-slider-horizontal {
+	height: 8px;
+	width:520px;
+	margin-left:39px;
+}
+
+.turnjs-slider .ui-slider-horizontal .ui-slider-handle {
+	margin-left:-40px;
+	margin-top:-1px;
+}
+
+/* Interaction states
+----------------------------------*/
+.turnjs-slider .ui-slider-handle{
+	border:1px solid white;
+	background-color:black;
+	opacity:0.2;
+	display:block;
+	-webkit-transition:opacity 0.2s;
+	-moz-transition:opacity 0.2s;
+	-ms-transition:opacity 0.2s;
+	-o-transition:opacity 0.2s;
+	transition:opacity 0.2s;
+}
+
+.turnjs-slider .ui-state-hover{
+	opacity:0.4;
+}
+
+.turnjs-slider .ui-state-active{
+	opacity:1;
+}
+
@@ -0,0 +1,16 @@
+.turnjs-slide{
+	width:600px;
+	height:8px;
+	background-color:#B4B4B4;
+	border-radius:5px;
+	margin:20px auto;
+}
+
+.turnjs-slide .ui-slider .ui-slider-handle{
+	background-color:#8F8F8F;
+	z-index:10000;
+}
+
+.turnjs-slide .thumbnail{
+	background: #666;
+}
@@ -0,0 +1,14 @@
+/* Steve jobs' book */
+
+.sj-book .even{
+	background-image:url(../pics/gradient-page-left.jpg);
+	background-position:right top;
+	background-repeat:repeat-y;
+}
+
+.sj-book .odd{
+	background-image:url(../pics/gradient-page-right.jpg);
+	background-position:left top;
+	background-repeat:repeat-y;
+}
+
@@ -0,0 +1,375 @@
+/* Steve jobs' book */
+
+@font-face {
+  font-family: 'Stempel-Garamond-W01-Roman';
+  font-style: normal;
+  font-weight: normal;
+  src: url('../fonts/Stempel-Garamond-W01-Roman.woff') format('woff');
+}
+
+body, ul, table, form{
+	margin:0;
+	padding:0;
+	overflow:hidden;
+}
+
+.animated{
+	-webkit-transition:margin-left 0.2s ease-in-out;
+	-moz-transition:margin-left 0.2s ease-in-out;
+	-o-transition:margin-left 0.2s ease-in-out;
+	-ms-transition:margin-left 0.2s ease-in-out;
+	transition:margin-left 0.2s ease-in-out;
+}
+
+#canvas{
+	width: 960px;
+	height: 600px;
+	margin: 100px auto;
+}
+
+#book-zoom{
+	-webkit-transition: -webkit-transform 1s;
+	-moz-transition: -moz-transform 1s;
+	-ms-transition: -ms-transform 1s;
+	-o-transition: -o-transform 1s;
+	transition: transform 1s;
+}
+
+.sj-book{
+	width:960px;
+	height:600px;
+}
+
+.sj-book h1{
+	font-family: "Stempel-Garamond-W01-Roman";
+	font-size: 38px;
+	font-weight: lighter;
+	margin: 20px 0;
+	color: #333;
+	-webkit-text-fill-color: #333;
+	-webkit-text-stroke-color: white;
+	-webkit-text-stroke-width: 0.005em;
+}
+
+.sj-book h2{
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color:#444;
+    font-size:16px;
+	letter-spacing:2px;
+	font-weight: 400;
+}
+
+.sj-book .book-content{
+	font-family: "Stempel-Garamond-W01-Roman";
+	font-size:16px;
+	margin:70px 40px;
+}
+
+.sj-book blockquote{
+	color:#586078;
+	margin:10px 0;
+	font-style:italic;
+}
+
+.sj-book blockquote:before{
+	content: "\201C";
+	color:#333D53;
+	font-size:20px;
+}
+
+.sj-book blockquote:after{
+	content: "\201D";
+	color:#333D53;
+	font-size:20px;
+}
+
+.sj-book cite{
+	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-size:13px;
+	font-weight:200;
+	font-style:normal;
+	color:#666;
+}
+
+.sj-book .book-content .center-pic{
+	margin:0;
+	text-indent:0;
+	text-align:center;
+}
+
+.sj-book .zoom-this:hover{
+	opacity:0.9;
+	cursor:pointer;
+}
+
+.sj-book .book-content p{
+	text-indent: 18px;
+	margin: 20px 0;
+	line-height: 22px;
+}
+
+.sj-book .left-pic{
+	float:left;
+	margin-top:15px;
+	margin-right:15px;
+	margin-bottom:15px;
+}
+
+.animated{
+	-webkit-transition:margin-left 0.2s ease-in-out;
+	-moz-transition:margin-left 0.2s ease-in-out;
+	-o-transition:margin-left 0.2s ease-in-out;
+	-ms-transition:margin-left 0.2s ease-in-out;
+	transition:margin-left 0.2s ease-in-out;
+}
+
+.sj-book .shadow{
+	-webkit-transition: -webkit-box-shadow 0.5s;
+	-moz-transition: -moz-box-shadow 0.5s;
+	-o-transition: -webkit-box-shadow 0.5s;
+	-ms-transition: -ms-box-shadow 0.5s;
+
+	-webkit-box-shadow:0 0 10px #999;
+	-moz-box-shadow:0 0 10px #999;
+	-ms-box-shadow:0 0 10px #999;
+	-o-box-shadow:0 0 10px #999;
+	box-shadow:0 0 10px #999;
+}
+
+.sj-book .page{
+	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	box-shadow:0 0 20px rgba(0,0,0,0.2);
+}
+
+.zoom-pic{
+	position:absolute;
+	top:0;
+	left:0;
+	width:100%;
+	height:100%;
+	background-color:rgba(0,0,0,0.2);
+	z-index:999;
+}
+
+.zoom-pic img{
+	-webkit-box-shadow:0 0 20px #999;
+	-moz-box-shadow:0 0 20px #999;
+	-o-box-shadow:0 0 20px #999;
+	-ms-box-shadow:0 0 20px #999;
+	box-shadow:0 0 20px #999;
+}
+
+.sj-book .p1,
+.sj-book .p2,
+.sj-book .p3, 
+.sj-book .p111, 
+.sj-book .p112{
+	background-color:white;
+	background-image:url(../pics/book-covers.jpg) !important;
+}
+
+.sj-book .p1{
+	background-position:0 0;
+}
+
+.sj-book .p1 .side{
+	width:5px;
+	height:600px;
+	position:absolute;
+	top:0;
+	left:475px;
+
+	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb), color-stop(0.5,  #ddd), color-stop(1,  #bbb));
+	background-image:-webkit-linear-gradient(left, #bbb, #ddd, #bbb);
+	background-image:-moz-linear-gradient(left, #bbb, #ddd, #bbb);
+	background-image:-ms-linear-gradient(left, #bbb, #ddd, #bbb);
+	background-image:-o-linear-gradient(left, #bbb, #ddd, #bbb);
+	background-image:linear-gradient(left, #bbb, #ddd, #bbb);
+	
+	-webkit-transform:rotateY(-90deg);
+	-moz-transform:rotateY(-90deg);
+	-o-transform:rotateY(-90deg);
+	-ms-transform:rotateY(-90deg);
+	transform:rotateY(-90deg);
+
+	-webkit-transform-origin:top right;
+	-moz-transform-origin:top right;
+	-o-transform-origin:top right;
+	-ms-transform-origin:top right;
+	transform-origin:top right;
+	z-index:100000;
+
+}
+
+.sj-book-transform div[page="1"] > div, .sj-book-transform div[page="2"] > div{
+	overflow:visible !important;
+}
+
+.sj-book .depth{
+	background-image:url(../pics/pages-depth.png);
+	position:absolute;
+	top:7px;
+	width:16px;
+	height:590px;
+}
+
+.sj-book .front-side .depth{
+	left:4px;
+	background-position:0 0;
+}
+
+.sj-book .back-side .depth{
+	right:4px;
+	background-position:right 0;
+}
+
+
+.sj-book .p2{
+	background-position:-480px 0 !important;
+}
+
+.sj-book .p3{
+	background-position:-1920px 0 !important;
+}
+
+.sj-book .p111{
+	background-position:-960px 0 !important;
+}
+
+.sj-book .p112{
+	background-position:-1440px 0 !important;
+}
+
+.sj-book .hard{
+	width:480px;
+	height:600px;
+	background-color:white;
+	-webkit-box-shadow:none;
+	-moz-box-shadow:none;
+	-ms-box-shadow:none;
+	box-shadow:none;
+}
+
+.sj-book .page-wrapper{
+	-webkit-perspective:2000px;
+	-moz-perspective: 2000px;
+	-ms-perspective: 2000px;
+	perspective: 2000px;
+}
+
+.sj-book .own-size{
+	width:460px;
+	height:582px;
+	background-color:white;
+	overflow:hidden;
+}
+
+.sj-book .even{
+	background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
+	background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
+	background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
+	background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
+	background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
+	background-image:linear-gradient(left, #fff 95%, #dadada 100%);
+}
+
+.sj-book .odd{
+	background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #fff), color-stop(1, #cacaca));
+	background-image:-webkit-linear-gradient(right, #fff 95%, #cacaca 100%);
+	background-image:-moz-linear-gradient(right, #fff 95%, #cacaca 100%);
+	background-image:-ms-linear-gradient(right, #fff 95%, #cacaca 100%);
+	background-image:-o-linear-gradient(right, #fff 95%, #cacaca 100%);
+	background-image:linear-gradient(right, #fff 95%, #cacaca 100%);
+}
+
+.sj-book .loader{
+	background-image:url(../pics/loader.gif);
+	width:22px;
+	height:22px;
+	position:absolute;
+	top:280px;
+	left:219px;
+}
+
+.sj-book .page-number{
+	color:#999;
+	width:100%;
+	bottom:25px;
+	position:absolute;
+	display:block;
+	text-align: center;
+	line-height:30px;
+	font-size:11px;
+}
+
+.sj-book .table-contents{
+	font-size:16px;
+	width:300px;
+	margin:80px auto;
+	color:#ccc;
+}
+
+.sj-book .table-contents li{
+	list-style:none;
+	line-height:25px;
+}
+
+.sj-book .table-contents span{
+	float:right;
+}
+
+.sj-book .table-contents a{
+	float:left;
+	width:100%;
+	clear:both;
+	text-decoration:none;
+	color:#333;
+	margin:2px 0;
+	padding:0 10px;
+}
+
+.sj-book .table-contents a:hover{
+	background:#CAD1EE;
+	float:left;
+	width:100%;
+	clear:both;
+	text-decoration:none;
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	-o-border-radius:10px;
+	-ms-border-radius:10px;
+	border-radius:10px;
+}
+
+.sj-book .book-content .capital,
+.sj-book .book-content .no-indent{
+	text-indent: 0;
+}
+
+.sj-book .capital:first-letter {
+    display:block;
+    float:left;
+    font-size: 300%;
+    line-height: 70%;
+	margin-right: 6px;
+	margin-top: 7px;
+	margin-left:18px;
+}
+
+.ie8 .sj-book .even,
+.ie9 .sj-book .even{
+	background-image:url(../pics/gradient-page-left.jpg);
+	background-position:right top;
+	background-repeat:repeat-y;
+}
+
+.ie8 .sj-book .odd,
+.ie9 .sj-book .odd{
+	background-image:url(../pics/gradient-page-right.jpg);
+	background-position:left top;
+	background-repeat:repeat-y;
+}
+
@@ -0,0 +1,292 @@
+<!doctype html>
+<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
+<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
+<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
+<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
+<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
+<head>
+<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
+<script type="text/javascript" src="../../extras/jquery-ui-1.8.20.custom.min.js"></script>
+<script type="text/javascript" src="../../extras/jquery.mousewheel.min.js"></script>
+<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>
+<script type="text/javascript" src="../../lib/hash.js"></script>
+</head>
+<body>
+
+<div id="canvas">
+	<div id="book-zoom">
+		<div class="sj-book">
+			<div depth="5" class="hard"> <div class="side"></div> </div>
+			<div depth="5" class="hard front-side"> <div class="depth"></div> </div>
+			<div class="own-size"></div>
+			<div class="own-size even"></div>
+			<div class="hard fixed back-side p111"> <div class="depth"></div> </div>
+			<div class="hard p112"></div>
+		</div>
+	</div>
+	<div id="slider-bar" class="turnjs-slider">
+		<div id="slider"></div>
+	</div>
+</div>
+
+
+<script type="text/javascript">
+
+function loadApp() {
+	
+	var flipbook = $('.sj-book');
+
+	// Check if the CSS was already loaded
+	
+	if (flipbook.width()==0 || flipbook.height()==0) {
+		setTimeout(loadApp, 10);
+		return;
+	}
+
+	// Mousewheel
+
+	$('#book-zoom').mousewheel(function(event, delta, deltaX, deltaY) {
+
+		var data = $(this).data(),
+			step = 30,
+			flipbook = $('.sj-book'),
+			actualPos = $('#slider').slider('value')*step;
+
+		if (typeof(data.scrollX)==='undefined') {
+			data.scrollX = actualPos;
+			data.scrollPage = flipbook.turn('page');
+		}
+
+		data.scrollX = Math.min($( "#slider" ).slider('option', 'max')*step,
+			Math.max(0, data.scrollX + deltaX));
+
+		var actualView = Math.round(data.scrollX/step),
+			page = Math.min(flipbook.turn('pages'), Math.max(1, actualView*2 - 2));
+
+		if ($.inArray(data.scrollPage, flipbook.turn('view', page))==-1) {
+			data.scrollPage = page;
+			flipbook.turn('page', page);
+		}
+
+		if (data.scrollTimer)
+			clearInterval(data.scrollTimer);
+		
+		data.scrollTimer = setTimeout(function(){
+			data.scrollX = undefined;
+			data.scrollPage = undefined;
+			data.scrollTimer = undefined;
+		}, 1000);
+
+	});
+
+	// Slider
+
+	$( "#slider" ).slider({
+		min: 1,
+		max: 100,
+
+		start: function(event, ui) {
+
+			if (!window._thumbPreview) {
+				_thumbPreview = $('<div />', {'class': 'thumbnail'}).html('<div></div>');
+				setPreview(ui.value);
+				_thumbPreview.appendTo($(ui.handle));
+			} else
+				setPreview(ui.value);
+
+			moveBar(false);
+
+		},
+
+		slide: function(event, ui) {
+
+			setPreview(ui.value);
+
+		},
+
+		stop: function() {
+
+			if (window._thumbPreview)
+				_thumbPreview.removeClass('show');
+			
+			$('.sj-book').turn('page', Math.max(1, $(this).slider('value')*2 - 2));
+
+		}
+	});
+
+
+	// URIs
+	
+	Hash.on('^page\/([0-9]*)$', {
+		yep: function(path, parts) {
+
+			var page = parts[1];
+
+			if (page!==undefined) {
+				if ($('.sj-book').turn('is'))
+					$('.sj-book').turn('page', page);
+			}
+
+		},
+		nop: function(path) {
+
+			if ($('.sj-book').turn('is'))
+				$('.sj-book').turn('page', 1);
+		}
+	});
+
+	// Arrows
+
+	$(document).keydown(function(e){
+
+		var previous = 37, next = 39;
+
+		switch (e.keyCode) {
+			case previous:
+
+				$('.sj-book').turn('previous');
+
+			break;
+			case next:
+				
+				$('.sj-book').turn('next');
+
+			break;
+		}
+
+	});
+
+
+	// Flipbook
+
+	flipbook.bind(($.isTouch) ? 'touchend' : 'click', zoomHandle);
+
+	flipbook.turn({
+		elevation: 50,
+		acceleration: !isChrome(),
+		autoCenter: true,
+		gradients: true,
+		duration: 1000,
+		pages: 112,
+		when: {
+			turning: function(e, page, view) {
+				
+				var book = $(this),
+					currentPage = book.turn('page'),
+					pages = book.turn('pages');
+
+				if (currentPage>3 && currentPage<pages-3) {
+				
+					if (page==1) {
+						book.turn('page', 2).turn('stop').turn('page', page);
+						e.preventDefault();
+						return;
+					} else if (page==pages) {
+						book.turn('page', pages-1).turn('stop').turn('page', page);
+						e.preventDefault();
+						return;
+					}
+				} else if (page>3 && page<pages-3) {
+					if (currentPage==1) {
+						book.turn('page', 2).turn('stop').turn('page', page);
+						e.preventDefault();
+						return;
+					} else if (currentPage==pages) {
+						book.turn('page', pages-1).turn('stop').turn('page', page);
+						e.preventDefault();
+						return;
+					}
+				}
+
+				updateDepth(book, page);
+				
+				if (page>=2)
+					$('.sj-book .p2').addClass('fixed');
+				else
+					$('.sj-book .p2').removeClass('fixed');
+
+				if (page<book.turn('pages'))
+					$('.sj-book .p111').addClass('fixed');
+				else
+					$('.sj-book .p111').removeClass('fixed');
+
+				Hash.go('page/'+page).update();
+					
+			},
+
+			turned: function(e, page, view) {
+
+				var book = $(this);
+
+				if (page==2 || page==3) {
+					book.turn('peel', 'br');
+				}
+
+				updateDepth(book);
+				
+				$('#slider').slider('value', getViewNumber(book, page));
+
+				book.turn('center');
+
+			},
+
+			start: function(e, pageObj) {
+		
+				moveBar(true);
+
+			},
+
+			end: function(e, pageObj) {
+			
+				var book = $(this);
+
+				updateDepth(book);
+
+				setTimeout(function() {
+					
+					$('#slider').slider('value', getViewNumber(book));
+
+				}, 1);
+
+				moveBar(false);
+
+			},
+
+			missing: function (e, pages) {
+
+				for (var i = 0; i < pages.length; i++) {
+					addPage(pages[i], $(this));
+				}
+
+			}
+		}
+	});
+
+
+	$('#slider').slider('option', 'max', numberOfViews(flipbook));
+
+	flipbook.addClass('animated');
+
+	// Show canvas
+
+	$('#canvas').css({visibility: ''});
+}
+
+// Hide canvas
+
+$('#canvas').css({visibility: 'hidden'});
+
+// Load turn.js
+
+yepnope({
+	test : Modernizr.csstransforms,
+	yep: ['../../lib/turn.min.js'],
+	nope: ['../../lib/turn.html4.min.js', 'css/jquery.ui.html4.css', 'css/steve-jobs-html4.css'],
+	both: ['js/steve-jobs.js', 'css/jquery.ui.css', 'css/steve-jobs.css'],
+	complete: loadApp
+});
+
+</script>
+
+</body>
+</html>
@@ -0,0 +1,237 @@
+/* Steve jobs' book */
+
+function updateDepth(book, newPage) {
+
+	var page = book.turn('page'),
+		pages = book.turn('pages'),
+		depthWidth = 16*Math.min(1, page*2/pages);
+
+		newPage = newPage || page;
+
+	if (newPage>3)
+		$('.sj-book .p2 .depth').css({
+			width: depthWidth,
+			left: 20 - depthWidth
+		});
+	else
+		$('.sj-book .p2 .depth').css({width: 0});
+
+		depthWidth = 16*Math.min(1, (pages-page)*2/pages);
+
+	if (newPage<pages-3)
+		$('.sj-book .p111 .depth').css({
+			width: depthWidth,
+			right: 20 - depthWidth
+		});
+	else
+		$('.sj-book .p111 .depth').css({width: 0});
+
+}
+
+function loadPage(page) {
+
+	$.ajax({url: 'pages/page' + page + '.html'}).
+		done(function(pageHtml) {
+			$('.sj-book .p' + page).html(pageHtml.replace('samples/steve-jobs/', ''));
+		});
+
+}
+
+function addPage(page, book) {
+
+	var id, pages = book.turn('pages');
+
+	if (!book.turn('hasPage', page)) {
+
+		var element = $('<div />',
+			{'class': 'own-size',
+				css: {width: 460, height: 582}
+			}).
+			html('<div class="loader"></div>');
+
+		if (book.turn('addPage', element, page)) {
+			loadPage(page);
+		}
+
+	}
+}
+
+function numberOfViews(book) {
+
+	return book.turn('pages') / 2 + 1;
+
+}
+
+function getViewNumber(book, page) {
+
+	return parseInt((page || book.turn('page'))/2 + 1, 10);
+
+}
+
+function zoomHandle(e) {
+
+	if ($('.sj-book').data().zoomIn)
+		zoomOut();
+	else if (e.target && $(e.target).hasClass('zoom-this')) {
+		zoomThis($(e.target));
+	}
+
+}
+
+function zoomThis(pic) {
+
+	var	position, translate,
+		tmpContainer = $('<div />', {'class': 'zoom-pic'}),
+		transitionEnd = $.cssTransitionEnd(),
+		tmpPic = $('<img />'),
+		zCenterX = $('#book-zoom').width()/2,
+		zCenterY = $('#book-zoom').height()/2,
+		bookPos = $('#book-zoom').offset(),
+		picPos = {
+			left: pic.offset().left - bookPos.left,
+			top: pic.offset().top - bookPos.top
+		},
+		completeTransition = function() {
+			$('#book-zoom').unbind(transitionEnd);
+
+			if ($('.sj-book').data().zoomIn) {
+				tmpContainer.appendTo($('body'));
+
+				$('body').css({'overflow': 'hidden'});
+				
+				tmpPic.css({
+					margin: position.top + 'px ' + position.left+'px'
+				}).
+				appendTo(tmpContainer).
+				fadeOut(0).
+				fadeIn(500);
+			}
+		};
+
+		$('.sj-book').data().zoomIn = true;
+
+		$('.sj-book').turn('disable', true);
+
+		$(window).resize(zoomOut);
+		
+		tmpContainer.click(zoomOut);
+
+		tmpPic.load(function() {
+			var realWidth = $(this)[0].width,
+				realHeight = $(this)[0].height,
+				zoomFactor = realWidth/pic.width(),
+				picPosition = {
+					top:  (picPos.top - zCenterY)*zoomFactor + zCenterY + bookPos.top,
+					left: (picPos.left - zCenterX)*zoomFactor + zCenterX + bookPos.left
+				};
+
+
+			position = {
+				top: ($(window).height()-realHeight)/2,
+				left: ($(window).width()-realWidth)/2
+			};
+
+			translate = {
+				top: position.top-picPosition.top,
+				left: position.left-picPosition.left
+			};
+
+			$('.samples .bar').css({visibility: 'hidden'});
+			$('#slider-bar').hide();
+			
+		
+			$('#book-zoom').transform(
+				'translate('+translate.left+'px, '+translate.top+'px)' +
+				'scale('+zoomFactor+', '+zoomFactor+')');
+
+			if (transitionEnd)
+				$('#book-zoom').bind(transitionEnd, completeTransition);
+			else
+				setTimeout(completeTransition, 1000);
+
+		});
+
+		tmpPic.attr('src', pic.attr('src'));
+
+}
+
+function zoomOut() {
+
+	var transitionEnd = $.cssTransitionEnd(),
+		completeTransition = function(e) {
+			$('#book-zoom').unbind(transitionEnd);
+			$('.sj-book').turn('disable', false);
+			$('body').css({'overflow': 'auto'});
+			moveBar(false);
+		};
+
+	$('.sj-book').data().zoomIn = false;
+
+	$(window).unbind('resize', zoomOut);
+
+	moveBar(true);
+
+	$('.zoom-pic').remove();
+	$('#book-zoom').transform('scale(1, 1)');
+	$('.samples .bar').css({visibility: 'visible'});
+	$('#slider-bar').show();
+
+	if (transitionEnd)
+		$('#book-zoom').bind(transitionEnd, completeTransition);
+	else
+		setTimeout(completeTransition, 1000);
+}
+
+
+function moveBar(yes) {
+	if (Modernizr && Modernizr.csstransforms) {
+		$('#slider .ui-slider-handle').css({zIndex: yes ? -1 : 10000});
+	}
+}
+
+function setPreview(view) {
+
+	var previewWidth = 115,
+		previewHeight = 73,
+		previewSrc = 'pages/preview.jpg',
+		preview = $(_thumbPreview.children(':first')),
+		numPages = (view==1 || view==$('#slider').slider('option', 'max')) ? 1 : 2,
+		width = (numPages==1) ? previewWidth/2 : previewWidth;
+
+	_thumbPreview.
+		addClass('no-transition').
+		css({width: width + 15,
+			height: previewHeight + 15,
+			top: -previewHeight - 30,
+			left: ($($('#slider').children(':first')).width() - width - 15)/2
+		});
+
+	preview.css({
+		width: width,
+		height: previewHeight
+	});
+
+	if (preview.css('background-image')==='' ||
+		preview.css('background-image')=='none') {
+
+		preview.css({backgroundImage: 'url(' + previewSrc + ')'});
+
+		setTimeout(function(){
+			_thumbPreview.removeClass('no-transition');
+		}, 0);
+
+	}
+
+	preview.css({backgroundPosition:
+		'0px -'+((view-1)*previewHeight)+'px'
+	});
+}
+
+function isChrome() {
+
+	// Chrome's unsolved bug
+	// http://code.google.com/p/chromium/issues/detail?id=128488
+
+	return navigator.userAgent.indexOf('Chrome')!=-1;
+
+}
@@ -0,0 +1,22 @@
+<div class="book-content">
+
+<h1>Youth</h1>
+
+<h2>The jobs family</h2>
+
+<p class="capital">
+Steve Jobs was born on February 24, 1955, in the city of San Francisco. His biological mother was an unwed graduate student named Joanne Simpson,
+and his biological father was either a political science or mathematics professor, a native Syrian named Abdulfattah John Jandali.
+</p>
+
+
+<p>
+Being born out of wedlock in the puritan America of the 1950s, the baby
+was put up for adoption. Joanne had a college education, and she insisted that the future parents of her boy be just as well educated. Unfortunately,
+the candidates, Paul and Clara Jobs, did not meet her expectations: they were a lower-middle class couple that had settled in the Bay Area after the
+war. Paul was a machinist from the Midwest who had
+</p>
+
+
+</div>
+<span class="page-number">10</span>
@@ -0,0 +1,14 @@
+<div class="book-content">
+
+<p>Yet, once again, the market proved the critics wrong, 
+and iPad turned out an amazing success. Apple sold 7.5 million of them as of September 2010,
+representing close to 8% of its 2010 fiscal-year revenues (iPods amounted for 13%).
+</p>
+
+<p>
+It is worth thinking about these comments for a minute. 
+<img class="left-pic zoom-this" src="samples/steve-jobs/pics/46.jpg" width="120" height="171">
+If we assume Steve Jobs is right about this, and almost everyone (but Microsoft’s Steve Ballmer) agrees he is, then he will be a unique case in history of someone who has been instrumental in both creating and putting an end to an industry. Indeed, Apple was a key player in starting of the personal computing revolution in the early 1980s, and there would not have been an Apple without Steve Jobs. But Apple will also likely be the company leading the transition away from the PC, and this time
+</p>
+</div>
+<span class="page-number">100</span>
@@ -0,0 +1,11 @@
+<div class="book-content">
+
+<p class="no-indent">
+ there’s no denying this would not have happened so quickly without the iOS mobile revolution... What other man can be credited for such a huge impact on a multibillion-dollar industry?
+</p>
+
+<p>
+It is worth thinking about these comments for a minute. If we assume Steve Jobs is right about this, and almost everyone (but Microsoft’s Steve Ballmer) agrees he is, then he will be a unique case in history of someone who has been instrumental in both creating and putting an end to an industry. Indeed, Apple was a key player in starting of the personal computing revolution in the early 1980s, and there would not have been an Apple without Steve Jobs. But Apple will also likely be the company leading the transition away from the PC, and this time there’s no denying this would not have happened so quickly without the iOS mobile revolution... What other man can be credited for such a huge impact on a multibillion-dollar industry?
+</p>
+</div>
+<span class="page-number">101</span>
@@ -0,0 +1,17 @@
+<div class="book-content">
+
+<h2>Apple’s possible future</h2>
+<p>
+2010 has seen Apple’s dominance in the high-tech industry reinforced. The company is the market leader or a dominant player in four huge and growing markets: digital music players (with iPod), digital music distribution (with iTunes), smartphones and mobile apps (with iPhone, iPod touch and the App Store), and tablet PCs (with iPad).
+</p>
+
+<p>
+This unique position at the crossroads of the digital revolution, makes the fruit company the subject of many a fantasy. Two trends have constantly re- emerged when speculating on Apple’s future.
+</p>
+
+<p>
+The first is its take on the television market. Steve Jobs himself has commented at length on it at D8 (again), saying it was impossible for Apple
+to enter this market because of its structure. He talked about an insoluble go-to-market impossibility.
+</p>
+</div>
+<span class="page-number">102</span>
@@ -0,0 +1,19 @@
+<div class="book-content">
+
+
+<p>
+<img class="left-pic zoom-this" src="samples/steve-jobs/pics/47.jpg" width="120" height="162">
+Yet only three months later, he introduced a revamped, network-based
+Apple TV at the traditional September Apple Media Event. The new box is iOS-based and most people think it won’t be long before it runs iOS apps.
+To speak more generally, it is very likely that, unlike what Steve Jobs has explained, Apple will try very hard to enter and revolutionize this “other”
+consumer electronics space that is television, and the Living Room in general — following a strategy that was conceived some four years earlier
+with iPod hi-fi.
+</p>
+
+<p>
+Another controversial issue is that of Apple’s relation toward its new arch- rival, Google. This relation is controversial because for several years, Google
+was not an enemy, but an ally in the war against the behemoth of Redmond, Microsoft. Google’s CEO Eric Schmidt even
+</p>
+
+</div>
+<span class="page-number">103</span>
@@ -0,0 +1,22 @@
+<div class="book-content">
+
+<p class="no-indent">
+sat on Apple’s board
+of directors for three whole years, from 2006 to 2009. But it’s no wonder he left in 2009: by entering the smartphone market with its Android mobile OS
+(and its own app store!), Google had become a direct competitor of Apple. This confict of interest was as good a reason for him to leave, as Steve Jobs’
+shrinking tolerance for what he felt was a plain and simple betrayal.
+</p>
+
+<h2>Has Steve changed?</h2>
+<p>
+Finally, an old debate about Steve’s personality has also re-emerged in
+2010: has he changed? Although some of his traits, such as his propensity to take the spotlight then and again to unveil insanely great products to the
+world, have not changed... People have noticed two minor evolutions in his public persona.
+</p>
+
+<p>The first is his increasing habit of communicating by writing emails to
+customers.
+</p> 
+
+</div>
+<span class="page-number">104</span>
@@ -0,0 +1,18 @@
+<div class="book-content">
+
+<p class="no-indent">
+them, so often. Usually, he has used them to publicly respond to hot issues about Apple or to spread rumors himself. Some even pretend he has theorized this method, which is in essence a new way for CEOs to deal with PR, bypassing the traditional press.
+</p>
+
+<p>
+<img class="left-pic zoom-this" src="samples/steve-jobs/pics/48.jpg" width="120" height="124">
+Another change is more profound, and has to do with his implication on
+charity issues. Steve’s reputation in Silicon Valley was not very positive on this particular topic, as he was often dismissed for basically being stingy.
+Yet, in addition to large donations to charities, he spoke publicly twice for the defense of organ donations in 2010, and even played a critical role in
+the creation of the nations’ first organ donor registry in October 2010. This was obviously a praiseworthy side effect of the liver transplant that had
+saved his life one year earlier.
+</p>
+
+
+</div>
+<span class="page-number">105</span>
--- a/Show More
+++ b/Show More