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

<displayreplay x="0" y="0" width="100%" height="100%" fadetime="{fadetime}" shifttime="{shifttime}" shifttype="bottom" shiftmode="slowed">

    <background>
        <area x="0" y="75%" width="100%" height="25%" layer="1">
            <drawimage imagetype="skinpart" path="background_displaychannel" x="0" y="0" width="100%" height="100%" />
        </area>
    </background>

    <backgroundmodeonly>
        <area x="60%" y="85%" width="40%" height="15%" layer="1">
            <fill color="{replayback}" />
        </area>
    </backgroundmodeonly>

    <datetime>
        <area x="75%" y="75%" width="13%" height="6%" layer="2">
            <drawtext align="right" y="0" fontsize="{areaheight}*{replaydatetimesize}/100" font="{regular}" color="{fontdefault}" text="{daynameshort} {day}.{monthnameshort}" />
        </area>
    </datetime>

    <time>
        <area x="89%" y="75%" width="11%" height="6%" layer="2">
            <drawtext name="clock" x="0" y="0" fontsize="{areaheight}*{replaydatetimesize}/100" font="{regular}" color="{fontdefault}" text="{hour}:{printf('%02d', min)}" />
            <drawtext name="clocksec" x="{posx(clock)} + {width(clock)}" y="{height(clock)} - {height(clocksec)} - 1" fontsize="{areaheight}*{replaydatetimesize}*0.8/100" font="{regular}" color="{fontdefault}" text=":{printf('%02d', sec)}" />
        </area>
    </time>

    <scrapercontent>
        <area condition="{hasposter}" x="0" y="75%" width="12%" height="25%" layer="2">
            <drawimage imagetype="image" path="{posterpath}" align="center" valign="center" width="90%" height="90%"/>
        </area>
        <area condition="not{hasposter}" x="0" y="75%" width="12%" height="25%" layer="2">
            <drawimage imagetype="icon" path="recording" align="center" valign="center" width="90%" height="90%"/>
        </area>
    </scrapercontent>

    <rectitle>
        <area x="12%" y="75%" width="63%" height="6%" layer="2">
            <drawtext name="title" x="0" y="0" fontsize="{areaheight}*{replaytitlesize}/100" font="{regular}" color="{fontdefault}" text="{rectitle}" />
            <drawtext condition="isset{title} ++ isset{recsubtitle}" x="{width(title)}" y="0" fontsize="{areaheight}*{replaytitlesize}/100" font="{regular}" color="{fontdefault}" text=" - {recsubtitle}" />
        </area>
    </rectitle>

    <recinfo>
        <area x="70%" y="96%" width="29%" height="4%" layer="2">
            <!-- Widescreen -->
            <drawrectangle condition="{isWideScreen}" x="{areawidth} - {areaheight}*16/9" y="0" width="{areaheight}*16/9" height="{areaheight}" color="{icontextactive}" />
            <drawrectangle condition="not{isWideScreen}" x="{areawidth} - {areaheight}*16/9" y="0" width="{areaheight}*16/9" height="{areaheight}" color="{icontextinactive}" />
            <drawrectangle x="{areawidth} - {areaheight}*16/9 + 1" y="1" width="{areaheight}*16/9 - 2" height="{areaheight} - 2" color="00000000" />
            <drawtext name="wide" condition="{isWideScreen}" x="{areawidth} - {areaheight}*16/9 + {areaheight}*16/9/2 - {width(wide)}/2" valign="center" fontsize="70%" font="{regular}" color="{icontextactive}" text="WIDE" />
            <drawtext condition="not{isWideScreen}" x="{areawidth} - {areaheight}*16/9 + {areaheight}*16/9/2 - {width(wide)}/2" valign="center" fontsize="70%" font="{regular}" color="{icontextinactive}" text="WIDE" />
            <!-- Resolution -->
            <drawrectangle x="{areawidth} - 2*{areaheight}*16/9 - 3" y="0" width="{areaheight}*16/9" height="{areaheight}" color="{icontextactive}" />
            <drawrectangle x="{areawidth} - 2*{areaheight}*16/9 - 3 + 1" y="1" width="{areaheight}*16/9 - 2" height="{areaheight} - 2" color="00000000" />
            <drawtext name="sd576i" condition="strequal({resolution}, 'sd576i')" x="{areawidth} - 2*{areaheight}*16/9 - 3 + {areaheight}*16/9/2 - {width(sd576i)}/2" valign="center" fontsize="70%" font="{regular}" color="{icontextactive}" text="576i" />
            <drawtext name="hd720p" condition="strequal({resolution}, 'hd720p')" x="{areawidth} - 2*{areaheight}*16/9 - 3 + {areaheight}*16/9/2 - {width(sd576i)}/2" valign="center" fontsize="70%" font="{regular}" color="{icontextactive}" text="720p" />
            <drawtext name="hd1080i" condition="strequal({resolution}, 'hd1080i')" x="{areawidth} - 2*{areaheight}*16/9 - 3 + {areaheight}*16/9/2 - {width(hd1080i)}/2" valign="center" fontsize="70%" font="{regular}" color="{icontextactive}" text="1080i" />
            <drawtext name="sd480i" condition="strequal({resolution}, 'sd480i')" x="{areawidth} - 2*{areaheight}*16/9 - 3 + {areaheight}*16/9/2 - {width(sd576i)}/2" valign="center" fontsize="70%" font="{regular}" color="{icontextactive}" text="480i" />
            <!-- SD / HD -->
            <drawrectangle x="{areawidth} - 3*{areaheight}*16/9 - 6" y="0" width="{areaheight}*16/9" height="{areaheight}" color="{icontextactive}" />
            <drawrectangle x="{areawidth} - 3*{areaheight}*16/9 - 6 + 1" y="1" width="{areaheight}*16/9 - 2" height="{areaheight} - 2" color="00000000" />
            <drawtext name="enc" condition="{isHD}" x="{areawidth} - 3*{areaheight}*16/9 - 6 + {areaheight}*16/9/2 - {width(enc)}/2" valign="center" fontsize="70%" font="{regular}" color="{icontextactive}" text="HDTV" />
            <drawtext name="fta" condition="not{isHD}" x="{areawidth} - 3*{areaheight}*16/9 - 6 + {areaheight}*16/9/2 - {width(fta)}/2" valign="center" fontsize="70%" font="{regular}" color="{icontextactive}" text="SDTV" />
        </area>
    </recinfo>

    <currenttime>
        <area x="12%" y="86%" width="15%" height="5%" layer="2">
            <drawtext x="0" y="0" fontsize="{areaheight}*{replaycurrenttotaltimesize}/100" font="{regular}" color="{fontdefault}" text="{reccurrent}" />
        </area>
    </currenttime>

    <totaltime>
        <area x="80%" y="86%" width="19%" height="5%" layer="2">
            <drawtext condition="not{timeshift}" align="right" y="0" fontsize="{areaheight}*{replaycurrenttotaltimesize}/100" font="{regular}" color="{fontdefault}" text="{rectotal}" />
            <drawtext condition="{timeshift}" align="right" y="0" font="{regular}" fontsize="{areaheight}*{replaycurrenttotaltimesize}/100" color="{fontdefault}" text="{timeshifttotal} ({rectotal})" />
        </area>
    </totaltime>

    <endtime>
        <area x="80%" y="90%" width="19%" height="5%" layer="2">
            <drawtext align="right" y="0" fontsize="{areaheight}*{replayendtimesize}/100" font="{regular}" color="{fontdefault}" text="{tr(end)}: {recend}" />
        </area>
    </endtime>

    <progressbar>
        <area background="true" x="12%" y="83%" width="87%" height="3%" layer="2">
            <fill color="{progressbarback}" />
        </area>
        <area condition="not{timeshift}" x="12%" y="83%" width="87%" height="3%" layer="3">
            <drawrectangle x="0" y="0" width="{areawidth}*{current}/{total}" height="100%" color="{progressbar}" />
        </area>
        <area condition="{timeshift}" x="12%" y="83%" width="87%" height="3%" layer="3">
            <drawrectangle x="0" y="0" width="{total}/{timeshifttotal}*{areawidth}" height="{areaheight}" color="{progressbartimeshift}" />
            <drawrectangle x="0" y="0" width="{current}/{timeshifttotal}*{areawidth}" height="{areaheight}" color="{progressbar}" />
        </area>
    </progressbar>

    <cutmarks>
        <area condition="not{timeshift}" x="12%" y="83%" width="87%" height="3%" layer="4">
            <loop name="marks" x="0" y="0" orientation="absolute">
                <!-- draw mark -->
                <drawrectangle x="{marks[position]}/{marks[total]}*{areawidth}-2" y="0" width="4" height="100%" color="{cutmark}" />
                <drawrectangle condition="{marks[startmark]}" x="{marks[position]}/{marks[total]}*{areawidth}" y="0" width="5" height="2" color="{cutmark}" />
                <drawrectangle condition="{marks[startmark]}" x="{marks[position]}/{marks[total]}*{areawidth}" y="{areaheight}-2" width="5" height="2" color="{cutmark}" />
                <drawrectangle condition="not{marks[startmark]}" x="{marks[position]}/{marks[total]}*{areawidth}-5" y="0" width="5" height="2" color="{cutmark}" />
                <drawrectangle condition="not{marks[startmark]}" x="{marks[position]}/{marks[total]}*{areawidth}-5" y="{areaheight}-2" width="5" height="2" color="{cutmark}" />
                <!-- draw bar to next mark if mark is startmark-->                
                <drawrectangle condition="{marks[startmark]}" x="{marks[position]}/{marks[total]}*{areawidth}" y="30%" width="{marks[endposition]}/{marks[total]}*{areawidth} - {marks[position]}/{marks[total]}*{areawidth}" height="40%" color="{cutmark}" />
            </loop>
        </area>
    </cutmarks>

    <controlicons>
        <area x="30%" y="90%" width="40%" height="7%" layer="3">
            <drawimage condition="not{rewind} ++ not{rewind1x} ++ not{rewind2x} ++ not{rewind3x}" imagetype="icon" path="rec_rew_inactive" x="{areawidth}/2 - 2*{areaheight} - 6" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{rewind}" imagetype="icon" path="rec_rew_active" x="{areawidth}/2 - 2*{areaheight} - 6" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{rewind1x}" imagetype="icon" path="rec_rew_x1" x="{areawidth}/2 - 2*{areaheight} - 6" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{rewind2x}" imagetype="icon" path="rec_rew_x2" x="{areawidth}/2 - 2*{areaheight} - 6" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{rewind3x}" imagetype="icon" path="rec_rew_x3" x="{areawidth}/2 - 2*{areaheight} - 6" y="0" width="{areaheight}" height="{areaheight}"/>
            
            <drawimage condition="not{pause}" imagetype="icon" path="rec_pause_inactive" x="{areawidth}/2 - {areaheight} - 2" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{pause}" imagetype="icon" path="rec_pause_active" x="{areawidth}/2 - {areaheight} - 2" y="0" width="{areaheight}" height="{areaheight}"/>

            <drawimage condition="not{play}" imagetype="icon" path="rec_play_inactive" x="{areawidth}/2 +  2" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{play}" imagetype="icon" path="rec_play_active" x="{areawidth}/2 + 2" y="0" width="{areaheight}" height="{areaheight}"/>

            <drawimage condition="not{forward} ++ not{forward1x} ++ not{forward2x} ++ not{forward3x}" imagetype="icon" path="rec_fwd_inactive" x="{areawidth}/2 + {areaheight} + 6" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{forward}" imagetype="icon" path="rec_fwd_active" x="{areawidth}/2 + {areaheight} + 6" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{forward1x}" imagetype="icon" path="rec_fwd_x1" x="{areawidth}/2 + {areaheight} + 6" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{forward2x}" imagetype="icon" path="rec_fwd_x2" x="{areawidth}/2 + {areaheight} + 6" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{forward3x}" imagetype="icon" path="rec_fwd_x3" x="{areawidth}/2 + {areaheight} + 6" y="0" width="{areaheight}" height="{areaheight}"/>
        </area>
    </controlicons>

    <controliconsmodeonly>
        <area x="85%" y="85%" width="15%" height="15%" layer="2">
            <drawimage condition="{rewind}" imagetype="icon" path="rec_rew_active" x="{areawidth} - {areaheight}" valign="center" width="{areaheight}*0.8" height="{areaheight}*0.8"/>
            <drawimage condition="{rewind1x}" imagetype="icon" path="rec_rew_x1" x="{areawidth} - {areaheight}" valign="center" width="{areaheight}*0.8" height="{areaheight}*0.8"/>
            <drawimage condition="{rewind2x}" imagetype="icon" path="rec_rew_x2" x="{areawidth} - {areaheight}" valign="center" width="{areaheight}*0.8" height="{areaheight}*0.8"/>
            <drawimage condition="{rewind3x}" imagetype="icon" path="rec_rew_x3" x="{areawidth} - {areaheight}" valign="center" width="{areaheight}*0.8" height="{areaheight}*0.8"/>
            <drawimage condition="{pause}++not{forward1x}" imagetype="icon" path="rec_pause_active" x="{areawidth} - {areaheight}" valign="center" width="{areaheight}*0.8" height="{areaheight}*0.8"/>
            <drawimage condition="{play}" imagetype="icon" path="rec_play_active" x="{areawidth} - {areaheight}" valign="center" width="{areaheight}*0.8" height="{areaheight}*0.8"/>
            <drawimage condition="{forward}" imagetype="icon" path="rec_fwd_active" x="{areawidth} - {areaheight}" valign="center" width="{areaheight}*0.8" height="{areaheight}*0.8"/>
            <drawimage condition="{forward1x}" imagetype="icon" path="rec_fwd_x1" x="{areawidth} - {areaheight}" valign="center" width="{areaheight}*0.8" height="{areaheight}*0.8"/>
            <drawimage condition="{forward2x}" imagetype="icon" path="rec_fwd_x2" x="{areawidth} - {areaheight}" valign="center" width="{areaheight}*0.8" height="{areaheight}*0.8"/>
            <drawimage condition="{forward3x}" imagetype="icon" path="rec_fwd_x3" x="{areawidth} - {areaheight}" valign="center" width="{areaheight}*0.8" height="{areaheight}*0.8"/>
        </area>
    </controliconsmodeonly>

    <progressmodeonly>
        <area x="64%" y="88%" width="28%" height="5%" layer="2">
            <drawtext x="0" valign="center" font="{regular}" fontsize="90%" color="{fontdefault}" text="{timecurrent} ({timetotal})" />
        </area>
        <area x="64%" y="{areaheight}*0.935" width="20%" height="{areaheight}*0.02" layer="2">
            <fill color="{progressbarback}" />
            <drawrectangle x="1" y="1" width="{areawidth}*{current}/{total} - {current}/{total}" height="{areaheight}-2" color="{progressbar}" />
        </area>
    </progressmodeonly>

    <jump>
        <area x="22%" y="86%" width="15%" height="4%" layer="2">
            <drawtext align="center" valign="center" font="{regular}" fontsize="80%" color="{fontdefault}" text="{jump}" />
        </area>
    </jump>
    
    <message>
        <area x="10%" y="80%" width="80%" height="15%" layer="6">
            <fill color="{messageback}" />
        </area>
        <area x="10%" y="80%" width="80%" height="15%" layer="7">
            <drawimage condition="{status}" imagetype="icon" path="info" width="{areaheight}*0.8" height="80%" x="5%" valign="center" />
            <drawimage condition="{info}" imagetype="icon" path="info" width="{areaheight}*0.8" height="80%" x="5%" valign="center" />
            <drawimage condition="{warning}" imagetype="icon" path="warning" width="{areaheight}*0.8" height="80%" x="5%" valign="center" />
            <drawimage condition="{error}" imagetype="icon" path="error" width="{areaheight}*0.8" height="80%" x="5%" valign="center" />
            <drawtext align="center" valign="center" fontsize="{areaheight}*{messagemenusize}/100" font="{regular}" color="{fontdefault}" text="{text}" />
        </area>      
    </message>

    <onpause delay="60" fadetime="300">
        <area x="0" y="0" width="100%" height="100%" layer="7">
            <fill color="{replayback}" />
            <drawtext align="center" valign="center" font="{regular}" fontsize="20%" color="{fontdefault}" text="Pause" />
        </area>
    </onpause>

    <onpausemodeonly delay="30" fadetime="0">
        <area x="0" y="0" width="100%" height="100%" layer="7">
            <fill color="{replayback}" />
            <drawtext align="center" valign="center" font="{regular}" fontsize="20%" color="{fontdefault}" text="Pause" />
        </area>
    </onpausemodeonly>

</displayreplay>
