<link href='/assets/ask.css' rel='stylesheet' type='text/css' />
<style type="text/css">
  .spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
} 
</style>
<script type="text/javascript">
$(document).ready(function(){
    $("#spinner").bind("ajaxSend", function() {
        $(this).show();
    }).bind("ajaxStop", function() {
        $(this).hide();
    }).bind("ajaxError", function() {
        $(this).hide();
    });
 
     });
</script>

<div id="spinner" class="spinner" style="display:none;">
    Sending Mail <%= image_tag 'loading.gif', :id => "img-spinner"%>
</div>
<div id="new-ask-question" class="ask-question">
  <div id="acknowledgement"></div>
  <%= form_for @ask_question, url: panel_ask_front_end_ask_questions_path(standalone: true), html: {class: 'form-horizontal'} do |f| %>
    <div class="control-group">
      <%= f.label :ask_category_id, class: 'control-label required' %>
      <div class="controls">
        <%= f.select :category_id, @categories.collect{|t| [ t.title, t.id ]} %>
      </div>
    </div>
    <div class="control-group">
      <%= f.label :name, class: 'control-label required' %>
      <div class="controls">
        <%= f.text_field :name  %>
      </div>
    </div>
    <div class="control-group">
      <%= f.label :identity, class: 'control-label required' %>
      <div class="controls">
        <%= f.select :identity, options_for_select( [t('ask.teacher'),
                                                      t('ask.stuff'),
                                                      t('ask.student'),
                                                      t('ask.schoolfellow'),
                                                      t('ask.others')].map{|i| [i, i]} ) %>
      </div>
    </div>
    <div class="control-group">
      <%= f.label :email, class: 'control-label required' %>
      <div class="controls">
        <%= f.text_field :email %>
      </div>
    </div>
    <div class="control-group">
      <%= f.label :phone, class: 'control-label' %>
      <div class="controls">
        <%= f.text_field :phone %>
      </div>
    </div>
    <div class="control-group">
      <%= f.label :tax, class: 'control-label' %>
      <div class="controls">
        <%= f.text_field :tax %>
      </div>
    </div>
    <div class="control-group">
      <%= f.label :title, class: 'control-label required' %>
      <div class="controls">
        <%= f.text_field :title %>
      </div>
    </div>
    <div class="control-group">
      <%= f.label :content, class: 'control-label required' %>
      <div class="controls">
        <%= f.text_area :content, rows: 8, class: 'input-xlarge' %>
      </div>
    </div>
   <div class="control-group">
      <div class="controls">
        <%= gotcha_error %>
        <%= gotcha%>
      </div>
    </div>
   
    <div class="form-actions">
      <%= f.submit t('submit'), class: 'btn btn-primary', :id => 'button-mail' %>
      <%= f.button t('cancel'), type: 'reset', class: 'btn' %>
    </div>
  <% end %>
</div>
<script type="text/javascript">
$(document).ready(function(){
    $('#button-mail').click(function() {
        $('#spinner').show();
    });
});
</script>
<script type="text/javascript">
  $(function() {
    $('#new-ask-question .required').each(function() {
      $(this).text('*' + $(this).text());
    });

    $('#new-ask-question form') .submit(function() {
      $.post($(this).attr('action'), $(this).serializeArray());
      return false;
    });
  });
</script>