/********************************************************
Create a div with transparent place holder in your html
width = 2*book image width +4 height = book image height+2
Insert onload in body tag
*********************************************************/
var Book = new Object();
/* Configurables */
Book.speed = 20;
// Book.width = 432;
// Book.height = 432;
Book.show_border = true;
Book.borderColor = '#f0f';
Book.flip_delay = 1500;
Book.animate_interval = 25;
Book.flip_increment = 1;
Book.vertical = true;
Book.width = null;
Book.height = null;
/* Internals */
Book.direction = 1; // start at 1=right-to-left
Book.angle = 0;
Book.current_image = 0;
Book.one_i = 0;
Book.two_i = 0;
Book.next_i = 0
Book.stopped = false;
Book.preloaded = new Array();
Book.image_sources = new Array();
Book.image_temp = null;
Book.im_1 = null;
Book.im_next = null;
Book.im_2 = null;
function get_next(a, current){
return (++current)%a.length;
/* if(current+1 > a.length - 1){
current -= a.length;
}
return ++current;*/
}
function calc_dimensions(){
/*Book.height = ($(document).height() / 2) - 2;
Book.width = Book.height;*/
if(Book.vertical){
$(Book.im_1).css({top: (Book.height + 1) + 'px'});
$(Book.im_next).css({left: 0});
$(Book.im_2).css({left: 0});
} else{
$(Book.im_1).css({top: 0});
$(Book.im_next).css({left: (Book.width + 1) + 'px'});
$(Book.im_2).css({left: (Book.width + 1) + 'px'});
}
}
function recenter(){
var $flipdiv = $('#' + Book.book_id);
var $w = $(document);
var left = ($w.width()/2) - (Book.width/2)
log($w.width());
log(Book.width);
log(left);
$flipdiv.css({marginLeft: left +'px'});
}
function log(m){
// $('#log').append(''+m+'
');
}
function mk_book(book_id){
Book.book_id = book_id;
// alert(2);
$('#' + book_id + ' ul').hide();
$('#' + book_id + ' img').each(function(){
// calc WxH from first image's dimensions
if(Book.width == null)
{
Book.width = this.width;
Book.height = this.height;
}
Book.image_sources.push(this.src);
});
// force preload images
for(var i=0;i= Math.PI/2){
Book.direction = 0;
log("midpoint: flipping from ("+Book.two_i+") " + Book.preloaded[Book.two_i].src);
Book.two_i = get_next(Book.preloaded, Book.two_i);
log("midpoint: flipping to ("+Book.two_i+") " + Book.preloaded[Book.two_i].src);
Book.im_2.src = Book.preloaded[Book.two_i].src;
}
if(Book.angle >= Math.PI){
Book.direction = 1;
// swap around
swap_pages_around();
} else{
setTimeout(book_flip, Book.animate_interval);
}
} else{
setTimeout(book_flip, 500); // check again in half a second. this is bad. should change this to event-based
}
}
function swap_pages_around(){
Book.angle = 0; // angle reset
// make these the same since
Book.next_i = Book.two_i;
Book.im_next.src = Book.preloaded[Book.next_i].src;
$(Book.im_2).hide();
// move im_2 back to its start location
if(Book.vertical){
// log("moving im_2 back");
$(Book.im_2).css({top: (Book.height +1) + 'px'});
} else{
$(Book.im_2).css({left: (Book.width + 1) + 'px'});
}
Book.two_i = Book.one_i;
Book.im_2.src = Book.preloaded[Book.two_i].src; // set right-hand/bottom-side to show the current "next";
$(Book.im_2).show();
// make the behind im_next show the next page for next time
Book.one_i = get_next(Book.preloaded, Book.one_i+1);
Book.im_1.src = Book.preloaded[Book.one_i].src;
$(Book.im_2).unbind('click');
$(Book.im_2).bind('click', book_flip);
}
function book_image_click(){
if(this.lnk){
window.location.href = this.lnk;
}
}
function book_stop(){
Book.stopped = true;
this.style.cursor = "default";
}
function book_restart(){
Book.stopped = false;
}
