// copyright 2008 nicholas e. walker

var currentPage = 0;
var coverp = true;

var lnum = ['blank','n2','n4','n6','n8','n10','n12','n14','n16','n18','n20'];
var rnum = ['blank','n3','n5','n7','n9','n11','n13','n15','n17','n19','n21'];

var pagematrix = [
	[ 'blank', 'howling' ],
	[ 'blank', 'ghostblossom' ],
	[ 'stairsl', 'stairsr' ],
	[ 'shedl', 'shedr' ],
	[ 'blank', 'blank' ],
	[ 'blank', 'blank' ],
	[ 'blank', 'blank' ],
	[ 'blank', 'blank' ],
	[ 'blank', 'blank' ],
	[ 'blank', 'blank' ],
	[ 'blank', 'blank' ]
];

var tabkey = [
	['t0','t1','t2','t3','t4','t5','t6','t7','t8','t9','t10'],
	['t0c','t1c','t2c','t3c','t4c','t5c','t6c','t7c','t8c','t9c','t10c'],
	['t0l','t1l','t2l','t3l','t4l','t5l','t6l','t7l','t8l','t9l','t10l']
];

var tabmatrix = [
	// PAGE 0
	[
		[ true,  true,  true,  true,  true,  true,  true,  true,  true,  true,  true  ],
		[ true,  false, false, false, false, false, false, false, false, false, false ],
		[ false, false, false, false, false, false, false, false, false, false, false ]
	],
	
	// PAGE 1
	[
		[ false, true,  true,  true,  true,  true,  true,  true,  true,  true,  true  ],
		[ false, true,  false, false, false, false, false, false, false, false, false ],
		[ true,  false, false, false, false, false, false, false, false, false, false ]
	],
	
	// PAGE 2
	[
		[ false, false, true,  true,  true,  true,  true,  true,  true,  true,  true  ],
		[ false, false, true,  false, false, false, false, false, false, false, false ],
		[ true,  true,  false, false, false, false, false, false, false, false, false ]
	],
	
	// PAGE 3
	[
		[ false, false, false, true,  true,  true,  true,  true,  true,  true,  true  ],
		[ false, false, false, true,  false, false, false, false, false, false, false ],
		[ true,  true,  true,  false, false, false, false, false, false, false, false ]
	],
	
	// PAGE 4
	[
		[ false, false, false, false, true,  true,  true,  true,  true,  true,  true  ],
		[ false, false, false, false, true,  false, false, false, false, false, false ],
		[ true,  true,  true,  true,  false, false, false, false, false, false, false ]
	],
	
	// PAGE 5
	[
		[ false, false, false, false, false, true,  true,  true,  true,  true,  true  ],
		[ false, false, false, false, false, true,  false, false, false, false, false ],
		[ true,  true,  true,  true,  true,  false, false, false, false, false, false ]
	],
	
	// PAGE 6
	[
		[ false, false, false, false, false, false, true,  true,  true,  true,  true  ],
		[ false, false, false, false, false, false, true,  false, false, false, false ],
		[ true,  true,  true,  true,  true,  true,  false, false, false, false, false ]
	],
	
	// PAGE 7
	[
		[ false, false, false, false, false, false, false, true,  true,  true,  true  ],
		[ false, false, false, false, false, false, false, true,  false, false, false ],
		[ true,  true,  true,  true,  true,  true,  true,  false, false, false, false ]
	],
	
	// PAGE 8
	[
		[ false, false, false, false, false, false, false, false, true,  true,  true  ],
		[ false, false, false, false, false, false, false, false, true,  false, false ],
		[ true,  true,  true,  true,  true,  true,  true,  true,  false, false, false ]
	],
	
	// PAGE 9
	[
		[ false, false, false, false, false, false, false, false, false, true,  true  ],
		[ false, false, false, false, false, false, false, false, false, true,  false ],
		[ true,  true,  true,  true,  true,  true,  true,  true,  true,  false, false ]
	],
	
	// PAGE 10
	[
		[ false, false, false, false, false, false, false, false, false, false, true  ],
		[ false, false, false, false, false, false, false, false, false, false, true  ],
		[ true,  true,  true,  true,  true,  true,  true,  true,  true,  true,  false  ]
	]
];

function preload () {
	loadimg('pages');
	for (page in pagematrix) {
		for (img in page) {
			loadimg(img);
		}
	}
	for (img in lnum) {
		loadimg(img);
	}
	for (img in rnum) {
		loadimg(img);
	}
	for (tab in tabkey) {
		for (img in tab) {
			loadimg(img);
		}
	}
}

function loadimg (img) {
	i = new Image();
	i.src = 'images/' + img + '.png';
}
 
