{% comment %}
Copyright The IETF Trust 2011, All Rights Reserved
{% endcomment %}

<form name="search_form" id="search_form" class="search_form" action="/wgcharter/search/" method="get">

  <div class="search_field">
    <label>Name/acronym:</label> {{ form.nameacronym }}
  </div>
  <div class="search_field">
    <label>Types:</label>
    <table id="search_types">
      <tr><td>{{ form.inprocess }} WGs (in chartering process)</td></tr>
      <tr><td>{{ form.active }} WGs (approved charter)</td></tr>
      <tr><td>{{ form.concluded }} WGs (concluded or not under review)</td></tr>
    </table>
  </div>

  <span onclick="toggleAdvanced();"><b><img src="/images/{% if meta.advanced %}minus{% else %}plus{% endif %}.png" alt="" id="search_advanced-img" /> Advanced</b></span>
  
  <div id="search_advanced" style="{% if not meta.advanced %}display:none;{%endif%}margin-top:1em;">
    Additional search criteria:
    
    <div class="search_field">
      <label><input type="radio" class="radio" name="by" value="state" {% ifequal meta.by "state" %}checked="checked"{% endifequal %} onclick="changeBy();"/> State:</label> {{ form.state }} :: {{ form.charter_state }}
    </div>
    <div class="search_field">
      <label><input type="radio" class="radio" name="by" value="ad" {% ifequal meta.by "ad" %}checked="checked"{% endifequal %} onclick="changeBy();"/> Assigned AD:</label> {{ form.ad }} 
    </div>
    <div class="search_field">
      <label><input type="radio" class="radio" name="by" value="area" {% ifequal meta.by "area" %}checked="checked"{% endifequal %} onclick="changeBy();"/> Area:</label> {{ form.area }}
    </div>
    <div class="search_field">
      <label><input type="radio" class="radio" name="by" value="anyfield" {% ifequal meta.by "anyfield" %}checked="checked"{% endifequal %} onclick="changeBy();"/> Text in any field:</label> {{ form.anyfield }}
    </div>
    <div class="search_field">
      <label><input type="radio" class="radio" name="by" value="eacronym" {% ifequal meta.by "eacronym" %}checked="checked"{% endifequal %} onclick="changeBy();"/> Earlier acronym:</label> {{ form.eacronym }}
    </div>
  </div><!-- end of advanced -->
  
  <div style="padding-top:0.5em;">
    <span class="first-child">
      <button type="submit" name="search_submit" id="id_search_submit">Search</button>
    </span>
  </div>

  <div style="padding-top:0.5em;">
    Quick search: <a href="{% url wg_search %}?nameacronym=&inprocess=on&by=state&state=&charter_state=intrev">WGs in Internal review</a> | <a href="{% url wg_search %}?nameacronym=&inprocess=on&by=state&state=&charter_state=extrev">WGs in External review</a> | <a href="{% url wg_search %}?nameacronym=&inprocess=on&by=state&state=&charter_state=iesgrev">WGs in IESG review</a>
  </div>
  
</form>

<script type="text/javascript">
//<![CDATA[
// we want to disable our submit button if we have no search text, 
// and we have no advanced options selected
function toggleSubmit() {
    var button = document.getElementById("id_search_submit");
    var by = findCheckedSearchBy();
    var value = findSearchByValue(by);
    var concluded = document.getElementById("id_concluded");
    var text = document.getElementById("id_nameacronym");
    if ((value == "") && (text.value == "" && concluded.checked)) {
        button.disabled = true;
    } else {
        button.disabled = false;
    }
}

// check our button status after every change to text fields
// Internet Explorer uses 'onpropertychange', everyone else 'oninput'
window.oninput = toggleSubmit;
window.onpropertychange = toggleSubmit;

// check our button status after every change to selection pulldowns
window.onchange = toggleSubmit;

function togglePlusMinus(id) {
    var el = document.getElementById(id);
    var imgEl = document.getElementById(id+"-img");
    if (el.style.display == 'none') { 
        el.style.display = 'block'; 
        imgEl.src = "/images/minus.png";
    } else { 
        el.style.display = 'none'; 
        imgEl.src = "/images/plus.png";
    }
}

function findCheckedSearchBy() {
    var by=''; 
    var f = document.search_form;
    for (var i = 0; i < f.by.length; i++) {
        if (f.by[i].checked) { 
            by = f.by[i].value; 
            break; 
        }
    }
    return by;
}

function findSearchByValue(by) {
    if (by == 'state') { 
        // state might be wg state...
        state_value = document.getElementById("id_state").value;
        if (state_value) { return state_value; }
        // ...or charter state
        return document.getElementById("id_charter_state").value;
    }
    if (by == 'ad') { return document.getElementById("id_ad").value; }
    if (by == 'area') { return document.getElementById("id_area").value; }
    if (by == 'anyfield') { return document.getElementById("id_anyfield").value; }
    if (by == 'eacronym') { return document.getElementById("id_eacronym").value; }
    return '';
}

function changeBy() {
    var by=findCheckedSearchBy();
    var f = document.search_form;
    f.state.disabled=true; f.charter_state.disabled=true;
    f.ad.disabled=true;
    f.area.disabled=true;
    f.anyfield.disabled=true;  
    f.eacronym.disabled=true;  
    if (by=='state') { f.state.disabled=false; f.charter_state.disabled=false;}
    if (by=='ad') { f.ad.disabled=false; }
    if (by=='area') { f.area.disabled=false;}
    if (by=='anyfield') { f.anyfield.disabled=false;}
    if (by=='eacronym') { f.eacronym.disabled=false;}
 
    toggleSubmit();
}

function toggleAdvanced() {
    togglePlusMinus("search_advanced");
    var f = document.search_form; 
    for (var i = 0; i < f.by.length; i++) { f.by[i].checked = false; }
    changeBy();
}

changeBy();

//]]>
</script>