Skip to content
Browse files

Updates and overhaul of book effect

  • Loading branch information...
2 parents 7ac8f36 + b993e0d commit 0b3230bf177267394da5f3c4ceaca86c8491d286 Matt Lantz committed Nov 19, 2012
View
30 css/default.css
@@ -36,23 +36,41 @@ body {
/* Logo sprite */
+#logo{
+ margin: 0 auto 20px;
+ background: url('../images/backgrounds/wave_header.jpg');
+ height: 190px;
+ border: 10px solid #111;
+ border-radius: 10px;
+ box-shadow: 0px 0px 15px #666;
+ max-width: 1460px;
+}
+
#logo-alice-img {
background: transparent url('../images/AliceMain.png') no-repeat 0px 0px;
float: left;
width: 160px;
height: 250px;
}
+#logo-alice-img-original {
+ background: transparent url('../images/logo_header_plain_sprite.png') no-repeat 0px 0px;
+ float: left;
+ width: 114px;
+ height: 180px;
+ margin-top: 15px;
+}
+
#logo-alice-txt-alice{
- padding: 40px 0 0 0;
+ padding: 15px 0 0 0;
}
#logo-alice-txt-a {
background: transparent url('../images/logo_header_plain_sprite.png') no-repeat -120px 0px;
float: left;
width: 114px;
height: 150px;
- margin-left: -30px;
+ margin-left: -10px;
}
#logo-alice-txt-l {
background: transparent url('../images/logo_header_plain_sprite.png') no-repeat -234px 0px;
@@ -106,7 +124,7 @@ a:hover {
}
.card-edge {
- background: #F2DCC2; /* url(../../images/backgrounds/wave_header.jpg) no-repeat */
+ background: #F2DCC2; /* url(../images/backgrounds/wave_header.jpg) no-repeat */
border-radius: 10px;
padding: 20px;
margin: 0px 15px;
@@ -121,7 +139,7 @@ a:hover {
opacity: 0.9;
/*border: 1px solid #B5B8BA;*/
border-radius: 15px;
- box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.75);
+ box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
min-height: 250px;
}
@@ -238,12 +256,12 @@ a.button, button {
min-height: 300px;
background: #F2F0D5;
border-radius: 20px;
- border: 1px solid #ddd;
+ box-shadow: 0px 0px 10px #999;
}
.infoBox a{
color: #333;
- text-decoration: none;
+ text-decoration: underline;
}
.infoBox a:hover{
View
27 demos/builder.html
@@ -22,7 +22,6 @@
<style type="text/css">
body, select {
font: 8pt Arial, sans-serif;
- overflow: hidden;
}
legend, label, .label {
@@ -47,26 +46,34 @@
#testDiv {
position: absolute;
- top: 0;
+ top: 50px;
left: 0;
width: 100%;
height: 161px;
z-index: 1;
}
#settingsDiv {
+ position: relative;
+ top: 20px;
+ width: 650px;
+ height: 980px;
+ z-index: 0;
+ margin: 0 auto;
+ }
+ #bottomBox {
background-color: #EEE;
- position: absolute;
- bottom: 0;
- left: 0;
+ position: relative;
+ top: 180px;
width: 100%;
- height: 380px;
- overflow-y: auto;
+ height: 980px;
z-index: 0;
+ margin: 0 auto;
}
</style>
</head>
<body>
+ <h1><a href="../index.html">AliceJS</a> &gt; <a href="index.html">Demos</a> &gt; Builder</h1>
<!-- Test Elements -->
<div id="testDiv">
<div style="padding: 0px;">
@@ -80,8 +87,8 @@
</div>
<!-- Settings -->
+ <div id="bottomBox">
<div id="settingsDiv">
- <h1><a href="../index.html">AliceJS</a> &gt; <a href="index.html#moredemos">Demos</a> &gt; Builder</h1>
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td>&nbsp;</td>
@@ -441,8 +448,8 @@
</tr>
</table>
</div>
-
- <script src="../js/alice.js"></script>
+ </div>
+ <script src="../js/alice.min.js"></script>
<script src="builder.js"></script>
<script type="text/javascript">
View
442 demos/caterpillar.html
@@ -28,8 +28,37 @@
text-align: center;
margin: 100px auto;
}
+ #bookTwo{
+ width: 400px;
+ height: 400px;
+ text-align: center;
+ margin: 100px auto;
+ }
+ #bookThree{
+ width: 400px;
+ height: 400px;
+ text-align: center;
+ margin: 100px auto;
+ }
.page{
background: #444;
+ border-radius: 200px;
+ }
+ .pageB{
+ width: 100px;
+ height: 100px;
+ float: left;
+ margin: 10px;
+ background: #ccc;
+ }
+ .pageX{
+ background: #222;
+ }
+ .pageN{
+ background: #ccc;
+ }
+ .pageXL{
+ background: #666;
}
.page p{
color: #fff;
@@ -38,6 +67,10 @@
.page:nth-child(odd){
background: #888;
}
+ .subBooks{
+ position: relative;
+ height: 120px;
+ }
</style>
</head>
<body>
@@ -85,29 +118,10 @@ <h1 class="seo">AliceJS Demos</h1>
<div id="book_info" class="icon">
<a href="fx/book.html"><img src="../images/caterpillar.png" alt="Book" title="Book"></a>
</div>
- <p><a href="fx/book.html">Book</a> - The "book" effect generates book with the content provided in the child divs of the parent div, allowing the binding to be placed on any side of the parent div.</p>
- <div class="code">
- <pre class="prettyprint lang-js">
-
-alicejs.book({
- elems: "book",
- pageClass: '', // a class to add to pages
- shadow: true, // true || false
- speed: '500ms', // select a speed
- randomize: '15%' // string of percetange (impacts the speed of the page turns)
- paging: 'single', // single || double
- binding: "left", // left || right || top || bottom || center || middle
- wrap: true, // true || false
- controls: true, // true || false ( external controls )
- pageBackground: '#333', // string (basic css applied to the page backgrounds)
- controlsBackground: '#111', // string (basic css applied to the page backgrounds)
- inPageControls: true // true || false
-});
- </pre>
- </div>
+ <p><a href="fx/book.html">Caterpillar</a> - The "book" effect generates book with the content provided in the child divs of the parent div, allowing the binding to be placed on any side of the parent div.</p>
<div style="margin-left: 160px;">
- <h1>The Rules</h1>
+ <h1>General Book Effect Rules</h1>
<p>1. The book div, that is the parent of the pages must be sized in one of the following ways:
<br />pixels
<br />percentage
@@ -119,147 +133,256 @@ <h1 class="seo">AliceJS Demos</h1>
<br />2. The book div will dictate the details of the page sizes.
<br />3. All pages must be divs, they can have as much or as little content as desired.
</p>
+ <h1>But Wait! That's not all!</h1>
+ <p>Since the caterpillar effect is object based { example. var mybook = alicejs.notebook() } we make sure to not overstep our boundaries and put all the power in your hands. So what does this mean for you? It means you control the following aspects of your book:</p>
+ <p><b>Built In Functions and Feedback</b></p>
</div>
+
+ <div class="code">
+ <pre class="prettyprint lang-js">
+var mybook = alicejs.notebook({
+ elems: "book",
+ binding: "left",
+ wrap: false,
+ pageBackground: "#333"
+});
- <hr style="margin-left: 160px;" />
+//This is your basic notebook method call for the caterpillar effect.
- <h1 style="margin-left: 160px;">But Wait! That's not all!</h1>
- <p style="margin-left: 160px;">The Caterpillar plugin is riddled with a variety of tools that go beyond a standard book effect.</p>
+//Page Turn Methods
- <p style="margin-left: 160px;"><b>Information Feedback and Short Forms</b></p>
+mybook.nxtPage() //Moves to the next page
+mybook.prePage() //Flips to the previous page
- <div class="code">
- <pre class="prettyprint lang-js">
-alice.plugins.caterpillar //Standard call for all built in functions.
-_caterpillar //short form available for all built in functions.
+//Modify the book itself by adding content
+
+mybook.appendPages("div id") //Allows the specified div to be incorportated into the book as more pages
+mybook.book //Returns the book in document object form
+mybook.bookName //Returns the id of the book
+
+//Page Numbers and Totals
+
+mybook.pageNumber() //Returns the page number currently at the fore-front
+mybook.realPageCount //Returns the number of pages in the book
-.pageNumber //integer value of the current page
-.realPageCount //interger value of page total
- </pre>
- </div>
-
- <p style="margin-left: 160px;"><b>Events</b>: Note* These must be defined before the alicejs.book() function is called.</p>
- <div class="code">
- <pre class="prettyprint lang-js">
-bookStart //Called at page 1
-bookEnd //Called on last page
-pageTrigger //Called on each page
-
-//Example 1
-document.addEventListener("bookStart",
- function(){ console.log("This book has started!");
-}, false);
-
-//Example 2
-document.addEventListener("pageTrigger", function(){
- if(_caterpillar.pageNumber === 13){
- _caterpillar.loadMorePages('newgame.html', 'book');
- }
-}, false);
</pre>
</div>
+ </div>
- <p style="margin-left: 160px;"><b>Extra Functions</b></p>
+ <div class="spacer"></div>
+ <div class="card">
+ <div id="book_info" class="icon">
+ <a href="fx/book.html"><img src="../images/caterpillar.png" alt="Book" title="Book"></a>
+ </div>
+ <p><a href="fx/book.html">notebook</a> - A single page book with modifiable page background.</p>
+
<div class="code">
<pre class="prettyprint lang-js">
-_caterpillar.nxtPage(); //flips to the next page in the book
-_caterpillar.prePage(); //flips back a page in the book
-
-//load more pages can take the content of another document and load more pages into the book without the user knowing.
-_caterpillar.loadMorePages(‘< source file >’, “Book id name”);
-
-//load more pages can take the content of another document and load more pages into the book without the user knowing.
-_caterpillar.loadMorePages(‘< source file >’, “Book id name”);
-
-//Example 1 *Note* the pages document should consist of nothing but divs and their content intented to be pages
-alicejs.book({
+var notebook = alicejs.notebook({
elems: "book",
- speed: 500,
- paging: "double",
- binding: "left"'
+ pageClass: '', //a class to add to pages
+ shadow: true, //true || false
+ speed: '500ms', //select a speed
+ randomize: '15%' //string of percetange (impacts the speed of the page turns)
+ binding: "top", //left || right || top || bottom
+ wrap: false, //true || false
+ pageBackground: '#333' //string (basic css applied to the page backgrounds)
});
-document.addEventListener("pageTrigger", function(){
- if(_caterpillar.pageNumber === 13){
- _caterpillar.loadMorePages('newgame.html', 'book');
- }
-}, false);
-
-//load new book is similar but will switch the contents of the current book with a new book. Not allowing the user to go back.
-_caterpillar.loadNewBook(“< source file >”, function);
-
-//Example 2
-_caterpillar.loadNewBook(“newgame.html”, newBook() );
-
-function newBook(){
- alicejs.book({
- elems: "book",
- speed: 500,
- paging: "double",
- binding: "left"'
- });
-}
</pre>
</div>
+
+ <button onclick="notebook.prePage()">Previous Page</button>
+ <button onclick="notebook.nxtPage()">Next Page</button>
+
+ <div id="book">
+ <div class="pageN">
+ <h1 style="color: #fff; text-align: center;">Alice in Wonderland</h1>
+ <img src="../images/AliceMain.png" />
+ </div>
+ <div class="pageN">
+ <p>Down the Rabbit Hole</p>
+ <img src="../images/rabbit.png" style="width: 200px;" />
+ </div>
+ <div class="pageN">
+ <p>The Pool of Tears</p>
+ <img src="../images/caterpillar.png" style="width: 300px;" />
+ </div>
+ <div class="pageN">
+ <p>The Caucus Race and a Long Tale</p>
+ <img src="../images/cheshire.png" style="width: 300px;" />
+ </div>
+ <div class="pageN">
+ <p>The Rabbit Sends a Little Bill</p>
+ </div>
+ <div class="pageN">
+ <p>Advice from a Caterpillar</p>
+ </div>
+ <div class="pageN">
+ <p>Pig and Pepper</p>
+ </div>
+ <div class="pageN">
+ <p>A Mad Tea-Party</p>
+ </div>
+ <div class="pageN">
+ <p>The Queen's Croquet Ground</p>
+ </div>
+ <div class="pageN">
+ <p>The Mock Turtle's Story</p>
+ </div>
+ <div class="pageN">
+ <p>Lobster Quadrille</p>
+ </div>
+ <div class="pageN">
+ <p>Who Stole the Tarts?</p>
+ </div>
+ <div class="pageN">
+ <p>Alice's Evidence</p>
+ </div>
+ </div>
</div>
+
<div class="spacer"></div>
- <div id="book">
- <div class="page">
- <h1 style="color: #fff; text-align: center;">Alice in Wonderland</h1>
- <img src="../images/AliceMain.png" />
- <button onclick="_caterpillar.nxtPage()">Go To Next Page</button>
- </div>
- <div class="page">
- <p>Down the Rabbit Hole</p>
- <img src="../images/rabbit.png" style="width: 200px;" />
- <button style="padding: 10px;" onclick="_caterpillar.goToPage(9)">Go to Page 9</button>
- </div>
- <div class="page">
- <p>The Pool of Tears</p>
- <img src="../images/caterpillar.png" style="width: 300px;" />
- </div>
- <div class="page">
- <p>The Caucus Race and a Long Tale</p>
- <img src="../images/cheshire.png" style="width: 300px;" />
- </div>
- <div class="page">
- <p>The Rabbit Sends a Little Bill</p>
- <button onclick="_caterpillar.nxtPage()">Go To Next Page</button>
- </div>
- <div class="page">
- <p>Advice from a Caterpillar</p>
+ <div class="card">
+ <div id="book_info" class="icon">
+ <a href="fx/book.html"><img src="../images/caterpillar.png" alt="Book" title="Book"></a>
</div>
- <div class="page">
- <p>Pig and Pepper</p>
+ <p><a href="fx/book.html">notebook</a> - A single page book with modifiable page background.</p>
+
+ <div class="code">
+ <pre class="prettyprint lang-js">
+var flipbook = alicejs.flipbook({
+ elems: "book",
+ pageClass: '', //a class to add to pages
+ shadow: true, //true || false
+ speed: '500ms', //select a speed
+ randomize: '15%' //string of percetange (impacts the speed of the page turns)
+ binding: "center", //center || middle
+ wrap: true //true || false
+});
+
+ </pre>
</div>
- <div class="page">
- <p>A Mad Tea-Party</p>
+
+ <button onclick="flipbook.prePage()">Previous Page</button>
+ <button onclick="flipbook.nxtPage()">Next Page</button>
+
+ <div id="bookTwo">
+ <div class="page">
+ <p>The Mock Turtle's Story</p>
+ <button onclick="flipbook.appendPages('moreStuff')">Add Pages</button>
+ </div>
+ <div class="page">
+ <p>Lobster Quadrille</p>
+ </div>
+ <div class="page">
+ <p>Who Stole the Tarts?</p>
+ </div>
+ <div class="page">
+ <p>Alice's Evidence</p>
+ </div>
</div>
- <div class="page">
- <p>The Queen's Croquet Ground</p>
- <button style="padding: 10px;" onclick="_caterpillar.revToPage(2);">Go to Page 2</button>
+
+ <div id="moreStuff" class="subBooks">
+ <div class="pageB">
+ <p>A Mad Tea-Party</p>
+ </div>
+ <div class="pageB">
+ <p>The Queen's Croquet Ground</p>
+ </div>
+ <div class="pageB">
+ <p>The Mock Turtle's Story</p>
+ </div>
+ <div class="pageB">
+ <p>Lobster Quadrille</p>
+ </div>
+ <div class="pageB">
+ <p>Who Stole the Tarts?</p>
+ </div>
+ <div class="pageB">
+ <p>Alice's Evidence</p>
+ </div>
</div>
- <div class="page">
- <p>The Mock Turtle's Story</p>
+
+ </div>
+
+ <div class="spacer"></div>
+
+ <div class="card">
+ <div id="book_info" class="icon">
+ <a href="fx/book.html"><img src="../images/caterpillar.png" alt="Book" title="Book"></a>
</div>
- <div class="page">
- <p>Lobster Quadrille</p>
+ <p><a href="fx/book.html">notebook</a> - A single page book with modifiable page background.</p>
+
+ <div class="code">
+ <pre class="prettyprint lang-js">
+var book = alicejs.book({
+ elems: "book",
+ pageClass: '', //a class to add to pages
+ shadow: true, //true || false
+ speed: '500ms', //select a speed
+ randomize: '15%' //string of percetange (impacts the speed of the page turns)
+ binding: "left", //left || right || top || bottom
+});
+
+ </pre>
</div>
- <div class="page">
- <p>Who Stole the Tarts?</p>
+
+ <button onclick="book.prePage()">Previous Page</button>
+ <button onclick="book.nxtPage()">Next Page</button>
+
+ <div id="bookThree">
+ <div class="page">
+ <p>A Mad Tea-Party</p>
+ <button onclick="book.appendPages('moreStuffExtra')">Add More Pages</button>
+ </div>
+ <div class="page">
+ <p>The Queen's Croquet Ground</p>
+ </div>
+ <div class="page">
+ <p>The Mock Turtle's Story</p>
+ </div>
+ <div class="page">
+ <p>Lobster Quadrille</p>
+ </div>
+ <div class="page">
+ <p>Who Stole the Tarts?</p>
+ </div>
+ <div class="page">
+ <p>Alice's Evidence</p>
+ </div>
</div>
- <div class="page">
- <p>Alice's Evidence</p>
- <button onclick="_caterpillar.loadNewBook('newgame.html', newBook);">Make A New Book</button>
- <button onclick="_caterpillar.loadMorePages('newgame.html', 'book');">Load More Pages</button>
+
+ <div id="moreStuffExtra" class="subBooks">
+ <div class="pageB">
+ <p>1</p>
+ </div>
+ <div class="pageB">
+ <p>2</p>
+ </div>
+ <div class="pageB">
+ <p>3</p>
+ </div>
+ <div class="pageB">
+ <p>4</p>
+ </div>
+ <div class="pageB">
+ <p>5</p>
+ </div>
+ <div class="pageB">
+ <p>6</p>
+ </div>
</div>
+
</div>
+
+ <div class="spacer"></div>
</div>
<div class="fineprint"><p>Copyright &copy; 2011-2012 Research In Motion Limited</p></div>
@@ -273,40 +396,53 @@ <h1 style="color: #fff; text-align: center;">Alice in Wonderland</h1>
<script type="text/javascript" src="../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../js/alice.js"></script>
-<!--
- <script src="../js/alice-min.js"></script>
--->
+ <script src="../js/alice.min.js"></script>
<script type="text/javascript">
prettyPrint();
sniffer.init();
document.getElementById('version').innerHTML = 'Version ' + alice.version + ' (Build: ' + alice.build + ')';
- function newBook(){
- alicejs.book({
- elems: "book",
- speed: 500,
- inPageControls: true,
- paging: "double",
- binding: "left"
- });
- }
-
- alicejs.book({
+ var notebook = alicejs.notebook({
elems: "book",
+ speed: '800ms',
+ binding: "top"
+ });
+
+ var flipbook = alicejs.flipbook({
+ elems: "bookTwo",
speed: '500ms',
- paging: "single",
- binding: "top",
- wrap: true,
- controls: true,
- inPageControls: true,
- keyControls: true,
- randomize: '15%',
- pageBackground: '#333',
- controlBackground: '#111'
+ binding: "center",
+ wrap: true
});
+ var book = alicejs.book({
+ elems: "bookThree",
+ speed: '500ms',
+ binding: "left",
+ shadow: true
+ });
+
+ //onPageTrigger event
+ book.book.addEventListener("onPageTrigger", function(){
+ if(book.pageNumber() === book.realPageCount){
+ console.log("End of the regular book");
+ }
+ if(book.pageNumber() === 1){
+ console.log("Beginning of the regular book");
+ }
+ }, false);
+
+ //onPageTrigger event
+ notebook.book.addEventListener("onPageTrigger", function(){
+ if(notebook.pageNumber() === notebook.realPageCount){
+ console.log("End of the notebook");
+ }
+ if(notebook.pageNumber() === 1){
+ console.log("Beginning of the notebook");
+ }
+ }, false);
+
//Google Analytics
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28534102-1']);
View
7 demos/chaining.html
@@ -44,12 +44,15 @@
width: 90px;
float: left;
}
+ .untarnished{
+ font-family: Arial, Helvetica, sans-serif;
+ }
</style>
</head>
<body>
<div id="container">
<div id="card1" class="card-edge" style="margin-top: 50px;">
- <h1><a href="../index.html">AliceJS</a> &gt; <a href="index.html#moredemos">Demos</a> &gt; Chaining</h1>
+ <h1 class="untarnished"><a href="../index.html">AliceJS</a> &gt; <a href="index.html#moredemos">Demos</a> &gt; Chaining</h1>
<div class="card">
<p><a href="fx/book.html">Chaining</a> - Chaining is fundamentally simple to use. It's built right into the system with jWorkflow. </p>
@@ -148,7 +151,7 @@
<!-- Feature Sniffer -->
<script type="text/javascript" src="../libs/sniffer.js"></script>
- <script src="../js/alice.js"></script>
+ <script src="../js/alice.min.js"></script>
<script type="text/javascript">
prettyPrint();
View
6 demos/cheshire.html
@@ -482,10 +482,8 @@ <h1 class="seo">AliceJS Demos</h1>
<script type="text/javascript" src="../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../js/alice.js"></script>
-<!--
- <script src="../js/alice-min.js"></script>
--->
+ <script src="../js/alice.min.js"></script>
+
<script type="text/javascript">
prettyPrint();
sniffer.init();
View
74 demos/fx/book.html
@@ -19,8 +19,8 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Book</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
- <link rel="stylesheet" href="../../css/default.css">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
+ <link rel="stylesheet" href="default.css">
<style type="text/css">
@@ -34,6 +34,7 @@
#mainBox{
width: 90%;
margin: 0px auto 100px;
+ border-radius: 15px;
}
#book{
@@ -44,22 +45,14 @@
}
.page{
- background: #eee;
+ background: #ccc;
+ border-radius: 15px;
}
.page p{
color: #111;
font-size: 1.2em;
}
-
- h1{
- color: #fff;
- }
-
- h1 a{
- color: #888;
- }
-
.title{
font-size: 2em;
padding: 0 0 0 20px;
@@ -108,34 +101,34 @@
<div id="mainBox">
<div class="header">
- <h1><a href="../index.html">AliceJS</a> &gt; <a href="../index.html">Demos</a> &gt; Book Effect</h1>
+ <h1><a href="../../index.html">AliceJS</a> &gt; <a href="../index.html">Demos</a> &gt; Book Effect</h1>
<br />
<h1>Alice in Wonderland: An HTML5 Powered Trivia Game!</h1>
</div>
<div id="book">
<div class="page">
- <div style="width: 100%; height: 100%; background: url(../../images/pat.jpg); margin-top: -55px;">
+ <div style="width: 100%; height: 100%; background: url(../../images/pat.jpg); margin-top: -45px; border-radius: 15px;">
<h1 style="color: #fff; text-align: center; font-size: 6em; padding-top: 40px;">Alice in Wonderland</h1>
<h1 style="color: #fff; text-align: center; margin: -20px 0 0 20px; color: #A31A81;">A Mini Triva Game</h1>
- <button style="margin-top: 100px;" onclick="_caterpillar.nxtPage()">PLAY!</button>
+ <button style="margin-top: 100px;" onclick="mybook.nxtPage()">PLAY!</button>
</div>
</div>
<div class="page">
<h1 class="title">Question 1</h1>
<img src="../../images/AliceMain.png" style="width: 200px;" />
<p>To begin our tale let us look at the facts!</p>
<p>Where, oh where, does Alice relax?</p>
- <button style="padding: 10px;" onclick="_caterpillar.goToPage(3); _score+=1;">Sitting by a tree</button>
- <button style="padding: 10px;" onclick="_caterpillar.goToPage(7)">Hacking on her laptop</button>
+ <button style="padding: 10px;" onclick="mybook.nxtPage(); _score+=1;">Sitting by a tree</button>
+ <button style="padding: 10px;" onclick="mybook.nxtPage();">Hacking on her laptop</button>
</div>
<div class="page">
<h1 class="title">Question 2</h1>
<img src="../../images/caterpillar.png" style="width: 240px;" />
<p>Rabbit and mouse are scared away,</p>
<p>but, caterpillar, what does he say?</p>
- <button style="padding: 10px; font-size: 1.5em;" onclick="_caterpillar.goToPage(4); _score+=1;">Reveals the power of the Mushroom</button>
- <button style="padding: 10px; font-size: 1.5em;" onclick="_caterpillar.goToPage(7)">Informs her of bipartisan politics</button>
+ <button style="padding: 10px; font-size: 1.5em;" onclick="mybook.nxtPage(); _score+=1;">Reveals the power of the Mushroom</button>
+ <button style="padding: 10px; font-size: 1.5em;" onclick="mybook.nxtPage();">Informs her of bipartisan politics</button>
</div>
<div class="page">
<h1 class="title">Question 3</h1>
@@ -144,33 +137,24 @@ <h1 class="title">Question 3</h1>
<p>who was the cat, if you please?</p>
<br />
<br />
- <button style="padding: 10px;" onclick="_caterpillar.goToPage(7);">Worcestershire</button>
- <button style="padding: 10px;" onclick="_caterpillar.goToPage(5); _score+=1;">Cheshire</button>
+ <button style="padding: 10px;" onclick="mybook.nxtPage();">Worcestershire</button>
+ <button style="padding: 10px;" onclick="mybook.nxtPage(); _score+=1;">Cheshire</button>
</div>
<div class="page">
<h1 class="title">Question 4</h1>
<img src="../../images/madhatter.png" style="width: 150px;" />
<p>March Hare, Mad Hatter and more,</p>
<p>when is tea time with riddles gallore?</p>
- <button style="padding: 10px;" onclick="_caterpillar.goToPage(7);">6:00 am</button>
- <button style="padding: 10px;" onclick="_caterpillar.goToPage(6); _score+=1;">6:00 pm</button>
+ <button style="padding: 10px;" onclick="mybook.nxtPage();">6:00 am</button>
+ <button style="padding: 10px;" onclick="mybook.nxtPage(); _score+=1;">6:00 pm</button>
</div>
<div class="page">
<h1 class="title">Question 5</h1>
<img src="../../images/queen.png" style="width: 170px;" />
<p>A game of croquet and Queen of Hearts,</p>
<p>But who, oh who, stole the queens tarts?</p>
- <button style="padding: 10px;" onclick="_caterpillar.goToPage(8); _score+=1; tallyScore()">Knave of Hears</button>
- <button style="padding: 10px;" onclick="_caterpillar.goToPage(7)">Dancing Gryphon</button>
- </div>
- <div class="page">
- <h1 class="title">Oh No!</h1>
- <p>No, no, no, this cannot be!</p>
- <p>Oh dear, oh dear, sad to see.</p>
- <div style="width: 100%; text-align: right;">
- <img src="../../images/rabbit.png" style="width: 250px;" />
- </div>
- <button onclick="_caterpillar.revToPage(_caterpillar.lastPage);">Try Again!</button>
+ <button style="padding: 10px;" onclick="mybook.nxtPage(); _score+=1; tallyScore()">Knave of Hears</button>
+ <button style="padding: 10px;" onclick="mybook.nxtPage(); tallyScore()">Dancing Gryphon</button>
</div>
<div class="page">
<h1 class="title">A Score!</h1>
@@ -185,37 +169,37 @@ <h1 id="scoreBox" style="font-size: 6em;"></h1>
<img src="../../images/rabbit.png" style="width: 250px;" />
</div>
</div>
- <button onclick="window.location = window.location;">Play Again!</button>
+ <button onclick="mybook.nxtPage(); resetScore();">Play Again!</button>
</div>
</div>
</div>
-
-
<div class="fineprint"><p class="copyright">Copyright &copy; 2011-2012 Research In Motion Limited</p><br /></div>
<!-- Feature Sniffer -->
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script type="text/javascript">
- function tallyScore(){
+ function tallyScore() {
document.getElementById("scoreBox").innerHTML = _score + '/5';
}
- alicejs.book({
+ function resetScore() {
+ _score=0;
+ }
+
+ var mybook = alicejs.notebook({
elems: "book",
- speed: 500,
- paging: "single",
+ speed: 1000,
binding: "left",
- inPageControls: false,
- keyControls: false,
randomize: '5%',
- pageBackground: '#333'
+ pageBackground: '#555',
+ wrap: true
});
// Google Analytics
View
4 demos/fx/bounce.html
@@ -19,7 +19,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Bounce</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
@@ -40,7 +40,7 @@
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script src="settings.js"></script>
<script type="text/javascript">
View
4 demos/fx/dance.html
@@ -19,7 +19,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Dance</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
@@ -40,7 +40,7 @@
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script src="settings.js"></script>
<script type="text/javascript">
View
4 demos/fx/drain.html
@@ -19,7 +19,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Drain</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
@@ -40,7 +40,7 @@
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script src="settings.js"></script>
<script type="text/javascript">
View
4 demos/fx/fade.html
@@ -19,7 +19,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Fade</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
@@ -40,7 +40,7 @@
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script src="settings.js"></script>
<script type="text/javascript">
View
4 demos/fx/hinge.html
@@ -19,7 +19,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Hinge</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
@@ -40,7 +40,7 @@
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script src="settings.js"></script>
<script type="text/javascript">
View
4 demos/fx/pageFlip.html
@@ -19,7 +19,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Page Flip</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
@@ -40,7 +40,7 @@
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script src="settings.js"></script>
<script type="text/javascript">
View
4 demos/fx/pendulum.html
@@ -19,7 +19,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Pendulum</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
@@ -40,7 +40,7 @@
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script src="settings.js"></script>
<script type="text/javascript">
View
4 demos/fx/phantomZone.html
@@ -19,7 +19,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Phantom Zone</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
@@ -40,7 +40,7 @@
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script src="settings.js"></script>
<script type="text/javascript">
View
4 demos/fx/raceFlag.html
@@ -19,7 +19,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Race Flag</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
@@ -40,7 +40,7 @@
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script src="settings.js"></script>
<script type="text/javascript">
View
4 demos/fx/slide.html
@@ -19,7 +19,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Slide</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
@@ -40,7 +40,7 @@
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script src="settings.js"></script>
<script type="text/javascript">
View
4 demos/fx/spin.html
@@ -19,7 +19,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Spin</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
@@ -40,7 +40,7 @@
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script src="settings.js"></script>
<script type="text/javascript">
View
4 demos/fx/toss.html
@@ -19,7 +19,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Toss</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
@@ -40,7 +40,7 @@
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script src="settings.js"></script>
<script type="text/javascript">
View
4 demos/fx/twirl.html
@@ -19,7 +19,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Twirl</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
@@ -40,7 +40,7 @@
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script src="settings.js"></script>
<script type="text/javascript">
View
4 demos/fx/wobble.html
@@ -19,7 +19,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Wobble</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
@@ -40,7 +40,7 @@
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script src="settings.js"></script>
<script type="text/javascript">
View
4 demos/fx/zoom.html
@@ -19,7 +19,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Zoom</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
@@ -40,7 +40,7 @@
<script type="text/javascript" src="../../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../../js/alice.js"></script>
+ <script src="../../js/alice.min.js"></script>
<script src="settings.js"></script>
<script type="text/javascript">
View
39 demos/index.html
@@ -19,7 +19,8 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS Demos</title>
- <link href="../../images/favicon.ico" rel="icon" type="image/x-icon">
+
+ <link href="images/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="../css/default.css">
<style type="text/css">
</style>
@@ -28,7 +29,7 @@
<div class="fineprint"><p id="version"></p></div>
<div class="close">
- <a href="../index.html"><img src="../../images/close_icon.png"></a>
+ <a href="../index.html"><img src="../images/close_icon.png"></a>
</div>
<div id="container">
@@ -71,21 +72,21 @@ <h1 class="seo">AliceJS Demos</h1>
<p>Cheshire is a simple to use yet remarkably expandable engine for building and implementing CSS3 based animations. </p>
<p>Available Effects:</p>
<ul>
- <li><a href="cheshire.html#bounce">bounce()</a></li>
- <li><a href="cheshire.html#dance">dance()</a></li>
- <li><a href="cheshire.html#drain">drain()</a></li>
- <li><a href="cheshire.html#fade">fade()</a></li>
- <li><a href="cheshire.html#hinge">hinge()</a></li>
- <li><a href="cheshire.html#pageFlip">pageFlip()</a></li>
- <li><a href="cheshire.html#pendulum">pendulum()</a></li>
- <li><a href="cheshire.html#phantomZone">phantomZone()</a></li>
- <li><a href="cheshire.html#raceFlag">raceFlag()</a></li>
- <li><a href="cheshire.html#slide">slide()</a></li>
- <li><a href="cheshire.html#spin">spin()</a></li>
- <li><a href="cheshire.html#toss">toss()</a></li>
- <li><a href="cheshire.html#twirl">twirl()</a></li>
- <li><a href="cheshire.html#wobble">wobble()</a></li>
- <li><a href="cheshire.html#zoom">zoom()</a></li>
+ <li><a href="fx/bounce.html">bounce()</a></li>
+ <li><a href="fx/dance.html">dance()</a></li>
+ <li><a href="fx/drain.html">drain()</a></li>
+ <li><a href="fx/fade.html">fade()</a></li>
+ <li><a href="fx/hinge.html">hinge()</a></li>
+ <li><a href="fx/pageFlip.html">pageFlip()</a></li>
+ <li><a href="fx/pendulum.html">pendulum()</a></li>
+ <li><a href="fx/phantomZone.html">phantomZone()</a></li>
+ <li><a href="fx/raceFlag.html">raceFlag()</a></li>
+ <li><a href="fx/slide.html">slide()</a></li>
+ <li><a href="fx/spin.html">spin()</a></li>
+ <li><a href="fx/toss.html">toss()</a></li>
+ <li><a href="fx/twirl.html">twirl()</a></li>
+ <li><a href="fx/wobble.html">wobble()</a></li>
+ <li><a href="fx/zoom.html">zoom()</a></li>
</ul>
</div>
</div>
@@ -97,7 +98,7 @@ <h1 class="seo">AliceJS Demos</h1>
<p>Caterpillar is a fully customizable 3D rendering that enables interaction with divs enabling the client to go further than simple animations. Stepping into a position to push the limits of human computer interaction.</p>
<p>Available Effects:</p>
<ul>
- <li><a href="caterpillar.html#book">book()</a></li>
+ <li><a href="fx/book.html">book()</a></li>
</ul>
</div>
</div>
@@ -138,7 +139,7 @@ <h1 class="seo">AliceJS Demos</h1>
<script type="text/javascript" src="../libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="../js/alice.js"></script>
+ <script src="../js/alice.min.js"></script>
<script type="text/javascript">
View
45 demos/sampler.html
@@ -19,13 +19,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>AliceJS Sampler</title>
<link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link rel="stylesheet" href="fx/default.css">
<style type="text/css">
body, select {
font: 8pt Arial, sans-serif;
overflow-x: hidden;
}
- .card {
+ .cardx {
float: left;
background: transparent;
/*border: 1px dashed #CCC;*/
@@ -81,37 +82,37 @@
<!-- Test Elements -->
<div style="clear: both;">
- <div id="elem1" class="card"><img src="common/images/cards/ace_clubs.png" width="35" height="48"></div>
- <div id="elem2" class="card"><img src="common/images/cards/ace_diamonds.png" width="35" height="48"></div>
- <div id="elem3" class="card"><img src="common/images/cards/ace_hearts.png" width="35" height="48"></div>
- <div id="elem4" class="card"><img src="common/images/cards/ace_spades.png" width="35" height="48"></div>
+ <div id="elem1" class="cardx"><img src="common/images/cards/ace_clubs.png" width="35" height="48"></div>
+ <div id="elem2" class="cardx"><img src="common/images/cards/ace_diamonds.png" width="35" height="48"></div>
+ <div id="elem3" class="cardx"><img src="common/images/cards/ace_hearts.png" width="35" height="48"></div>
+ <div id="elem4" class="cardx"><img src="common/images/cards/ace_spades.png" width="35" height="48"></div>
</div>
<div style="clear: both;">
- <div id="elem5" class="card"><img src="common/images/cards/king_clubs.png" width="70" height="95"></div>
- <div id="elem6" class="card"><img src="common/images/cards/king_diamonds.png" width="70" height="95"></div>
- <div id="elem7" class="card"><img src="common/images/cards/king_hearts.png" width="70" height="95"></div>
- <div id="elem8" class="card"><img src="common/images/cards/king_spades.png" width="70" height="95"></div>
+ <div id="elem5" class="cardx"><img src="common/images/cards/king_clubs.png" width="70" height="95"></div>
+ <div id="elem6" class="cardx"><img src="common/images/cards/king_diamonds.png" width="70" height="95"></div>
+ <div id="elem7" class="cardx"><img src="common/images/cards/king_hearts.png" width="70" height="95"></div>
+ <div id="elem8" class="cardx"><img src="common/images/cards/king_spades.png" width="70" height="95"></div>
</div>
<div style="clear: both;">
- <div id="elem9" class="card"><img src="common/images/cards/queen_clubs.png" width="105" height="143"></div>
- <div id="elem10" class="card"><img src="common/images/cards/queen_diamonds.png" width="105" height="143"></div>
- <div id="elem11" class="card"><img src="common/images/cards/queen_hearts.png" width="105" height="143"></div>
- <div id="elem12" class="card"><img src="common/images/cards/queen_spades.png" width="105" height="143"></div>
+ <div id="elem9" class="cardx"><img src="common/images/cards/queen_clubs.png" width="105" height="143"></div>
+ <div id="elem10" class="cardx"><img src="common/images/cards/queen_diamonds.png" width="105" height="143"></div>
+ <div id="elem11" class="cardx"><img src="common/images/cards/queen_hearts.png" width="105" height="143"></div>
+ <div id="elem12" class="cardx"><img src="common/images/cards/queen_spades.png" width="105" height="143"></div>
</div>
<div style="clear: both;">
- <div id="elem13" class="card"><img src="common/images/cards/jack_clubs.png"><p>Jack of Clubs</p></div>
- <div id="elem14" class="card"><img src="common/images/cards/jack_diamonds.png"><p>Jack of Diamonds</p></div>
- <div id="elem15" class="card"><img src="common/images/cards/jack_hearts.png"><p>Jack of Hearts</p></div>
- <div id="elem16" class="card"><img src="common/images/cards/jack_spades.png"><p>Jack of Spades</p></div>
+ <div id="elem13" class="cardx"><img src="common/images/cards/jack_clubs.png"><p>Jack of Clubs</p></div>
+ <div id="elem14" class="cardx"><img src="common/images/cards/jack_diamonds.png"><p>Jack of Diamonds</p></div>
+ <div id="elem15" class="cardx"><img src="common/images/cards/jack_hearts.png"><p>Jack of Hearts</p></div>
+ <div id="elem16" class="cardx"><img src="common/images/cards/jack_spades.png"><p>Jack of Spades</p></div>
</div>
<div style="clear: both;">
- <div id="elem17" class="card"><img src="common/images/cards/10_clubs.png" width="175" height="238"></div>
- <div id="elem18" class="card"><img src="common/images/cards/10_diamonds.png" width="175" height="238"></div>
- <div id="elem19" class="card"><img src="common/images/cards/10_hearts.png" width="175" height="238"></div>
- <div id="elem20" class="card"><img src="common/images/cards/10_spades.png" width="175" height="238"></div>
+ <div id="elem17" class="cardx"><img src="common/images/cards/10_clubs.png" width="175" height="238"></div>
+ <div id="elem18" class="cardx"><img src="common/images/cards/10_diamonds.png" width="175" height="238"></div>
+ <div id="elem19" class="cardx"><img src="common/images/cards/10_hearts.png" width="175" height="238"></div>
+ <div id="elem20" class="cardx"><img src="common/images/cards/10_spades.png" width="175" height="238"></div>
</div>
- <script src="../js/alice.js"></script>
+ <script src="../js/alice.min.js"></script>
<script type="text/javascript">
var a = alicejs;
View
117 demos/stack.html
@@ -18,7 +18,9 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>AliceJS Stack</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../images/favicon.ico" rel="icon" type="image/x-icon">
+ <link href="fx/default.css" rel="stylesheet">
+
<style type="text/css">
body, select {
font: 8pt Arial, sans-serif;
@@ -31,7 +33,7 @@
height: 190px;
}
- .card {
+ .cardx {
position: absolute;
width: 140px;
height: 190px;
@@ -58,60 +60,61 @@
<p>This is a demo of animating a stack of 54 playing card images.</p>
<div id="cards" class="cards">
- <div class="card"><img src="common/images/cards/2_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/2_clubs.png"></div>
- <div class="card"><img src="common/images/cards/2_hearts.png"></div>
- <div class="card"><img src="common/images/cards/2_spades.png"></div>
- <div class="card"><img src="common/images/cards/3_clubs.png"></div>
- <div class="card"><img src="common/images/cards/3_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/3_hearts.png"></div>
- <div class="card"><img src="common/images/cards/3_spades.png"></div>
- <div class="card"><img src="common/images/cards/4_clubs.png"></div>
- <div class="card"><img src="common/images/cards/4_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/4_hearts.png"></div>
- <div class="card"><img src="common/images/cards/4_spades.png"></div>
- <div class="card"><img src="common/images/cards/5_clubs.png"></div>
- <div class="card"><img src="common/images/cards/5_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/5_hearts.png"></div>
- <div class="card"><img src="common/images/cards/5_spades.png"></div>
- <div class="card"><img src="common/images/cards/6_clubs.png"></div>
- <div class="card"><img src="common/images/cards/6_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/6_hearts.png"></div>
- <div class="card"><img src="common/images/cards/6_spades.png"></div>
- <div class="card"><img src="common/images/cards/7_clubs.png"></div>
- <div class="card"><img src="common/images/cards/7_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/7_hearts.png"></div>
- <div class="card"><img src="common/images/cards/7_spades.png"></div>
- <div class="card"><img src="common/images/cards/8_clubs.png"></div>
- <div class="card"><img src="common/images/cards/8_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/8_hearts.png"></div>
- <div class="card"><img src="common/images/cards/8_spades.png"></div>
- <div class="card"><img src="common/images/cards/9_clubs.png"></div>
- <div class="card"><img src="common/images/cards/9_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/9_hearts.png"></div>
- <div class="card"><img src="common/images/cards/9_spades.png"></div>
- <div class="card"><img src="common/images/cards/10_clubs.png"></div>
- <div class="card"><img src="common/images/cards/10_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/10_hearts.png"></div>
- <div class="card"><img src="common/images/cards/10_spades.png"></div>
- <div class="card"><img src="common/images/cards/jack_clubs.png"></div>
- <div class="card"><img src="common/images/cards/jack_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/jack_hearts.png"></div>
- <div class="card"><img src="common/images/cards/jack_spades.png"></div>
- <div class="card"><img src="common/images/cards/queen_clubs.png"></div>
- <div class="card"><img src="common/images/cards/queen_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/queen_hearts.png"></div>
- <div class="card"><img src="common/images/cards/queen_spades.png"></div>
- <div class="card"><img src="common/images/cards/king_clubs.png"></div>
- <div class="card"><img src="common/images/cards/king_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/king_hearts.png"></div>
- <div class="card"><img src="common/images/cards/king_spades.png"></div>
- <div class="card"><img src="common/images/cards/ace_clubs.png"></div>
- <div class="card"><img src="common/images/cards/ace_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/ace_hearts.png"></div>
- <div class="card"><img src="common/images/cards/ace_spades.png"></div>
- <div class="card"><img src="common/images/cards/joker_black.png"></div>
- <div class="card"><img src="common/images/cards/joker_red.png"></div>
+
+ <div class="cardx"><img src="common/images/cards/2_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/2_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/2_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/2_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/3_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/3_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/3_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/3_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/4_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/4_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/4_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/4_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/5_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/5_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/5_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/5_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/6_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/6_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/6_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/6_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/7_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/7_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/7_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/7_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/8_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/8_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/8_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/8_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/9_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/9_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/9_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/9_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/10_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/10_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/10_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/10_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/jack_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/jack_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/jack_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/jack_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/queen_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/queen_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/queen_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/queen_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/king_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/king_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/king_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/king_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/ace_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/ace_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/ace_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/ace_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/joker_black.png"></div>
+ <div class="cardx"><img src="common/images/cards/joker_red.png"></div>
</div>
<div class="controls">
@@ -122,7 +125,7 @@
-->
</div>
- <script src="../js/alice.js"></script>
+ <script src="../js/alice.min.js"></script>
<script type="text/javascript">
var elems = document.getElementById("cards").children;
View
13 index.html
@@ -37,7 +37,7 @@ <h1 class="seo">AliceJS - (A Lightweight Independent CSS Engine)</h1>
<!-- AliceJS Logo (CSS Sprites) -->
<div id="logo">
<div>
- <div id="logo-alice-img"></div>
+ <div id="logo-alice-img-original"></div>
</div>
<div id="logo-alice-txt-alice">
<div id="logo-alice-txt-a"></div>
@@ -68,6 +68,9 @@ <h1 class="seo">AliceJS - (A Lightweight Independent CSS Engine)</h1>
<p>So I decided to explore the ability to package such animations in a very lightweight library that would set up all the CSS and manage my base HTML for me, and keep my page clean of "effects logic". AliceJS was born. I had no idea where this could lead and I literally felt like the real Alice following the white rabbit down a scary hole. Very quickly, it became clear that lots of cool things could be done that would not just be fancy animations, but which could actually make a general UI better, and help with games too. This is an area that Research In Motion (RIM) is particularly interested in, pushing boundaries in graphically rich web applications to create more compelling experiences.</p>
<p>We are experimenting with many UI components, with tying in sensors, adding physics, and even organics. This is perhaps one of the more exciting feature of AliceJS. The human eye is very good at spotting differences in movement. Something so subtle as a millisecond difference can be perceived. Achieving natural/organic randomness is at the heart of most high-end visual effects in Hollywood blockbuster films. The beauty is that we don't need to reach that level of sophistication to give an effect some variability so that during the lifetime of the application, things don't feel repetitive. Varying just slightly the speed, perspective, and over-rotation on a flip effect adds a degree of subtle "freshness" every time it comes up.</p>
+ <h2>Alice 0.1, 0.2 Compatibility and Special Notes</h2>
+ <p>With version 0.5 we've introduced some changes to the core and cheshire while introducing the all new caterpillar effect. However, with great change comes great responsibity, and it is our responsibility to inform you that 0.5 is not compatible with 0.2, or 0.1. The main reason for this stems from the transition to object based paramters for the different methods.</p>
+
<h2>Demos</h2>
<a href="demos/index.html" class="big button">View Demos</a>
@@ -165,7 +168,7 @@ <h1 class="seo">AliceJS - (A Lightweight Independent CSS Engine)</h1>
<p>Finally, although we focus primarily on hardware-accelerated CSS at this point, we don't want to rule out using other technologies in the future such as Canvas and WebGL. Although the library focuses really on visual effects, we are exploring ways to tie in sensor input to make things more interesting, without interfering with application logic, or bringing in too much baggage.</p>
- <h2>Compatibility</h2>
+ <h2>Browser Compatibility</h2>
<p>The library is intended to work at least on Chrome (V13 or higher because of hardware-acceleration requirements), iOS, and BlackBerry platforms. As the library evolves and more people participate, it's our goal to support all major platforms the best way we can.</p>
@@ -179,7 +182,7 @@ <h1 class="seo">AliceJS - (A Lightweight Independent CSS Engine)</h1>
<h2>Unit Tests</h2>
<div>
- <a href="tests">Review Unit Tests</a>
+ <a href="specs">Review Unit Tests</a>
</div>
<h2>License</h2>
@@ -203,7 +206,7 @@ <h1 class="seo">AliceJS - (A Lightweight Independent CSS Engine)</h1>
<script type="text/javascript" src="libs/sniffer.js"></script>
<!-- AliceJS -->
- <script src="js/alice.js"></script>
+ <script src="js/alice.min.js"></script>
<script type="text/javascript">
prettyPrint();
@@ -215,7 +218,7 @@ <h1 class="seo">AliceJS - (A Lightweight Independent CSS Engine)</h1>
animateLogo = function () {
alicejs.spin({
- elems: "logo-alice-img",
+ elems: "logo-alice-img-original",
move: "left",
overshoot: '7',
duration: "3000ms",
View
4 js/alice.min.js
@@ -41,5 +41,5 @@
// (c) 2010 tinyHippos inc.
// jWorkflow is freely distributable under the terms of the MIT license.
// Portions of jWorkflow are inspired by Underscore.js
-var jWorkflow=function(){function e(e){if(typeof e!="function")throw"expected function but was "+typeof e}function t(e){return typeof e.andThen=="function"&&typeof e.start=="function"&&typeof e.chill=="function"}function n(e){return!!e.map&&!!e.reduce}var r={order:function(r,i){var s=[],o,u=null,a=function(){var e=!1;return{take:function(){e=!0},pass:function(t){var n;e=!1,o.length?(n=o.shift(),t=n.func.apply(n.context,[t,a]),e||a.pass(t)):u.func&&u.func.apply(u.context,[t])},drop:function(t){e=!0,o=[],setTimeout(function(){a.pass(t)},1)}}}(),f={andThen:function(r,i){if(t(r)){var o=function(e,t){t.take(),r.start({callback:function(e){t.pass(e)},context:i,initialValue:e})};s.push({func:o,context:i})}else if(n(r)){var u=function(e,t){t.take();var n=r.length,i=function(){return--n||t.pass()};r.forEach(function(e){jWorkflow.order(e).start(i)})};s.push({func:u,context:i})}else e(r),s.push({func:r,context:i});return f},chill:function(e){return f.andThen(function(t,n){n.take(),setTimeout(function(){n.pass(t)},e)})},start:function(){var e,t,n;arguments[0]&&typeof arguments[0]=="object"?(e=arguments[0].callback,t=arguments[0].context,n=arguments[0].initialValue):(e=arguments[0],t=arguments[1]),u={func:e,context:t},o=s.slice(),a.pass(n)}};return r?f.andThen(r,i):f}};return r}();typeof module=="object"&&typeof require=="function"&&(module.exports=jWorkflow);var alice=function(){"use strict";var e={id:"alice",name:"AliceJS",description:"A Lightweight Independent CSS Engine",version:"0.5",build:"20121002-0159",prefix:"",prefixJS:"",elems:null,cleaner:{},format:{},helper:{},plugins:{},anima:null,debug:!1,elements:function(e){var t,n=[],r=function(e,t){Array.prototype.forEach.apply(e,[t])},i=function(e){n.push(e)},s=function(e){if(typeof e!="string")return[];var t=document.getElementById(e);return t?[t]:document.querySelectorAll(e)};if(typeof e=="string")if(e.indexOf("$")===0)if(e.indexOf("#")>-1)t=e.substring(e.indexOf("#")+1,e.indexOf("')")),r(s(t),i);else{if(!(e.indexOf(".")>-1)){console.warn("jQuery selectors must be either classes or ids.");return}t=e.substring(e.indexOf(".")+1,e.indexOf("')")),r(s(t),i)}else r(s(e),i);else e.length===undefined?n.push(e):r(e,function(e){e.nodeType&&e.nodeType!==3?n.push(e):r(s(e),i)});return n},randomize:function(e,t){var n,r,i=parseInt(e,10);return typeof t=="string"&&t.indexOf("%")>-1?n=parseInt(t,10)/100:n=parseFloat(t,10),r=i+i*(Math.random()*2*n-n),Math.floor(r)},duration:function(e){var t,n=function(e){return e},r=function(e){var t;return e.indexOf("ms")>-1?t=parseInt(e,10):e.indexOf("s")>-1?t=parseFloat(e,10)*1e3:t=parseInt(e,10),t},i=function(e){var t;return e.value&&(typeof e.value=="string"?t=r(e.value):t=n(e.value)),t};switch(typeof e){case"number":t=n(e);break;case"string":t=r(e);break;case"object":t=i(e);break;default:t=e}return t},coords:function(e){var t={"top-left":{x:"0%",y:"0%"},"top-center":{x:"50%",y:"0%"},"top-right":{x:"100%",y:"0%"},"middle-left":{x:"0%",y:"50%"},"middle-center":{x:"50%",y:"50%"},"middle-right":{x:"100%",y:"50%"},"bottom-left":{x:"0%",y:"100%"},"bottom-center":{x:"50%",y:"100%"},"bottom-right":{x:"100%",y:"100%"},top:{x:"50%",y:"0%"},left:{x:"0%",y:"50%"},center:{x:"50%",y:"50%"},right:{x:"100%",y:"50%"},bottom:{x:"50%",y:"100%"},NW:{x:"0%",y:"0%"},N:{x:"50%",y:"0%"},NE:{x:"100%",y:"0%"},W:{x:"0%",y:"50%"},E:{x:"100%",y:"50%"},SW:{x:"0%",y:"100%"},S:{x:"50%",y:"100%"},SE:{x:"100%",y:"100%"},"":{x:"50%",y:"50%"},"undefined":{x:"50%",y:"50%"}};return t[e]},easing:function(e){var t={linear:{p1:.25,p2:.25,p3:.75,p4:.75},ease:{p1:.25,p2:.1,p3:.25,p4:1},"ease-in":{p1:.42,p2:0,p3:1,p4:1},"ease-out":{p1:0,p2:0,p3:.58,p4:1},"ease-in-out":{p1:.42,p2:0,p3:.58,p4:1},easeInQuad:{p1:.55,p2:.085,p3:.68,p4:.53},easeInCubic:{p1:.55,p2:.055,p3:.675,p4:.19},easeInQuart:{p1:.895,p2:.03,p3:.685,p4:.22},easeInQuint:{p1:.755,p2:.05,p3:.855,p4:.06},easeInSine:{p1:.47,p2:0,p3:.745,p4:.715},easeInExpo:{p1:.95,p2:.05,p3:.795,p4:.035},easeInCirc:{p1:.6,p2:.04,p3:.98,p4:.335},easeInBack:{p1:.6,p2:-0.28,p3:.735,p4:.045},easeOutQuad:{p1:.25,p2:.46,p3:.45,p4:.94},easeOutCubic:{p1:.215,p2:.61,p3:.355,p4:1},easeOutQuart:{p1:.165,p2:.84,p3:.44,p4:1},easeOutQuint:{p1:.23,p2:1,p3:.32,p4:1},easeOutSine:{p1:.39,p2:.575,p3:.565,p4:1},easeOutExpo:{p1:.19,p2:1,p3:.22,p4:1},easeOutCirc:{p1:.075,p2:.82,p3:.165,p4:1},easeOutBack:{p1:.175,p2:.885,p3:.32,p4:1.275},easeInOutQuad:{p1:.455,p2:.03,p3:.515,p4:.955},easeInOutCubic:{p1:.645,p2:.045,p3:.355,p4:1},easeInOutQuart:{p1:.77,p2:0,p3:.175,p4:1},easeInOutQuint:{p1:.86,p2:0,p3:.07,p4:1},easeInOutSine:{p1:.445,p2:.05,p3:.55,p4:.95},easeInOutExpo:{p1:1,p2:0,p3:0,p4:1},easeInOutCirc:{p1:.785,p2:.135,p3:.15,p4:.86},easeInOutBack:{p1:.68,p2:-0.55,p3:.265,p4:1.55},custom:{p1:0,p2:.35,p3:.5,p4:1.3},random:{p1:Math.random().toPrecision(3),p2:Math.random().toPrecision(3),p3:Math.random().toPrecision(3),p4:Math.random().toPrecision(3)}};return t[e]?t[e]:{p1:.42,p2:0,p3:.58,p4:1}},flip:function(e,t,n){var r=t||1,i,s=function(e){return{start:0,end:e,axis:"Y"}},o=function(t){switch(e){case"left":return{start:0,end:-360*r,axis:"Y"};case"right":return{start:0,end:360*r,axis:"Y"};case"up":return{start:0,end:360*r,axis:"X"};case"down":return{start:0,end:-360*r,axis:"X"}}},u=function(e){var t;return e.value&&(typeof e.value=="string"?t=o(e.value):t=s(e.value)),t};switch(typeof e){case"number":i=s(e);break;case"string":i=o(e);break;case"object":i=u(e);break;default:i=null}return i},percentage:function(e){var t;return typeof e=="string"?e.indexOf("%")>-1||e.indexOf("°")>-1?t=parseInt(e,10)/100:e>=1||e<=-1?t=parseInt(e,10)/100:t=parseFloat(e,10):typeof e=="number"&&(e>=1||e<=-1?t=e/100:t=e),t},vendorPrefix:function(){var e=document.createElement("div");"webkitAnimation"in e.style?(this.prefix="-webkit-",this.prefixJS="webkit"):"MozAnimation"in e.style?(this.prefix="-moz-",this.prefixJS="Moz"):"msAnimation"in e.style?(this.prefix="-ms-",this.prefixJS="ms"):"OAnimation"in e.style||"OTransform"in e.style?(this.prefix="-o-",this.prefixJS="O"):(this.prefix="",this.prefixJS=""),this.debug&&console.log("prefix="+this.prefix,"prefixJS="+this.prefixJS);return},docHeight:function(){var e=document;return Math.max(Math.max(e.body.scrollHeight,e.documentElement.scrollHeight),Math.max(e.body.offsetHeight,e.documentElement.offsetHeight),Math.max(e.body.clientHeight,e.documentElement.clientHeight))},pixel:function(e,t){if(typeof e=="number")return e%1===0?e:parseFloat(e,10)*t;if(e.indexOf("px")>-1)return parseInt(e,10);if(e.indexOf("%")>-1)return Math.round(parseInt(e,10)/100*t)},keyframeInsert:function(e){if(document.styleSheets&&document.styleSheets.length){var t=0;try{document.styleSheets[0].cssRules.length>0&&(t=document.styleSheets[0].cssRules.length),document.styleSheets[0].insertRule(e,t)}catch(n){console.warn(n.message,e)}}else{var r=document.createElement("style");r.innerHTML=e,document.head.appendChild(r)}return},keyframeDelete:function(e){var t=document.all?"rules":"cssRules",n;for(n=0;n<document.styleSheets[0][t].length;n+=1)if(document.styleSheets[0][t][n].name===e){document.styleSheets[0].deleteRule(n),this.debug&&console.log("Deleted keyframe: "+e);break}return},clearAnimation:function(e){this.style[this.prefixJS+"AnimationName"]=" ",this.style[this.prefixJS+"AnimationDelay"]=" ",this.style[this.prefixJS+"AnimationDuration"]=" ",this.style[this.prefixJS+"AnimationTimingFunction"]=" ",this.style[this.prefixJS+"AnimationIterationCount"]=" ",this.style[this.prefixJS+"AnimationDirection"]=" ",this.style[this.prefixJS+"AnimationPlayState"]=" ",alice.keyframeDelete(e.animationName);return},init:function(t){console.info("Initializing "+this.name+" ("+this.description+") "+this.version),this.vendorPrefix(),t&&t.elems&&(this.elems=this.elements(t.elems));if(t&&t.workflow===!0){console.log("jWorkflow: enabled");var n=t&&t.id?t.id:"",r=jWorkflow.order(),i={delay:function(e){return r.chill(e),i},log:function(e){return r.andThen(function(){console.log(e)}),i},custom:function(e){return r.andThen(e),i},start:function(){r.start(function(){console.info("workflow.start")})}};return Array.prototype.forEach.call(Object.keys(e.plugins),function(t){var s=e.plugins[t];i[t]=function(){var e=arguments;return r.andThen(function(){s.apply(document.getElementById(n),e)}),i}}),i}return console.log("jWorkflow: disabled"),e.plugins}};return e}();alice.format={duration:function(e){"use strict";var t=0,n=0,r=0;return t=alice.duration(e),r=t,e.randomness&&(n=alice.randomize(t,alice.percentage(e.randomness)),r=Math.abs(n)),r+"ms"},easing:function(e){"use strict";var t=alice.easing(e),n="cubic-bezier("+t.p1+", "+t.p2+", "+t.p3+", "+t.p4+")";return n},coords:function(e){"use strict";var t=alice.coords(e),n=t.x+" "+t.y;return n},oppositeNumber:function(e){"use strict";return-e}},alice.helper={duration:function(e,t,n){"use strict";return e&&e.offset?t?t=parseInt(t,10)+parseInt(e.offset,10):t=parseInt(alice.format.duration(n),10):t=parseInt(alice.format.duration(n),10),t+="ms",t},rotation:function(e,t){"use strict";var n=e;return t.randomness&&(n=alice.randomize(n,alice.percentage(t.randomness))),n}},alice.cleaner={removeAni:function(e){"use strict";var t,n;document.addEventListener(alice.prefixJS+"AnimationEnd",function(){n=alice.elements(e);for(t=0;t<n.length;t++)document.getElementById(n[t].getAttribute("id")).removeAttribute("style")},!1)},removeElems:function(e){"use strict";var t,n;document.addEventListener(alice.prefixJS+"AnimationEnd",function(){n=alice.elements(e);for(t=0;t<n.length;t++){var r=document.getElementById(n[t].getAttribute("id"));r.parentNode.removeChild(r)}},!1)}};var alicejs=alice.init();alice.plugins.cheshire=function(e){"use strict";console.info("cheshire",e);var t=e.delay||"0ms",n=e.duration||"2000ms",r=e.timing||"ease",i=e.iteration||1,s=e.direction||"normal",o=e.playstate||"running",u=e.perspective||"1000",a=e.perspectiveOrigin||"center",f=e.backfaceVisibility||"visible",l=alice.percentage(e.overshoot)||0,c=85,h=e.rotate||0,p=e.turns||1,d=alice.flip(e.flip,p,l),v=e.fade&&e.fade!==""?e.fade:null,m=v&&v==="out"?1:0,g=v&&v==="out"?0:1,y=e.scale&&e.scale.from?alice.percentage(e.scale.from):1,b=e.scale&&e.scale.to?alice.percentage(e.scale.to):1,w=e.shadow||!1,E="",S="",x=1,T=0,N=e.posEnd||0,C=N+x*Math.floor(N*l),k=e.cleanUp||"partial",L={},A,O,M,_,D,P,H,B,j,F,I,q,R,U;e.cleanUp==="partial"?alice.cleaner.removeAni(e.elems):e.cleanUp==="total"&&alice.cleaner.removeElems(e.elems),O=alice.elements(e.elems);if(O&&O.length>0)for(_=0;_<O.length;_+=1){M=O[_],A=M.parentElement||M.parentNode,L.delay=alice.helper.duration(e.delay,L.delay,t),L.duration=alice.helper.duration(e.duration,L.duration,n),L.rotate=alice.helper.rotation(h,e),L.rotateStart=alice.percentage(L.rotate)*100,L.rotateOver=l*100,L.rotateEnd=0,D=alice.id+"-cheshire-"+(new Date).getTime()+"-"+Math.floor(Math.random()*1e6);if(e.move){q=e.move.direction||e.move;switch(q){case"left":E="Left",S="X",x=-1,R=window.innerWidth,T=e.move.start?alice.pixel(e.move.start,R):R,N=e.move.end?alice.pixel(e.move.end,R):0,C=x*Math.floor(T*l);break;case"right":E="Right",S="X",x=1,R=document.body.offsetWidth-M.clientWidth,T=e.move.start?alice.pixel(e.move.start,R):0,N=e.move.end?alice.pixel(e.move.end,R):R,C=N+x*Math.floor(N*l);break;case"up":E="Up",S="Y",x=-1,R=window.innerHeight,T=e.move.start?alice.pixel(e.move.start,R):R,N=e.move.end?alice.pixel(e.move.end,R):0,C=x*Math.floor(T*l);break;case"down":E="Down",S="Y",x=1,R=alice.docHeight()-A.clientHeight*3,T=e.move.start?alice.pixel(e.move.start,R):0,N=e.move.end?alice.pixel(e.move.end,R):R,C=N+x*Math.floor(N*l),alice.debug&&console.log(alice.docHeight(),window.innerHeight,window.pageYOffset,A.clientHeight)}}H="",H+=d?" rotate"+d.axis+"("+d.start+"deg)":" translate"+S+"("+T+"px)",H+=L.rotate&&parseInt(L.rotate,10)!==0?" rotate("+L.rotateStart+"deg)":"",H+=" scale("+y+")",B="",B+=d?" rotate"+d.axis+"("+Math.floor((1+l)*d.end)+"deg)":" translate"+S+"("+C+"px)",B+=L.rotate&&parseInt(L.rotate,10)!==0?" rotate("+L.rotateOver+"deg)":"",B+=b>1?" scale("+b+")":"",B+=" scale("+b+")",j="",j+=d?" rotate"+d.axis+"("+d.end+"deg)":" translate"+S+"("+N+"px)",E===""&&s==="alternate"?j+=" rotate("+ -L.rotateStart+"deg)":j+=L.rotate&&parseInt(L.rotate,10)!==0?" rotate("+L.rotateEnd+"deg)":"",j+=" scale("+b+")",w===!0&&b>1&&(U=Math.round(b*10),F=" 0px 0px 0px rgba(0, 0, 0, 1)",I=" "+U+"px "+U+"px "+U+"px rgba(0, 0, 0, 0.5)"),P="",P+="@"+alice.prefix+"keyframes "+D+" {\n",P+=" 0% {\n",P+=" "+alice.prefix+"transform:"+H+";"+"\n",P+=" "+alice.prefix+"transform-origin:"+alice.format.coords(a)+";"+"\n",P+=v?" opacity: "+m+";"+"\n":"",P+=w===!0&&b>1?" "+alice.prefix+"box-shadow: "+F+";"+"\n":"",P+=" }\n",l!==0&&(P+=" "+c+"% {\n",P+=" "+alice.prefix+"transform:"+B+";"+"\n",P+=" "+alice.prefix+"transform-origin:"+alice.format.coords(a)+";"+"\n",P+=" }\n"),P+=" 100% {\n",P+=" "+alice.prefix+"transform:"+j+";"+"\n",P+=" "+alice.prefix+"transform-origin:"+alice.format.coords(a)+";"+"\n",P+=v?" opacity: "+g+";"+"\n":"",P+=w===!0&&b>1?" "+alice.prefix+"box-shadow: "+I+";"+"\n":"",P+=" }\n",P+="}\n",console.log(P),alice.keyframeInsert(P),A.style[alice.prefixJS+"Perspective"]=u+"px",A.style[alice.prefixJS+"PerspectiveOrigin"]=alice.format.coords(a),M.style[alice.prefixJS+"BackfaceVisibility"]=f,M.style[alice.prefixJS+"AnimationName"]=D,M.style[alice.prefixJS+"AnimationDelay"]=L.delay,M.style[alice.prefixJS+"AnimationDuration"]=L.duration,M.style[alice.prefixJS+"AnimationTimingFunction"]=alice.format.easing(r),M.style[alice.prefixJS+"AnimationIterationCount"]=i,M.style[alice.prefixJS+"AnimationDirection"]=s,M.style[alice.prefixJS+"AnimationPlayState"]=o,M.style[alice.prefixJS+"Transform"]=j,M.style.opacity=v?g:"",M.style[alice.prefixJS+"BoxShadow"]=w===!0&&b>1?I:"","MozAnimation"in M.style?M.addEventListener("animationend",alice.clearAnimation,!1):M.addEventListener(alice.prefixJS+"AnimationEnd",alice.clearAnimation,!1),alice.debug&&(console.log(P),console.log(A.style),console.log(M.id,alice.prefixJS,M.style,M.style.cssText,M.style[alice.prefixJS+"AnimationDuration"],M.style[alice.prefixJS+"AnimationTimingFunction"]))}else console.warn("No elements!");return e},alice.plugins.bounce=function(e){"use strict";console.info("bounce: ",arguments),e||(e="");var t={from:"100%",to:"150%"};e.scale&&(typeof e.scale=="object"?t=e.scale:t.to=e.scale);var n={elems:e.elems||alice.anima,scale:t,shadow:e.shadow||!0,duration:e.duration||"750ms",timing:e.timing||"easeOutSine",delay:e.delay||"0ms",iteration:e.iteration||"infinite",direction:e.direction||"alternate",playstate:e.playstate||"running"};return alice.plugins.cheshire(n),n},alice.plugins.dance=function(e){"use strict";console.info("dance: ",arguments),e||(e="");var t={elems:e.elems||alice.anima,rotate:e.rotate||45,duration:e.duration||"750ms",timing:e.timing||"easeInOutBack",delay:e.delay||"0ms",iteration:e.iteration||"infinite",direction:e.direction||"alternate",playstate:e.playstate||"running"};return alice.plugins.cheshire(t),t},alice.plugins.drain=function(e){"use strict";console.info("drain: ",arguments),e||(e="");var t={scale:e.fade==="in"?{from:"0%",to:"100%"}:{from:"100%",to:"0%"},elems:e.elems||alice.anima,rotate:e.rotate||-2880,duration:e.duration||"4500ms",timing:e.timing||"ease-in-out",delay:e.delay||"0ms",iteration:e.iteration||1,direction:e.direction||"normal",playstate:e.playstate||"running"};return alice.plugins.cheshire(t),t},alice.plugins.fade=function(e){"use strict";console.info("fade: ",arguments),e||(e="");var t={elems:e.elems||alice.anima,fade:e.fade||"in",duration:e.duration||"4500ms",timing:e.timing||"ease-in-out",delay:e.delay||"0ms",iteration:e.iteration||1,direction:e.direction||"normal",playstate:e.playstate||"running"};return alice.plugins.cheshire(t),t},alice.plugins.hinge=function(e){"use strict";console.info("hinge: ",arguments),e||(e="");var t={perspectiveOrigin:"top-left",elems:e.elems||alice.anima,rotate:e.rotate||25,overshoot:e.overshoot||0,duration:e.duration||"1000ms",timing:e.timing||"linear",delay:e.delay||"0ms",iteration:e.iteration||"infinite",direction:e.direction||"alternate",playstate:e.playstate||"running"};return alice.plugins.cheshire(t),t},alice.plugins.pageFlip=function(e){"use strict";console.info("pageFlip: ",arguments),e||(e="");var t="";switch(e.flipDirection){case"right":t="right";break;case"up":t="top";break;case"down":t="bottom"}var n={perspectiveOrigin:t||"left",elems:e.elems||alice.anima,flip:e.flipDirection||"left",turns:e.turns||1,overshoot:e.overshoot||0,duration:e.duration||"2000ms",timing:e.timing||"ease-in-out",delay:e.delay||"0ms",iteration:e.iteration||"infinite",direction:e.direction||"normal",playstate:e.playstate||"running"};return alice.plugins.cheshire(n),n},alice.plugins.pendulum=function(e){"use strict";console.info("pendulum: ",arguments),e||(e="");var t={perspectiveOrigin:"top",elems:e.elems||alice.anima,rotate:e.rotate||45,overshoot:e.overshoot||0,duration:e.duration||"2000ms",timing:e.timing||"ease-in-out",delay:e.delay||"0ms",iteration:e.iteration||"infinite",direction:e.direction||"alternate",playstate:e.playstate||"running"};return alice.plugins.cheshire(t),t},alice.plugins.phantomZone=function(e){"use strict";console.info("phantomZone: ",arguments),e||(e="");var t={scale:e.fade==="in"?{from:"1%",to:"100%"}:{from:"100%",to:"1%"},elems:e.elems||alice.anima,rotate:e.rotate||-720,flip:e.flip||"left",duration:e.duration||"5000ms",timing:e.timing||"ease-in-out",delay:e.delay||"0ms",iteration:e.iteration||1,direction:e.direction||"normal",playstate:e.playstate||"running"};return alice.plugins.cheshire(t),t},alice.plugins.raceFlag=function(e){"use strict";console.info("raceFlag: ",arguments),e||(e="");var t={flip:"down",elems:e.elems||alice.anima,rotate:e.rotate||-720,perspectiveOrigin:e.perspectiveOrigin||"top-right",duration:e.duration||"3000ms",timing:e.timing||"ease-in-out",delay:e.delay||"0ms",iteration:e.iteration||1,direction:e.direction||"normal",playstate:e.playstate||"running"};return alice.plugins.cheshire(t),t},alice.plugins.slide=function(e){"use strict";console.info("slide: ",arguments),e||(e="");var t={elems:e.elems||alice.anima,move:e.move||"left",overshoot:e.overshoot||"0",duration:e.duration||"4000ms",timing:e.timing||"ease-in-out",delay:e.delay||"0ms",iteration:e.iteration||1,direction:e.direction||"normal",playstate:e.playstate||"running"};return alice.plugins.cheshire(t),t},alice.plugins.spin=function(e){"use strict";console.info("spin: ",arguments),e||(e="");var t={perspectiveOrigin:"center",direction:"normal",elems:e.elems||alice.anima,flip:e.flip||"left",turns:e.turns||1,overshoot:e.overshoot||0,duration:e.duration||"1200ms",timing:e.timing||"ease-in-out",delay:e.delay||"0ms",iteration:e.iteration||"infinite",playstate:e.playstate||"running"};return alice.plugins.cheshire(t),t},alice.plugins.toss=function(e){"use strict";console.info("toss: ",arguments),e||(e="");var t={rotate:e.move==="left"||e.move==="down"?720:-720,elems:e.elems||alice.anima,move:e.move||"right",overshoot:e.overshoot||0,perspectiveOrigin:e.perspectiveOrigin||"center",duration:e.duration||"2500ms",timing:e.timing||"ease-in-out",delay:e.delay||"0ms",iteration:e.iteration||"infinite",direction:e.direction||"normal",playstate:e.playstate||"running"};return alice.plugins.cheshire(t),t},alice.plugins.twirl=function(e){"use strict";console.info("twirl: ",arguments),e||(e="");var t={rotate:e.flip==="left"?-135:135,elems:e.elems||alice.anima,flip:e.flip||"left",duration:e.duration||"3000ms",timing:e.timing||"ease-in-out",delay:e.delay||"0ms",iteration:e.iteration||1,direction:e.direction||"normal",playstate:e.playstate||"running"};return alice.plugins.cheshire(t),t},alice.plugins.wobble=function(e){"use strict";console.info("wobble: ",arguments),e||(e="");var t={elems:e.elems||alice.anima,rotate:e.rotate||5,perspectiveOrigin:e.perspectiveOrigin||"center",duration:e.duration||"200ms",timing:e.timing||"linear",delay:e.delay||"0ms",iteration:e.iteration||"infinite",direction:"alternate",playstate:e.playstate||"running"};return alice.plugins.cheshire(t),t},alice.plugins.zoom=function(e){"use strict";console.info("zoom: ",arguments),e||(e="");var t={from:"1%",to:"125%"};e.scale&&(typeof e.scale=="object"?t=scale:t.to=scale);var n={elems:e.elems||alice.anima,scale:t,shadow:e.shadow||!0,move:e.move||"none",duration:e.duration||"2000ms",timing:e.timing||"ease",delay:e.delay||"0ms",iteration:e.iteration||1,direction:e.direction||"normal",playstate:e.playstate||"running"};return alice.plugins.cheshire(n),n},alice.plugins.caterpillar=function(){"use strict";var e={pages:[],NewPageClass:"",leftPage:0,rightPage:1,realPageCount:0,pn:1,pageWidth:"",pageHeight:"",docWidth:function(){var e=document.body.clientWidth;return e},docHeight:alice.docHeight(),speed:0,book:"",timing:"linear",binding:"",paging:"",controlBoxStyle:"",wrap:!1,piggyBg:null,transformOrigin:"",transformRotate:"",transformDegrees:[],_rot270:"(262deg)",_rot180:"(180deg)",_rot90:"(90deg)",_rot0:"(0deg)",_rotNeg90:"(-90deg)",_rotNeg180:"(-180deg)",_rotNeg270:"(-262deg)",originZero:"",shadowPattern0:"",shadowPattern50:"",shadowPattern100:"",shadowPatternRev50:"",shadowPatternRev100:"",animationStart:"",animationEnd:"",animationRunning:!1,bookStart:"",bookEnd:"",pageTrigger:"",loadPage:"",jumper:null,pageToClear:"",pageNumber:"",randomizer:"",inPageControls:0,keyControls:0,lastPage:null,helpers:{},AnimGenerator:function(t){var n,r,i,s,o,u,a,f,l="\n "+alice.prefix+"transform: "+e.transformRotate+e._rot90+";",c="\n "+alice.prefix+"transform: "+e.transformRotate+e._rot270+";",h="\n "+alice.prefix+"transform: "+e.transformRotate+e._rotNeg270+";",p="\n "+alice.prefix+"transform: "+e.transformRotate+e._rotNeg90+";",d="\n "+alice.prefix+"transform: "+e.transformRotate+e._rot0+";",v="\n "+alice.prefix+"transform-origin: "+e.originZero+";",m="\n "+alice.prefix+"transform-origin: 50% 50%;",g="\n "+alice.prefix+"transform-origin: "+e.transformOrigin+";",y=" 0%{"+alice.prefix+"box-shadow:"+t.shadowPattern0+";",b=" 50%{"+alice.prefix+"box-shadow:"+t.shadowPattern50+";",w=" 100%{"+alice.prefix+"box-shadow:"+t.shadowPattern100+";",E="50%{"+alice.prefix+"box-shadow:"+t.shadowPatternRev50+";"+"\n",S="100%{"+alice.prefix+"box-shadow:"+t.shadowPatternRev100+";"+"\n",x="@"+alice.prefix+"keyframes oddPageTurnF{\n",T="@"+alice.prefix+"keyframes oddPageTurnR{\n",N="@"+alice.prefix+"keyframes evenPageTurnF{\n",C="@"+alice.prefix+"keyframes evenPageTurnR{\n",k="@"+alice.prefix+"keyframes abstrPageTurnF{\n",L="@"+alice.prefix+"keyframes abstrPageTurnR{\n",A="@"+alice.prefix+"keyframes abstrPageReTurnF{\n",O="@"+alice.prefix+"keyframes abstrPageReTurnR{\n",M="}\n";alice.keyframeDelete("oddPageTurnF"),alice.keyframeDelete("oddPageTurnR"),alice.keyframeDelete("evenPageTurnF"),alice.keyframeDelete("evenPageTurnR"),alice.keyframeDelete("abstrPageTurnF"),alice.keyframeDelete("abstrPageTurnR"),alice.keyframeDelete("abstrPageReTurnF"),alice.keyframeDelete("abstrPageReTurnR"),e.paging==="single"&&(e.binding==="left"&&(s=k+y+M+b+M+w+v+h+M+"\n"+M,i=L+y+M+b+M+w+v+d+M+"\n"+M,r=A+y+M+b+M+w+v+d+M+"\n"+M,n=O+y+M+b+M+w+v+d+M+"\n"+M),e.binding==="right"&&(s=k+y+M+b+M+w+g+c+M+"\n"+M,i=L+y+M+b+M+w+g+d+M+"\n"+M,r=A+y+M+b+M+w+g+d+M+"\n"+M,n=O+y+M+b+M+w+g+d+M+"\n"+M),e.binding==="top"&&(s=k+y+M+b+M+w+v+c+M+"\n"+M,i=L+y+M+b+M+w+v+d+M+"\n"+M,r=A+y+M+b+M+w+v+d+M+"\n"+M,n=O+y+M+b+M+w+v+d+M+"\n"+M),e.binding==="bottom"&&(s=k+y+M+b+M+w+g+h+M+"\n"+M,i=L+y+M+b+M+w+g+d+M+"\n"+M,r=A+y+M+b+M+w+g+d+M+"\n"+M,n=O+y+M+b+M+w+g+d+M+"\n"+M),e.binding==="center"&&(s=k+y+M+b+M+w+m+p+M+"\n"+M,i=L+y+M+b+M+w+m+d+M+"\n"+M,r=A+y+M+b+M+w+m+l+M+"\n"+M,n=O+y+M+b+M+w+m+d+M+"\n"+M),e.binding==="middle"&&(s=k+y+M+b+M+w+m+p+M+"\n"+M,i=L+y+M+b+M+w+m+d+M+"\n"+M,r=A+y+M+b+M+w+m+l+M+"\n"+M,n=O+y+M+b+M+w+m+d+M+"\n"+M),alice.keyframeInsert(s),alice.keyframeInsert(i),alice.keyframeInsert(r),alice.keyframeInsert(n)),e.paging==="double"&&(e.binding==="left"&&(o=x+y+M+b+M+w+v+p+M+"\n"+M,u=T+y+M+b+M+w+v+d+M+"\n"+M,a=N+E+M+S+g+d+M+"\n"+M,f=C+E+M+S+g+l+M+"\n"+M),e.binding==="right"&&(o=x+y+M+b+M+w+g+l+M+"\n"+M,u=T+y+M+b+M+w+g+d+M+"\n"+M,a=N+E+M+S+v+d+M+"\n"+M,f=C+E+M+S+v+p+M+"\n"+M),e.binding==="top"&&(o=x+y+M+b+M+w+v+l+M+"\n"+M,u=T+y+M+b+M+w+v+d+M+"\n"+M,a=N+E+M+S+g+d+M+"\n"+M,f=C+E+M+S+g+p+M+"\n"+M),e.binding==="bottom"&&(o=x+y+M+b+M+w+g+p+M+"\n"+M,u=T+y+M+b+M+w+g+d+M+"\n"+M,a=N+E+M+S+v+d+M+"\n"+M,f=C+E+M+S+v+l+M+"\n"+M),alice.keyframeInsert(o),alice.keyframeInsert(u),alice.keyframeInsert(a),alice.keyframeInsert(f))},config:function(t){function n(e){var t=document.styleSheets.length;for(var n=0;n<t;n++){var r=document.styleSheets[n];if(r.rules)var i=r.rules;else var i=r.cssRules;var i=r.cssRules?r.cssRules:r.rules;for(var s=0;s<i.length;s++)if(i[s].selectorText==e){var o=i[s].style.width.toString(),u=i[s].style.height.toString();return[o,u]}}}e.speed=alice.duration(t.speed),e.book=document.getElementById(t.elems||alice.anima),e.timing=t.timing,e.binding=t.binding,e.piggyBg=t.piggyBg,e.controlsBg=t.controlsBg,e.originZero="0 0",e.pageClass=t.pageClass,e.randomizer=t.randomize,console.log(e.randomizer),e.bookStart=document.createEvent("Event"),e.bookStart.initEvent("bookStart",!0,!0),e.bookEnd=document.createEvent("Event"),e.bookEnd.initEvent("bookEnd",!0,!0),e.loadPage=document.createEvent("Event"),e.loadPage.initEvent("loadPage",!0,!0),e.pageTrigger=document.createEvent("Event"),e.pageTrigger.initEvent("pageTrigger",!0,!0);var r,i,s=n("#"+e.book.getAttribute("id"));s?(r=s[0],i=s[1]):(r=e.book.style.width,i=e.book.style.height);var o,u,a;r.indexOf("%")>0?(o="%",u="0."+r.substring(0,r.indexOf(o)),u=parseFloat(u),a=e.docWidth()*u):r.indexOf("px")>0?(o="px",a=r.substring(0,r.indexOf(o))):a=r,e.pageWidth=a;var f,l,c;i.indexOf("%")>0?(f="%",l="0."+i.substring(0,i.indexOf(f)),l=parseFloat(l),c=e.docHeight*l):i.indexOf("px")>0?(f="px",c=i.substring(0,i.indexOf(f))):c=i,e.pageHeight=c;var h=Math.floor(e.pageWidth*4);e.shadowPattern0="",e.shadowPattern50="",e.shadowPattern100="",e.shadowPatternRev50="",e.shadowPatternRev100="",e.wrap=t.wrap,e.paging=t.paging,e.NewPageClass="book"+(new Date).getTime(),e.animationEnd=alice.prefixJS+"AnimationEnd",alice.prefixJS==="Moz"&&(e.animationEnd="animationstart",e.animationEnd="animationend");var p=e.book.childNodes,d=0;for(var v=0;v<p.length;v++)if(p[v].nodeType===1){if(p[v].tagName!=="DIV"&&p[v].tagName!=="div")return console.error("Your pages must be all be the DIV tag element. Please place the contents inside."),!1;e.pages[d]=p[v],e.realPageCount=e.realPageCount+1,d++}e.book.style[alice.prefixJS+"Perspective"]=h+"px",e.book.style.zIndex="1000",e.book.style.position="relative",e.binding=t.binding;if(t.binding==="center"||t.binding==="left"||t.binding==="right")e.transformRotate="rotateY";if(t.binding==="middle"||t.binding==="top"||t.binding==="bottom")e.transformRotate="rotateX";if(t.paging==="single")e.book.style.width=e.pageWidth+"px",e.book.style.height=e.pageHeight+"px";else if(t.paging==="double")if(t.binding==="left"||t.binding==="right")e.book.style.width=e.pageWidth*2+"px",e.book.style.height=e.pageHeight+"px";else if(t.binding==="top"||t.binding==="bottom")e.book.style.width=e.pageWidth+"px",e.book.style.height=e.pageHeight*2+"px";e.controlBoxStyle=e.book;if(e.paging==="single"){e.transformDegrees=[e._rot0,e._rot0,e._rot0];switch(t.binding){case"center":e.transformDegrees=[e._rot0,e._rot90,e._rotNeg90],e.transformOrigin="50% 50%";break;case"middle":e.transformDegrees=[e._rot0,e._rot90,e._rotNeg90],e.transformOrigin="50% 50%";break;case"left":e.transformOrigin=e.originZero;break;case"top":e.transformOrigin=e.originZero;break;case"right":e.transformOrigin=e.pageWidth+"px 0px";break;case"bottom":e.transformDegrees=[e._rot0,e._rot0,e._rotNeg270],e.transformOrigin="0px "+e.pageHeight+"px"}}if(e.paging==="double"){switch(t.binding){case"left":e.transformOrigin=e.pageWidth+"px 0px";break;case"right":e.transformOrigin=e.pageWidth+"px 0px";break;case"top":e.transformOrigin="0px "+e.pageHeight+"px";break;case"bottom":e.transformOrigin="0px "+e.pageHeight+"px"}e.transformDegrees=[e._rot0,e._rot0]}},clearAnimation:function(t,n){var r=e.helper.getThisId(t),i=document.getElementById(t);document.getElementById("_piggy")&&e.book.removeChild(document.getElementById("_piggy")),i.style[alice.prefixJS+"Animation"]="",i.style[alice.prefixJS+"AnimationDelay"]="",i.style[alice.prefixJS+"AnimationDuration"]="",i.style[alice.prefixJS+"AnimationTimingFunction"]="",i.style[alice.prefixJS+"AnimationIterationCount"]="",i.style[alice.prefixJS+"AnimationDirection"]="",i.style[alice.prefixJS+"AnimationPlayState"]="";if(e.binding==="center"||e.binding==="middle")r%2===1&&e.pn%2===1&&(i.style.display="none"),r%2===0&&e.pn%2===1&&(i.style.display="none");else if(e.binding==="left"||e.binding==="top"||e.binding==="right"||e.binding==="bottom")i.style.display="none";if(e.paging==="single"){var s,o;o=document.getElementById("p"+(parseInt(r,10)-1)),s=document.getElementById("p"+(parseInt(r,10)+1)),r===e.realPageCount&&(s=document.getElementById("p1")),i.style[alice.prefixJS+"Transform"]=e.transformRotate+e.transformDegrees[0],i.style.zIndex="0";if(r>1&&n==="forwards"){e.jumper!=null&&(document.getElementById("p"+e.jumper).style.display="block",i.style[alice.prefixJS+"Transform"]=e.transformRotate+e.transformDegrees[1]),o.style[alice.prefixJS+"Transform"]=e.transformRotate+e.transformDegrees[1];if(e.binding==="left"||e.binding==="right"||e.binding==="top"||e.binding==="bottom")s.style[alice.prefixJS+"Transform"]=e.transformRotate+e.transformDegrees[0]}r===1&&n==="forwards"&&(o=document.getElementById("p"+e.realPageCount),o.style[alice.prefixJS+"Transform"]=e.transformRotate+e.transformDegrees[1]);if(r>0&&n==="reverse"){o=document.getElementById("p"+(r-1)),e.jumper!=null&&(document.getElementById("p"+e.jumper).style.display="block",i.style[alice.prefixJS+"Transform"]=e.transformRotate+e.transformDegrees[1]),e.wrap===!0&&r!==e.realPageCount&&(s=document.getElementById("p"+(parseInt(r,10)+1)));if(e.binding==="left"||e.binding==="top"||e.binding==="right"||e.binding==="bottom")s.style.display="none",i.style.display="block",e.jumper!=null&&(document.getElementById("p"+e.jumper).style.display="none");s.style[alice.prefixJS+"Transform"]=e.transformRotate+e.transformDegrees[1]}r===1&&n==="reverse"&&(o=document.getElementById("p"+e.realPageCount),o.style[alice.prefixJS+"Transform"]=e.transformRotate+e.transformDegrees[2],s.style[alice.prefixJS+"Transform"]=e.transformRotate+e.transformDegrees[1])}e.pn++,e.jumper=null},resetCSS:function(t,n,r){var i,s,o,u,a,f;i=document.getElementById(r),s=e.helper.getThisId(r),o=document.getElementById("p"+(parseInt(s,10)+1)),u="display: block; left: 0px; top: 0px;";if(s%2===1){i.setAttribute("style","");if(t==="forward"){i.style[alice.prefixJS+"TransformOrigin"]=e.originZero;switch(e.binding){case"top":a=e.transformRotate+e._rot90,i.style.top=e.pageHeight+"px";break;case"right":a=e.transformRotate+e._rot90,i.style[alice.prefixJS+"TransformOrigin"]=e.transformOrigin;break;case"left":a=e.transformRotate+e._rotNeg90,i.style.left=e.pageWidth+"px";break;case"bottom":a=e.transformRotate+
-e._rotNeg90,i.style[alice.prefixJS+"TransformOrigin"]=e.transformOrigin}i.style[alice.prefixJS+"Transform"]=a}else if(t==="reverse"){i.setAttribute("style",u),i.style[alice.prefixJS+"TransformOrigin"]=e.originZero;switch(e.binding){case"top":i.style.top=e.pageHeight+"px";break;case"right":i.style[alice.prefixJS+"TransformOrigin"]=e.transformOrigin;break;case"left":i.style.left=e.pageWidth+"px";break;case"bottom":i.style[alice.prefixJS+"TransformOrigin"]=e.transformOrigin;break;default:i.style.top="0px"}}}if(s%2===0){i.setAttribute("style","");if(t==="forward"){i.setAttribute("style",u),i.style[alice.prefixJS+"TransformOrigin"]=e.originZero;switch(e.binding){case"top":i.style[alice.prefixJS+"TransformOrigin"]=e.transformOrigin;break;case"right":i.style.left=e.pageWidth+"px";break;case"left":i.style[alice.prefixJS+"TransformOrigin"]=e.transformOrigin,i.style.left="0px";break;case"bottom":i.style[alice.prefixJS+"TransformOrigin"]=e.originZero,i.style.top=e.pageHeight+"px"}i.style[alice.prefixJS+"Transform"]=e.transformRotate+e._rot0}else if(t==="reverse"){i.style[alice.prefixJS+"TransformOrigin"]=e.originZero;switch(e.binding){case"top":i.style[alice.prefixJS+"TransformOrigin"]=e.transformOrigin,f=e.transformRotate+e._rotNeg90;break;case"right":f=e.transformRotate+e._rotNeg90,i.style.left=e.pageWidth+"px";break;case"bottom":f=e.transformRotate+e._rot90,i.style.top=e.pageHeight+"px";break;case"left":i.style[alice.prefixJS+"TransformOrigin"]=e.transformOrigin,f=e.transformRotate+e._rot90}i.style[alice.prefixJS+"Transform"]=f}}i.style.border="none",i.style[alice.prefixJS+"boxShadow"]=e.shadowPattern0},styleConfig:function(t){var n=document.getElementById("p"+t);e.paging==="single"&&((e.binding==="center"||e.binding==="middle")&&n.setAttribute("style","display: none; "+alice.prefix+"transform-origin: 50% 50%;"+alice.prefix+"transform: "+e.transformRotate+e._rot90+";"+alice.prefix+"box-shadow: "+e.shadowPattern100+";"),(e.binding==="left"||e.binding==="top"||e.binding==="bottom"||e.binding==="right")&&n.setAttribute("style","display: none; "+alice.prefix+"transform-origin:"+e.transformOrigin+";"+alice.prefix+"transform: "+e.transformRotate+e._rot0+";"+alice.prefix+"box-shadow: "+e.shadowPattern100+";")),e.paging==="double"&&(e.binding==="left"&&(t%2===1&&(n.style[alice.prefixJS+"TransformOrigin"]=e.originZero,n.style.left=e.pageWidth+"px"),t%2===0&&(n.style[alice.prefixJS+"TransformOrigin"]=e.transformOrigin,n.style[alice.prefixJS+"Transform"]=e.transformRotate+e._rot90)),e.binding==="right"&&(t%2===1&&(n.style[alice.prefixJS+"TransformOrigin"]=e.transformOrigin),t%2===0&&(n.style[alice.prefixJS+"TransformOrigin"]=e.originZero,n.style.left=e.pageWidth+"px",n.style[alice.prefixJS+"Transform"]=e.transformRotate+e._rotNeg90)),e.binding==="top"&&(t%2===1&&(n.style.top=e.pageHeight+"px",n.style[alice.prefixJS+"TransformOrigin"]=e.originZero),t%2===0&&(n.style[alice.prefixJS+"TransformOrigin"]=e.transformOrigin,n.style[alice.prefixJS+"Transform"]=e.transformRotate+e._rotNeg90)),e.binding==="bottom"&&(t%2===1&&(n.style[alice.prefixJS+"TransformOrigin"]=e.transformOrigin),t%2===0&&(n.style[alice.prefixJS+"TransformOrigin"]=e.originZero,n.style.top=e.pageHeight+"px",n.style[alice.prefixJS+"Transform"]=e.transformRotate+e._rot90)))},init:function(t){function r(t){var n=t.keyCode,r=e.realPageCount+1;n===39&&e.rightPage<=r&&(e.paging==="single"&&e.abPageTurn(e.rightPage),e.paging==="double"&&e.turnPage(e.rightPage)),n===37&&(e.paging==="single"&&e.abPageTurnR(e.rightPage),e.paging==="double"&&e.leftPage>=1&&e.turnPage(e.leftPage))}e.config(t),e.AnimGenerator(t),e.binding!=="center"||e.binding!=="middle"?e.helper.bookStatus(e.rightPage-1):e.helper.bookStatus(e.rightPage),t.inPageControls===!1&&(e.inPageControls=1),t.keyControls===!1&&(e.keyControls=1);var n=function(t){var n=document.createElement("div");n.setAttribute("id","_"+t+"Controller"),n.style.width="80px",n.style.height=e.pageHeight+"px",n.style.position="absolute",n.style.background=e.controlsBg||"#999",n.style.opacity="0.3",n.style.zIndex="0",n.style.top=e.controlBoxStyle.offsetTop+"px";var r="alice.plugins.caterpillar";t==="right"?(n.style.left=e.controlBoxStyle.offsetLeft+parseInt(e.pageWidth,10)+"px",n.style.borderTopRightRadius="100px",n.style.borderBottomRightRadius="100px",n.setAttribute("onclick",r+".abPageTurn("+r+".rightPage)")):(n.style.left=e.controlBoxStyle.offsetLeft-parseInt(n.style.width,10)+"px",n.style.borderTopLeftRadius="100px",n.style.borderBottomLeftRadius="100px",n.setAttribute("onclick",r+".abPageTurnR("+r+".rightPage)")),document.body.appendChild(n)};t.controls===!0&&t.paging==="single"&&(n("left"),n("right"),window.onresize=function(e){document.body.removeChild(document.getElementById("_leftController")),document.body.removeChild(document.getElementById("_rightController")),n("left"),n("right")}),e.keyControls===0&&document.body.addEventListener("keyup",r,!1),e.pageBuilder(t)},nxtPage:function(){var t=e.realPageCount+1;e.rightPage<=t&&(e.paging==="single"&&e.abPageTurn(e.rightPage),e.paging==="double"&&e.turnPage(e.rightPage))},prePage:function(){var t=e.realPageCount+1;e.paging==="single"&&e.abPageTurnR(e.rightPage),e.paging==="double"&&e.leftPage>=1&&e.turnPage(e.leftPage)},pageBuilder:function(t){var n=e.pages[0].getAttribute("class"),r=n+" "+e.pageClass,i="."+e.NewPageClass+"{ display: none; "+alice.prefix+"box-shadow: "+e.shadowPattern100+";"+alice.prefix+"backface-visibility: hidden;"+"width: "+e.pageWidth+"px;"+"height: "+e.pageHeight+"px;"+"position: absolute;"+"border: none;"+"left: 0px;"+"top: 0px;"+"z-index: 0;"+"overflow: hidden;"+"}";alice.keyframeInsert(i);if(e.paging==="single"){var s=1;for(var o=0;o<e.pages.length;o++)e.pages[o].setAttribute("id","p"+s),e.pages[o].setAttribute("class",r+" "+e.NewPageClass),e.pages[o].addEventListener(e.animationEnd,function(){if(this.style[alice.prefixJS+"AnimationName"]==="abstrPageTurnF"){var t=this.getAttribute("id");e.binding==="center"||e.binding==="middle"?alice.plugins.caterpillar.abstrPageFlip(this.getAttribute("id"),"forwards",e.jumper,"forwards"):e.helper.bookStatus(e.helper.getThisId(t)),e.rightP