//Copyright 2009 NCVO 
//Author: Made Headway Limited
//Requires Core.js

var g_surveyState = null;
var g_surveyAnswers = null;
var g_surveyGettingResult = false;
var g_accessibilityMode = false;

function SurveyInit()
{
	g_surveyState = new Object();
	g_surveyState.m_questionIdx = 0;
	g_surveyAnswers = new Object();

	var survey = GetElem( 'surveyRoot' );
	if ( survey )
	{
		survey.innerHTML = '\
<div id="surveyBody">\
	<div id="surveyQuestion"></div>\
	<div id="surveyDescription"></div>\
	<div id="surveyAnswers"></div>\
	<div id="surveyResult" style="display:none;">\
		<div id="surveyResultData"></div>\
	</div>\
	<div class="surveyClearFloats"></div>\
</div>\
<div id="surveyButtons">\
	<h2>Survey Controls</h2>\
	<a onclick="SurveyNext(1);return false;"><div class="surveyButton" id="surveyNext">Next</div></a>\
	<a onclick="SurveyNext(-1);return false;"><div class="surveyButton" id="surveyBack">Back</div></a>\
	<div id="surveyMessage"></div>\
	<div class="surveyClearFloats"></div>\
</div>\
<div id="surveyBarContainer">\
	<div id="surveyBar"></div>\
</div>';

		SurveyPopulateQuestion();
	}
}

function SurveyPopulateQuestion()
{
	if ( g_surveyState )
	{
		var survey = GetElem( 'surveyRoot' );
		if ( survey )
		{
			SurveyMessage('');
			if ( g_surveyState.m_questionIdx < g_surveyQuestions.length )
			{
				var qState = g_surveyQuestions[g_surveyState.m_questionIdx];
		
				GetElem('surveyBack').style.visibility = (( g_surveyState.m_questionIdx == 0 )?'hidden':'visible');
				GetElem('surveyNext').innerHTML = 'Next';
				GetElem('surveyBar').style.width = parseInt(g_surveyState.m_questionIdx*100/g_surveyQuestions.length)+'%';
				GetElem('surveyQuestion').innerHTML = '<h1>'+qState.title+'</h1>';
				GetElem('surveyQuestion').style.display = '';
				GetElem('surveyDescription').innerHTML = qState.questionText;
				GetElem('surveyDescription').style.display = '';
	
				//Do we make all toggles radio buttons:
				var makeRadioButtons = ((qState.maxAnswers==1 ) && (qState.minAnswers==1));
				if ( makeRadioButtons )
				{
					var i;
					for (i=0;i<qState.answers.length;i++)
					{
						var answer = qState.answers[i];
						if ( answer.type != 'toggle' )
						{
							makeRadioButtons = false;
							break;
						}
					}
				}

				var answersHtml = '<h2>Answers:</h2>';
				for (i=0;i<qState.answers.length;i++)
				{
					var answer = qState.answers[i];
					
					var cAnswer = g_surveyAnswers[answer.id];
					answersHtml += '<div class="surveyAnswer">';
					if ( answer.type == 'toggle' )
					{
						var inputParams = 'type="checkbox"';
						if ( makeRadioButtons )
						{
							inputParams = 'type="radio" name="surveyGroup"';
						}
						answersHtml += '<label><input '+inputParams+' id="surveyAnswer_'+i+'" '+((cAnswer)?'checked="1"':'')+'/><span onmouseout="SurveyTooltip(event, -1);" onmouseover="SurveyTooltip(event,'+i+');">' + answer.answerText + '</span></label>';
					}
					else if ( answer.type == 'list' )
					{
						answersHtml += '<select class="surveyAnswerControl" id="surveyAnswer_'+i+'">';
						var j;
						for (j=0;j<answer.listItems.length;j++)
						{
							answersHtml += '<option '+((cAnswer == answer.listItems[j])?'selected="1"':'')+'>'+answer.listItems[j]+'</option>';
						}
						answersHtml += '</select>';
						answersHtml += '<span onmouseout="SurveyTooltip(event, -1);" onmouseover="SurveyTooltip(event,'+i+');">'+answer.answerText+'</span>';
						answersHtml += '<div class="surveyClearFloats"></div>';
					}
					else if ( answer.type == 'score' )
					{
						if ( g_accessibilityMode )
						{
							answersHtml += '<select class="surveyAnswerControl" id="surveyAnswer_'+i+'">';
							var j;
							for (j=0;j<6;j++)
							{
								var label = ((j==1)?'star':'stars');

								answersHtml += '<option value="'+j+'" '+((parseInt(cAnswer) == j)?'selected="1"':'')+'>'+j+' '+label+'</option>';
							}
							answersHtml += '</select>';
						}
						else
						{
							answersHtml += '<div onmouseover="SurveyChangeScore(event,'+i+',3);" onmousemove="SurveyChangeScore(event,'+i+',2);" onmouseout="SurveyChangeScore(event,'+i+',1);" onclick="SurveyChangeScore(event,'+i+',0);" class="surveyAnswerControl surveyScoreContainer"><div class="surveyScore" id="surveyAnswer_'+i+'"></div></div>';
						}
						answersHtml += '<span onmouseout="SurveyTooltip(event, -1);" onmouseover="SurveyTooltip(event,'+i+');">'+answer.answerText+'</span>';
						answersHtml += '<div class="surveyClearFloats"></div>';						
					}
					else if ( answer.type == 'string' )
					{
						if ( !cAnswer )
						{
							cAnswer = '';
						}
						answersHtml += '<input type="text" class="surveyAnswerControl"  id="surveyAnswer_'+i+'" value="'+cAnswer+'"/>';
						answersHtml += '<span onmouseout="SurveyTooltip(event, -1);" onmouseover="SurveyTooltip(event,'+i+');">'+answer.answerText+'</span>';
						answersHtml += '<div class="surveyClearFloats"></div>';
					}
					answersHtml += '</div>';
				}
				answersHtml += '<div id="surveyTooltip"></div>';
				GetElem('surveyAnswers').innerHTML = answersHtml;

				//Update scores:
				for ( i=0;i<qState.answers.length;i++)
				{
					var answer = qState.answers[i];	
					var cAnswer = g_surveyAnswers[answer.id];
					if ( answer.type=='score' && cAnswer )
					{
						SurveyUpdateScore(i,cAnswer,true);
					}
				}

				GetElem('surveyAnswers').style.display = '';
				GetElem('surveyResult').style.display = 'none';
			}
			else
			{
				//Finished!
				GetElem('surveyBack').style.visibility = 'visible';
				GetElem('surveyNext').innerHTML = 'Finish';
				GetElem('surveyBar').style.width = '100%';
				GetElem('surveyQuestion').innerHTML = '<h1>Survey Finished</h1>';
				GetElem('surveyDescription').innerHTML = '<div id="surveyProgress"></div> Press <i>Finish</i> to get the result.<div class="surveyClearFloats"></div>';
				GetElem('surveyAnswers').innerHTML = '';
				GetElem('surveyAnswers').style.display = 'none';
				GetElem('surveyResult').style.display = '';
				GetElem('surveyResultData').innerHTML = '';
			}
		}
	}
}

