var Comic = new Class({
	initialize: function(params){
		this.pages = params.pages;
		this.container = params.container;
		this.imageBank = [];
		this.currentIndex = (params.startItem||0);
		this.loading = new Element('div', { 'id':'loading', 'class':'hidden' }).inject(this.container);
		$$('.comic-prev').addEvent('click', function(e){ e.stop(); this.previous(); }.bind(this));
		$$('.comic-next').addEvent('click', function(e){ e.stop(); this.next(); }.bind(this));
		$$('.comic-jump').each(function(el) { el.addEvent('change', function(e){ this.walk(el.selectedIndex); }.bind(this)); }.bind(this));
		this.onWalk = params.onWalk || null;
		this.firstItem = (params.startItem||0); // used to make sure first load doesn't fade in
		this.walk(this.currentIndex);
	},

	previous: function(){
		this.walk((this.currentIndex>0 ? this.currentIndex-1 : 0));
	},

	next: function(){
		// this.walk((this.currentIndex<this.pages.length-1 ? this.currentIndex+1 : 0));
		if (this.currentIndex==this.pages.length-1) {
			this.lastPage();
		} else {
			this.walk((this.currentIndex<this.pages.length-1 ? this.currentIndex+1 : this.pages.length-1));
		}
	},

	walk: function(item){

		// hide/show next+prev buttons
		if (item==this.pages.length-1) $$('.comic-next').addClass('hidden'); else $$('.comic-next').removeClass('hidden');
		if (item==0) $$('.comic-prev').addClass('hidden'); else $$('.comic-prev').removeClass('hidden');

		// select the page in dropdown
		$$('.comic-jump').each(function(el) { el.selectedIndex = item; });
		
		this.currentIndex=item;
		if (!this.imageBank[this.currentIndex]) {
			var startOpacity = (item==this.firstItem) ? 1 : .7; 
			this.imageBank[this.currentIndex] = new Asset.image(this.pages[this.currentIndex], {
				opacity: startOpacity,
			    onload: this.showPage.bind(this)
			});
			this.container.getElement('img').set('opacity',startOpacity);
			if (item!=this.firstItem) { this.loadingClassDelay = (function(){ this.loading.removeClass('hidden'); }).delay(300,this); }
		} else {
		    this.showPage();
		}
		if(this.onWalk){
			this.onWalk((this.pages[this.currentIndex] || null));
		}
	},
	
	showPage: function(){
		this.container.empty().adopt(this.imageBank[this.currentIndex]);
		// if (!$('horizScroll') && this.imageBank[this.currentIndex].getWidth()>880) {
		// 	$('comic-wrapper').tween('width', (this.imageBank[this.currentIndex].getWidth()+30)+'px');
		// } else {
		// 	$('comic-wrapper').tween('width', '900px');
		// }
		this.imageBank[this.currentIndex].tween('opacity',1);
		$clear(this.loadingClassDelay);
		this.loading.addClass('hidden').inject(this.container);
		this.imageBank[this.currentIndex].onclick = this.next.bind(this);
	},

	lastPage: function(){
		// hide message if it's showing and user clicks on image
		if ($('message')) {
			$('message').destroy();
			this.imageBank[this.currentIndex].tween('opacity',1);
		} else {
			// this.imageBank[this.currentIndex].tween('opacity',.3);
			// var message = new Element('div', { 'id':'message' }).set('html', '<h2>This is the last page.</h2>').inject(this.container);
			// if (this.pages.length>1) var startOver = new Element('a', { 'id':'start-over', 'class':'button', 'href':'#' }).set('html', '&larr; Start Over').inject(message).addEvent('click', function(e) { e.stop(); this.walk(0); }.bind(this));
			// var back = new Element('a', { 'id':'back-to-ts20', 'class':'button', 'href':'#' }).set('html', '&uarr; Back to ts2.0').inject(message).addEvent('click', function(e) { e.stop(); location.href='/ts2.0'; });
		}
	}
	
	
});