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

<displayvolume x="20%" y="75%" width="60%" height="10%" fadetime="{fadeTime}">

    <background>
    </background>

    <!-- Available Variables volume:
    {volume}                            current volume, range from 0 to 255
    {volumepercent}                     current volume in %
    {maxvolume}                         maximal volume
    {mute}                              true if volume is muted
    -->
    <volume>
        <!-- Background -->
        <area x="0" y="0" width="100%" height="100%" layer="1" transparency="20">
            <drawimage imagetype="skinpart" path="displayvolume" x="0" y="0" width="100%" height="100%"/>
        </area>
        <!-- Header -->
        <area x="0" y="3%" width="100%" height="40%" layer="2">
            <drawtext x="10" valign="center" font="{vdrOsd}" fontsize="100%" color="{clrWhite}" text="{tr(volume)}: {volumepercent}%" />
            <drawimage condition="not{mute}" imagetype="icon" path="ico_volume" x="{areawidth} - 2*{areaheight}" y="5" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{mute}" imagetype="icon" path="ico_mute" x="{areawidth} - 2*{areaheight}" y="5" width="{areaheight}" height="{areaheight}"/>
        </area>
        <!-- Volumebar Background -->
        <area x="4%" y="60%" width="92%" height="30%" layer="2">
            <drawellipse x="0" y="0" width="{areaheight}" height="{areaheight}" color="{clrBlack}" quadrant="0" />
            <drawellipse x="1" y="1" width="{areaheight}-2" height="{areaheight}-2" color="{clrProgressbar}" quadrant="0" />
            <drawellipse x="{areawidth}-{areaheight}" y="0" width="{areaheight}" height="{areaheight}" color="{clrBlack}" quadrant="0" />
            <drawrectangle x="{areaheight}/2" y="0" width="{areawidth} - {areaheight}" height="{areaheight}" color="{clrBlack}" />
        </area>
        <!-- Volumebar -->
        <area x="5%" y="60%" width="91%" height="30%" layer="3">
            <drawrectangle x="1" y="1" width="{volume}/{maxvolume}*{areawidth} - {volume}/{maxvolume}*{areaheight}/2" height="{areaheight}-2" color="{clrProgressbar}" />
            <drawellipse x="{volume}/{maxvolume}*{areawidth} - {volume}/{maxvolume}*{areaheight}/2" y="1" width="{areaheight}/2 - 2" height="{areaheight}-2" color="{clrProgressbar}" quadrant="5" />
        </area>        
    </volume>

</displayvolume>
