<?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>