var sequence = ["state", "level", "subject", "topic"];
var loadingPos;

function init () {
	$('statelist').setHTML('');
	$('level').setHTML('<h3>Step 2. Choose a year level</h3><div id="levellist"></div>');
	$('subject').setHTML('<h3>Step 3. Choose a subject</h3><div id="subjectlist"></div>');
	$('topic').setHTML('<div id="topiclist" class="vert"></div>');
	var stateJSONobject = {"state": [{"i": 3, "n":"National"},{"i": 1, "n":"NSW"},{"i": 5, "n":"Queensland"},{"i": 2, "n":"Victoria"}]};
	displayNext(stateJSONobject);
	highlighted = 0;
	if(Cookie.get('state')){
		highlighted++;
		choose('state', Cookie.get('state'), true);
		$('state' + Cookie.get('state')).checked = true;
		if(Cookie.get('level')){
			highlighted++;
			choose('level', Cookie.get('level'), true);
			if(Cookie.get('subject')){
				highlighted++;
				choose('subject', Cookie.get('subject'), true);
			}
		}
	}
	hlfx = new Fx.Style(sequence[highlighted], 'background-color', {duration:400});
	hlfx.start('#ffffff', '#e1e4e9');
}

function choose(type, id, fromcookie){
	if(!fromcookie){
		var seqNo = sequence.indexOf(type);
		Cookie.remove(sequence[seqNo+1]);
		for(var j=seqNo + 2; j < sequence.length; j++){
			Cookie.remove(sequence[j]);
			$(sequence[j] + 'list').setHTML('');
			hlfxx = new Fx.Style(sequence[j], 'background-color', {duration:400});
			hlfxx.start('#ffffff', '#ffffff');			
		}
		hlfx1 = new Fx.Style(sequence[seqNo], 'background-color', {duration:400});
		hlfx1.start('#e1e4e9', '#ffffff');
		hlfx2 = new Fx.Style(sequence[seqNo+1], 'background-color', {duration:400});
		hlfx2.start('#ffffff', '#e1e4e9');
	}
	restfulUrl = '/json/' + type + '/' + id + '/';
	var next = sequence[sequence.indexOf(type)+1];
	loadingPos = type + 'list';
	$(loadingPos).addClass('loading');
	var myAjax = new Ajax(restfulUrl , { onComplete: displayResponse} ).request();
	var previous_choice = $$('label');
	for (i = 0; i<previous_choice.length; i++) {
		previous_choice[i].removeClass('on');		
	}
	if($(type + id + 'label')){
		$(type + id + 'label').addClass('on');
	}
	Cookie.set(type, id, {duration: false});
}

function displayResponse(response){
	var newData = Json.evaluate(response);
	for (i=0; i<3; i++) {
		$(sequence[i]+'list').removeClass('loading');		
	}
	displayNext(newData);
}

function displayNext(json){
	var type = '';
	var list;
	if(json.state){ //more elegant?
		type = "state";
		list = json.state;
	}
	if(json.level){
		type = "level";
		list = json.level;
	}
	if(json.subject){
		type = "subject";
		list = json.subject;
	}
	if(json.topic){
		type = "topic";
		list = json.topic;
	}
	var id = '';
	var html = '';
	if(type == "topic"){
		var listhtml = '';
		var hits = 0;
		for (var j=0; j < list.length; j++) {
			id = list[j].i;
			if(list[j].c > 0) {
				listhtml += '<li><a href="/results/' + Cookie.get('subject') + '/#topic' + list[j].i + '">' + list[j].n + '<' + '/a> (' + list[j].c + ' digital resource' + (list[j].c > 1 ? 's' : '') + ')' + '<' + '/li>';
				hits++;
			}
		}
		if (hits > 0){
			html += '<p>The following curriculum topics have digital resources<'  + '/p><ul>';
			html += listhtml;
			html += '<' + '/ul><p><inp' + 'ut type="submit" value="display all the digital resources" onclick="location.href=document.forms[0].action;return false;" /><' + '/p>';
			document.forms[0].action = '/results/' + Cookie.get('subject') + '/';
		} else {
			html += '<p>Resources under construction<'  + '/p>';		
		}
	} else {
		var label_string = 'class="off"';
		var radio_string = '';
		html += '<ul>';
		for (var j=0; j < list.length; j++) {
			id = list[j].i;
			if(Cookie.get(type) == id){
				label_string = 'class="on" checked="checked"';
				radio_string = ' checked="checked"';
			} else {
				label_string = 'class="off"';			
				radio_string = '';
			}
			var caption = list[j].n.replace(/\s/g, "&nbsp;");
			html += '<li><nobr><input name="' + type + '" type="radio" value="' + id  + '" id="' + type + id + '" onclick="choose(\'' + type + '\',' + id + ')"' + radio_string + ' />';
			html += '<label for="' + type + id + '" id="' + type + id + 'label" ' + label_string + '>';
			html += caption + '<' + '/label>' + '</nobr><' + '/li> ';
		}
		html += '<' + '/ul>';
	}
	
	$(type + "list").setHTML(html);
}