//NOTE: Requires Mootools 1.2 (http://mootools.net)

var imgPrefix = '/images/design_process/';
var imgSuffix = '.jpg';

var stages;

initDesignProcess();

function initDesignProcess()
{
	//Get the list of stage LIs
	stages = document.getElement('#subPageNav').getElements('li');
	
	for (var i = 0; i < stages.length; i++)
	{
		//Add onclick events
		stages[i].addEvent('click', onClickedStage.bindWithEvent(stages[i]));
		
		//Remove full text, leave only summary
		stages[i].getElement('p').set('style', 'display: none;');
	}
}

function onClickedStage(event)
{
	var clickedEl = event.target;
	var tag = clickedEl.nodeName;
	
	//Get the LI element
	var stage;
	switch (tag)
	{
		case 'P' :
		case 'H4' :
		case 'H5' :
			stage = clickedEl.parentNode;
			break;
		
		case 'LI' :
		default :
			stage = clickedEl;
			break;
	}
	
	changeStage(stage);
}

function changeStage(stage) //Where stage is the LI element we're getting the content from
{
	//Clear selected class name from LI elements
	for (var i = 0; i < stages.length; i++)
	{
		stages[i].removeClass('selected');
	}
	
	//Set clicked li as selected
	stage.addClass('selected');
	
	//Change main text to contents
	var sidebar = document.getElement('#extra');
	var sidebarHeader = sidebar.getElement('h3');
	var sidebarText = sidebar.getElement('div.text');
	
	sidebarHeader.innerHTML = stage.getElement('h4').innerHTML;
	sidebarText.innerHTML = stage.getElement('p').innerHTML;
	
	//Change the image
	var imgName = stage.getProperty('id');
	var imgEl = $$('img.masthead');
	imgEl.setProperty('src', imgPrefix + imgName + imgSuffix);
}