<?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">
            <drawimage imagetype="skinpart" x="0" y="0" width="100%" height="100%" path="background_menu" />
        </area>
        <area x="2%" y="10%" width="96%" height="80%" layer="2">
            <fill color="{menuback}" />
            <drawrectangle x="0" y="5%" width="100%" height="1" color="{menubackline}" />
        </area>
    </background>

    <scrollbar>
        <area x="97%" y="15%" width="{areawidth}*0.01" height="75%" layer="3">
            <drawrectangle x="0" y="{areaheight} * {offset} / 1000" width="100%" height="{areaheight} * {height} / 1000" color="{progressbar}" />
        </area>
    </scrollbar>
    
    <detailheader>
        <area x="3%" y="11%" width="95%" height="3%" layer="3">
            <drawtext align="right" valign="center" font="{regular}" fontsize="100%" color="{fontdefault}" text="{tr(author)}: {author} " />
        </area>
    </detailheader>

    <colorbuttons>
        <!--red-->
        <area condition="{red1}" x="0" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_red" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{red1}" x="0" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{red}" />
        </area>
        <!--green-->
        <area condition="{green1}" x="0" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_green" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{green1}" x="0" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{green}" />
        </area>
        <!--yellow-->
        <area condition="{yellow1}" x="0" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_yellow" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{yellow1}" x="0" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{yellow}" />
        </area>
        <!--blue-->
        <area condition="{blue1}" x="0" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_blue" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{blue1}" x="0" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{blue}" />
        </area>

        <!--red-->
        <area condition="{red2}" x="25%" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_red" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{red2}" x="25%" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{red}" />
        </area>
        <!--green-->
        <area condition="{green2}" x="25%" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_green" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{green2}" x="25%" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{green}" />
        </area>
        <!--yellow-->
        <area condition="{yellow2}" x="25%" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_yellow" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{yellow2}" x="25%" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{yellow}" />
        </area>
        <!--blue-->
        <area condition="{blue2}" x="25%" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_blue" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{blue2}" x="25%" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{blue}" />
        </area>

        <!--red-->
        <area condition="{red3}" x="50%" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_red" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{red3}" x="50%" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{red}" />
        </area>
        <!--green-->
        <area condition="{green3}" x="50%" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_green" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{green3}" x="50%" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{green}" />
        </area>
        <!--yellow-->
        <area condition="{yellow3}" x="50%" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_yellow" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{yellow3}" x="50%" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{yellow}" />
        </area>
        <!--blue-->
        <area condition="{blue3}" x="50%" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_blue" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{blue3}" x="50%" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{blue}" />
        </area>

        <!--red-->
        <area condition="{red4}" x="75%" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_red" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{red4}" x="75%" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{red}" />
        </area>
        <!--green-->
        <area condition="{green4}" x="75%" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_green" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{green4}" x="75%" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{green}" />
        </area>
        <!--yellow-->
        <area condition="{yellow4}" x="75%" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_yellow" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{yellow4}" x="75%" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{yellow}" />
        </area>
        <!--blue-->
        <area condition="{blue4}" x="75%" y="94%" width="25%" height="6%" layer="2">
            <drawimage imagetype="skinpart" path="button_blue" x="0" y="0" width="100%" height="100%"/>
        </area>
        <area condition="{blue4}" x="75%" y="94%" width="25%" height="6%" layer="3">
            <drawtext align="center" valign="center" font="{regular}" fontsize="60%" color="{fontdefault}" text="{blue}" />
        </area>
    </colorbuttons>

    <tab name="preview" x="3%" y="15%" width="94%" height="75%" layer="3" scrollheight="{areaheight}/4">
        <drawtext name="headerplugs" x="0" y="0" font="{regular}" fontsize="6%" color="{fontdefault}" text="{tr(supportedplugins)}:" />
        <loop name="plugins" x="0" y="7%" orientation="vertical" columnwidth="{areawidth}/2" rowheight="{areaheight}*0.04">
            <drawtext x="0" valign="center" font="{regular}" fontsize="4%" color="{fontdefault}" text="{plugins[name]}" />
        </loop>

        <drawtext name="headerfonts" x="0" y="{posy(plugins)} + {height(plugins)} + 10" font="{regular}" fontsize="6%" color="{fontdefault}" text="{tr(usedfonts)}:" />
        <loop name="fonts" x="0" y="{posy(headerfonts)} + {height(headerfonts)}" orientation="vertical" columnwidth="{areawidth}/2" rowheight="{areaheight}*0.04">
            <drawtext condition="{fonts[installed]}" x="0" valign="center" font="{regular}" fontsize="4%" color="{fontdefault}" text="{fonts[name]} ({tr(installed)})" />
            <drawtext condition="not{fonts[installed]}" x="0" valign="center" font="{regular}" fontsize="4%" color="{fontdefault}" text="{fonts[name]} ({tr(notinstalled)})" />
        </loop>

        <loop name="screenshots" x="0" y="{posy(fonts)} + {height(fonts)}" orientation="vertical" columnwidth="{areawidth}" rowheight="{areawidth}*10/16">
            <drawtext name="desc" align="center" y="0" font="{regular}" fontsize="6%" color="{fontdefault}" text="{screenshots[desc]}" />
            <drawimage imagetype="image" path="{screenshots[path]}" align="center" y="{height(desc)}+10" width="{areawidth}*0.95" height="{areawidth} * 0.95 * 9 / 16"/>
        </loop>
    </tab>    
</menuplugin>