{% extends 'oahpa_base.html' %}

{% load i18n %}
{{ lang_switch }}
{% get_available_languages as LANGUAGES %}
{% get_current_language as LANGUAGE_CODE %}

{% block main_header %}
	<link rel="stylesheet" type="text/css" href="/oahpa/media/css/oahpa_main.css"/>
	<link rel="stylesheet" type="text/css" href="/oahpa/media/css/oahpa_new.css"/>
	<link rel="stylesheet" href="/oahpa/media/css/new_form.css" type="text/css" media="screen" title="no title" charset="utf-8" />
	<script src="/oahpa/media/js/jquery-1.4.4.min.js" type="text/javascript"></script>

	<script type="text/javascript" charset="utf-8">
		// jQuery
		
		// Set up event handlers
		$(document).ready(function(){
			$('input[type="text"]').keydown(next_field);
			$('a.link_tooltip').click(reveal_tooltip);
		});
		
		function reveal_tooltip (event) {
			reveal_id = event.target.id.match(/(tooltip-\d)/);
			$('.tooltip').hide();
			$('#' + reveal_id).show();
			return false; 
		}
		
		// Switch to next field on enter, at end, go back to first empty field
		// or focus test
		function next_field (event) {
			if ((event.keyCode || event.which) == 13) {
				function first_empty (inputs) {
					return inputs[0];
				}
			
				current_id = event.target.id;
				match = current_id.match(/id_(\d)-answer/);
				count = parseFloat(match[1]) - 1;
				inputs = $('input[type="text"]');
			
				// Focus next
				$(inputs[count+1]).focus();
			
				if(count == 4){
					open_inputs = $("input:visible:enabled[type='text'][value='']").not(".nofocus");
					if (open_inputs.length == 0) {
						$('input[name="test"]').focus();
						return false;
					} else {
						open_inputs.slice(0, 1).focus();
						
					}
				}
				
				return false;
			}
			
		}
		
		function SetIndex(list,value) {
		    if (value == "all") {
			   return;
		    }
			if(list && list.options.length){ 
				for(var i=0; i<list.options.length; i++){ 
				if(list.options[i].value == "all"){ 
					list.selectedIndex = i; 
					return; 
					} 
				} 
			} 
		}
		
	</script>
	
{% endblock %}

{% block addcss %}{% endblock %}

{% block page_header %}
	<img width="240px" src="/oahpa/media/images/Oahpa_logo0001.png" alt="OAHPA!"/>
	{% with 'small' as menu_class %}
		{% include 'game_menu.html' %}
	{% endwith %}
{% endblock %}

{# May be necessary for proper sidebar position, and want to fork #page between
   main page, and other pages. #}

{% block page_class %}fixed{% endblock %}

{% block page_content %}
	<div id="settings">
		{% block settings %}{% endblock %}
	</div>
	
	<div class="game">
		<div id="instructions">
			{% block instructions %}
				
			{% endblock %}
		</div>
	    {% block game_content %}{% endblock %}
	</div>
	</form>
{% endblock %}

{% block sidebar %}
	{% block navbar %}{% endblock %}
	{# <p>{% trans 'OAHPA is under development and may not function all the time.' %}</p> #}
	<p><a href="/oahpa/"> 
	
	{# {% include 'user_auth_block.html' %} #}
	<br />
	<br />
	<br />
	<img border="0" width="60" src="/oahpa/media/images/Oahpa_logo0001red.png" alt="OAHPA!"/><br/> </a></p>
	
	<!-- <a href="/oahpa/feedback/">{% trans 'Feedback' %}</a><br/> -->
{% endblock %}