<div name="New Service Setting" id="new_service_setting_tab" style="padding-left:4px">
  <% remote_form_table :service_setting,
      :url => service_settings_url,
      :loading  => 'showLoading("Creating service setting...", "new_service_setting_loading")',
      :complete => 'hideLoading("new_service_setting_loading")',
      :success  => 'showMessage("Setting successfully added");$("new_setting_form").reset()',
      :resubmit => true,
      :html => {:multipart => true, :id => 'new_setting_form'} do |f| %>
        <%= f.hidden_field :revision_id, :value => @revision.id %>
        <%= f.hidden_field :service_id, :id => 'service_id' %>
        <p>Note: Adding settings to config files could cause problems with server software.<br/>
           Before adding a setting, make sure that the software supports it properly.</p>
        <table><tr>
          <td valign="top" rowspan=2>
            <b>Step 1.</b> Select Service<br/>
            <div id="new_service_setting_tree" class="tree_sm"></div>
          </td>
          <td valign="top" style="width:500px;">
            <b>Step 2.</b> Enter Details</br>
            <% f.fieldset do %>
              <%= f.text_field :setting, :required => true, :disabled => true %>
              <%= f.text_field :modified_value, :label => 'Value', :disabled => true %>
              <%= f.text_field :validation, :comment => '(optional)', :disabled => true %>
              <%= f.check_box :is_required, :checked => true, :comment => icon_for(:required) %>
              <%= f.check_box :is_promotable, :checked => true, :comment => icon_for(:promote) %>
              <%= f.check_box :is_protected, :comment => icon_for(:protect) %>
              <%# f.check_box :is_portstacked, :comment => icon_for(:plus) %>
              <%= f.row 'Config File',
              '<span id="config_file">[Select a service at left]</span><br/>
              <div class="comment">Note: If no config file is chosen, the setting will be usable in $[variables],
              but will not appear on remote hosts or be accessible to other programs.</div>' %>
            <% end %>
            <%= submit_controls :add, :cancel => false %>
            <div id="new_service_setting_loading"></div>
          </td>
        </tr>
        <tr>
        <td>
          <b>Optional.</b> Load settings from file
          <% f.fieldset do %>
              <%= f.file_field :import_filename, :size => 30,
                                        :label => 'Upload a file ',
                                        :onchange => 'updateTest()',
                                        :id => 'service_setting_import_filename' %>
          <% end %>
          <%= submit_icon :import2 %>
        </td>
        </tr>
        </table>
  <% end %>

  <!-- tree for selecting the service to use -->
  <%= javascript_include_merged :dhtmlxtree %>
  <%= javascript_tag <<-EndJS

    function updateTest()
    {
      alert($('service_setting_import_filename').value);
    }

    ServiceConfigFiles = {};
    function clickService (row_id) {
      if (row_id.match(/^void/)) {
        alert("Please select a service, not a component.");
        $$('#new_setting_form input').each(function(element){
          element.disabled = true;
        });
        return false;
      }

      // Set the service id
      $('service_id').value = row_id;

      $$('#new_setting_form input').each(function(element){
        element.disabled = false;
      });
      showLoading("Loading config files...","config_file");

      // cached version
      if (ServiceConfigFiles[row_id]) {
        $('config_file').update(ServiceConfigFiles[row_id]);
        return true;
      }

      // Ajax call to populate options
      new Ajax.Request('#{ config_files_url }?service_id='+row_id, {
        method: 'get',
        onSuccess: function(request){
          ServiceConfigFiles[row_id] = request.responseText;
          $('config_file').update(ServiceConfigFiles[row_id]);
        },
        onComplete: function(){
          hideLoading("config_file");
        }
      });
    }

    FastInit.addOnLoad(function(){
      // Load the tree when the run_environment_id changes
      var url = '#{ services_url }.tree?revision_id=#{@revision.id}';
      var mytree = new dhtmlXTreeObject("new_service_setting_tree","100%","100%",0);
      mytree.setImagePath('#{ System.dhtmlx_tree_image_path }');
      //mytree.enableCheckBoxes(true);
      //mytree.enableThreeStateCheckboxes(true);
      mytree.attachEvent('onClick', clickService);
      mytree.loadXML(url);
    });
  EndJS
  %>

</div><!-- must nest even JS inside wrapper div partial -->