<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE menuplugin SYSTEM "../../../dtd/displaymenuplugin.dtd">

<menuplugin x="0" y="0" width="100%" height="100%" fadetime="0">
    <background>
        <area x="0" y="0" width="100%" height="100%" layer="1">
            <fill color="{clrTransBlack}" />
        </area>
    </background>
    <!-- dummyheader -->
    <header>
        <area x="0" y="0" width="1" height="1" layer="1">
            <fill color="{clrTransparent}" />
        </area>
    </header>
    <datetime>
        <area x="0" y="0" width="1" height="1" layer="1">
            <fill color="{clrTransparent}" />
        </area>
    </datetime>
    <colorbuttons>
    </colorbuttons>
    <!-- Available Variables in detail header:
    {menuitem}          Number of menu item element from list 
    {tabtext}           Text for Tab
    -->
    <detailheader>
        <area x="0" y="0" width="100%" height="20%" layer="2">
            <fill color="{clrTransBlueLight}" />
        </area>
        <area x="0" y="0" width="100%" height="20%" layer="3">
            <drawtext x="20" valign="center" font="{light}" fontsize="40%" color="{clrWhite}" text="Header for menuitem {menuitem} detailed information" />
        </area>
    </detailheader>
    <!-- Available Variables scrollbar:
    {height}                  height in one-tenth of a percent of total height
    {offset}                  offset from top in one-tenth of a percent of total height
    -->
    <scrollbar>
        <area x="98%" y="20%" width="2%" height="65%" layer="3">
            <fill color="{clrWhite}" />
            <drawrectangle x="2" y="2" width="{areawidth} - 4" height="{areaheight} - 4" color="{clrTransparent}" />
            <drawrectangle x="4" y="4 + {areaheight} * {offset} / 1000" width="{areawidth} - 8" height="{areaheight} * {height} / 1000 - 8" color="{clrWhite}" />
        </area>
    </scrollbar>
    <!-- Available Variables in tab elements:
    {menuitem}          Number of menu item element from list 
    {tabtext}           Text for Tab
    {loop1[]}           test array
    {loop1[col0]}       test array first col
    ...
    {loop1[col3]}       test array fourth col
    -->
    <!-- TAB TEST1 -->
    <tab name="Test1" x="2%" y="20%" width="94%" height="65%" layer="2" scrollheight="{areaheight}/4">
        <drawtextbox x="0" y="0" width="96%" font="{light}" fontsize="8%" color="{clrWhite}" text="{tabtext}" />
    </tab>
    <!-- TAB TEST2 -->
    <tab name="Test2" x="2%" y="20%" width="94%" height="65%" layer="2" scrollheight="{areaheight}/4">
        <drawtext x="10" y="0" width="96%" font="{light}" fontsize="8%" color="{clrWhite}" text="{tabtext}" />
        <loop name="loop1" x="0" y="9%" width="{areawidth} - 40" orientation="vertical">
            <drawtext x="20" y="0" width="{areawidth} - 20" font="{light}" fontsize="8%" color="{clrWhite}" text="{loop1[col0]} {loop1[col1]} {loop1[col2]} {loop1[col3]}" />
        </loop>
    </tab>
    <!-- Available Variables tablabels:
    {tabs[]}                array with available tab labels
    {tabs[title]}           title of tab
    {tabs[current]}         true if tab is displayed currently
    -->
    <tablabels>
        <area x="0" y="85%" width="98%" height="5%" layer="3">
            <loop name="tabs" x="0" y="0" orientation="horizontal">
                <drawrectangle condition="{tabs[current]}" x="0" y="0" width="{width(label)}" height="100%" color="{clrTransBlueLight}" />
                <drawrectangle condition="not{tabs[current]}" x="0" y="0" width="{width(label)}" height="100%" color="{clrTransBlueLight}" />
                <drawrectangle condition="not{tabs[current]}" x="2" y="2" width="{width(label)} - 4" height="{areaheight}-4" color="{clrTransparent}" />
                <drawtext name="label" x="0" valign="center" font="{light}" fontsize="95%" color="{clrWhite}" text="  {tabs[title]}  " />
            </loop>
        </area>
    </tablabels>
</menuplugin>