function scroll_no() {
$('body').css('overflow','hidden');
$('#viewport').css('display','none');
}
function scroll_yes() {
$('body').css('overflow','auto');
$('#viewport').css('display','block');
}

var reader	= {

			reader		: null,
			content		: null,
			controlL	: null,
			controlR	: null,
			container	: null,

		
			readerWidth		: null,
			readerHeight		: null,

			minReaderWidth:		700,
			

			overflowX	: null,
			overflowY	: null,

			percentX		: 0,
			percentY		: 0,

			centerX	:		 null,


			id	:			null, // cover id
			count:		null, // page ocunt
			current:		null,			
			
			pages	: 		null,
			loading	:		null,
			loaded :		false,

			fadeOut: function() {

				this.container.fadeOut(600);

			},


			preload:		function(id, count) {

								for (i = 1; i <= count; ++i) {
			
									var src	= ('content/' + id + '/full/page_' + i + '.jpg');

									var img = new Image();

									var selfObj	= this;
									img.onload	= function() {

										
										var position	= $.inArray(this.src, selfObj.loading);
										
										if ( -1 != position ) {

											selfObj.loading.splice(position, 1);

											if (0 == selfObj.loading.length) {

												selfObj.loaded	= true;
												
											} else {

												selfObj.loaded	= false;

											}

										}
								
									};

									img.src		= src;
									this.pages.push(img);
									this.loading.push(img.src);

								}

			},

			nextPage:		function() {

				//this.percentX	= 0;
				//this.percentY	= 0;
				
				if (this.current == null) {

					this.showPage(1);

				} else {

					pageTurn.turn('next');
					this.showPage( ( this.current == 1 ? this.current + 1 : this.current + 2 ) );
					
				}

			},

			prevPage:		function() {

				//this.percentX	= 1;
				//this.percentY	= 0;
				
				if (this.current == null) {

					this.showPage(1);

				} else {
					pageTurn.turn('prev');
					this.showPage( ( this.current == 2 ? this.current - 1 : this.current - 2 ) );
					
				}

			},

			showPageHelper	: function (width, pageLeft, pageRight) {

				var pageContentLeft		= null;
				var pageContentRight	= null;

				var srcLeft		= 'content/' + this.id + '/full/page_' + pageLeft + '.jpg';
				var srcRight	= 'content/' + this.id + '/full/page_' + pageRight + '.jpg';
				
				this.content.empty();
				this.content.css('width', width);
				
				pageContentLeft			= $('<div>').addClass('float_left').css('width', 800).css('height', 1132).css('background', '#fff url('+srcLeft+')');
				pageContentLeft			= $('<div>').addClass('float_left').css('background', '#fff url(images/controls/preloading.gif) center center no-repeat').append(pageContentLeft);
				this.content.append(pageContentLeft);
				
				if (null != pageRight) {
									
					pageContentRight	= $('<div>').addClass('float_left').css('width', 800).css('height', 1132).css('background', '#fff url('+srcRight+')');
					pageContentRight	= $('<div>').addClass('float_left').css('background', '#fff url(images/controls/preloading.gif) center center no-repeat').append(pageContentRight);
					this.content.append(pageContentRight);

				} 

				this.calculateSizes();
				this.calculateOffset(this.lastPageX, this.lastPageY);
				this.content.fadeIn(1500);
				
			},
			
			showPage:		function(page) {

				if ( (page > 0) && (page <= this.count) && (page != this.current) ) {

					this.percentX	= 0.5;
					this.percentY	= 0;
					
					var pageLeft	= null;
					var pageRight	= null;
					
					var width		= 800;
										
					if (page == 1) {

						pageLeft	= page;

					} else if (0 == page % 2) {

							pageLeft	= page;

							if (this.count >= page + 1) {
							
								pageRight	= page + 1;
								width		= 1600;

							}

					} else if (1 == page % 2) {
						
						pageLeft	= page - 1;
						pageRight	= page;

						width		= 1600;

					}

					this.current	= page;
					

					
					if (this.current == null) {
					// TODO KILL	
						this.content.fadeIn(1500);

					} else {


						
						if (this.content.is(':visible')) {

							var selfObj	= this;
							this.content.fadeOut(600, function() {

								selfObj.showPageHelper(width, pageLeft, pageRight);

							});

						} else {

							
							this.showPageHelper(width, pageLeft, pageRight);
							

						}

					}
					

				}
				

			},

			calculateOffset:	function(pageX,pageY) {

								 		if (pageX != null && pageY != null) {
							
								 			/*
											 * update pageX
									 		 */
											//pageX	-= this.reader.position().left;
									 		
								 			this.percentX	= pageX / this.readerWidth;
								 			this.percentY	= pageY / this.readerHeight;
							
								 		}

								 		var offsetX	= 0;
										if (this.centerX == null) {
											
								 			offsetX	=	-1 * Math.round( this.overflowX * this.percentX );

								 			if (offsetX > this.overflowX) offsetX	= this.overflowX;

										} else {

								 			 offsetX	= this.centerX;

										}
										
								 		var offsetY		= -1 * Math.round( this.overflowY * this.percentY );
								 		
								 		 
								 		if (offsetY > this.overflowY) offsetY	= this.overflowY;

								 		this.content.css('left', offsetX + 'px');
								 		this.content.css('top', offsetY + 'px');

								 		if (pageX != null && pageY != null) {
								 			this.lastPageX	= pageX;
								 			this.lastPageY	= pageY;

								 		}

			},

			calculateSizes:	function() {

										/*
										 * config reader viewport
										 */
										var tempX	= $(window).width() - 100;
										
										this.readerWidth			= $(window).width() - 100;
										this.readerHeight			= $(window).height();
								
										this.reader.width(this.readerWidth);
										this.reader.height(this.readerHeight);

										this.controlL.height(this.readerHeight);
										this.controlR.height(this.readerHeight);
										this.controlR.css('left', (50 + this.readerWidth) + 'px');
								
										/*
										 * clculate overflow of the content
										 */
										this.overflowX	= this.content.width() - this.readerWidth;
										this.overflowY	= this.content.height() - this.readerHeight;

									
									
										if (0 > this.overflowX)	{

											this.centerX	= Math.round( -0.5 * this.overflowX);
											
											this.overflowX	= 0;
											

										} else {

											this.centerX	= null;

										}


										if (0 > this.overflowY)	{

											this.overflowY = 0;	
										
										}
								
								
										this.calculateOffset();

			},
			
			load:				function(id, count, page) {

				/* PRELOAD IS CANCELD */
				this.id	= id;
				this.count	= count;
				scroll_no();
				//if (id != this.id) {
				if (false == true) {

					/*
					 * preload images 
					 */
					this.id	= id;
					this.count	= count;
					this.pages	= new Array();
					this.loading	= new Array();
					this.preload(this.id, this.count);
	
					var selfObj	= this;
					this.preloadTick	= setInterval( function() {
						
						if (selfObj.loaded) {
							
							clearInterval(selfObj.preloadTick);

							pageTurn.fadeOut();
							pageTurn.hideLayerLoad();

							
							selfObj.container.fadeIn(600);
							selfObj.showPage(page);
	
						}			
						
					}, 20);

				} else {
					pageTurn.fadeOut();
					pageTurn.hideLayerLoad();
					// Hide scrollbars and recalculate viewport without scrollbars
					scroll_no();
					this.calculateSizes();	
					
					this.container.fadeIn(600);
					this.showPage(page);

				}

			},
							
			init:					function (id, count) {

										this.reader			= $("#reader");
										this.content		= $("#readerContent");

										this.container		= $("#readerContainer");
										
										this.controlL	= $('#readerControl_l');
										this.controlR	= $('#readerControl_r');


										var selfObj	= this;
										this.controlL.click(function() { selfObj.prevPage(); } );
										this.controlR.click(function() { selfObj.nextPage(); } );

										this.content.hide();
										this.calculateSizes();
										
										/*
										 * set eventhandler mousemove to start repositioning 
										 */
										//this.reader.mousemove(function(e){
										$(document).mousemove(function(e){
										      
										      selfObj.calculateOffset(e.pageX,e.pageY);

										      
										    });

										
										$(window).resize(function() {
											selfObj.calculateSizes();
										});

											
										}

		}