// Version 2 - about:blank images replaced with /UserFiles/Image/blank.gif and not resized on load for IE

function FlipBook(book, container, startpage) {
	this.book = book;
	this.container = container;
	this.currentPage = startpage;
	this.pages = [];
	this.mode = 'doublePage';
	this.pagesDisplayed = book.pagesDisplayed;
	this.pageWidth = book.pageWidth;
	this.pageHeight = book.pageHeight;
	this.largePageResolution = book.largePageResolution;
	this.smallPageResolution = book.smallPageResolution;
	this.blankPage = new FlipBookPage({'pageNumber': 0, 'smallPage': '/UserFiles/Image/blank.gif', 'largePage': '/img/spacer'});
	this.preloadDiv = false;
	this.preloadSmallImages = true;
	this.preloadLargeImagesOnSmallImage = true;

	this.inDragOperation = false;
	this.wasMoved = false;
	this.dragStartX = 0;
	this.dragStartY = 0;

	this.initPages = function (pages) {
		var pageZero = new FlipBookPage({'pageNumber': 0, 'smallPage': '/UserFiles/Image/blank.gif', 'largePage': '/img/spacer'});
		this.pages.push(pageZero);
		for (var i=0; i < pages.length; i++) {
			var newPage = new FlipBookPage(pages[i]);
			this.pages.push(newPage);
		}
		var pageLast = new FlipBookPage({'pageNumber': 0, 'smallPage': '/UserFiles/Image/blank.gif', 'largePage': '/img/spacer'});
		this.pages.push(pageLast);
	}
	
	this.draw = function () {
		this.viewport = new FlipBookViewport(this, this.container, this.pagesDisplayed);
		this.gotoPage(this.currentPage);
		this.viewport.draw();
		var theViewport = this.viewport;
		window.onresize = function () {
			theViewport.resize(theViewport);
		}
	}

	this.gotoPage = function (pageNumber) {
		if (this.mode == 'doublePage') {
			if (pageNumber >= 0 && pageNumber <= this.pages.length - 1) {
				this.currentPage = pageNumber;
				if (this.currentPage % 2 == 0) {
					this.viewport.leftPage = this.pages[this.currentPage];
					this.viewport.rightPage = this.pages[this.currentPage + 1];
					this.viewport.visiblePageCounter.innerHTML = this.currentPage + "/" + (this.currentPage + 1);
				} else {
					this.viewport.leftPage = this.pages[this.currentPage - 1];
					this.viewport.rightPage = this.pages[this.currentPage];
					this.viewport.visiblePageCounter.innerHTML = (this.currentPage - 1) + "/" + (this.currentPage);
				}
			}
			this.viewport.draw();
		} else {
			if (pageNumber >= 0 && pageNumber <= this.pages.length - 1) {
				this.currentPage = pageNumber;
				this.viewport.zoomContainer.src = this.pages[this.currentPage].largePage;
				this.viewport.visiblePageCounter.innerHTML = this.currentPage;
			}
		}
	}
	
	this.zoomPage = function (e, pageNumber) {
		if (pageNumber != 0) {
			this.viewport.zoomIn(e, this.pages[pageNumber]);
		}
	}
	
	this.preloadSmall = function () {
		if (this.preloadSmallImages) {
			if (!this.preloadDiv) {
				this.preloadDiv = document.createElement("div");
				this.preloadDiv.style.display = "none";
				this.container.appendChild(this.preloadDiv);
			}

			for (var i=0; i < this.pages.length; i++) {
				var preloadImg = document.createElement("img");
				preloadImg.src = this.pages[i].smallPage;
				this.preloadDiv.appendChild(preloadImg);
			}
		}
	}

	this.initPages(this.book.pages);
	this.preloadSmall(); // preloads the small images, duh
	this.draw();
	return this;
}

function FlipBookPage(pageObject) {
	this.pageNumber = pageObject.pageNumber;
	this.smallPage = pageObject.smallPage;
	this.largePage = pageObject.largePage;

	this.draw = function () {


	}

	return this;
}

