<% provide(:title, 'Register') %>

<div class="signin-overlay register-page">
  <div class="content-head">
    <h1>create a jamkazam account</h1>
  </div>

  <!-- inner wrapper -->
  <div class="ftue-inner">
    <%= form_for(@user, :url => @signup_postback) do |f| %>

        <!-- register left column -->
        <div class="ftue-left">
          <div class="register-container w100">
            Register as a:
            <%= f.radio_button :musician, true , :class=> "register-as register-musician"%>
            Musician

            <%= f.radio_button :musician, false,  :class=> "register-as register-fan" %>
            Fan

            <div class="field first_name">
              <%= f.label :first_name, "First Name:" %>
              <%= f.text_field :first_name %>
            </div>

            <div class="field last_name right-side">
              <%= f.label :last_name, "Last Name:" %>
              <%= f.text_field :last_name %>
            </div>

            <br clear="all"/>

            <div class="field email">
              <%= f.label :email, "Email Address:" %>
              <%= f.text_field :email %>
            </div>

            <div class="field country right-side">
                <%= f.label :country, "Country:" %>
                <select id="country_select" name="jam_ruby_user[country]" autocomplete="off">
                  <option value="" <%= @location[:country].blank? ? "selected" : "" %>>Select Country</option>
                  <% @countries.each do |country| %>
                      <% unless country.blank? %>
                        <option value="<%= country %>" <%= @location[:country] == country ? "selected" : "" %>><%= country %></option>
                      <% end %>
                  <% end %>
                </select>
            </div>

            <br clear="all"/>

            <div class="field state">
              <%= f.label :state, "State/Province:" %>
              <select id="region_select" name="jam_ruby_user[state]" autocomplete="off">
              <option value="" <%= @location[:state].blank? ? "selected" : "" %>>State/Province</option>
              <% @regions.each do |region| %>
                  <% unless region.blank? %>
                    <option value="<%= region %>" <%= @location[:state] == region ? "selected" : "" %>><%= region %></option>
                  <% end %>
              <% end %>

              </select>
            </div>

            <div class="field city right-side">
              <%= f.label :state, "City:" %>
              <select id="city_select" name="jam_ruby_user[city]" autocomplete="off">
                <option value=""  <%= @location[:city].blank? ? "selected" : "" %>>Select City</option>
                <% @cities.each do |city| %>
                    <% unless city.blank? %>
                        <option value="<%= city %>" <%= @location[:city] == city ? "selected" : "" %>><%= city %></option>
                    <% end %>
                <% end %>

              </select>
            </div>

            <br clear="all"/>

            <div class="field password">
              <%= f.label :password, "Choose a Password:" %>
              <%= f.password_field :password%>
            </div>

            <div class="field password_confirmation right-side">
              <%= f.label :password_confirmation, "Verify Password:" %>
              <%= f.password_field :password_confirmation%>
            </div>

            <br clear="all"/>
          </div>
        </div>
        <!-- end left column -->

        <!-- sign in right column -->
        <div class="ftue-right"><br/>

          <div class="ftue-instrumentlist-wrapper">
            <label class="instruments">What instruments can you play?</label>
            <div class="ftue-instrumentlist">
                <table id="instrument_selector" class="instrument_selector" width="100%" cellpadding="0" cellspacing="6">
                  <% Instrument.standard_list.each do |instrument| %>
                      <tr>
                        <td><input id="<%= instrument.id.gsub(" ", "") %>_checkbox"  name="jam_ruby_user[instruments][<%= instrument.id %>][selected]" type="checkbox" /><%= instrument.description %></td>
                        <td align="right" width="50%"><select id="<%= instrument.id.gsub(" ", "") %>_proficiency" name="jam_ruby_user[instruments][<%= instrument.id %>][proficiency]" class='proficiency_selector'><option value="1">Beginner</option><option value="2">Intermediate</option><option value="3">Expert</option></select></td>
                      </tr>
                  <% end %>
                </table>
              </div>
          </div>

          <div class="field subscribe_email">
              <small>
                <input id="jam_ruby_user_subscribe_email" name="jam_ruby_user[subscribe_email]" type="checkbox"/>
                <span>I will accept email from JamKazam about this service.</span>
              </small>
          </div>
          <div class="field terms_of_service">
              <small>
                <input id="jam_ruby_user_terms_of_service" name="jam_ruby_user[terms_of_service]" type="checkbox"/>
                <span>I have read and agree to the JamKazam <%= link_to "terms of service", corp_terms_path , :rel=>"external" %>.</span>
              </small>
          </div>

          <% if Rails.application.config.recaptcha_enable %>
              <%= recaptcha_tags %>
          <% end %>

          <!--
        <img src="images/content/captcha.png" width="152" height="50" align="left" class="mr10" /><small>Enter the characters from the box to the left:<br />
            <input type="text" /> <br clear="all" /><br />
            -->

          <%= f.submit "CREATE ACCOUNT", class: "right button-orange" %>
              <br/ style="clear:both;"><br/>
              <!--<a href="/auth/facebook" class="right"><img src="/fb-signup-button.png"></a> -->

              </div>

              </div>
              <!-- end right column -->

          <% end %>
    <br clear="all"/>
          </div>
          <!-- end inner -->

          <!-- end overlay content -->




