var navScroller, content, boxsize;

function toggleThumbs() {
	var p = $('thumbnav').retrieve('position');
	$('thumbtogglesign').set('html', p ? '–' : '+' );
	$('thumbtoggletext').set('text', p ? 'Click on a thumbnail to jump to a brochure page' : 'Click here to show brochure pages');
	$('thumbnav').slider.start({ 'height' : p ? [0, 125] : [125, 0]});
	$('thumbnav').store('position', !p);
}

function togglePage(opt) {
	switch (opt) {
		case 'continue':
			$('continue').blur(); // FF is putting a border around the buttons when clicked?
			if (pageNum >= pages.length) { 
				return;
			}
			changePage(pageNum+1, opt);
			break;
		case 'previous':
			$('previous').blur();
			if (pageNum < 0) {
				return;
			}
			changePage(pageNum-1, opt);
			break;
		default:
			if (pages[opt] && (pageNum != opt)) {
				changePage(opt, 'fade');
				updateNav();
			}
			break;
	}
	return(false);
}

function updateNav() {
	$$('#thumbnav img').each(function(img, i) {
		var parent = img.getParent('div.thumb');
		if (i == pageNum) {
			img.setStyle('opacity', 0.5);
			navScroller.toElement(img);
			parent.addClass('current');
		} else {
			img.setStyle('opacity', 1);
			parent.removeClass('current');
		}
			
	});

	$('previous').setStyle('display', (pageNum <= 0) ? 'none' : '');
	$('continue').setStyle('display', (pageNum >= (pages.length - 1)) ? 'none' : '');
}

function changePage(newpage, direction) {
	var oldcontent;
	$('brochurecontent').getElements('div.content').each(function(el) {
		if (!el.hasClass('circlingthedrain')) {
			oldcontent = el; // so we don\'t undo a previous slider and kill the logic
		}
	});

	var newcontent = pages[newpage].content.clone();
	newcontent.setStyle('opacity', 0);

	var newend = (boxsize.x - pages[newpage].x) >> 1;

	if (direction == 'fade') {
		newcontent.setStyle('left', newend);
		newcontent.get('tween').start('opacity', 0, 1);
		oldcontent.get('tween').start('opacity', 1, 0).chain(function() { this.element.destroy(); });
	} else {
		var oldstart = oldcontent.getStyle('left').toInt();
		var oldend = (direction == 'previous') ? boxsize.x : -oldcontent.getStyle('width').toInt();

		var newstart = (direction == 'previous') ? -newcontent.getStyle('width').toInt() : boxsize.x;
		var newend = (boxsize.x - pages[newpage].x) >> 1;

		newcontent.slidefx = new Fx.Morph(newcontent);
		oldcontent.slidefx = new Fx.Morph(oldcontent);
		oldcontent.addClass('circlingthedrain');

		newcontent.slidefx.start({ 'left': [newstart,newend], 'opacity': [0, 1] });
		oldcontent.slidefx.start({ 'left': [oldstart,oldend], 'opacity': [0.8, 0] }).chain(function() { this.element.destroy(); });
	}
	$('brochurecontent').setStyle('height', newcontent.getStyle('height'));

	content.grab(newcontent); 

	pageNum = newpage;
	updateNav();

}

function newContentElement(page) {
	var d = new Element('div').addClass('content').addClass(page.type);

	if (page.addborders) {
		var top = new Element('div', { 'class': 'top' });
		top.grab(new Element('img',  { 'src': '/images/brochures/border-tl.png', 'width' : 21, 'height': 22, 'alt': '' }));
		top.grab(new Element('img',  { 'src': '/images/brochures/border-tc.png', 'width' : page.x, 'height': 22, 'alt': '' }));
		top.grab(new Element('img',  { 'src': '/images/brochures/border-tr.png', 'width' : 21, 'height': 22, 'alt': '' }));
		top.inject(d, 'bottom');
	}

	var middle = new Element('div', { 'class' : 'middle' });
	if (page.addborders) {
		middle.grab(new Element('img',  { 'src': '/images/brochures/border-cl.png', 'width' : 21, 'height': page.y, 'alt': '' }));
	}
	middle.grab(new Element('div').addClass('replaceme'));
	if (page.addborders) {
		middle.grab(new Element('img',  { 'src': '/images/brochures/border-cr.png', 'width' : 21, 'height': page.y, 'alt': '' }));
	}
	middle.inject(d, 'bottom');
		
	if (page.addborders) {
		var bottom = new Element('div', { 'class': 'bottom' });
		bottom.grab(new Element('img',  { 'src': '/images/brochures/border-bl.png', 'width' : 21, 'height': 22, 'alt': '' }));
		bottom.grab(new Element('img',  { 'src': '/images/brochures/border-bc.png', 'width' : page.x, 'height': 22, 'alt': '' }));
		bottom.grab(new Element('img',  { 'src': '/images/brochures/border-br.png', 'width' : 21, 'height': 22, 'alt': '' }));
		bottom.inject(d, 'bottom');
	}

	d.setStyle('width', page.x + ((page.addborders) ? 42 : 0));
	d.setStyle('height', page.y + ((page.addborders) ? 44 : 0));

	return(d);
}

window.addEvent('domready', function() {
	navScroller = new Fx.Scroll($$('#thumbnav div.container')[0]);

	// preload the images
	$each(pages, function(page, i) {
		var d = newContentElement(page);

		switch(page.type) {
			case 'image':
				var img = new Element('img', { 'src' : page['img'], 'width': page.x, 'height': page.y });
				img.setProperty('alt', page['alt'] ? page['alt'] : 'Page ' + i);
				if (page.imgattributes) {
					$each(page.imgattributes, function(val, attr) {
						img.setProperty(attr, val);
					});
				}
				img.replaces(d.getElement('div.replaceme'));
				break;
			default:
				d.empty().set('text', "Uhoh! Unknown media type: " + page.type);
		}
		pages[i].content = d;
	});

	// Hide nav buttons as appropriate
	if (pageNum == 0) {
		$('previous').setStyle('display', 'none');
	}

	if (pageNum >= (pages.length - 1)) {
		$('continue').setStyle('display', 'none');
	}

	content = $('brochurecontent');
	boxsize = content.getSize();

	// override the non-JS styling in brochure.css
	var sheet = document.styleSheets[document.styleSheets.length - 1];
	if (sheet.addRule) {
		// IE
		sheet.addRule('#brochurecontent div.content', "position: absolute; top: 0;", sheet.rules.length); 
	} else {
		// everyone else
		sheet.insertRule('#brochurecontent div.content { position: absolute; top: 0; }', sheet.cssRules.length); 
	}

	content.getElement('div.content').setStyle('left', (boxsize.x - pages[pageNum].x) >> 1); 

	$('thumbnav').slider = new Fx.Morph($('thumbnav'));
	$('thumbnav').setStyle('height', 0);
	$('thumbnav').store('position', true);

	var max = null;
	$each(pages, function(p) {
		if (p.y > max) {
			max = p.y;
		}
	});
	max += 44; // for the border width

	$('pagecontainer').setStyle('height', max);

	updateNav();

});