function demoMain() {

	// Load base
	$('body').append($.tmpl(g.templates['base'], {}));
	$('#content').children().hide();

	// Load sections
	$("#groups").append(
		$.tmpl(g.templates['groups'], g.data['groups'])
	);

	$('#items').append(
		$.tmpl(g.templates['items'], g.data['items'])
	);

	$('#itemsheader').append(
		$.tmpl(g.templates['itemsheader'], {})
	);

	$('#people').append(
		$.tmpl(g.templates['people'], g.data['people'])
	);

	$('#eventsection').append(
		$.tmpl(g.templates['event'], {})
	);

	$('#comparesection').append(
		$.tmpl(g.templates['compare'], {})
	);

	$('.comments').append(
		$.tmpl(g.templates['comments'], {})
	);

	// Render formats
	$('.datetime').friendlyDate();
	$('.digits').digits();

	// Add navigation
	$('a.people').on('click', function() {
		showSection('people');
		breadcrumb([
			{"Page": "Home"},
			{"Page": "People"}
		]);
	});

	$('a.groups').on('click', function() {
		showSection('groups');
		breadcrumb([
			{"Page": "Home"},
			{"Page": "Your Groups"}
		]);
	});

	$('a.items').on('click', function() {
		showSection('items');
		breadcrumb([
			{"Page": "Home"},
			{"Page": "Your Groups"},
			{"Page": "Bike Polo"}
		]);
	});

	$('a.Event').on('click', function() {
		showSection('event');
		breadcrumb([
			{"Page": "Home"},
			{"Page": "Your Groups"},
			{"Page": "Bike Polo"},
			{"Page": "24 Hour Single Player Tournament"}
		]);
	});

	// Item Filter
	$('#itemfilter').on('change', function() {
		filterItems($('#itemfilter option:selected').val());
	});

	showSection('groups');
	filterItems('All');
	breadcrumb([{"Page":"Home"}, {"Page":"Your Groups"}]);
}

function showSection(name) {
	$('#content').children().hide();
	$('.breadcrumb').show();
	$('#' + name + 'section').show();

}

function filterItems(type) {
	removeExtrasColumn();
	$('.deleteme').remove();

	if (type == 'All') {
		breadcrumb([
			{"Page": "Home"},
			{"Page": "Your Groups"},
			{"Page": "Bike Polo"}
		]);
		$('#items').children().show();
		$('#itemsheader').children().hide();
		showTypeHeader(type);
	} else {
		breadcrumb([
			{"Page": "Home"},
			{"Page": "Your Groups"},
			{"Page": "Bike Polo"},
			{"Page": type}
		]);

		$('#items').children().each(function(index, row) {
			jqrow = $(row);
			if (jqrow.attr('datatype') == type) {
				jqrow.show();
			} else {
				jqrow.hide();
			}
		});

		showTypeHeader(type);
		addExtrasColumn(type);
	}
}

function showTypeHeader(type) {
	$('#itemsheader').children().hide();
	$('#' + type + 'header').show();

	switch (type) {
		case 'All':
			toggleColumn(true, 0);
			break;
		default:
			toggleColumn(false, 0);
	}
}

function toggleColumn(show, column) {
	$('#itemstable').children().each(function(index, section) {
		$(section).children().each(function(rowindex, row) {
			if (show)
				$($(row).children()[column]).show()
			else
				$($(row).children()[column]).hide()
		});
	});
}

function addExtrasColumn(type) {
	switch(type) {
		case 'For Sale':
			$('#itemstable').children().each(function(tindex, section) {
				if (tindex == 0) {
					// theader
					$($(section).children()[0]).append('<th style="text-align:center;">Compare</th>');
				} else {
					// tbody
					$(section).children().each(function(rowindex, row) {
						$(row).append('<td style="text-align: center;"><input type="checkbox" /></td>');
					});
					$(section).append('<tr class="deleteme"><td colspan="4"></td><td style="text-align: center;"><button class="btn primary compare">Compare</button></td></tr>');
					$('.compare').on('click', function() {
						breadcrumb([
							{"Page": "Home"},
							{"Page": "Your Groups"},
							{"Page": "Bike Polo"},
							{"Page": "For Sale"},
							{"Page": "Compare"}
						]);
						showSection('compare');
					})
				}
			});
			break;
		default:
	}
}

function removeExtrasColumn() {
	$('#itemstable').children().each(function(index, section) {
		$(section).children().each(function(rowindex, row) {
			$($(row).children()[5]).remove()
		});
	});
}

//
// [{"Page":"Home"}, {"Page":"Your Groups"}, {"Page":"Bike Polo"}]
//
function breadcrumb(crumbs) {
	$('.breadcrumb').children().remove();

	$.each(crumbs, function(ii, crumb) {
		if (ii < crumbs.length - 1) {
			$('.breadcrumb').append($.tmpl(g.templates['crumb'], crumb))
			switch (crumb['Page']) {
				case 'Home':
				case 'Your Groups':
					$('.breadcrumb a:last').on('click', function() {
						showSection('groups');
						breadcrumb([
							{"Page": "Home"},
							{"Page": "Your Groups"}
						]);
					});
					break;
				case 'Bike Polo':
					$('.breadcrumb a:last').on('click', function() {
						showSection('items');
						$('#itemfilter').children()[0].selected = true;
						filterItems('All');
						breadcrumb([
							{"Page": "Home"},
							{"Page": "Your Groups"},
							{"Page": "Bike Polo"}
						]);
					});
					break;
				default:
			}
		} else {
			$('.breadcrumb').append($.tmpl(g.templates['crumblast'], crumb))
		}

	});
}