//
// Setup
//

var allPages = new Array();
var currentPage = 0; 
var pageWidth = 500; 
var pageHeight = 706;

var delayInMs = 20; 
var totalTime = 1000;

//
// Binding With Page
// 

var pageN1, page0, page1, page2, page3, page4;

//
// Actual Animation
//

var currentStep, totalSteps;

var page0Width, page1Width;
var page2Width, page3Width;

var page3StartPosition; 
var page3EndPosition; 
var page3Value; 
var page3Delta; 

var page0StartPosition; 
var page0EndPosition; 
var page0Value;
var page0Delta; 

var currentFlip;
var flipping;

function initBookletPages() {

	for (t=0;t<38;t++) {
		allPages[t] = new Image();
	}
    allPages[0].src = "./img/pages/empty-500.png";
    allPages[1].src = "./img/pages/adm01-500.jpg";
	allPages[2].src = "./img/pages/adm02-500.jpg";
	allPages[3].src = "./img/pages/adm03-500.jpg";
	allPages[4].src = "./img/pages/adm04-500.jpg";
	allPages[5].src = "./img/pages/adm05-500.jpg";
	allPages[6].src = "./img/pages/adm06-500.jpg";
	allPages[7].src = "./img/pages/adm07-500.jpg";
	allPages[8].src = "./img/pages/adm08-500.jpg";
	allPages[9].src = "./img/pages/adm09-500.jpg";
	allPages[10].src = "./img/pages/adm10-500.jpg";
	allPages[11].src = "./img/pages/adm11-500.jpg";
	allPages[12].src = "./img/pages/adm12-500.jpg";
	allPages[13].src = "./img/pages/adm13-500.jpg";
	allPages[14].src = "./img/pages/adm14-500.jpg";
	allPages[15].src = "./img/pages/adm15-500.jpg";
	allPages[16].src = "./img/pages/adm16-500.jpg";
	allPages[17].src = "./img/pages/adm17-500.jpg";
	allPages[18].src = "./img/pages/adm18-500.jpg";
	allPages[19].src = "./img/pages/adm19-500.jpg";
	allPages[20].src = "./img/pages/adm20-500.jpg";
	allPages[21].src = "./img/pages/adm21-500.jpg";	
	allPages[22].src = "./img/pages/adm22-500.jpg";
	allPages[23].src = "./img/pages/adm23-500.jpg";
	allPages[24].src = "./img/pages/adm24-500.jpg";
	allPages[25].src = "./img/pages/adm25-500.jpg";	
	allPages[26].src = "./img/pages/adm26-500.jpg";
	allPages[27].src = "./img/pages/adm27-500.jpg";
	allPages[28].src = "./img/pages/adm28-500.jpg";
	allPages[29].src = "./img/pages/adm29-500.jpg";	
	allPages[30].src = "./img/pages/adm30-500.jpg";
	allPages[31].src = "./img/pages/adm31-500.jpg";
	allPages[32].src = "./img/pages/adm32-500.jpg";
	allPages[33].src = "./img/pages/adm33-500.jpg";	
	allPages[34].src = "./img/pages/adm34-500.jpg";
	allPages[35].src = "./img/pages/adm35-500.jpg";
	allPages[36].src = "./img/pages/adm36-500.jpg";
	allPages[37].src = "./img/pages/empty-500.png";	
}

function stableState(){

	//
	// Assign Images
	//
	
	for (t = -2; t < 4; t++) {
		if (typeof(allPages[currentPage + t]) != "undefined") {
			var pageimg = document.getElementById('page' + (t + 2) + 'img');
			pageimg.src = allPages[currentPage + t].src;
		}
	}
	
	// 
	// Prepare Animation 
	//
	
	pageN1 = document.getElementById('previousLeftPage');
	page0 = document.getElementById('shadowBackward');
	page1 = document.getElementById('leftPage');
	page2 = document.getElementById('rightPage');
	page3 = document.getElementById('shadowForward');
	page4 = document.getElementById('nextRightPage');
	
	initialPagePositions();
	
	applyStyling();

	updateCursor(allPages[currentPage - 1],page1);
	updateCursor(allPages[currentPage + 2],page2);
	    
	currentStep = 1;
	totalSteps = totalTime / delayInMs;
	
    flipping = false;

}

