/* 
Javascript Pageflip v0.2 by Charles Mangin (http://option8.com - Email option8-pageflip@option8.com)


Creative Commons License:

Javascript Pageflip v0.2 by Charles Mangin is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

You are free:

to Share — to copy, distribute, display, and perform the work
to Remix — to make derivative works

Under the following conditions:

Attribution. You must attribute this work to Charles Mangin ( with link: http://option8.com ).

  
Share Alike. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same, 
similar or a compatible license.

For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is 
with a link to this web page: http://creativecommons.org/licenses/by-sa/3.0/us/

Any of the above conditions can be waived if you get permission from the copyright holder. 

Apart from the remix rights granted under this license, nothing in this license impairs or restricts the author's moral rights.

*/



/* set up variables */

var imageArray = new Array();

var page1, page2, page3, page4, page0, pageN1;
// display page l/r. next spread l/r. previous spread l/r.

var page1img, page2img, page3img, page4img, page0img, pageN1img;
// img tags within each page hold the contents
// originally worked with bg images, but now the bg is shadow

var pageIndex = 0; // initial starting page

var page1image = new Image();   // Create new Image object  
var page2image = new Image();   // Create new Image object  

// next LEFT page
var page3image = new Image();   // Create new Image object  
var page3OriginX; // page 3 starting position
var page3x; // page 3 current position
var page3DeltaX; // frame-to-frame diff in page 3 x value

// next RIGHT page
var page4image = new Image();   // Create new Image object  

// previous RIGHT page
var page0image = new Image();   // Create new Image object  
var page0OriginX; // page 0 starting position
var page0x;
var page0DeltaX; // frame-to-frame diff in page 3 x value

// previous LEFT page
var pageN1image = new Image();   // Create new Image object  

// timer
var currentStep, totalSteps;


var pageWidth, page2Width, page3Width, page1Width, page0Width;
var pageHeight;


var page3TargetX; // page 3 aims for 0px
var page0TargetX; // page 0 aims for pagewidth px

// the div that holds it all
var pagesContainer;

// animating on/off
var flipping; 


function pageLayout() {

//	console.log("doing layout");


	page1image.src = imageArray[pageIndex].src; // Set source path
	page1img = 	document.getElementById('page1img');
	page1img.src = page1image.src ;
	
	if(typeof(imageArray[pageIndex+1]) != "undefined") {
		page2image.src = imageArray[pageIndex+1].src; // Set source path
		page2img = 	document.getElementById('page2img');
		page2img.src = page2image.src ;
	}
	if(typeof(imageArray[pageIndex+2]) != "undefined") {
		page3image.src = imageArray[pageIndex+2].src; // Set source path
		page3img = 	document.getElementById('page3img');
		page3img.src = page3image.src ;
	}	
	if(typeof(imageArray[pageIndex+3]) != "undefined") {
		page4image.src = imageArray[pageIndex+3].src; // Set source path
		page4img = 	document.getElementById('page4img');
		page4img.src = page4image.src ;
	}

	if(typeof(imageArray[pageIndex-1]) != "undefined") {
		page0image.src = imageArray[pageIndex-1].src; // Set source path
		page0img = document.getElementById('page0img');
		page0img.src = page0image.src ;
	}
	if(typeof(imageArray[pageIndex-2]) != "undefined") {
		pageN1image.src = imageArray[pageIndex-2].src; // Set source path
		pageN1img = document.getElementById('pageN1img');
		pageN1img.src = pageN1image.src ;
	}	
	
// set the page width all the pages key off. if image1 is an odd size, choose a different one to key	
	pageWidth = page1image.width;
	pageHeight = page1image.height;
	
//	console.log("page width = " + page1img.width);
	

// set up the container DIV
	pagesContainer = document.getElementById('pagesContainer');
	pagesContainer.style.width = pageWidth * 2 + "px";
	pagesContainer.style.height = pageHeight + "px";
	
// set up pages
	page1 = document.getElementById('page1');
	page2 = document.getElementById('page2');
	page3 = document.getElementById('page3');
	page4 = document.getElementById('page4');

	page0 = document.getElementById('page0');
	pageN1 = document.getElementById('pageN1');

// uniform height/width for the page DIVs
	page1.style.height = page2.style.height = page3.style.height = page4.style.height = pageHeight + "px";
	page1.style.width = page2.style.width = page3.style.width = page4.style.width = pageWidth + "px";

	page0.style.height = pageN1.style.height = pageHeight + "px";
	page0.style.width = pageN1.style.width = pageWidth + "px";

	page0Width = pageWidth;
	page2Width = pageWidth;

// set the next/previous pages up for their animations
	page2.style.left = page4.style.left = pageWidth + "px";
	page0.style.left = 0 + "px";

	page3TargetX = 0;
	page0TargetX = pageWidth;


	
// initial position for page 3 - flip forward
	page3OriginX = pageWidth * 2;
	page3.style.left = 	pageWidth * 2 + "px";
	page3Width = 0;
	page3.style.width = page3Width + "px";

// initial position for page 0 - flip back
	page0OriginX = 0;
	page0.style.left = 	0 + "px";
	page0Width = 0;
	page0.style.width = page0Width + "px";


// set up next page flip	
	currentStep = 1;
	totalSteps = flipTime/smoothness;
	
	// start out the page3 canvas at start position
	page3x = 2 * pageWidth;
	page0x = 0;
		
// hide the previous pages
	page0.style.display = "none";
	pageN1.style.display = "none";

// clicky cursor
	if(typeof(imageArray[pageIndex-1]) != "undefined") {
		page1.style.cursor="hand";
	} else {
		page1.style.cursor="default";
	}

	if(typeof(imageArray[pageIndex+2]) != "undefined") {
		page2.style.cursor="hand";
	} else {
		page2.style.cursor="default";
	}

	// ready to go...
	flipping = false;

}    


