/** Javascript for main index page **/

var menu_refs = new Array( 'theme', 'question', 'user' );

jQuery(function($j) {

	// hideSubmits();
	bindThemeSelect();
	bindShowHideMenus();
	
});

function hideSubmits() {
	$j('.select_submit_no_js').hide();
}

function bindShowHideMenus() {

	// Hide all menus on clicking the body
	$j('body').bind('click', function() {
		
		$j('.theme_menu').fadeOut('fast');
		$j('.question_menu').fadeOut('fast');
		$j('.user_menu').fadeOut('fast');
	});


	// ========== THEME MENU ==========

	// Show/Hide Theme menu when theme is clicked
	$j('.theme_menu_wrap .show_menu').bind('click', function() {
		
		// close question menu if open
		if (! $j('.question_menu').is(':hidden')) {
			$j('.question_menu').fadeOut('normal');
		}
		// close user menu if open
		if (! $j('.user_menu').is(':hidden')) {
			$j('.user_menu').fadeOut('normal');
		}
		
		
		$j('.theme_menu').toggle();
		
		return false;
	});
	
	// Hide theme menu when theme is selected
	$j('.theme_menu_wrap .hide_menu').bind('click', function() {
		if (! $j('.theme_menu').is(':hidden')) {
			$j('.theme_menu').slideUp('normal');
		}
		
		return false;
	});

	// ========== QUESTION MENU ==========
	
	// Show/Hide Question menu when question clicked
	$j('.question_menu_wrap .show_menu').bind('click', function() {

		// close theme menu if open
		if (! $j('.theme_menu').is(':hidden')) {
			$j('.theme_menu').fadeOut('normal');
		}
		// close user menu if open
		if (! $j('.user_menu').is(':hidden')) {
			$j('.user_menu').fadeOut('normal');
		}

		$j('.question_menu').slideToggle('normal');
		
		return false;
	});
	
	// Hide Question menu when new question selected
	$j('.question_menu_wrap .hide_menu').bind('click', function() {
		if (! $j('.question_menu').is(':hidden')) {
			$j('.question_menu').slideUp('normal');
		}
		
		return false;
	});
	
	
	// ========== USER MENU ==========
	
	// Show/Hide User menu when User clicked
	$j('.user_menu_wrap .show_menu').bind('click', function() {

		// close theme menu if open
		if (! $j('.theme_menu').is(':hidden')) {
			$j('.theme_menu').fadeOut('normal');
		}
		// close question menu if open
		if (! $j('.question_menu').is(':hidden')) {
			$j('.question_menu').fadeOut('normal');
		}

		$j('.user_menu').slideToggle('normal');

		return false;
	});

	// Hide User menu when new user selected
	$j('.user_menu_wrap .hide_menu').bind('click', function() {
		if (! $j('.user_menu').is(':hidden')) {
			$j('.user_menu').slideUp('normal');
		}

		return false;
	});
	
}

function bindThemeSelect() {

	// when user changes dropdown
	$j('.theme_select').bind('change', function() {
		showQuestionMenu($j(this).val());
		return false;
	});
	
	// and also if user clicks button
	$j('.theme_menu_wrap .select_submit').bind('click', function() {
		showQuestionMenu($j('.theme_select').val());
		return false;
	});
	
}

function setSelected(menu, id, name, description) {
	
	// set chosen tag
	
	if (menu != 'user') {
		$j('#form_input_tag').val(name);
	} else {
		$j('#form_input_user').val(name);
	}
	
	if (menu != 'theme' || name != 'Any theme') {
		$j('#form_input_submit').addClass('ready_to_go');
	} else {
		$j('#form_input_submit').removeClass('ready_to_go');
	}
	
	$j('#' + menu + '_selected_title').text(name);
	
	if (description != null) {
		$j('#' + menu + '_info').text(description);
	}
		
	if (menu == 'theme') {
		/*
		$j('#question_selected_title').text('Choose a question');
		$j('#question_info').text('Current theme: ' + name);
		setQuestionMenu(id);
		*/
		
		// Display list of questions
		showQuestionMenu(id);
		
	}
	
	return false;
}

function setQuestionMenu(theme_id) {

	var list_html = '';
	
	for (var i = 0; i < themeJsonObject['themes'].length; i++) {
	
		theme = themeJsonObject['themes'][i];
		
		if (theme_id == 0 || theme['id'] == theme_id) {
			
			for (var q = 0; q < theme['questions'].length; q++) {
			
				var question = theme['questions'][q];
	
				var link_html = '<a href="index_new.php?question=' + question['id'] +
				                '" class="hide_menu" onClick="setSelected(\'question\', ' + question['id'] + ', \'' + question['name'] + '\'); return false"' +
				                ' title="Select this question">';
				
				list_html += '<li><span class="main_info">'
				           + link_html
				           + '<h3>' + question['name'] + '</h3>'
				           + '</a></span>'
				           + '<span class="select_button">'
				           + link_html
				           + '<img src="/Images/select-arrow.png" alt="Chooser icon"></a>'
				           + '</span></li>';
		        }
		}
		
	}
	
	$j('.question_menu ul').html(list_html);

}

// Similar to above, but prints out in placeholder
function showQuestionMenu(theme_id) {

	$j('.question_menu_place').hide();

	var list_html = '';
	
	for (var i = 0; i < themeJsonObject['themes'].length; i++) {
	
		theme = themeJsonObject['themes'][i];
		
		if (theme_id == 0 || theme['id'] == theme_id) {
			
			for (var q = 0; q < theme['questions'].length; q++) {
			
				var question = theme['questions'][q];
	
				var link_html = '<a href="find.php?t=' + theme_id + '&amp;q=' + question['id'] +
				                '" class="hide_menu"' +
				                ' title="Select this question">';
				
				list_html += '<li><span>'
				           + link_html
				           + '<h3>' + question['name'] + '</h3>'
				           + '</a></span>'
				           + '</li>';
		        }
		        
		}
		
	}
	
	list_html = '<ul>' + list_html + '</ul>';	
	
	list_html = '<div class="select_info_text">Now select the question you would like to address in choosing a visualisation, or <a href="/find.php?m=1&amp;t=' + theme_id + '&amp;q=0">click here to skip this step</a>.</div>\n'
		  + list_html;
	
	$j('.question_menu_place').html(list_html);
	$j('.question_menu_place').slideDown('slow');
}