<% if has_v4 and has_v6 then %>
<script type="text/javascript">//<![CDATA[

function css(selector, property, value) {
  for (var i=0; i<document.styleSheets.length;i++) {
    try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length);
    } catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err) {}}//IE
  }
}

window.onload = function() {
  var buttons = '<input type="button" name="show-proto-4" id="show-proto-4" class="cbi-button cbi-button-apply" style="margin-right: 5px" value="<%:Hide IPv4%>">'
  buttons += '<input type="button" name="show-proto-6" id="show-proto-6" class="cbi-button cbi-button-apply" value="<%:Hide IPv6%>">'

  document.getElementById('togglebuttons').innerHTML = buttons;

  var visible = true;
  document.getElementById('show-proto-4').onclick = function() {
  visible = !visible;
  document.getElementById('show-proto-4').value = visible ? '<%:Hide IPv4%>' : '<%:Show IPv4%>';
  document.getElementById('show-proto-4').className = visible ? 'cbi-button cbi-button-apply' : 'cbi-button cbi-button-reset';
  css('.proto-4', 'display', visible ? 'table-row' : 'none')
  };

  var visible6 = true;
  document.getElementById('show-proto-6').onclick = function() {
  visible6 = !visible6;
  document.getElementById('show-proto-6').value = visible6 ? '<%:Hide IPv6%>' : '<%:Show IPv6%>';
  document.getElementById('show-proto-6').className = visible6 ? 'cbi-button cbi-button-apply' : 'cbi-button cbi-button-reset';
  css('.proto-6', 'display', visible6 ? 'table-row' : 'none')
  };

}
//]]></script>
<%end %>
