<menurecordings 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 recordings menu listelement:
        {name}                  Name of recording
        {date}                  Date of recording
        {time}                  Time of recording
        {duration}              real duration of recording in minutes
        {durationevent}         duration of corresponding event in minutes
        {current}               true if item is currently selected
        {new}                   true if recording is new
        {cutted}                true if recording is cutted
        {folder}                true if item is a folder
        {numrecordingsfolder}   if item is a folder, number of recordings in this folder
        {newrecordingsfolder}   if item is a folder, number of new recordings in this folder
        {hasposterthumbnail}    true if a scraped poster thumbnail is available for recording
        {thumbnailbwidth}       width of scraped poster thumbnail
        {thumbnailheight}       height of scraped poster thumbnail
        {thumbnailpath}         absolute path of scraped poster thumbnail
        -->
        <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>
            <!-- Folders -->
            <area condition="{folder}" x="1%" width="27%" layer="3">
                <drawimage name="foldericon" imagetype="icon" path="ico_recfolder" x="0" width="0.9*{areaheight} * 92 / 136" height="0.9*{areaheight}" valign="center" />
            </area>
            <areascroll condition="{folder}" scrollelement="foldername" mode="forthandback" orientation="horizontal" delay="1000" scrollspeed="medium" x="5%" width="23%" layer="3">
                <drawtext condition="not{current}" name="foldername" x="0" valign="center" font="{vdrOsd}" fontsize="50%" color="{clrFontMenuItem}" text="{name} ({numrecordingsfolder}, {newrecordingsfolder} new)" />
                <drawtext condition="{current}" name="foldername" x="0" valign="center" font="{vdrOsd}" fontsize="50%" color="{clrFontMenuItemSelected}" text="{name} ({numrecordingsfolder}, {newrecordingsfolder} new)" />
            </areascroll>
            <!-- Recording -->
            <area condition="{hasposterthumbnail}++not{folder}" x="1%" width="4%" layer="3">
                <drawimage imagetype="image" path="{thumbnailpath}" x="0" width="0.9*{areaheight} * {thumbnailbwidth} / {thumbnailheight}" height="0.9*{areaheight}" valign="center" />
            </area>
            <areascroll condition="not{folder}" scrollelement="recname" mode="forthandback" orientation="horizontal" delay="1000" scrollspeed="medium" x="5%" width="23%" layer="3">
                <drawtext condition="not{current}" name="recname" x="0" y="5" font="{vdrOsd}" fontsize="50%" color="{clrFontMenuItem}" text="{name}" />
                <drawtext condition="{current}" name="recname" x="0" y="5" font="{vdrOsd}" fontsize="50%" color="{clrFontMenuItemSelected}" text="{name}" />
            </areascroll>
            <area condition="not{folder}" x="5%" width="23%" layer="3">
                <drawtext condition="not{current}" x="0" y="55%" font="{vdrOsd}" fontsize="40%" color="{clrFontMenuItem}" text="{date} {time}" />
                <drawtext condition="{current}" x="0" y="55%" font="{vdrOsd}" fontsize="40%" color="{clrFontMenuItemSelected}" text="{date} {time}" />
                <drawimage condition="{new}" name="new" imagetype="icon" path="ico_recnew" x="{areawidth} - {areaheight}/2 - 5" y="50%" width="{areaheight}*4/10" height="{areaheight}*4/10" />
                <drawimage condition="{new}++{cutted}" imagetype="icon" path="ico_cutted" x="{areawidth} - {areaheight} - 10" y="50%" width="{areaheight}*4/10" height="{areaheight}*4/10" />
                <drawimage condition="not{new}++{cutted}" imagetype="icon" path="ico_cutted" x="{areawidth} - {areaheight}/2 - 5" y="50%" width="{areaheight}*4/10" height="{areaheight}*4/10"  />
            </area>
        </listelement>
        <!-- additional element which is drawn for current element -->
        <!-- Available Variables channels menu currentelement:
        {name}                  Name of recording
        {shorttext}             Short Text of recording
        {description}           Descrption of recording        
        {date}                  Date of recording
        {time}                  Time of recording
        {duration}              real duration of recording in minutes
        {durationevent}         duration of corresponding event in minutes
        {new}                   true if recording is new
        {cutted}                true if recording is cutted
        {folder}                true if item is a folder
        {numrecordingsfolder}   if item is a folder, number of recordings in this folder
        {newrecordingsfolder}   if item is a folder, number of new recordings in this folder
        {hasposter}             true if a scraped poster is available for recording
        {posterwidth}           width of scraped poster
        {posterheight}          height of scraped poster
        {posterpath}            absolute path of scraped poster
        -->
        <currentelement delay="500" fadetime="300">
            <area x="32%" y="2%" width="67%" height="96%" layer="2">
                <fill color="{clrTransBlack}" />
                <!-- header -->
                <drawtext name="title" x="1%" y="0" width="98%" font="{vdrOsd}" fontsize="8%" color="{clrWhite}" text="{name}" />
                <drawtext name="shorttext" x="1%" y="{height(title)}" width="98%" font="{vdrOsd}" fontsize="6%" color="{clrWhite}" text="{shorttext}" />
                <drawtext name="datetime" x="1%" y="{posy(shorttext)} + {height(shorttext)}" font="{vdrOsd}" fontsize="5%" color="{clrWhite}" text="{date} {time}, {duration} min" />
                <!-- scraper poster -->
                <drawimage condition="{hasposter}" name="poster" imagetype="image" path="{posterpath}" x="3*{areawidth}/4" y="{posy(datetime)} + {height(datetime)} + 20" width="{areawidth}/4" height="{areawidth}/4 * {posterheight} / {posterwidth}"/>
                <!-- description -->
                <drawtextbox condition="{hasposter}" x="1%" y="{posy(poster)}" width="98%" height="{areaheight} - {posy(poster)}" float="topright" floatwidth="{width(poster)} + 10" floatheight="{height(poster)} + 10" font="{vdrOsd}" fontsize="5%" color="{clrWhite}" text="{description}" />
                <drawtextbox condition="not{hasposter}" x="1%" y="{posy(poster)}" width="98%" height="{areaheight} - {posy(poster)}" font="{vdrOsd}" fontsize="5%" color="{clrWhite}" text="{description}" />
            </area>
        </currentelement>
    </menuitems>

</menurecordings>