function showimg (id) {
	//document.getElementById(id).style.backgroundImage = 'url(images/'+id+'.png)';
	document.getElementById(id).style.display = 'inline';
}

function hideimg (id) {
	//document.getElementById(id).style.backgroundImage = 'none';
	document.getElementById(id).style.display = 'none';
}


function coverclick(event) {
	hideimg("cover");
	showimg("pages");
	showimg("lpage");
	showimg("rpage");
	showimg("lnum");
	showimg("rnum");
	turnpage(0);
}

function insideclick() {
	hideimg("lpage");
	hideimg("rpage");
	hideimg("lnum");
	hideimg("rnum");
	hideimg("pages");
	hideimg("inside");
	showimg("cover");
}

function turnpage(page) {
	if ( ( page < 0 ) || ( page > 10) ) { return false; }
	
	document.getElementById('lnum').style.backgroundImage = 'url(images/'+lnum[page]+'.png)';
	document.getElementById('rnum').style.backgroundImage = 'url(images/'+rnum[page]+'.png)';
	document.getElementById('lpage').style.backgroundImage = 'url(images/'+pagematrix[page][0]+'.png)';
	document.getElementById('rpage').style.backgroundImage = 'url(images/'+pagematrix[page][1]+'.png)';
	if (page == 0) {
		showimg("inside");
	} else {
		hideimg("inside");
	}
	for (i = 0; i <= 2; i++) {
		for (j = 0; j <= 10; j++) {
			if ( tabmatrix[page][i][j] == true ) {
				document.getElementById(tabkey[i][j]).style.display = 'inline';
			} else {
				document.getElementById(tabkey[i][j]).style.display = 'none';
			}
		}
	}
	currentPage = page;
}

function pageclick(event) {
	wsize = windowsize();
	mpos = mousepos(event);
	
	//x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("book").offsetLeft;
	//y = event.offsetY?(event.offsetY):event.pageX-document.getElementById("book").offsetTop;
	
	x = mpos[0] - ( wsize[0]/2 - 510 );
	y = mpos[1] - ( wsize[1]/2 - 325 );
		
	if ( ( x > 20 ) && (x < 65) ) {
		// left tab area
		if ( y < 560 ) {
			if		( ( y > 511 ) && tabmatrix[currentPage][2][9] )	{ turnpage(9); }
			else if	( ( y > 464 ) && tabmatrix[currentPage][2][8] )	{ turnpage(8); }
			else if	( ( y > 371 ) && tabmatrix[currentPage][2][7] )	{ turnpage(7); }
			else if	( ( y > 324 ) && tabmatrix[currentPage][2][6] )	{ turnpage(6); }
			else if	( ( y > 273 ) && tabmatrix[currentPage][2][5] ) { turnpage(5); }
			else if	( ( y > 232 ) && tabmatrix[currentPage][2][4] ) { turnpage(4); }
			else if	( ( y > 185 ) && tabmatrix[currentPage][2][3] ) { turnpage(3); }
			else if	( ( y > 132 ) && tabmatrix[currentPage][2][2] ) { turnpage(2); }
			else if	( ( y > 85 )  && tabmatrix[currentPage][2][1] )	{ turnpage(1); }
			else if	( ( y > 40 )  && tabmatrix[currentPage][2][0] )	{ turnpage(0); }
		}
	}
	else if ( ( x > 950 ) && ( x < 1000) ) {
		// right tab area
		if ( y < 614 ) {
			if		( ( y > 560 ) && tabmatrix[currentPage][0][10])	{ turnpage(10); }
			else if	( ( y > 509 ) && tabmatrix[currentPage][0][9] )	{ turnpage(9); }
			else if	( ( y > 465 ) && tabmatrix[currentPage][0][8] )	{ turnpage(8); }
			else if	( ( y > 374 ) && tabmatrix[currentPage][0][7] )	{ turnpage(7); }
			else if	( ( y > 325 ) && tabmatrix[currentPage][0][6] )	{ turnpage(6); }
			else if	( ( y > 275 ) && tabmatrix[currentPage][0][5] ) { turnpage(5); }
			else if	( ( y > 232 ) && tabmatrix[currentPage][0][4] ) { turnpage(4); }
			else if	( ( y > 184 ) && tabmatrix[currentPage][0][3] ) { turnpage(3); }
			else if	( ( y > 133 ) && tabmatrix[currentPage][0][2] )	{ turnpage(2); }
			else if	( ( y > 88 )  && tabmatrix[currentPage][0][1] )	{ turnpage(1); }
			else if	( ( y > 40 )  && tabmatrix[currentPage][0][0] )	{ turnpage(0); }
		}
	}
}

function windowsize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [ myWidth, myHeight ];
}

function mousepos(e) {
	var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		posx = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	return [ posx, posy ];
}