function flipForward() {
		
// linear
	//page3DeltaX = (page3TargetX-page3OriginX)/totalSteps; // distance per step
	//page3x += page3DeltaX;
	
	page3OldX = page3x;
	
// ease out
//	page3x = page3OriginX + (Math.sin( (currentStep/totalSteps) * (Math.PI/2) ) * (page3TargetX-page3OriginX) );

// ease in/out
	page3x = ((1 + Math.cos( (currentStep/totalSteps) * (Math.PI) ))/2) * (page3OriginX - page3TargetX);
	
	page3DeltaX = page3x - page3OldX;
		
	// shadow
	page3ShadowWidth = -4 * page3DeltaX;
	page3.style.paddingLeft =  page3ShadowWidth + "px"

	page3.style.left = page3x - page3ShadowWidth  + "px";

	page2Width += page3DeltaX;
	
	if(page2Width > 0) { // surprise, IE doesn't like negative width
		page2.style.width = Math.floor(page2Width) + "px";
	} else {
		page2Width = 0;
		page2.style.width = Math.floor(page2Width) + "px";
	}
	page3Width -= page3DeltaX/2;
	page3.style.width = Math.floor(page3Width) + "px";
	
	if(currentStep == totalSteps){
		clearInterval(nextPageFlip);
		pageIndex += 2;
		pageLayout();
	} 
	
	currentStep ++;

}


function nextPage() {

	if((typeof(imageArray[pageIndex+2]) != "undefined")  && (flipping == false) ){
		nextPageFlip = setInterval(flipForward,smoothness);
		flipping = true;
	}
}
    
     
function flipBack() {
		
	page0.style.display = "block";
	pageN1.style.display = "block";

	
	page0OldX = page0x;
	

// ease in/out
	page0x = page0OriginX + ((1 - Math.cos( (currentStep/totalSteps) * (Math.PI) ))/2) * (page0TargetX - page0OriginX);
	
	page0DeltaX = page0x - page0OldX;
		

	page0.style.left = page0x  + "px";

	// move contents over to pretend we're cropping from the left
	page0.style.textIndent = -1 * pageWidth + page0x + "px";
	
// grow the -1 page to match the movement of page 0	
	pageN1.style.width = page0x + "px";

	page0Width += page0DeltaX;

	// shadow
	page0ShadowWidth = 4 * page0DeltaX;
	page0.style.paddingRight =  page0ShadowWidth + "px"

	page0.style.width = Math.floor(page0Width) + page0ShadowWidth + "px";

	
	if(currentStep == totalSteps){
		clearInterval(nextPageFlip);
		pageIndex -= 2;
		pageLayout();
	} 
	
	currentStep ++;

}


function previousPage() {

	if( (typeof(imageArray[pageIndex-1]) != "undefined") && (flipping == false)){
		nextPageFlip = setInterval(flipBack,smoothness);
		flipping = true;
	}
}


window.onload = function() {

	//	console.log("ready");
	
	// build the image array from jquery
	imageArray = $(".pageImage");
	
	//console.log(imageArray[0].src);

	pageLayout();

};
// window ready