/* 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;

// set up pages
function pageSetup() {
	pagesContainer = getObjectById('pagesContainer');
	
	page1 = getObjectById('page1');
	page2 = getObjectById('page2');
	page3 = getObjectById('page3');
	page4 = getObjectById('page4');

	page0 = getObjectById('page0');
	pageN1 = getObjectById('pageN1');
	
	totalSteps = flipTime/smoothness;
}

function pageLayout() {
	// added - call finished func
	beginPlayClip();
	// -------------- //
	
	page1image.src = imageArray[pageIndex].src; // Set source path
	page1img = 	getObjectById('page1img');
	page1img.src = page1image.src;
	
	if(typeof(imageArray[pageIndex+1]) != "undefined") {
		page2image.src = imageArray[pageIndex+1].src; // Set source path
		page2img = 	getObjectById('page2img');
		page2img.src = page2image.src ;
	}
	if(typeof(imageArray[pageIndex+2]) != "undefined") {
		page3image.src = imageArray[pageIndex+2].src; // Set source path
		page3img = 	getObjectById('page3img');
		page3img.src = page3image.src ;
	}
	if(typeof(imageArray[pageIndex+3]) != "undefined") {
		page4image.src = imageArray[pageIndex+3].src; // Set source path
		page4img = 	getObjectById('page4img');
		page4img.src = page4image.src ;
	}

	if(typeof(imageArray[pageIndex-1]) != "undefined") {
		page0image.src = imageArray[pageIndex-1].src; // Set source path
		page0img = getObjectById('page0img');
		page0img.src = page0image.src ;
	}
	if(typeof(imageArray[pageIndex-2]) != "undefined") {
		pageN1image.src = imageArray[pageIndex-2].src; // Set source path
		pageN1img = getObjectById('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;
	
// set up the container DIV
	pagesContainer.style.width = pageWidth * 2 + "px";
	pagesContainer.style.height = pageHeight + "px";
	
// 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;
	
	// 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="pointer";
	} else {
		page1.style.cursor="default";
	}

	if(typeof(imageArray[pageIndex+2]) != "undefined") {
		page2.style.cursor="pointer";
	} else {
		page2.style.cursor="default";
	}
	
	// added - call finished func
	endPlayClip();
	// -------------- //
	
	// ready to go...
	flipping = false;
}

function nextPage() {
	if((typeof(imageArray[pageIndex+2]) != "undefined") && (flipping == false) ){
		nextPageFlip = setInterval(flipForward,smoothness);
		flipping = true;
	}
}

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 previousPage() {
	if( (typeof(imageArray[pageIndex-1]) != "undefined") && (flipping == false)){
		nextPageFlip = setInterval(flipBack,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 ++;
}