<% # encoding: utf-8 %>
<div class="o-question">
  <%= form_for :answer, :method => :put, :url => panel_survey_front_end_survey_path(@survey, :standalone => true), :html => {:class => 'survey clear'} do |f| %>
	<h3 class="o-question-topic"><%= @survey.title %></h3>
	<div class="o-question-description">
	  <%= @survey.description %>
	</div>
	<ol class="o-question-list">
	  <% @questions.each_with_index do |question, i| %>
		<li class="question-item question-<%= question.id.to_s %> hide" data-index="<%= i %>" data-type="<%= question.type%>" data-custom="<%= question.custom_option.to_s %>">
		  <% label = question.title %>
		  <% if question.is_required %>
        <span class="required-star">(*)</span>
      <% end %>
		  <%= f.label question.id, label, :class => "o-question-title" %>
		  <div class="o-question-description">
			<%= question.description %>
		  </div>
		  <% case question.type %>
		  <% when ::SurveyQuestion::Oneline %>
			<%= f.text_field question.id, :required => question.is_required %>
		  <% when ::SurveyQuestion::Multiline %>
			<%= f.text_area question.id, :rows => 5, :required => question.is_required %>
		  <% when ::SurveyQuestion::Radio %>
		  	<ul class="o-question-group view-list">
			<% question.survey_question_options.each do |option| %>
			  <li>
				<%= f.radio_button question.id, option.id %>
				<%= f.label "#{question.id}_#{option.id}", option.name, :class => 'o-question-option' %>
			  </li>
			<% end %>
			<% if question.custom_option %>
			  <li>
				<%= f.radio_button question.id, 'custom_option' %>
				<%= f.label "#{question.id}_custom_option", t('survey_question.use_custom_option') + ': ', :class => 'o-question-option' %>
				<%= f.text_field "#{question.id}_custom_option" %>
			  </li>
			<% end %>
			</ul>
		  <% when ::SurveyQuestion::Check %>
		  	<ul class="o-question-group view-list">
			<%= f.fields_for "#{question.id}" do |cf| %>
			  <% question.survey_question_options.each do |option| %>
				<li>
				  <%= cf.check_box option.id %>
				  <%= cf.label option.id, option.name, :class => 'o-question-option' %>
				</li>
			  <% end %>
			  <% if question.custom_option %>
				<li>
				  <%= cf.check_box 'custom_option' %>
				  <%= f.label "#{question.id}_custom_option", t('survey_question.use_custom_option') + ': ', :class => 'o-question-option' %>
				  <%= f.text_field "#{question.id}_custom_option" %>
				</li>
			  <% end %>
			<% end %>
			</ul>
		  <% when ::SurveyQuestion::Select %>
			<% options = question.survey_question_options.collect {|o| [ o.name, o.id ] } %>
			<% if question.custom_option %>
			  <% options.push [t('survey_question.use_custom_option'), 'custom_option'] %>
			<% end %>
			<%= f.select question.id, options, {}, :class => 'o-question-group view-dropdown' %>
			<% if question.custom_option %>
			  <%= f.text_field "#{question.id}_custom_option", :class => 'custom_option' %>
			<% end %>
		  <% when ::SurveyQuestion::Radiogroup %>
			<%= f.fields_for "#{question.id}" do |rgf| %>
			  <table class="o-question-group view-grid">
				<thead>
				  <tr>
					<th></th>
					<% question.survey_question_radiogroups.each do |radiogroup| %>
					  <th>
						<%= radiogroup.name %>
					  </th>
					<% end %>
				  </tr>
				</thead>
				<tbody>
				  <% question.survey_question_options.each_with_index do |option, j| %>
					<tr<%= (' class="odd"').html_safe if (j % 2 == 0) %>>
					  <th class="o-question-title">
						<%= option.name %>
					  </th>
					  <% question.survey_question_radiogroups.each do |radiogroup| %>
						<td>
						  <%= rgf.radio_button option.id, radiogroup.id %>
						</td>
					  <% end %>
					</tr>
				  <% end %>
				</tbody>
			  </table>
			<% end %>
		  <% end %>
		</li>
	  <% end %>
	</ol>
	<div class="o-question-action">
	  <%= f.submit t('submit'), :class => 'survey-submit' %>
	</div>
  <% end %>
</div>
<% content_for :page_stylesheets do %>
  <link href='/assets/questionnaire.css' rel='stylesheet' type='text/css' />
<% end %>
<script type="text/javascript" src="/assets/jquery.form.js"></script>
<script type="text/javascript">
  $('form.survey').ajaxForm({
    beforeSubmit: function(a,f,o) {
      o.dataType = 'script';
    },
    success: function(data) {
    }
  });
<% if @survey.jump_mode %>
  var jump_tos_map = <%== @jump_tos_map.to_json %>;
  var $current_question = $('.question-item').eq(0);
  var current_index = parseInt($current_question.attr('data-index'));
  $current_question.show();
  $('.survey-submit').click(function(){
    $current_question.hide();
    if ( $current_question.attr('data-type') == '<%= SurveyQuestion::Radio %>' || $current_question.attr('data-type') == '<%= SurveyQuestion::Select %>' ) {
      if ( $current_question.attr('data-type') == '<%= SurveyQuestion::Radio %>' ) {
        value = $current_question.find('input[type=radio]:checked').val();
      } else if ( $current_question.attr('data-type') == '<%= SurveyQuestion::Select %>') {
        value = $current_question.find('select option:selected').val();
      }
      if ( value == undefined ) {
        alert("<%= t('survey.must_answer') %>");
      } else {
        jump_to = jump_tos_map[value];
        if (jump_to == '1') {
          return true;
        } else if ( jump_to != '0' && jump_to != undefined ) {
          $current_question = $('.question-item.question-' + jump_to);
        } else {
          $current_question = $('.question-item[data-index=' + (current_index + 1) + ']');
        }
      }
    } else {
      $current_question = $('.question-item[data-index=' + (current_index + 1) + ']');
    }
    if ( $current_question[0] ) {
      $current_question.show();
      current_index = parseInt($current_question.attr('data-index'));
      return false;
    } else {
      return true;
    }
    return false;
  });
<% else %>
  $('.question-item').show();
<% end %>
  $('.question-item[data-type=<%= SurveyQuestion::Select %>][data-custom=true]').each(function(){
    $(this).change(function(){
      if ( $(this).find('option:selected').val() == 'custom_option' ) {
        $(this).find('input.custom_option').show();
      } else {
        $(this).find('input.custom_option').hide();
      }
    });
    $(this).trigger('change');
  });
</script>