function FlipBookViewport(viewer, container, pagesPerViewport) {
	this.viewer = viewer;
	this.container = container;
	this.bookContainer = false;
	this.leftPage = false;
	this.rightPage = false;
	this.zoomPage = false;
	this.leftContainer = false;
	this.rightContainer = false;
	this.zoomContainer = false;
	this.fullPageContainer = false;
	this.navBar = false;
	this.visiblePageCounter = false;
	this.visibleTotalPages = false;

	this.smallViewportSize = {
		'x': 0,
		'y': 0
	};
	this.largeViewportSize = {
		'x': 0,
		'y': 0
	};
	
	this.doScroll = function (x, y) {
		this.bookContainer.scrollLeft = x;
		this.bookContainer.scrollTop = y;
	}

	this.resize = function (viewport) {

		// use currentStyle instead
		//var mpw = xGetComputedStyle(this.container,'width',false);
		//var mph = xGetComputedStyle(this.container,'height',false);
		//alert("width " + mpw + ", height " + mph);

		var maxPageWidth = viewport.container.offsetWidth / 2 - 2;
		var maxPageHeight = viewport.container.offsetHeight - 34;

		//alert("max width is " + maxPageWidth);
		//alert("max height is " + maxPageHeight);
		
		var pageAspectRatio = viewport.viewer.book.smallPageResolution.x / viewport.viewer.book.smallPageResolution.y;

		if (maxPageHeight / pageAspectRatio > maxPageWidth) {
			viewport.smallViewportSize.y = maxPageHeight;
			viewport.smallViewportSize.x = maxPageHeight * pageAspectRatio;
		} else {
			viewport.smallViewportSize.x = maxPageWidth;
			viewport.smallViewportSize.y = maxPageWidth / pageAspectRatio;
		}

		viewport.largeViewportSize.x = maxPageWidth * 2;
		viewport.largeViewportSize.y = maxPageHeight;

		viewport.bookContainer.style.height = viewport.largeViewportSize.y + "px";
		viewport.bookContainer.style.width = viewport.largeViewportSize.x + "px";

		viewport.leftContainer.style.height = viewport.smallViewportSize.y + "px";
		viewport.leftContainer.style.width = viewport.smallViewportSize.x + "px";

		viewport.rightContainer.style.height = viewport.smallViewportSize.y + "px";
		viewport.rightContainer.style.width = viewport.smallViewportSize.x + "px";

		viewport.leftContainer.style.margin = "1px 1px 1px " + (maxPageWidth - viewport.smallViewportSize.x - 10) + "px";
		viewport.rightContainer.style.margin = "1px " + (maxPageWidth - viewport.smallViewportSize.x - 10) + "px 1px 1px";
	}
	
	
	this.draw = function () {
		// reference to the parent object for our event handlers
		var theViewer = this.viewer;

		if (!this.bookContainer) {
			// create a div to hold the pages
			this.bookContainer = document.createElement('div');
			this.bookContainer.style.position = 'relative';
			this.bookContainer.style.overflow = 'auto';
			this.bookContainer.style.overflowY = 'scroll';
			if (!document.all) {
				this.bookContainer.style.overflow = '-moz-scrollbars-vertical';
			}
			this.container.appendChild(this.bookContainer);
		}
		
		// set up the containers for left and right pages
		if (!this.leftContainer) {
			this.leftContainer = document.createElement('img');
			this.leftContainer.style.position = "relative";
			this.leftContainer.style.display = 'inline';
			this.leftContainer.style.cursor = "url('pageflippericons/gtk-zoom-in.ico'), auto";
			this.bookContainer.appendChild(this.leftContainer);

		}
		if (!this.rightContainer) {
			this.rightContainer = document.createElement('img');
			this.rightContainer.style.position = "relative";
			this.rightContainer.style.display = 'inline';
			this.rightContainer.style.margin = "1px";
			this.rightContainer.style.cursor = "url('pageflippericons/gtk-zoom-in.ico'), auto";
			this.bookContainer.appendChild(this.rightContainer);
		}
		if (!this.zoomContainer) {
			this.zoomContainer = document.createElement('img');
			this.zoomContainer.style.position = "relative";
			this.zoomContainer.style.cursor = "url('pageflippericons/gtk-zoom-out.ico'), auto";
			
			this.zoomContainer.style.margin = "1px";
			this.zoomContainer.style.display = "none";
			this.zoomContainer.ondrag = null;
			this.bookContainer.ondrag = null;
			this.bookContainer.appendChild(this.zoomContainer);

			this.zoomContainer.onclick = function (e) {
				if (theViewer.wasMoved) {
					return false;
				} else {
					theViewer.viewport.zoomOut(e, theViewer.pages[theViewer.currentPage]);
				}
			}

			this.zoomContainer.onmousedown = function (e) {
				e = e ? e : window.event;
				theViewer.wasMoved = false;
				leftButtonClick = window.event ? (e.button == 1) : (e.button == 0);
				
				if (!leftButtonClick) {
					return;
				}
				
				this.style.cursor = 'move';
				theViewer.inDragOperation = true;

				var offsetX = e.clientX;
				var offsetY = e.clientY;
				
				theViewer.dragStartX = offsetX;
				theViewer.dragStartY = offsetY;

				document.onmouseup = function (e) {
					theViewer.viewport.zoomContainer.style.cursor = "url('pageflippericons/gtk-zoom-out.ico'), auto";
					theViewer.inDragOperation = false;
					document.onmouseup = null;
					document.onmousemove = null;
					theViewer.viewport.zoomContainer.onmouseup = null;
					theViewer.viewport.zoomContainer.onmousemove = null;
				}

				document.onmousemove = function (e) {
					if (theViewer.inDragOperation) {
						e = e ? e : window.event;
						if (window.event) {
							if (e.button == 0) {
								theViewer.inDragOperation = false;
								return;
							}
						}
						theViewer.viewport.doScroll(theViewer.dragStartX - e.clientX + theViewer.viewport.bookContainer.scrollLeft, theViewer.dragStartY - e.clientY + theViewer.viewport.bookContainer.scrollTop);
						theViewer.dragStartX = e.clientX;
						theViewer.dragStartY = e.clientY;
						theViewer.wasMoved = true;	
					}				
				}

				if (e.preventDefault) {
					e.preventDefault();
				}
				
			}
			this.zoomContainer.ondragstart = function () {return false;};
			this.zoomContainer.ondrag = function () {return false;};
		}

		if (!this.fullPageContainer) {
			this.fullPageContainer = document.createElement('img');
			this.fullPageContainer.style.margin = "1px";
			this.fullPageContainer.style.display = "none";
			this.bookContainer.appendChild(this.fullPageContainer);
		}

		if (!this.navBar) {
			// set up the container for the navbar
			this.navBar = document.createElement('div');
			this.navBar.style.height = "30px";
			this.navBar.style.width = "300px";
			this.navBar.style.margin = "0 auto";
			this.navBar.style.background = "#444444";
			this.navBar.style.position = "relative";
			this.navBar.style.bottom = "0";

			this.goLeftButton = document.createElement('img');
			this.goLeftButton.src = "pageflippericons/object_06.png";
			this.goLeftButton.style.width = "30px";
			this.goLeftButton.style.position = "absolute";
			this.goLeftButton.style.top = "0";
			this.goLeftButton.style.left = "0";
			this.goLeftButton.onclick = function () {
				if (theViewer.mode == 'doublePage') {
					if (theViewer.currentPage > 1) {
						if (theViewer.currentPage < 4) {
							theViewer.gotoPage(1);
						} else {
							theViewer.gotoPage(theViewer.currentPage - 2);
						}
					}
				} else {
					if (theViewer.currentPage > 1) {
						theViewer.gotoPage(theViewer.currentPage - 1);
					}
				}
				if (theViewer.currentPage == 1) {
					// disable the left button
				}
			}
			this.navBar.appendChild(this.goLeftButton);

			this.middleNav = document.createElement('div');
			this.middleNav.className = 'navbar_text';
			this.visiblePageCounter = document.createElement('span');
			this.visiblePageCounter.appendChild(document.createTextNode(this.viewer.currentPage));
			this.visibleTotalPages = document.createElement('span');
			this.visibleTotalPages.appendChild(document.createTextNode(this.viewer.pages.length));

			this.middleNav.appendChild(document.createTextNode('Page '));
			this.middleNav.appendChild(this.visiblePageCounter);
			this.middleNav.appendChild(document.createTextNode(' of '));
			this.middleNav.appendChild(this.visibleTotalPages);
			this.middleNav.style.width = "240px";
			this.middleNav.style.position = "absolute";
			this.middleNav.style.top = "0";
			this.middleNav.style.left = "30px";
			this.navBar.appendChild(this.middleNav);

			this.goRightButton = document.createElement('img');
			this.goRightButton.src = "pageflippericons/object_07.png";
			this.goRightButton.style.width = "30px";
			this.goRightButton.style.position = "absolute";
			this.goRightButton.style.top = "0";
			this.goRightButton.style.right = "0";

			this.goRightButton.onclick = function () {
				if (theViewer.currentPage < theViewer.pages.length) {
					if (theViewer.mode == 'doublePage') {
						if (theViewer.currentPage > theViewer.pages.length - 3) {
							theViewer.gotoPage(theViewer.pages.length);
						} else {
							theViewer.gotoPage(theViewer.currentPage + 2);
						}
					} else {
						theViewer.gotoPage(theViewer.currentPage + 1);

					}
				}
				if (theViewer.currentPage == 1) {
					// disable the left button
				}
			}

			this.navBar.appendChild(this.goRightButton);

			this.container.appendChild(this.navBar);
		}
        if (!document.all){
          this.resize(this); // call the resize func, I moved all the left and right resizing stuff there
        }
		if (this.leftPage && this.rightPage) {
			// render the pages in their containers
			this.leftContainer.src = this.leftPage.smallPage;
			var leftPageNumber = this.leftPage.pageNumber;
			this.leftContainer.onclick = function (e) {
				e = e ? e : window.event;
				theViewer.zoomPage(e, leftPageNumber);
			}

			this.rightContainer.src = this.rightPage.smallPage;
			var rightPageNumber = this.rightPage.pageNumber;
			this.rightContainer.onclick = function (e) {
				e = e ? e : window.event;
				theViewer.zoomPage(e, rightPageNumber);
			}
		}
	}
	
	this.zoomIn = function (e, page) {
		theViewer = this.viewer;
		if (theViewer.mode == 'doublePage') {
			var xPos = window.event ? e.offsetX : e.layerX;
			var yPos = window.event ? e.offsetY : e.layerY;
			var theLargeImage = theViewer.preloadDiv.appendChild(document.createElement('img'));
			theLargeImage.src = page.largePage;
			
			var ratioX = xPos / this.smallViewportSize.x;
			var ratioY = yPos / this.smallViewportSize.y;
			
			var locX = parseInt(ratioX * this.viewer.largePageResolution.x - this.largeViewportSize.x / 2);
			var locY = parseInt(ratioY * this.viewer.largePageResolution.y - this.largeViewportSize.y / 2);
	
			theLargeImage.onload = function () {
				theViewer.viewport.zoomContainer.src = this.src;
			}
			this.zoomPage = page;
			this.zoomContainer.src = page.largePage;
			this.zoomContainer.style.width = this.viewer.largePageResolution.x;
			this.zoomContainer.style.height = this.viewer.largePageResolution.y;
			this.leftContainer.style.display = 'none';
			this.rightContainer.style.display = 'none';
			this.zoomContainer.style.display = '';
			this.doScroll(locX, locY);
			theViewer.mode = 'singlePage';
			theViewer.currentPage = page.pageNumber;
			this.visiblePageCounter.innerHTML = page.pageNumber;
		}
	}
	
	this.zoomOut = function (e, page) {
		theViewer = this.viewer;
		if (theViewer.mode == 'singlePage') {
			this.zoomContainer.style.display = 'none';
			this.leftContainer.style.display = '';
			this.rightContainer.style.display = '';
			var pageNum = page.pageNumber;
			if (pageNum % 2 == 0) {
				this.leftPage = page;
				this.leftContainer.src = this.leftPage.smallPage;
				if (pageNum < this.viewer.pages.length) {
					this.rightPage = this.viewer.pages[pageNum + 1];
					this.rightContainer.src = this.rightPage.smallPage;
					this.visiblePageCounter.innerHTML = page.pageNumber + "/" + (page.pageNumber+1);
				}
			} else {
				this.rightPage = page;
				this.rightContainer.src = this.rightPage.smallPage;
				if (pageNum > 1) {
					this.leftPage = this.viewer.pages[pageNum - 1];
					this.leftContainer.src = this.leftPage.smallPage;
					this.visiblePageCounter.innerHTML = (page.pageNumber-1) + "/" + page.pageNumber;
				}
			}
			this.zoomContainer.src = '/img/spacer';
			this.zoomContainer.style.width = "0px";
			this.zoomContainer.style.height = "0px";
			theViewer.mode = 'doublePage';
		}
		

	}
	
	return this;
}