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

<window title="XUL Periodic Table"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script>
<![CDATA[

function setFrame()
{
  var listBox = document.getElementById("working-list");
  var selectedItem = listBox.getSelectedItem(0);
  var newPage = selectedItem.getAttribute("value");
  document.getElementById("working-frame").setAttribute("src", newPage);
  var newSrc = newPage + ".txt";
  document.getElementById("source-frame").setAttribute("src", newSrc);
}

]]>
</script>

 <hbox flex="1">
    <listbox id="working-list" style="width:10em" 
             onselect="setFrame();">
      <listitem value="layout.xul"        label="Box Layout" selected="true" />
      <listitem value="button.xul"        label="Buttons" />
      <listitem value="checkbox.xul"      label="Checkboxes" />
      <listitem value="colorpicker.xul"   label="Colorpickers" />
      <listitem value="cropping.xul"      label="Cropping" />
      <listitem value="grid.xul"          label="Grids" />
      <listitem value="image.xul"         label="Images" />
      <listitem value="label.xul"         label="Labels" />
      <listitem value="list.xul"          label="Lists" />
      <listitem value="menubar.xul"       label="Menubars, etc." />
      <listitem value="popup.xul"         label="Popups" />
      <listitem value="progressmeter.xul" label="Progressmeters" />
      <listitem value="radio.xul"         label="Radiobuttons" />
      <listitem value="scrolling.xul"     label="Scrolling" />
      <listitem value="splitter.xul"      label="Splitters" />
      <listitem value="stack.xul"         label="Stacks and Decks" />
      <listitem value="tab.xul"           label="Tabs" />
      <listitem value="textbox.xul"       label="TextBoxes" />
      <listitem value="tree-simple.xul"   label="Trees, Simple" />
      <listitem value="tree-nested.xul"   label="Trees, Nested" />
    </listbox>

    <splitter collapse="before" resizebefore="closest" resizeafter="grow">
     <grippy />
    </splitter>

    <tabbox  flex="1" >
      <tabs>
         <tab label="Examples" />
         <tab label="Source" />
         <tab label="Change log" />
      </tabs>
      <tabpanels flex="1" >
         <iframe id="working-frame" type="content-primary" src="layout.xul" />
         <iframe id="source-frame"  type="content-primary" 
                                                       src="layout.xul.txt"/>
         <iframe type="content-primary" src="ChangeLog.txt" />
      </tabpanels>
    </tabbox>

  </hbox>

</window>
