var comicReader = new Class({

	initialize: function(pages, loadingText) {
		this.els = {};
		this.c_page = 0;
		this.pages = pages;
		this.loadingText = loadingText;
		this.container = $('comic_reader_container');
		this.currentPage = 0;
		this.leftPage = null;
		this.rightPage = null;
		this.pageWidth = 637;
		this.pageHeight = 900;
		this.topScrollPos = 225;
		this.state = -3; //< 0 unloaded >= 0 loaded
		this.fxOptions = {transition: Fx.Transitions.linear, duration: 1000};
		this.running = false;

		this.pageEffectTime = 500;
		window.addEvent('resize', this.resize.bind(this));
		window.addEvent('domready', function() {
			this.els.prev = $('comic_prev');
			this.els.next= $('comic_next');
			this.els.spacer = $('comic_spacer');
			this.els.paginator = $('paginator');
			this.els.position = $('pager');

			this.els.loader = new Element('div', {'text': this.loadingText, 'class': 'loader'}).inject(this.container);

			this.els.paginator.setStyle('display', 'none');
			this.els.spacer.setStyle('display', 'none');

			this.initSize();
			this.initEvents();

			this.loadComic();
		}.bind(this));
	},

	newPage: function(left) {
		if (this.pages[this.currentPage]) {
			var imgContainer = new Element('div', {'class': 'page_container'}).inject(this.container, 'top');
			imgContainer.setStyles({
					'right': left ? this.pageWidth+10 : 10,
					'width': this.pageWidth,
					'height': this.pageHeight
				});

			new Element('img', {
				'src':this.pages[this.currentPage],
				'styles': {
					'width': this.pageWidth,
					'height': this.pageHeight
				}
			}).inject(imgContainer);

			this.currentPage++;
			if (this.currentPage < this.pages.length) {
				imgContainer.addEvent('click', left ? this.prev.bind(this) : this.next.bind(this));
			}

			return imgContainer;
		} else {
			return null;
		}
	},

	imageLoad: function() {
		this.state++;
		if (this.state == 0) {
			this.initComic();
		}
	},

	loadComic: function() {
		var tmp = new Array();;
		for (var i = 0; i < this.pages.length; i++) {
			tmp.push(new Image());
			tmp[i].onload = this.imageLoad.bind(this);
			tmp[i].src = this.pages[i];
		}

		if (Browser.Engine.trident && Browser.Engine.version > 4) {
			this.state = 0;
			this.initComic.delay(500, this);
		}
	},

	resize: function() {
		this.initSize();
		if (this.leftPage) {
			this.leftPage.setStyles({'left':'', 'right': this.pageWidth+10, 'width': this.pageWidth, 'height': this.pageHeight});
			this.leftPage.getElement('img').setStyles({'width': this.pageWidth, 'height': this.pageHeight});
		}
		if (this.rightPage) {
			this.rightPage.setStyles({'left':'', 'right':10, 'width': this.pageWidth, 'height': this.pageHeight});
			this.rightPage.getElement('img').setStyles({'width': this.pageWidth, 'height': this.pageHeight});
		}
	},

	initSize: function() {
		var size = window.getSize();
		if (size.y < 1000) {
			if (size.y < 450) size.y = 450;
			size.x = size.x - 30;
			this.pageWidth = ((size.y/900)*637).round(1)
				this.pageWidth -= 10;
			if (this.pageWidth > 637) this.pageWidth = 637;
			this.container.setStyles({
					'width': this.pageWidth*2,
					'margin-left': ((this.pageWidth)+10)*-1
			});
			this.pageHeight = ((this.pageWidth/637)*900).round(1) - 25;
			this.els.spacer.setStyle('height', (this.pageWidth/637)*850 );
		}
	},

	initComic: function() {
		this.els.paginator.setStyle('display', 'block');
		this.els.spacer.setStyle('display', 'block');
		this.els.loader.destroy();
		this.rightPage = this.newPage();
		this.updatePosition();
	},

	initEvents: function() {
		this.els.prev.addEvent('click', this.prev.bindWithEvent(this));
		this.els.next.addEvent('click', this.next.bindWithEvent(this));
	},

	prev: function(ev) {
		ev.stop();

		if (this.running) return;

		this.running = true;

		if (this.currentPage-4 < 0 ) this.currentPage = 0; 
		else this.currentPage = this.currentPage -4;

		var oldLeftPage = this.leftPage;
		var oldRightPage = this.rightPage;

		if (this.currentPage != 0) {
			this.leftPage = this.newPage(true);
		} else {
			this.leftPage = null;
		}
		if (oldLeftPage) {
			oldLeftPage.setStyle('z-index', '2');
			oldLeftPage.getElement('img').setStyle('float', 'left');
		}

		this.rightPage = this.newPage();

		this.rightPage.setStyles({
			'width': 0,
			'left': this.pageWidth+10,
			'right': ''
		});

		this.rightPage.getElement('img').setStyle('float', 'left');

		this.rightPage.setStyle('z-index', 2);
		if (oldRightPage) oldRightPage.setStyle('z-index',1);

		var firstStep = new Fx.Morph(oldLeftPage,	 this.fxOptions);
		var secondStep= new Fx.Morph(this.rightPage, this.fxOptions );

		firstStep.start({
			'width':[this.pageWidth, 0],
			'right':[this.pageWidth, 10]
		});

		secondStep.start({
			'width': [0, this.pageWidth]
		});

		secondStep.addEvent('complete', function() {
			this.running = false;
			if (oldLeftPage) oldLeftPage.destroy();
			if (oldRightPage) oldRightPage.destroy();

			if (this.currentPage > 1) {
				this.els.prev.setStyle('visibility', 'visible');
			} else {
				this.els.prev.setStyle('visibility', 'hidden');
			}

			if (this.currentPage >= this.pages.length) {
				this.els.next.setStyle('visibility', 'hidden');
			} else {
				this.els.next.setStyle('visibility', 'visible');
			}
			this.updatePosition();
		}.bind(this));
	},

	updatePosition: function() {
		var fPage = this.currentPage - 1;
		var nPage = this.currentPage;
		var txt = fPage > 0 ? fPage + ' - ' + nPage : nPage;
		this.els.position.set('text', txt + ' / ' + this.pages.length);
	},

	next: function(ev) {
		ev.stop();
		if (this.running) return;
		this.running = true;

		var oldLeftPage = this.leftPage;
		var oldRightPage = this.rightPage;


		this.leftPage= this.newPage(true);
		this.leftPage.setStyle('width', 0);
		this.leftPage.getElement('img').setStyle('float', 'right');

		oldRightPage.setStyle('left', '');
		oldRightPage.setStyle('right', 10);
		oldRightPage.getElement('img').setStyle('float', 'right');

		this.leftPage.setStyle('z-index',2);
		if (oldLeftPage) oldLeftPage.setStyle('z-index', 1);
		oldRightPage.setStyle('z-index', 3);

		this.rightPage= this.newPage();

		var firstStep = new Fx.Morph(oldRightPage,  this.fxOptions);
		var secondStep= new Fx.Morph(this.leftPage, this.fxOptions);

		firstStep.start({
			'width':[this.pageWidth, 0],
			'right': [10, (this.pageWidth*2)+10]
		});

		secondStep.start({
			'width': [0, this.pageWidth]
		});

		if (Browser.Engine.trident) {
			oldRightPage.getElement('img').morph({'margin-left': [0, this.pageWidth*-1]})
		}

		firstStep.addEvent('complete', function() {
			this.running = false;
			if (oldLeftPage) oldLeftPage.destroy();
			if (oldRightPage) oldRightPage.destroy();

			if (this.currentPage > 0) {
				this.els.prev.setStyle('visibility', 'visible');
			} else {
				this.els.prev.setStyle('visibility', 'hidden');
			}

			if (this.currentPage >= this.pages.length) {
				this.els.next.setStyle('visibility', 'hidden');
			} else {
				this.els.next.setStyle('visibility', 'visible');
			}
			this.updatePosition();
		}.bind(this));
	}
});