function initialPagePositions() {
	
	page0StartPosition = 0;
	page0EndPosition = pageWidth;
	page0Width = 0;
	page0Value = 0;
	
	page2Width = pageWidth;
	
	page3StartPosition = pageWidth * 2;
	page3EndPosition = 0;
	page3Width = 0;
	page3Value = 2 * pageWidth;
	
}

function applyStyling() {
	       
    pageN1.style.width = pageWidth + "px";
    page0.style.left = 0 + "px";
    page0.style.width = page0Width + "px";
    page0.style.height = pageN1.style.height = pageHeight + "px";
    page0.style.left = 0 + "px";
    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";
    page2.style.left = page4.style.left = pageWidth + "px";
    page3.style.left = pageWidth * 2 + "px";
    page3.style.width = page3Width + "px";
    
	//
	// Previous pages are only shown when sliding backwards.
	//
	
    page0.style.display = "none";
    pageN1.style.display = "none";
    
}

function updateCursor(page,view) {
	if (typeof(page) != "undefined") {
        view.style.cursor = "pointer";
    } else {
        view.style.cursor = "default";
    }
}


function flipForward(){
	//
    page3OldX = page3Value;
    page3Value = ((1 + Math.cos((currentStep / totalSteps) * (Math.PI))) / 2) * (page3StartPosition - page3EndPosition);
    page3Delta = page3Value - page3OldX;
    page3ShadowWidth = -4 * page3Delta;
    page3Width -= page3Delta / 2;
    page2Width += page3Delta;
    if (page2Width < 0) { 
        page2Width = 0;
    } 
	//
    page3.style.paddingLeft = page3ShadowWidth + "px"
    page3.style.left = page3Value - page3ShadowWidth + "px";
    page3.style.width = Math.floor(page3Width) + "px";
	page2.style.width = Math.floor(page2Width) + "px";
	//
	next(2);
	//
}

function flipBack(){
	//
    page0.style.display = "block";
    pageN1.style.display = "block";
    page0OldX = page0Value;
    page0Value = page0StartPosition + ((1 - Math.cos((currentStep / totalSteps) * (Math.PI))) / 2) * (page0EndPosition - page0StartPosition);
    page0Delta = page0Value - page0OldX;
    page0Width += page0Delta;
    page0ShadowWidth = 4 * page0Delta;
	//
    page0.style.left = page0Value + "px";
    page0.style.textIndent = -1 * pageWidth + page0Value + "px";
    page0.style.paddingRight = page0ShadowWidth + "px"
    page0.style.width = Math.floor(page0Width) + page0ShadowWidth + "px";
    pageN1.style.width = page0Value + "px";
	//
	next(-2);
	//
}

function next(delta) {
	
	if (currentStep == totalSteps) {
    	clearInterval(currentFlip);
    	currentPage += delta;
	    stableState();
    } else {
	    currentStep++;		
	}
	
}


function turnPageBackward() {

    if ((typeof(allPages[currentPage - 1]) != "undefined") && (flipping == false)) {
        currentFlip = setInterval(flipBack, delayInMs);
        flipping = true;
    }
}


function turnPageForward() {

    if ((typeof(allPages[currentPage + 2]) != "undefined") && (flipping == false)) {
        currentFlip = setInterval(flipForward, delayInMs);
        flipping = true;
		// Hide the educational text.
		document.getElementById('instructions-with-index').style.display="none";
    }
}


window.onload = function(){
    initBookletPages();
    stableState();
};