<script type="text/javascript">
    window.signup.handle_location_changes()

    window.signup.handle_register_as_changes()

    function get_first_error(field) {
        if(errors[field] && errors[field].length > 0) {
            return errors[field][0]
        }
        else {
            return null;
        }
    }

    // populate musician instruments from previous submit, if applicable
    if(window.gon && gon.musician_instruments) {
        $(gon.musician_instruments).each(function(index, value) {
            $('#' + value.instrument_id.replace(" ", "") + "_checkbox").attr("checked", true);
            $('#' + value.instrument_id.replace(" ", "") + "_proficiency").val(value.proficiency_level.toString())
        })
    }

    // show signup errors, if any
    if(window.gon && gon.signup_errors) {
        var errors = <%= @user.errors.to_json.html_safe %>

        var email = get_first_error("email")
        var first_name = get_first_error("first_name")
        var last_name = get_first_error("last_name")
        var musician_instruments = get_first_error("musician_instruments")
        var password = get_first_error("password")
        var password_confirmation = get_first_error("password_confirmation")
        var terms_of_service = get_first_error("terms_of_service")
        var country = get_first_error("country")
        var state = get_first_error("state")
        var city = get_first_error("city")


        if(email) {
            var emailInput = $('#jam_ruby_user_email');
            emailInput.closest('div.field').addClass('error')
            emailInput.after("<div class='error-text'>" + email + "</div>")
        }

        if(first_name) {
            var firstNameInput = $('#jam_ruby_user_first_name');
            firstNameInput.closest('div.field').addClass('error')
            firstNameInput.after("<div class='error-text'>" + first_name + "</div>")
        }

        if(last_name) {
            var lastNameInput = $('#jam_ruby_user_last_name');
            lastNameInput.closest('div.field').addClass('error')
            lastNameInput.after("<div class='error-text'>" + last_name + "</div>")
        }

        if(country) {
            var countryInput = $('#country_select');
            countryInput.closest('div.field').addClass('error')
            countryInput.after("<div class='error-text'>" + country + "</div>")
        }

        if(state) {
            var stateInput = $('#region_select');
            stateInput.closest('div.field').addClass('error')
            stateInput.after("<div class='error-text'>" + state + "</div>")
        }

        if(city) {
            var cityInput = $('#city_select');
            cityInput.closest('div.field').addClass('error')
            cityInput.after("<div class='error-text'>" + city + "</div>")
        }


        if(musician_instruments) {
            var musicianInstrumentsInput = $('#instrument_selector');
            musicianInstrumentsInput.closest('div.ftue-instrumentlist-wrapper').addClass('error')
            musicianInstrumentsInput.closest('div.ftue-instrumentlist').after("<div class='error-text'>" + musician_instruments + "</div>")
        }

        if(password) {
            var passwordInput = $('#jam_ruby_user_password');
            passwordInput.closest('div.field').addClass('error')
            passwordInput.after("<div class='error-text'>" + password+ "</div>")
        }

        if(password_confirmation) {
            var passwordConfirmationInput = $('#jam_ruby_user_password_confirmation');
            passwordConfirmationInput.closest('div.field').addClass('error')
            passwordConfirmationInput.after("<div class='error-text'>" + password_confirmation + "</div>")
        }

        if(terms_of_service) {
            var termsOfServiceInput = $('#jam_ruby_user_terms_of_service');
            termsOfServiceInput.closest('small').addClass('error')
           // termsOfServiceInput.closest('small').after("<div class='error-text'>" + terms_of_service + "</div>")
        }
    }

</script>

