Event.observe(window, "load", function(){
		
	/*make .control_boxes drag&dropable*/
	Sortable.create("control", {tag: "div"});
	
	/*make togglable*/
	$$("#control div .top").each(function(n, i){
		Event.observe(n, "click", function(){
			n.next().toggle("blind");
		});
	});
	
	/*make "set title" work*/
	Event.observe("btn_set_title", "click", function(){
		$("preview_title").innerHTML = $F("set_title");
	});
	
	/*make help links work*/
	$$("#control div .control_box label a").each(function(n, i){
		Event.observe(n, "click", function(){
			help(n.getAttribute("rel"));
		});
	});
	
	/*extend input for multiple choice quesitons*/
	Event.observe("multiple_choice", "click", function(){
		$("added_info").innerHTML = "<label>No. of choices</label><input type=\"text\" name=\"num_choices\" id=\"num_choices\" />";
		Event.observe("num_choices", "blur", function(){
			if($F("num_choices").match(/[^\d]+/g)) alert("Number of choices must be a numerical value");
			else{
				var ans = "<label>Correct Answer</label><select>";
				for(i = 1; i <= $F("num_choices"); i++){
					$("added_info").insert(i+") <input type=\"text\" />");
					ans += "<option>"+i+"</option>";
				}
				$("added_info").insert(ans + "</select>");
			}
		});
	});
	
	/*enable #help_box sections*/
	function help(section){
		$("help_title").innerHTML = section;
		switch(section){
			case "question":
				$("help_text").innerHTML = "This field is for the actual body of the question, for example \"When was Napoleon born?\"";
			break;
			case "type":			
				$("help_text").innerHTML = "There are three different types of questions, <ul><li>\"Multiple Choice\" where the user is presented with an array of questions\
				where one or more are correct (a, b or c)</li><li>\"Simple Answer\" where the user is prompted to enter a short text such as the answer to \"when did WWII end?\" (1945) \
				</li><li>\"Essay question\" where the user is expected to enter a longer text<ul>";
			break;
			case "points":
				$("help_text").innerHTML = "The number of points to be awarded for a correct answer to this question";
			break;
			default:
				alert(section);
			break;
		}
		if($("help_box").style.display != "block") $("help_box").appear({duration: 0.5});
	}
	/*make #help_box hidable*/
	Event.observe("hide_help", "click", hide_help);
	
	function hide_help() {
		$("help_box").fade({duration: 0.5});
	}
	
	/*make #help_box draggable*/
	var drag_help = new Draggable("help_box");
});