/* 	Implements GUI/functionality for the steps in selecting a reading maze	*/ 

// maximize window for students
self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);


// server-side ajax url path
var ajaxURL = '/ajax.php';

// preload the checkmark
var checkmark = new Image();
checkmark.src = '/images/green_check.gif';
var img = new Image();
img.src = '/images/spinner_28.gif';	// preload...



// globals used by this script
var stepSelectNames = new Array('', 'groupSelectTd','studentSelectTd','mazeSelectTd');

var ajaxDataNames = new Array();
ajaxDataNames[2] = 'student_list_select';
ajaxDataNames[3] = 'maze_list_select';

var stepButtonIds = new Array();
stepButtonIds[1] = new Array('groupSelect', 'nextStep1');
stepButtonIds[2] = new Array('prevStep2', 'studentSelect', 'nextStep2');
stepButtonIds[3] = new Array('prevStep3', 'mazeSelect', 'takeMaze');


function nextStep(curStep){
	var nextStep = curStep + 1;

	postData = new Array();
	postData['type'] 		= 'get_html';
	postData['data_name'] 	= ajaxDataNames[nextStep];
	postData['tid'] 		= document.getElementById('tid').value;
	
	if(curStep==1 || curStep==2){
		var groupSelect 		= document.getElementById('groupSelect');
		postData['gid'] 		= groupSelect[groupSelect.selectedIndex].value;
		
		if(postData['gid'] == 'Click to Select')
			return false;
			
		if(curStep==2){
			var studentSelect 		= document.getElementById('studentSelect');
			postData['sid'] 		= studentSelect[studentSelect.selectedIndex].value;
			
		}
	}
	
	/*
	// actually, it doesn't matter which student is selected, we're not getting all the mazes for 
	// this particular student, we're still only getting the mazes associated with this group...
	if(curStep==2){
		var studentSelect 	= document.getElementById('studentSelect');
		postData['sid']		= studentSelect[studentSelect.selectedIndex].value;
	}
	*/
	
	var params = new Array();
	params['curStep']  = curStep;
	params['nextStep'] = nextStep;
	
	if(curStep!=1)
		document.getElementById('prevStep'+curStep).style.display = 'none';

	ajaxRequest('POST', ajaxURL, postData, changeStep, params);
	ajaxNotify(1, 'step'+curStep+'StatusImg', '/images/spinner_28.gif');
}


function changeStep(selectHtml, params){
	var curStep  = params['curStep'];
	var nextStep = params['nextStep'];
	
	ajaxNotify(0, 'step'+curStep+'StatusImg');
		
	// disable current step
	document.getElementById('step'+curStep+'StatusImg').innerHTML = "<img src='"+checkmark.src+"'/>";
	document.getElementById('step'+curStep).className = 'mazeSelectCompleted';
	document.getElementById(stepSelectNames[curStep]).getElementsByTagName('select')[0].disabled = true;
	
	// enable the next step, give it a back button	
	var div = document.getElementById(stepSelectNames[nextStep]);
	div.innerHTML = selectHtml;

	document.getElementById('step'+nextStep).className = 'mazeSelectEnabled';
	document.getElementById('prevStep'+nextStep).style.display = '';
}


function prevStep(curStep){
	var prevStep = curStep - 1;

	var blankSelect = document.getElementById('blankSelectDiv').innerHTML;
	document.getElementById(stepSelectNames[curStep]).innerHTML = blankSelect;
	
	document.getElementById('step'+curStep).className = 'mazeSelectDisabled';
	if(prevStep!=1)	// in case there was an error
		document.getElementById('prevStep'+prevStep).style.display = '';
	
	document.getElementById('step'+prevStep+'StatusImg').innerHTML = '';
	document.getElementById('step'+prevStep).className = 'mazeSelectEnabled';
	document.getElementById('prevStep'+curStep).style.display = 'none';
	var select = document.getElementById(stepSelectNames[prevStep]).getElementsByTagName('select')[0];
	select.selectedIndex = 0;
	select.disabled = false;
	
	if(curStep==3)
		document.getElementById('takeMazeButtonDiv').style.display = 'none';
}

function selectMaze(){
	var select 		= document.getElementById('mazeSelect');
	var cbm_data 	= select[select.selectedIndex].value;
	var btnDiv		= document.getElementById('takeMazeButtonDiv');
	
	if(cbm_data=='Click to Select')
		btnDiv.style.display = 'none';
	else
		btnDiv.style.display = '';
		
	// in 800x600 (with browser/OS chrome), the button can appear just out of view, so scroll down to bottom if that happens
	window.scrollBy(0, 300);	// 300px should be fine...
}


function takeMaze(){
	var takeMazeForm = document.forms['takeMazeForm'];
	
	var groupSelect = document.getElementById('groupSelect');
	var gid = groupSelect[groupSelect.selectedIndex].value;
	
	var studentSelect = document.getElementById('studentSelect');
	var sid = studentSelect[studentSelect.selectedIndex].value;
	
	var mazeSelect 	= document.getElementById('mazeSelect');
	if(mazeSelect[mazeSelect.selectedIndex].value=='Click to Select')
		return false;
	var cbm_data   	= mazeSelect[mazeSelect.selectedIndex].value.split('~');
	
	var cbm_type 	= cbm_data[0];
	var cbmid 		= cbm_data[1];
	
	var lib_name 	= cbm_type;
	
	if(cbm_type.match('math_'))
		lib_name	= 'math';
	
	takeMazeForm.gid.value = gid;
	takeMazeForm.sid.value = sid;
	takeMazeForm.cbmid.value = cbmid;
	takeMazeForm.cbm_type.value = cbm_type;
	
	takeMazeForm.setAttribute('action','/cbms/'+lib_name+'_take.php');
	
	takeMazeForm.submit();
}