//Convert stars to a select, for instance
function SurveyToggleAccessibilityMode()
{
	g_accessibilityMode = !g_accessibilityMode;
	SurveyNext(0);
}

function SurveyNext( _delta )
{
	var numAnswers = 0;
	//Store survey answers:
	var q = g_surveyState.m_questionIdx;
	if ( q<g_surveyQuestions.length )
	{
		var i;
		for (i=0;i<g_surveyQuestions[q].answers.length;i++)
		{
			var answer = g_surveyQuestions[q].answers[i];
			var answerElem = GetElem('surveyAnswer_'+i);
			if ( answer.type == 'toggle' )
			{
				if ( answerElem.checked )
				{
					g_surveyAnswers[answer.id] = 1;
					numAnswers++;
				}
				else
				{
					delete g_surveyAnswers[answer.id];
				}
			}
			else if ( answer.type == 'score' )
			{
				var value = parseFloat(answerElem.value);
				
				if ( value > 0 )
				{
					numAnswers++;
					g_surveyAnswers[answer.id] = value;
				}
				else
				{
					delete g_surveyAnswers[answer.id];
				}
			}
			else
			{
				numAnswers++;
				g_surveyAnswers[answer.id] = answerElem.value;		
			}
		}

		if ( _delta>0 )
		{
			//Next, check we fulfilled requirements
			var min = g_surveyQuestions[q].minAnswers;
			var max = g_surveyQuestions[q].maxAnswers;
			if ( min>0 && numAnswers<min )
			{
				if ( min == 1 )
				{
					SurveyMessage("Please select at least one answer.");
				}
				else
				{
					SurveyMessage("Please select at least "+min+" answers.");
				}
				return;
			}
			if ( max>0 && numAnswers>max )
			{
				if ( max == 1 )
				{
					SurveyMessage("Please select only one item.");
				}
				else
				{
					SurveyMessage("Please select only "+max+" items.");
				}
				return;
			}
		}
	}
	else
	{
		//Do the query:
		if ( _delta > 0 && !g_surveyGettingResult )
		{
			g_surveyGettingResult = true;
			var data='f=getResults&json='+encodeURIComponent(json_encode(g_surveyAnswers));

			GetElem('surveyResultData').innerHTML = '';
			var sp = GetElem('surveyProgress');
			if ( sp )
				sp.style.backgroundImage = "url('"+g_surveyRoot+"style/squares_anim.gif')";

			AjaxRequest( g_surveyRoot+'survey.php', data, SurveyResultsDelivered );
			return;
		}
	}

	//Next questions:
	g_surveyState.m_questionIdx = Math.max( 0, Math.min(g_surveyQuestions.length, q + _delta ) );
	SurveyPopulateQuestion();
}

