/**
* Challenge Page Interaction Functionality
*
* @author      		Matt Gifford
* @copyright			2006 Timeshifting Interactive Limited
* @version        	1.0
*/


challenge = new Challenge();
window.onload = new Function("xhtml.init(); challenge.init();");


/**
* Creates a new Challenge object that handles the displaying and sorting the content for the challenge page
*
* @author      		Matt Gifford
* @copyright			2006 Timeshifting Interactive Limited
* @version        	1.0
*/
function Challenge()
	{
	// Step 1. Define Properties

	this.initialized = false;

	this.selectedGender = 'none';
	this.selectedArea = 'none';


	// Step 2. Define Methods

	/**
	* Sets up the initial page state and event handlers
	*/
	this.init = function()
		{
		this.addEventHandlers();

		// Set the inital state
		var initialArea = 'Face';
		try
			{
			// Check for initial area get parameter on the url
			var matches = window.location.search.toString().match(/area=(Face|Skin|Breast|Body)/);
			var initialArea = matches[1];
			}
		catch (err)
			{
			}
		this.select('Female', initialArea);

		// Set class as initialized
		this.initialized = true;
		}

	
	/**
	* Selects the area and updates problem list and treatments list.
	*
	* @param		gender		the gender of the person
	* @param		area			the area to see problems for
	* @return		void
	*/
	this.select = function(gender, area)
		{
		// Update the select gender graphic
		this.setGender(gender.toLowerCase());

		// Reset the area buttons
		this.resetAreaButtons();

		// Update areas button
		document.getElementById('challengePeople' + gender + area).className = 'active';

		// Update Treatments List
		document.getElementById('challengeTreatments').style.visibility = 'hidden';
		this.resetTreatments();

		// Update Problems List
		document.getElementById('challengeProblems').style.visibility = 'visible';
		this.resetProblems();
		this.displayProblems(gender, area);
		}


	/**
	* Adds rollover event handlers to the problem areas on the people graphic
	*/
	this.addEventHandlers = function()
		{
		// 1. Add event handlers to female areas (make female graphic active on mouse over)
		var femaleAreas = new Array('challengePeopleFemaleFace', 'challengePeopleFemaleSkin', 'challengePeopleFemaleBreast', 'challengePeopleFemaleBody', 'challengePeopleFemale');
		for (var x = 0; x < femaleAreas.length; x++)
			{
			document.getElementById(femaleAreas[x]).onmouseover = function()
				{
				document.getElementById('challengePeopleMale').style.visibility = 'hidden';
				document.getElementById('challengePeopleFemale').style.visibility = 'visible';
				}
			document.getElementById(femaleAreas[x]).onmouseout = function()
				{
				challenge.resetGender();
				}
			}

		// 2. Add event handlers to male areas (make male graphic active on mouse over)
		var maleAreas = new Array('challengePeopleMaleFace', 'challengePeopleMaleSkin', 'challengePeopleMaleBody', 'challengePeopleMale');
		for (var x = 0; x < maleAreas.length; x++)
			{
			document.getElementById(maleAreas[x]).onmouseover = function()
				{
				document.getElementById('challengePeopleMale').style.visibility = 'visible';
				document.getElementById('challengePeopleFemale').style.visibility = 'hidden';
				}
			document.getElementById(maleAreas[x]).onmouseout = function()
				{
				challenge.resetGender();
				}
			}
		
		// 3. Add event handlers to problem items, displays problem type in treatments column on select
		var problems = document.getElementById('challengeProblems').getElementsByTagName('li');
		for (var x = 0; x < problems.length; x++)
			{
			problems[x].onclick = function()
				{
				var anchor = this.getElementsByTagName('a');
				var title = anchor[0].firstChild.nodeValue;
				document.getElementById('challengeTreatmentsType').replaceChild( document.createTextNode( title ), document.getElementById('challengeTreatmentsType').firstChild);
				}
			}
		}


	/**
	* Sets the selected gender and updates the gender graphic
	*
	* @param		gender			the gender to display
	* @return		void
	*/
	this.setGender = function(gender)
		{
		switch (gender)
			{
			case 'female':
				this.selectedGender = 'female';
				document.getElementById('challengePeopleMale').style.visibility = 'hidden';
				document.getElementById('challengePeopleFemale').style.visibility = 'visible';
				break;

			case 'male':
				this.selectedGender = 'male';
				document.getElementById('challengePeopleMale').style.visibility = 'visible';
				document.getElementById('challengePeopleFemale').style.visibility = 'hidden';
				break;
			}
		}


	/**
	* Resets the gender graphic back to its previous state
	*/
	this.resetGender = function()
		{
		this.setGender(challenge.selectedGender)
		}


	/**
	* Resets the area buttons on the people graphic
	*/
	this.resetAreaButtons = function()
		{
		var anchors = document.getElementById('challengePeople').getElementsByTagName('a');
		for (var x = 0; x < anchors.length; x++)
			{
			anchors[x].className = 'inactive';
			}
		}

	
	/**
	* Displays the problems for the selected gender and area
	*
	* @param		gender			the gender to display problems for
	* @param		area			the area to display problems for
	*/
	this.displayProblems = function(gender, area)
		{
		gender = gender.toLowerCase();
		area = area.toLowerCase();

		// 1. Update problems title
		switch (area)
			{
			case 'face':
				var title = 'Face';
				break;

			case 'skin':
				var title = 'Skin';
				break;
		
			case 'breast':
				var title = 'Breasts';
				break;

			case 'body':
				var title = 'Body';
				break;

			default:
				var title = 'Problems';
				break;
			}
		document.getElementById('challengeProblemsTitle').replaceChild( document.createTextNode(title), document.getElementById('challengeProblemsTitle').firstChild);

		// 2. Update problems list
		var problems = document.getElementById('challengeProblems').getElementsByTagName('li');
		var matchGender = ' ' + gender + ' ';
		var matchArea = ' ' + area + ' ';

		for (var x = 0; x < problems.length; x++)
			{
			// Check if problem matches selected gender and area
			var className = ' ' + problems[x].className + ' ';
			if (className.indexOf(matchGender) != -1 && className.indexOf(matchArea) != -1)
				{
				problems[x].style.display = 'list-item';
				}
			else
				{
				problems[x].style.display = 'none';
				}
			}
		}


	/**
	* Reset the problems list and displays the introductory text
	*/
	this.resetProblems = function()
		{
		// Hide the problems
		var problems = document.getElementById('challengeProblems').getElementsByTagName('li');
		for (var x = 0; x < problems.length; x++)
			{
			problems[x].style.display = 'none';
			}
		}


	/**
	* Displays the treatments for the specified problem
	*
	* @param		problem		The problem to display treatments for
	*/
	this.displayTreatments = function(problem)
		{
		// 1. Update treatments list
		var treatments = document.getElementById('challengeTreatments').getElementsByTagName('li');
		var matchProblem = ' ' + problem + ' ';

		for (var x = 0; x < treatments.length; x++)
			{
			// Check if treatment matches the problem
			var className = ' ' + treatments[x].className + ' ';
			if (className.indexOf(matchProblem) != -1)
				{
				treatments[x].style.display = 'list-item';
				}
			else
				{
				treatments[x].style.display = 'none';
				}
			}
		
		// 2. Hide treatments intro text
		document.getElementById('challengeTreatmentsIntro').style.display = 'none';

		// 3. Display treatments for problem type text
		document.getElementById('challengeTreatmentsType').style.display = 'block';

		// 4. Display the treatments box
		document.getElementById('challengeTreatments').style.visibility = 'visible';
		}


	/**
	* Reset the treatments list and displays the introductory text
	*/
	this.resetTreatments = function()
		{
		// Hide the treatments
		var treatments = document.getElementById('challengeTreatments').getElementsByTagName('li');
		for (var x = 0; x < treatments.length; x++)
			{
			treatments[x].style.display = 'none';
			}
		
		// Display introductory text
		document.getElementById('challengeTreatmentsIntro').style.display = 'block';

		// Hide treatment type text
		document.getElementById('challengeTreatmentsType').style.display = 'none';
		}
	}