1<!-- the tabs -->
2<ul class="tabs">
3    <li><a class="tooltip" href="#" title="<{$smarty.const._AM_SYSTEM_HELP}>"><img src='<{"$theme_icons/help.png"}>'/></a></li>
4    <li><a class="tooltip" href="#" title="<{block id=4 display='title'}>"><img src='<{"$theme_icons/waiting.png"}>'/></a></li>
5    <li><a class="tooltip" href="#" title="<{block id=9 display='title'}>"><img src='<{"$theme_icons/edituser.png"}>'/></a></li>
6    <li><a class="tooltip" href="#" title="<{block id=8 display='title'}>"><img src='<{"$theme_icons/newuser.png"}>'/></a></li>
7    <li><a class="tooltip" href="#" title="<{block id=10 display='title'}>"><img src='<{"$theme_icons/comments.png"}>'/></a></li>
8</ul>
9
10<!-- tab "panes" -->
11<div class="panes">
12    <div>
13        <div class="help">
14            <a href=""><{$smarty.const._OXYGEN_HELP_1}></a>
15
16            <p><{$smarty.const._OXYGEN_HELP_DESC_1}></P>
17        </div>
18        <div class="help">
19            <a href=""><{$smarty.const._OXYGEN_HELP_2}></a>
20
21            <p><{$smarty.const._OXYGEN_HELP_DESC_2}></P>
22        </div>
23        <div class="help">
24            <a href=""><{$smarty.const._OXYGEN_HELP_3}></a>
25
26            <p><{$smarty.const._OXYGEN_HELP_DESC_3}></P>
27        </div>
28    </div>
29    <div><{block id=4}></div>
30    <div><{block id=9}></div>
31    <div><{block id=8}></div>
32    <div><{block id=10}></div>
33</div>
34
35<script type="text/javascript">
36    // perform JavaScript after the document is scriptable.
37    $(function () {
38        // setup ul.tabs to work as tabs for each div directly under div.panes
39        $("ul.tabs").tabs("div.panes > div");
40    });
41</script>
42