function SurveyMessage( _message )
{
	GetElem( 'surveyMessage' ).innerHTML = _message;
}

function SurveyTooltip( _evt, _idx )
{
	var evt = UnifyEvent( _evt );

	if ( _idx < 0 )
	{
		var tip = GetElem('surveyTooltip');
		tip.style.visibility = 'hidden';	
	}
	else
	{
		var qState = g_surveyQuestions[g_surveyState.m_questionIdx];
		var hoverInfo = qState.answers[_idx].hoverInfo;
	
		if ( hoverInfo != '' )
		{
			var tip = GetElem('surveyTooltip');
			tip.style.visibility = 'visible';
			tip.innerHTML = hoverInfo;
			tip.style.left = (evt.clientX - GetAbsoluteX(tip.offsetParent)+ 20 + GetScrollLeft())+'px';
			tip.style.top = (evt.clientY - GetAbsoluteY(tip.offsetParent) + 10 + GetScrollTop())+'px';
		}
	}
}

function SurveyChangeScore(_evt, _idx, _type)
{
	var evt = UnifyEvent( _evt );
	var stars = parseInt((evt.clientX + GetScrollLeft() + 6 - GetAbsoluteX(evt.target))/12);	//Out of 10
	stars = Math.max(0, Math.min(stars, 10) );

	switch ( _type )
	{
		case 0:	//click
			break;
		case 1: //mouseout
			stars = parseFloat( GetElem('surveyAnswer_'+_idx).value ) * 2;
			if ( stars+'' == 'NaN' )
				{ stars = 0; }
			break;
		case 2:	//mousemove
			break;
		case 3: //mouseover
			break;
		default:
			break;
	}


	SurveyUpdateScore( _idx, stars*0.5, (_type == 0) );
}
function SurveyUpdateScore( _idx, _value, _change )
{
	_value = parseFloat( _value );
	var answer = GetElem('surveyAnswer_'+_idx);
	if ( !g_accessibilityMode )
	{
		answer.style.width = parseInt(_value*20)+'%';
	}
	if ( _change )
	{
		answer.value = _value;
	}
}

//After requesting survey results, we get:
function SurveyResultsDelivered( _result )
{
	g_surveyGettingResult = false;
	var sp = GetElem('surveyProgress');
	if ( sp )
		sp.style.backgroundImage = '';
	
	var inBlock = json_decode( _result );
	var results = (inBlock?inBlock['results']:null);
	if ( results )
	{
		if ( results.length )
		{
			var resHtml = '';
			var i;
			for ( i=0;i<results.length;i++)
			{			
				resHtml += '<div class="surveyResultBlock '+((i%2)?'srb_odd':'srb_even')+'">';
				resHtml += '	<div class="surveyResultMatchPropContainer">';
				resHtml += '		<div class="surveyResultMatchProp" style="width:'+parseInt(results[i].score*100)+'%;">';
				resHtml += '		</div>';
				resHtml += '	</div>';
				if ( results[i].extra.link )
				{
					resHtml += '<a href="'+results[i].extra.link+'?sres='+encodeURIComponent(inBlock.miniResults)+'">';
				}
				resHtml += '	<div class="surveyResultTitle">'+results[i].extra.title+'</div>';
				if ( results[i].extra.link )
				{
					resHtml += '</a>';
				}
				resHtml += '	<div class="surveyResultInfo">'+results[i].extra.shortDesc+'</div>';
				resHtml += '	<div class="surveyClearFloats"></div>';
				resHtml += '</div>';
			}
			//Results inline:
			//GetElem('surveyResultData').innerHTML = resHtml;
			//Dedicated results page:
			var resultUrl = 'information/skills_profile/results.html?sres='+encodeURIComponent(inBlock.miniResults);
			GetElem('surveyResultData').innerHTML = 'Transferring to results page.<br/><br/>If this does not happen automatically, click <a href="'+resultUrl+'">here</a>.';
			location.href = resultUrl;
		}
		else
		{
			GetElem('surveyResultData').innerHTML = 'Unfortunately, we have not been able to determine a suitable role. Please try again.';
		}
	}
	else
	{
		GetElem('surveyResultData').innerHTML = 'Error completing survey. Please try again later. If this problem persists, please contact us <a href="mailto:rick@madeheadway.com">here</a>.';
		SurveyMessage('Error completing survey.');
	}
}

SurveyInit();