var NavigationPage = function() {
	var page = this;
	page.el = jQuery('#header .navigation');
	page.bar = jQuery('#header .bar');
	page.scaffoldBar = jQuery('#header .scaffold-bar');
	page.ul = page.el.children('ul');
	var buildWidth = 0;
	
	page.lis = [];
	page.ul.find('li').each(function() {
		var li = new NavigationLi(page, this);
		page.lis.push(li);
	});

	page.onreadyCallback = function() {
		jQuery.preLoadImages('/img/nav-beginner.png', '/img/nav-beginner-active.png',
			'/img/nav-beginning.png', '/img/nav-ender.png', '/img/nav-ender-active.png',
			'/img/nav-ending.png', '/img/nav-separator.png', '/img/nav-spacer.png',
			'/img/nav-spacer-active.png');
	};

	page.onloadCallback = function() {
		page.removeBits();
		page.addBeginningBit();
		page.addEnderBit();
		var spacerOffset = -36;
		for (var i = 0; i < page.lis.length; i++) {
			var active = page.lis[i].isActive();
			page.addBeginnerBit(active);
			var width = page.lis[i].el.outerWidth(true) + spacerOffset;
			page.addSpacerBit(width, active);
			spacerOffset = -36;
			page.addEnderBit(active);
		}
		page.addBeginnerBit();
		var barWidth = page.bar.width();
		if (buildWidth < barWidth)
			page.addEndingBit(barWidth - buildWidth);
		page.scaffoldBar.hide();
	};

	page.removeBits = function() {
		page.bar.children().remove();
		buildWidth = 0;
	};

	page.addBeginningBit = function() {
		var spacer = jQuery('<div></div>').addClass('bit').addClass('beginning');
		page.bar.append(spacer);	
		buildWidth += spacer.outerWidth(true);
	};

	page.addSpacerBit = function(width, active) {
		var spacer = jQuery('<div></div>').addClass('bit').addClass('spacer')
			.css('width', width);
		if (active)
			spacer.addClass('active');
		page.bar.append(spacer);	
		buildWidth += spacer.outerWidth(true);
	};

	page.addBeginnerBit = function(active) {
		var beginner = jQuery('<div></div>').addClass('bit').addClass('beginner');
		if (active)
			beginner.addClass('active');
		page.bar.append(beginner);
		buildWidth += beginner.outerWidth(true);
	};

	page.addEnderBit = function(active) {
		var ender = jQuery('<div></div>').addClass('bit').addClass('ender');
		if (active)
			ender.addClass('active');
		page.bar.append(ender);	
		buildWidth += ender.outerWidth(true);
	};

	page.addEndingBit = function(width) {
		var ending = jQuery('<div></div>').addClass('bit').addClass('ending');
		page.bar.append(ending);	
		var endingWidth = ending.outerWidth(true);
		ending.remove();
		page.addSpacerBit(width - endingWidth);
		page.bar.append(ending);	
		buildWidth += endingWidth;
	};
};

var NavigationLi = function(page, el) {
	var li = this;
	li.el = jQuery(el);
	li.page = page;

	li.isActive = function() {
		return li.el.hasClass('active');
	};

	var imageA = li.el.filter('.has-image').find('a[data-hover]');
	if (imageA.length) {
		jQuery.preLoadImages(imageA.attr('data-hover'));

		var bg1 = imageA.css('background-image');
		var bg2 = 'url('+imageA.attr('data-hover')+')';
		imageA.hover(function() {
			$(this).css('background-image', bg2);
		}, function() {
			$(this).css('background-image', bg1);
		});
		imageA.click(function() {
			$(this).css('background-image', bg1);
		});
	}
};