
<div class="control-group input-content">
  <label class="control-label muted"><%= t("default_widget.select_widget_style") %></label>
  <div class="controls">
    <ul class="typesetting clearfix">
      <% if @enabled_styles.include?("typeA") %>
        <li>
          <%= radio_button_tag "page_part[widget_style]", "typeA", @checked_style ? @checked_style.eql?("typeA") : true, class: "d-theme" %>
          <%= image_tag 'module/default_widgets/style01.png'%>
          <span class="style_description"><%= t("default_widget.caption.typeA") %></span>  
        </li>
      <% end %>
      <% if @enabled_styles.include?("typeB_style2") %>
        <li>
          <%= radio_button_tag "page_part[widget_style]", "typeB_style2", @checked_style ? @checked_style.eql?("typeB_style2") : false, class: "d-theme" %>
          <%= image_tag 'module/default_widgets/style02.png'%>
          <span class="style_description"><%= t("default_widget.caption.typeB_style2") %></span>
        </li>
      <% end %>
      <% if @enabled_styles.include?("typeB_style3") %>
        <li>
          <%= radio_button_tag "page_part[widget_style]", "typeB_style3", @checked_style ? @checked_style.eql?("typeB_style3") : false, class: "d-theme" %>
          <%= image_tag 'module/default_widgets/style03.png'%>
          <span class="style_description"><%= t("default_widget.caption.typeB_style3") %></span>
        </li>
      <% end %>
      <% if @enabled_styles.include?("typeB_style4") %>
        <li>
          <%= radio_button_tag "page_part[widget_style]", "typeB_style4", @checked_style ? @checked_style.eql?("typeB_style4") : false, class: "d-theme" %>
          <%= image_tag 'module/default_widgets/style04.png'%>
          <span class="style_description"><%= t("default_widget.caption.typeB_style4") %></span>
        </li>
      <% end %>
      <% if @enabled_styles.include?("typeC") %>
        <li>
          <%= radio_button_tag "page_part[widget_style]", "typeC", @checked_style ? @checked_style.eql?("typeC") : false, class: "d-theme" %>
          <%= image_tag 'module/default_widgets/style05.png'%>
          <span class="style_description"><%= t("default_widget.caption.typeC") %></span>
        </li>
      <% end %>
    </ul>
  </div>
</div>
<div class="control-group input-content">
  <label class="control-label muted"><%= t("default_widget.fields_") %></label>
  <div class="controls">
    <table>
      <tbody class="form-inline">
        <% @widget_fields.count.times do |i| %>
          <tr>
            <td>
              <%= select_tag "page_part[widget_field][][field_name]", options_for_select(@widget_fields, (@part.widget_field_name[i] if @part)), include_blank: true, class: "input-large widget_field" %>
            </td>
            <td><i class="icons-arrow-right-6"></i></td>
            <td>
              <%= select_tag "page_part[widget_field][][class]", options_for_select(@class_options, (@part.widget_class[i] if @part)), include_blank: true, class: "input-large" %>
            </td>
            <td>
              <label class="checkbox">
                <span class="checkbox_link hide"><%= check_box_tag 'page_part[widget_field][][sat_to_link]', true, @part && @part.widget_sat_to_link[i] || false %> <%= t(:link) %></span>
              </label>
            </td>
          </tr>
        <% end %>
      </tbody>
      <tfoot>
        <tr>
          <th><%= t "default_widget.fields_order" %></th>
          <th></th>
          <th><%= t "default_widget.fields_style" %></th>
          <th class="span2"></th>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

<script>
  $('.typesetting li').each(function(index, el) {
    $(this).find('input').prop('checked') ? $(this).addClass('active') : '';
  });

  $('.controls').on(clickEvent, '.typesetting input[type="radio"]', function(event) {
    $(this).prop('checked') ? $(this).closest('li').addClass('active').siblings('li').removeClass('active') : '';
  });

  $('#module_widget select.widget_field').each(function() {
    if($(this).find(":selected").prop('class') == 'link') {
      $(this).closest('tr').find('.checkbox_link').show();
    }
  });
  
  $('#module_widget').on('change', '.widget_field', function() {
    if($(this).find(":selected").prop('class') == 'link') {
      $(this).closest('tr').find('.checkbox_link')
                            .show()
                            .end()
                            .find('.checkbox_link input[type="checkbox"]')
                            .prop('checked', false);
    }
    else {
      $(this).closest('tr').find('.checkbox_link')
                            .hide()
                            .end()
                            .find('.checkbox_link input[type="checkbox"]')
                            .prop('checked', false);
    }
  });
</script>