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

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

function colorize(newStyle)
{
  document.getElementById("canvas").setAttribute("style",newStyle);
}

function imagize(btnID,imageID)
{
  if (document.getElementById(btnID).getAttribute("checked"))
    document.getElementById(imageID).setAttribute("hidden","false");
  else
    document.getElementById(imageID).setAttribute("hidden","true");
}

]]>
</script>

<description><html:h1>XUL Toolbars, Menubars and Statusbars</html:h1></description>

<vbox flex="1" style="overflow: auto">
<groupbox > 
  <caption label="non-functioning tool and menu bars" />
  <toolbox id="non-functioning-toolbox">

    <toolbar id="a-toolbar" >
      <label value="This is a toolbar:" />
      <toolbarseparator />
      <toolbarbutton label="Button" accesskey="B" oncommand="alert('Ouch!');"/>
      <toolbarbutton label="Check" type="checkbox" />
      <toolbarbutton label="Disabled" disabled="true"/>
      <toolbarbutton label="Image" image="images/betty_boop.xbm"/>
    </toolbar>

    <toolbar id="another-toolbar" >
      <label value="This is another toolbar:" />
      <toolbarseparator />
      <toolbarbutton label="Radio1" type="radio" name="radio" />
      <toolbarbutton label="Radio2" type="radio" name="radio" />
      <toolbarbutton label="Radio3" type="radio" name="radio" />
    </toolbar>

    <menubar id="my-menubar">
      <label value="This is a menubar" />
      <toolbarseparator />
      <menu label="Radio" accesskey="R" >
        <menupopup>
           <menuitem type="radio" name="radio" label="Radio1" />
           <menuitem type="radio" name="radio" label="Radio2" />
           <menuitem type="radio" name="radio" label="Radio3" />
        </menupopup>
      </menu>
      <menu label="Checkbox" accesskey="C">
        <menupopup>
           <menuitem type="checkbox" label="Check1" />
           <menuitem type="checkbox" label="Check2" />
           <menuitem type="checkbox" label="Check3" />
        </menupopup>
      </menu>
      <menu label="Cascading" accesskey="a">
        <menupopup>
           <menu label="More" >
             <menupopup>
               <menuitem label="A" />
               <menuitem label="B" />
               <menuitem label="C" />
               <menuseparator />
               <menu label="More" >
                 <menupopup>
                   <menuitem label="1" />
                   <menuitem label="2" />
                   <menuitem label="3" />
                 </menupopup>
               </menu>
             </menupopup>
           </menu>
           <menuseparator />
           <menuitem label="X" />
           <menuitem label="Y" />
           <menuitem label="Z" />
        </menupopup>
      </menu>
      <menu label="Images" accesskey="I" >
        <menupopup>
           <menuitem label="Left" 
                     class="menuitem-iconic" src="images/betty_boop.xbm" />
           <menuitem label="Right" dir="reverse"
                     class="menuitem-iconic" src="images/betty_boop.xbm" />
           <menuitem label="None" />
        </menupopup>
      </menu>
      <spacer flex="1" />
      <menu label="Help" accesskey="H">
        <menupopup>
           <menuitem label="This is help" />
        </menupopup>
      </menu>
    </menubar>

    <menubar id="back-menubar" dir="reverse">
      <menu label="Menubar" />
      <menu label="with" />
      <menu label="its"  />
      <menu label="grippy"  />
      <spacer flex="1" />
      <menu label="here->"  />
    </menubar>

    <menubar id="another-menubar" grippyhidden="true">
      <menu label="Menubar" />
      <menu label="with" />
      <menu label="its"  />
      <menu label="grippy"  />
      <menu label="hidden"  />
    </menubar>
  </toolbox>
</groupbox>

<groupbox flex="1" > 
<caption label="functioning tool and menu bars" />
  <toolbox id="non-functioning-toolbox">

    <toolbar id="working-toolbar" >
      <toolbarbutton label="Color:" />
      <toolbarbutton type="radio" name="color" image="images/red_apple.png" 
                     oncommand="colorize('background-color:red');" />
      <toolbarbutton type="radio" name="color" image="images/yellow_apple.png" 
                     oncommand="colorize('background-color:yellow');"/>
      <toolbarbutton type="radio" name="color" image="images/green_apple.png" 
                     oncommand="colorize('background-color:green');"/>
      <toolbarbutton type="radio" name="color" image="images/cyan_apple.png" 
                     oncommand="colorize('background-color:cyan');" />
      <toolbarbutton type="radio" name="color" image="images/blue_apple.png" 
                     oncommand="colorize('background-color:blue');" />
      <toolbarbutton type="radio" name="color" image="images/magenta_apple.png" 
                     oncommand="colorize('background-color:magenta');" />
    </toolbar>

    <menubar id="working-menubar">
      <menu label="Color" accesskey="o">
        <menupopup>
           <menuitem type="radio" name="color2" label="Red" 
                     oncommand="colorize('background-color:red');" />
           <menuitem type="radio" name="color2" label="Yellow"
                     oncommand="colorize('background-color:yellow');"/>
           <menuitem type="radio" name="color2" label="Green"
                     oncommand="colorize('background-color:green');" />
           <menuitem type="radio" name="color2" label="Cyan"
                     oncommand="colorize('background-color:cyan');" />
           <menuitem type="radio" name="color2" label="Blue"
                     oncommand="colorize('background-color:blue');" />
           <menuitem type="radio" name="color2" label="Magenta"
                     oncommand="colorize('background-color:magenta');" />
        </menupopup>
      </menu>
      <menu label="Image" accesskey="i">
        <menupopup>
           <menuitem id="ib2" type="checkbox" label="Betty" 
                     checked="true"  
                     oncommand="imagize('ib2','betty-image');"/>
           <menuitem id="ic2" type="checkbox" label="Chick"  
                     checked="true"  
                     oncommand="imagize('ic2','chick-image');"/>
           <menuitem id="ibc2" type="checkbox" label="Blind Chicken" 
                     checked="true"  
                     oncommand="imagize('ibc2','blindchick-image');"/>
        </menupopup>
      </menu>
    </menubar>
  </toolbox>
  <box flex="1" id="canvas" align="center">
     <spacer flex="1" />
     <image id="betty-image"      src="images/betty_boop.xbm"  />
     <spacer flex="1" />
     <image id="chick-image"      src="images/chick.png"       />
     <spacer flex="1" />
     <image id="blindchick-image" src="images/BC-R.jpg"         />
     <spacer flex="1" />
  </box>
</groupbox>

<statusbar>
  <statusbarpanel  label="This is a statusbarpanel." />
  <statusbarpanel  label="As is this." />
  <statusbarpanel  label="And also this...." flex="1" />
  <statusbarpanel  label="Click Me!" onclick="alert('Ouch');" />
</statusbar>

</vbox>

</window>
