function section_navigation_show_item(event) {
	var element = event.element();
	var id = element.getAttribute('href').split('#')[1];
	show_item(id);
}

function show_item(this_item_id) {
	items_current =  $$('#sections div.current');
	items_current.each(function(item_current) {
		item_current.removeClassName('current');
		item_current.hide();
	});

	this_item = $(this_item_id);
	Element.addClassName(this_item,'current');
	Effect.Appear(this_item);
	
	controls =  $$('#sections_navigation ul ul li a');
	controls.each(function(control) {
		if(this_item_id == control.href.split('#')[1]) {
			control.addClassName('current');
		} else {
			control.removeClassName('current');
		}
	});
}

function show_next_item() {
	current = $$('#sections div.current')[0];
	next_item = Element.next(current);
	if(next_item.id) {
		show_item(next_item.id);
	} else {
		alert('No more items in this category.');
	}

}
function show_previous_item() {
	current = $$('#sections div.current')[0];
	previous_item = Element.previous(current);
	if(previous_item.id) {
		show_item(previous_item.id)
	} else {
		alert('No more items in this category.');
	}
}

function section_navigation_setup() {
	/* Hide all items */
	items =  $$('#sections div.item');
	items.each(function(item) {
		item.hide();			
	});

	/* Attach show item function to navigation links */
	controls =  $$('#sections_navigation ul ul li a');
	controls.each(function(control) {
		control.observe('click', section_navigation_show_item);
	});

	/* If URL has anchor (#...) use that to show specific item */
	if (location.href.split('#').length > 1) {
		show_item(location.href.split('#')[1]);
	} else {
		show_item($$('#sections div.item')[0].id);
	}	
	
	/* Insert "<< prev" and "next >>" buttons */
	Element.insert($('sections'), { bottom: "<ul class=\"nav\"><li id=\"prev\" onclick=\"show_previous_item()\">&laquo; Previous</li><li id=\"next\" onclick=\"show_next_item()\">Next &raquo;</li></ul>" });
}

Event.observe(window, "load", section_navigation_setup);