<menutimers x="0" y="0" width="100%" height="100%" fadetime="0" scaletvx="33%" scaletvy="10%" scaletvwidth="65%" scaletvheight="80%">
    <scrollbar>
        <area x="30%" y="11%" width="2%" height="78%" layer="2">
            <fill color="{clrBorder}" />
            <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="{clrProgressbar}" />
        </area>
    </scrollbar>

    <menuitems x="{areawidth}*0.005" y="10%" orientation="vertical" width="99%" height="80%" align="center" numlistelements="10">
        <!-- Available Variables channels menu listelement:
        {title}             Title of Timer
        {timerstart}        Start Time of Timer in hh::mm
        {timerstop}         End Time of Timer in hh::mm
        {day}               Day (numerical)
        {dayname}           Day, for repeating timers days where timer is active
        {channelname}       Name of channel which is set for the timer
        {channelid}         ID of channel which is set for the timer (for dispalying channel logo)
        {channelnumber}     Number of channel which is set for the timer
        {eventtitle}        Title of corresponding event
        {eventstart}        Start Time of corresponding event in hh::mm
        {eventstop}         Stop Time of corresponding event in hh::mm
        {current}           true if item is currently selected
        {flagactive}        true if timer is active
        {flaginstant}       true if timer is an instant timer
        {flagvps}           true if timer uses VPS
        {flagrecording}     true if is recording currently
        {flagpending}       true if timer is pending
        -->
        <listelement>
            <!-- background and foreground-->
            <area x="0" width="28%" layer="2">
                <drawimage condition="not{current}" imagetype="skinpart" path="menubutton" x="0" y="1%" width="{areawidth}" height="{areaheight}*0.98"/>
                <drawimage condition="{current}" imagetype="skinpart" path="menubuttonactive" x="0" y="1%" width="{areawidth}" height="{areaheight}*0.98"/>
            </area>
            <!-- channel logo -->
            <area x="5" width="6%" layer="3">
                <drawimage imagetype="channellogo" path="{channelid}" x="0" width="100%" height="100%" valign="center" />
            </area>
            <!-- datetime and icons -->
            <area x="1%" width="28%" layer="3">
                <drawtext condition="not{current}" x="22%" y="5" font="{vdrOsd}" fontsize="40%" color="{clrFontMenuItem}" text="{dayname} {day}. {timerstart} - {timerstop}" />
                <drawtext condition="{current}" x="22%" y="5" font="{vdrOsd}" fontsize="40%" color="{clrFontMenuItemSelected}" text="{dayname} {day}. {timerstart} - {timerstop}" />
                <drawimage condition="{flagactive}" imagetype="icon" path="ico_timer_active" x="{areawidth} - 0.5*{areaheight} - 20" y="0" width="0.5*{areaheight}" height="0.5*{areaheight}" />
                <drawimage condition="not{flagactive}" imagetype="icon" path="ico_timer_inactive" x="{areawidth} - 0.5*{areaheight} - 20" y="0" width="0.5*{areaheight}" height="0.5*{areaheight}" />
                <drawimage condition="{flagrecording}" name="active" imagetype="icon" path="ico_timer_recording" x="{areawidth} - {areaheight} - 20" y="0" width="0.5*{areaheight}" height="0.5*{areaheight}" />
            </area>
            <!-- Timer Name -->
            <areascroll scrollelement="timername" mode="forthandback" orientation="horizontal" delay="1000" scrollspeed="medium" x="7%" width="20%" layer="3">
                <drawtext condition="not{current}" name="timername" x="0" y="50%" font="{vdrOsd}" fontsize="50%" color="{clrFontMenuItem}" text="{title}" />
                <drawtext condition="{current}" name="timername" x="0" y="50%" font="{vdrOsd}" fontsize="50%" color="{clrFontMenuItemSelected}" text="{title}" />
            </areascroll>
        </listelement>
        <!-- additional element which is drawn for current element -->
        <!-- Available Variables channels menu currentelement:
        {title}             Title of Timer
        {timerstart}        Start Time of Timer in hh::mm
        {timerstop}         End Time of Timer in hh::mm
        {day}               Day (numerical)
        {dayname}           Day, for repeating timers days where timer is active
        {channelname}       Name of channel which is set for the timer
        {channelid}         ID of channel which is set for the timer (for dispalying channel logo)
        {channelnumber}     Number of channel which is set for the timer
        {eventtitle}        Title of corresponding event
        {eventstart}        Start Time of corresponding event in hh::mm
        {eventstop}         Stop Time of corresponding event in hh::mm
        {eventshorttext}    Short Text corresponding event
        {eventdescription}  Description corresponding event
        {hasposter}         true if a scraped poster is available for event
        {posterwidth}       width of scraped poster
        {posterheight}      height of scraped poster
        {posterpath}        absolute path of scraped poster
        {flagactive}        true if timer is active
        {flaginstant}       true if timer is an instant timer
        {flagvps}           true if timer uses VPS
        {flagrecording}     true if is recording currently
        {flagpending}       true if timer is pending
        -->
        <currentelement delay="500" fadetime="300">
            <area x="32%" y="2%" width="67%" height="96%" layer="2">
                <fill color="{clrTransBlack}" />
            </area>
            <area condition="{flagactive}" x="32%" y="2%" width="67%" height="96%" layer="2">
                <!-- title -->
                <drawtext name="title" align="center" y="0" font="{vdrOsd}" width="{areawidth}-20" fontsize="8%" color="{clrWhite}" text="{eventtitle} - {eventshorttext}" />
                <!-- start and stop if event is not running -->
                <drawtext x="10" y="9%" font="{vdrOsd}" fontsize="6%" color="{clrWhite}" text="{dayname} {eventstart} - {eventstop}, {channelname}" />
                <!-- scraper poster -->
                <drawimage condition="{hasposter}" name="poster" imagetype="image" path="{posterpath}" x="{areawidth} - {areawidth}/4" y="17%" width="{areawidth}/4" height="{areawidth}/4 * {posterheight} / {posterwidth}"/>
                <!-- description -->
                <drawtextbox condition="{hasposter}" x="10" y="{posy(poster)}" width="99%" height="{areaheight} - {posy(poster)}" float="topright" floatwidth="{width(poster)} + 10" floatheight="{height(poster)} + 20" font="{vdrOsd}" fontsize="5%" color="{clrWhite}" text="{eventdescription}" />
                <drawtextbox condition="not{hasposter}" x="10" y="{posy(poster)}" width="99%" height="{areaheight} - {posy(poster)}" font="{vdrOsd}" fontsize="5%" color="{clrWhite}" text="{eventdescription}" />
            </area>
            <area condition="not{flagactive}" x="32%" y="2%" width="67%" height="96%" layer="2">
                <drawtext x="10" y="0" font="{vdrOsd}" fontsize="8%" color="{clrWhite}" text="{channelname}" />
                <drawtext x="10" y="10%" font="{vdrOsd}" fontsize="6%" color="{clrWhite}" text="{timerstart} - {timerstop}" />
            </area>
        </currentelement>
        
    </menuitems>

</menutimers>