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

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

	this_item = $$('#design #'+this_item_id)[0];
	if(this_item) {
		Effect.Appear(this_item);		
		Sound.play('inc/sounds/taperewind2.mp3');
		this_item.addClassName('current');
	}
}

function hide_feature(this_item_id) {
	this_item = $(this_item_id);
	Effect.Fade(this_item);
	Sound.play('inc/sounds/taperewind3.mp3');
	Element.scrollTo('content');
}

function hover_control(event) {
	Sound.play('inc/sounds/cameraclick.mp3');
}

function features_setup() {
	/* Hide all items */
	items =  $$('#design div.feature');
	items.each(function(item) {
		item.hide();
		item.addClassName('active');
		item_id = item.id
		/* Insert "close" button */
		Element.insert(item, { bottom: "<a href=\"#\" onclick=\"hide_feature('"+item_id+"'); return false;\"><img src=\"images/close.gif\" alt=\"Close\" class=\"close\"></a>" });
	});

	/* Attach show item function to navigation links */
	controls =  $$('#design #introduction ul li a');
	controls.each(function(control) {
		control.observe('click', show_feature_click);
		control.observe('mouseover', hover_control);
	});
	
	/* If URL has anchor (#...) use that to show specific item */
	if (location.href.split('#').length > 1) {
		show_feature(location.href.split('#')[1]);
	  Element.scrollTo('header');
	}
}

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