options_dependencies = {w3c_compat:{
                          "true":{
                            w3c_compat_xref_elements:[true,true],
                            w3c_compat_xref_a_placement:[true,true],
                            w3c_compat_xref_normalization:[true,true],
                            w3c_compat_class_toc:[true,true],
                            w3c_compat_substitutions:[true,true]
                          },
                          "false":{
                            w3c_compat_xref_elements:[false, false],
                            w3c_compat_xref_a_placement:[false, false],
                            w3c_compat_xref_normalization:[false, false],
                            w3c_compat_class_toc:[false, false],
                            w3c_compat_substitutions:false
                          }
                        },
                        serializer:{
                          lxml:{
                            inject_meta_charset:[false, true],
                             omit_optional_tags:[false, true],
                             quote_attr_values:[false, true],
                             use_best_quote_char:[false, true],
                             minimize_boolean_attributes:[false, true],
                             use_trailing_solidus:[false, true],
                             space_before_trailing_solidus:[false, true],
                             escape_lt_in_attrs:[false, true],
                             escape_rc_data:[false, true]},
                          html5lib:{
                             inject_meta_charset:[false, false],
                             omit_optional_tags:[false, false],
                             quote_attr_values:[false, false],
                             use_best_quote_char:[false, false],
                             minimize_boolean_attributes:[false, false],
                             use_trailing_solidus:[false, false],
                             space_before_trailing_solidus:[false, false],
                             escape_lt_in_attrs:[false, false],
                            escape_rc_data:[false,false]}
                          }
                       };

function load() {
  for (opt in options_dependencies) {
    for (var i=0; i<document.forms.length; i++) {
      var form = document.forms[i];
      if (!(opt in form)) {
            continue;
      }
      var elem = form[opt];
      var handler = getOptionHandler(elem);
      elem.addEventListener("change", handler, false);
      //handler();
    }
  }
  var opts_sections = document.getElementsByClassName("options");
  for (var i=0; i<opts_sections.length; i++) {
    var opts_section = opts_sections[i];
    var b = document.createElement("button");
    b.textContent = "Show Details";
    b.type = "button";
    opts_section.parentNode.insertBefore(b, opts_section);
    opts_section.style.display = "none";
    b.addEventListener("click", getToggleDetailsDisplay(opts_section, b), false);
  }
  makeCleanerUI();
}

function makeCleanerUI() {
  var supply_types = {
    URL:document.getElementById("url"),
    Upload:document.getElementById("upload")
  };
  var insert_before = document.getElementsByTagName("section")[0];
  var container = document.createElement("section");
  var p = document.createElement("paragraph");
  var label = document.createElement("label");
  var text = document.createTextNode("Supply spec by ");
  label.appendChild(text);
  var select = document.createElement("select");
  for (name in supply_types) {
    var text = document.createTextNode(name);
    var option = document.createElement("option");
    option.setAttribute("value", name);
    option.appendChild(text);
    select.appendChild(option);
  }
  select.addEventListener("change", getToggleSupplyTypes(select, supply_types), false);
  label.appendChild(select);
  p.appendChild(label);
  container.appendChild(p);
  insert_before.parentNode.insertBefore(container, insert_before);
  getToggleSupplyTypes(select, supply_types)();
}

function getToggleSupplyTypes(elem, supply_types) {
  function show(e) {
    for (name in supply_types) {
      if (name == elem.value) {
        supply_types[name].style.display = "block";
      } else {
        supply_types[name].style.display = "none";
      }
    }
  }
  return show;
}

function getToggleDetailsDisplay(opts, button) {
  function toggleDetailsDisplay(e) {
    if (opts.style.display == "block") {
      opts.style.display = "none";
      button.textContent = "Show Details";
    } else {
      opts.style.display = "block";
      button.textContent = "Hide Details";
    }
  }
  return toggleDetailsDisplay;
}

function getOptionHandler(element) {
  var func = function(e) {
    if (element.type == "checkbox") {
      var state = element.checked;
    } else {
      var state = element.value;
    }
    var dependant_options = options_dependencies[element.name][state];
    for (var name in dependant_options) {
      var dependancy = dependant_options[name][0];
      var disabled = dependant_options[name][1];
      var dependant_element = element.form[name];
      if (dependant_element.type == "checkbox") {
        dependant_element.checked = dependancy;
      } else {
        dependant_element.value = dependancy;
      }
      dependant_element.disabled = disabled;
    }
  };
  return func;
}