window.addEvent('domready', function() {
	var links = $$('#bookletpages a');
	var pages = $('pages');
	links.each(function(el, i) {
		var page = new Element('img');
		page.src = el.href;
		page.inject(pages, 'bottom');
		page.addClass('page');
		page.fx = new Fx.Morph(page, {
			duration: 700,
			wait: false
		});
		
		var thumb = new Element('img');
		thumb.src = el.href.split('.jpg').join('_thumb.jpg');
		thumb.inject($('thumbs'), 'bottom');
		thumb.number = i;
		thumb.addEvent('click', function() {
			showPage(this.number);
			hideSubnav();
		});
	});
	
	$('goforward').addEvent('click', function(e) {
		var eve = new Event(e).stop();
		nextPage();
	});

	$('gobackward').addEvent('click', function(e) {
		var eve = new Event(e).stop();
		prevPage();
	});

	$('subnavlead').addEvent('click', function(e) {
		var eve = new Event(e).stop();
		if($('subnav').getOpacity() == 0.9)
			hideSubnav();
		else
			showSubnav();
	});

	$('subnav').fx = new Fx.Morph($('subnav'), {
		duration: 500,
		wait: false
	});

	$('subnav').setStyle('opacity', 0);

	$('about').addEvent('click', function(e) {
		var eve = new Event(e).stop();
		showAbout();
	});

	$('aboutcontent').fx = new Fx.Morph($('aboutcontent'), {
		duration: 500,
		wait: false
	});

	$('aboutcontent').setStyle('opacity', 0);

	$('tracklist').addEvent('click', function(e) {
		var eve = new Event(e).stop();
		showTracklist();
	});

	$('tracklistcontent').fx = new Fx.Morph($('tracklistcontent'), {
		duration: 500,
		wait: false
	});

	$('tracklistcontent').setStyle('opacity', 0);

	$('thumbnails').addEvent('click', function(e) {
		var eve = new Event(e).stop();
		if($('thumbs').getOpacity() == 0.9)
			hideThumbs();
		else
			showThumbs();
	});

	$('thumbs').fx = new Fx.Morph($('thumbs'), {
		duration: 500,
		wait: false
	});

	$('container').setStyle('display', 'block');
	$$('#navigation a, #subnavlead, #thumbnails, #thumbs').each(function(el, i) {
		el.setStyles({
			opacity: 0
		});
	});

	new Fx.Morph($('container'), {
		duration: 500,
		onComplete: function() {
			$$('#navigation a, #subnavlead, #thumbnails').each(function(el, i) {
				new Fx.Morph(el, {
					duration: 500,
					wait: false,
					onComplete: function() {
						if(i == 0)
							showPage(0);
					}
				}).start({
					opacity: 1
				});
			});
		}
	}).start({
		opacity: [0, 1]
	});
	
	$$('.closer').addEvent('click', function(e) {
		var event = new Event(e).stop();

		hideThumbs();
		hideSubnav();
		hideTracklist();
		hideAbout();
	});
});

var currentPage = -1;
function showPage(nextPage) {
	if(currentPage != nextPage) {
		var pages = $$('#pages .page');
	
		if(pages[currentPage]) {
			pages[currentPage].fx.start({
				left: 0,
				opacity: 0
			});
		}
	
		if(pages[nextPage]) {
			currentPage = nextPage;
	
			pages[currentPage].setStyles({
				display: 'block',
				opacity: 0
			});
	
			pages[currentPage].fx.start({
				opacity: 1
			});
		}

		hideThumbs();
		hideSubnav();
		hideAbout();
		hideTracklist();
	}
}

function nextPage() {
	var pages = $$('#pages .page');
	var nextPage = currentPage + 1;
	if(nextPage >= pages.length)
		nextPage = 0;

	showPage(nextPage);
}

function prevPage() {
	var pages = $$('#pages .page');
	var nextPage = currentPage - 1;
	if(nextPage < 0)
		nextPage = pages.length - 1;

	showPage(nextPage);
}

function showThumbs() {
	$('thumbs').fx.start({
		opacity: 0.9
	});

	hideSubnav();
	hideAbout();
	hideTracklist();
	dimCurrentImage();
}

function hideThumbs() {
	$('thumbs').fx.start({
		opacity: 0
	});

	unDimCurrentImage();
}

function showSubnav() {
	$('subnav').fx.start({
		opacity: 0.9
	});

	hideThumbs();
	hideAbout();
	hideTracklist();
	dimCurrentImage();
}

function hideSubnav() {
	$('subnav').fx.start({
		opacity: 0
	});

	unDimCurrentImage();
}

function showAbout() {
	$('aboutcontent').fx.start({
		opacity: 0.95
	});

	hideSubnav();
	hideThumbs();
	hideTracklist();
	dimCurrentImage();
}

function hideAbout() {
	$('aboutcontent').fx.start({
		opacity: 0
	});

	unDimCurrentImage();
}

function showTracklist() {
	$('tracklistcontent').fx.start({
		opacity: 0.95
	});
	
	hideSubnav();
	hideThumbs();
	hideAbout();
	dimCurrentImage();
}

function hideTracklist() {
	$('tracklistcontent').fx.start({
		opacity: 0
	});

	unDimCurrentImage();
}

function dimCurrentImage() {
	var pages = $$('#pages .page');
	if(pages[currentPage]) {
		pages[currentPage].fx.start({
			opacity: 0.5
		});
	}
}

function unDimCurrentImage() {
	var pages = $$('#pages .page');
	if(pages[currentPage]) {
		pages[currentPage].fx.start({
			opacity: 1
		});
	}
}