<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>

<window title="XUL Radios"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   
<script>
<![CDATA[

function setText(textID,val)
{
  document.getElementById(textID).value=val;
}

]]>
</script>

<description><html:h1>XUL Radio Buttons</html:h1></description>

<vbox flex="1" style="overflow: auto">
<hbox>

  <groupbox flex="1">
    <caption label="states" />
    <radiogroup flex="1">
       <description value="These show different states."/>
       <radio label="Selected" selected="true"
              oncommand="setText('state-text','Checked');" />
       <radio label="Normal"   
              oncommand="setText('state-text','Normal');" />
       <radio label="Disabled" disabled="true" 
              ncommand="setText('state-text','Disabled');" />
       <separator flex="1" />
       <description id="state-text" value="(no input)" />
     </radiogroup>
  </groupbox>

  <groupbox flex="1">
    <caption label="accesskeys" />
    <radiogroup flex="1">
      <description value="These have access keys."/>
      <description value="(Even if they're not marked)"/>
      <radio label="Animal" accesskey="A" 
             oncommand="setText('accesskey-text','Animal');" />
      <radio label="Bear"   accesskey="B" 
             oncommand="setText('accesskey-text','Bear');" />
      <radio label="Cat"    accesskey="C" 
             oncommand="setText('accesskey-text','Cat');" />
      <radio label="Dog"    accesskey="D" 
             oncommand="setText('accesskey-text','Dog');" />
      <radio label="Deer"   accesskey="E" 
             oncommand="setText('accesskey-text','Deer');" />
      <radio label="Fish"   accesskey="F" 
             oncommand="setText('accesskey-text','Fish');" />
      <separator flex="1" />
      <description  id="accesskey-text" value="(no input)" />
    </radiogroup>
  </groupbox>

</hbox>

<hbox>

  <groupbox flex="1">
    <caption label="orientation" />
    <radiogroup flex="1">
      <description value="These radiobuttons show different orientations."/>
      <radio label="Left"
       oncommand="setText('or-text','A radiobutton to the left of the label');" />
      <radio label="Right" dir="reverse" 
       oncommand="setText('or-text','A radiobutton to the right of the label');"/>
      <radio label="Above" orient="vertical" dir="forward" 
       oncommand="setText('or-text','A radiobutton above the label');"/>
      <radio label="Below" orient="vertical" dir="reverse" 
       oncommand="setText('or-text','A radiobutton below the label');"/>
      <radio 
       oncommand="setText('or-text','A radiobutton with no label');" />
      <radio
       oncommand="setText('or-text','Another radiobutton with no label');" />
      <separator flex="1" />
      <description  id="or-text" value="(no input)" />
    </radiogroup>
  </groupbox>

  <groupbox flex="1">
    <caption label="images" />
    <radiogroup flex="1">
      <description value="These radiobuttons show images."/>
      <radio label="Left"
              src="images/betty_boop.xbm" 
       oncommand="setText('image-text','A radiobutton to the left of the label');" />
      <radio label="Right" dir="reverse" 
              src="images/betty_boop.xbm" 
       oncommand="setText('image-text','A radiobutton to the right of the label');"/>
      <radio label="Above" orient="vertical" dir="forward" 
              src="images/betty_boop.xbm" 
       oncommand="setText('image-text','A radiobutton above the label');"/>
      <radio label="Below" orient="vertical" dir="reverse" 
               src="images/betty_boop.xbm" 
      oncommand="setText('image-text','A radiobutton below the label');"/>
      <radio 
              src="images/betty_boop.xbm" 
       oncommand="setText('image-text','A radiobutton with no label');" />
      <radio
              src="images/betty_boop.xbm" 
       oncommand="setText('image-text','Another radiobutton with no label');" />
      <separator flex="1" />
      <description  id="image-text" value="(no input)" />
    </radiogroup>
  </groupbox>

</hbox>

</vbox>

</window>
