<style>
    #moxy_tab_group {
        list-style: none;
        margin: 1px 0 -1px 0;
        padding: 0;
    }

    #moxy_tab_group li {
        display: block;
        float: left;
        display: block;
        height: 14px;
        position: relative;
        border-bottom: 1px solid #bbb8a9;
        white-space: nowrap;
        font-size: x-small;
        cursor: pointer;
    }
    #moxy_tab_group .tab {
        float: left;
        list-style-type: none;
        margin-right: 4px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 2px;
        display: inline;
    }
    #moxy_tab_group .tab_open { background-color: gray; color: white; }
    #moxy_tab_group .tab_close { background-color: #E0E0E0; color: black; }
    .moxy_pane {
        border: 2px solid gray;
        height: 357px;
        overflow: auto;
        width: 700px;
    }
</style>
<script>
    var moxy_current_tab = 1;
    function moxy_switch_tab(i) {
        var current_pane = document.getElementById('moxypane' + moxy_current_tab);
        current_pane.style.display = 'none';
        var current_tab = document.getElementById('moxytab' + moxy_current_tab);
        current_tab.className = 'tab tab_close';

        var new_pane = document.getElementById('moxypane' + i);
        new_pane.style.display = 'block';
        var new_tab = document.getElementById('moxytab' + i);
        new_tab.className = 'tab tab_open';

        moxy_current_tab = i;
    }
</script>
<div id="moxy-control-panel" style="margin-left: 10px;float: left; width: 700px;">
    <ul id="moxy_tab_group">
    [% FOR part IN parts %]
        <li id="moxytab[% loop.count %]" onclick="moxy_switch_tab([% loop.count %])" class="tab tab_[% IF loop.count == 1 %]open[% ELSE %]close[% END %]">[% part.title %]</li>
    [% END %]
    </ul>
    <div style="clear: both"></div>

    [% FOR part IN parts %]
        <div class="moxy_pane" id="moxypane[% loop.count %]" [% IF loop.count != 1 %]style="display: none"[% END %]>[% part.body %]</div>
    [% END %]
</div>