<?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="{shifttimechannel}" shifttype="bottom" shiftmode="slowed">
    <background>
        <!-- background infobar -->
        <area x="0" y="80%" width="100%" height="20%" layer="1">
            <fill color="{clrTransBlack}" />
        </area>
    </background>

    <backgroundmodeonly>
        <!-- background small infobar -->
        <area x="25%" y="85%" width="50%" height="10%" layer="1">
            <fill color="{clrTransBlack}" />
        </area>
    </backgroundmodeonly>

    <datetime shifttime="0">
        <area x="70%" y="0" width="30%" height="13%" layer="1">
            <fill color="{clrTransBlack}" />
            <drawrectangle x="0" y="0" width="45%" height="100%" color="{clrTransBlueLight}" />
        </area>
        <area x="70%" y="0" width="13%" height="13%" layer="2">
            <drawtext align="right" y="0" font="{light}" fontsize="50%" color="{clrWhite}" text="{dayname}" />
            <drawtext align="right" y="48%" font="{light}" fontsize="50%" color="{clrWhite}" text="{day}. {monthnameshort}" />
        </area>
        <area x="85%" y="0" width="13%" height="13%" layer="2">
            <drawtext align="center" valign="center" font="{light}" fontsize="100%" color="{clrWhite}" text="{time}" />
        </area>
    </datetime>

    <scrapercontent shifttime="0">
        <area condition="{isbanner}" x="0" y="0" width="{areaheight}*0.13*{mediawidth}/{mediaheight}" height="13%" layer="2">
            <drawimage imagetype="image" path="{mediapath}" align="center" valign="center"  width="{areawidth}" height="{areaheight}"/>
        </area>
        <area condition="not{isbanner}" x="0" y="0" width="{areaheight}*0.5*{mediawidth}/{mediaheight}" height="50%" layer="2">
            <drawimage imagetype="image" path="{mediapath}" x="5" y="5" width="{areawidth}-10" height="{areaheight}-10"/>
        </area>
    </scrapercontent>

    <rectitle>
        <area x="1%" y="80%" width="69%" height="8%" layer="2">
            <drawtext x="0" name="title" valign="center" width="{areawidth}" font="{semibold}" fontsize="85%" color="{clrBlueLight}" text="{rectitle}" />
            <drawtext x="{width(title)}+10" valign="center" width="{areawidth}-{width(title)}-10" font="{light}" fontsize="85%" color="{clrWhite}" text="{recsubtitle}" />
        </area>
    </rectitle>

    <recinfo>
        <area x="70%" y="80%" width="29%" height="8%" layer="2">
           <!-- widescreen icon -->
            <drawimage name="widescreen" condition="{isWideScreen}" imagetype="icon" path="ico_widescreen_on" x="{areawidth} - {width(widescreen)}" valign="center" width="{areaheight}*0.8*1.87" height="{areaheight}*0.8"/>
            <drawimage condition="not{isWideScreen}" imagetype="icon" path="ico_widescreen_off" x="{areawidth} - {width(widescreen)}" valign="center" width="{areaheight}*0.8*1.87" height="{areaheight}*0.8"/>
            <!-- hd/sd icon -->
            <drawimage name="hd" condition="{isHD}" imagetype="icon" path="ico_hd_on" x="{posx(widescreen)} - 15 - {width(hd)}" valign="center" width="{areaheight}*0.8*2.04" height="{areaheight}*0.8"/>
            <drawimage condition="not{isHD}" imagetype="icon" path="ico_hd_off" x="{posx(widescreen)} - 15 - {width(hd)}" valign="center" width="{areaheight}*0.8*2.04" height="{areaheight}*0.8"/>
            <!-- screenresolution text -->
            <drawtext name="reslabel" x="{posx(hd)} - 30 - {width(reslabel)}" valign="center" font="{light}" fontsize="60%" color="{clrWhite}" text="{screenwidth}x{screenheight}" />
        </area>
    </recinfo>

    <currenttime>
        <area x="1%" y="92%" width="30%" height="7%" layer="2">
            <drawtext x="0" valign="center" font="{light}" fontsize="100%" color="{clrTransBlueLight}" text="{reccurrent}" />
        </area>
    </currenttime>

    <totaltime>
        <area x="69%" y="92%" width="30%" height="7%" layer="2">
            <drawtext condition="not{timeshift}" align="right" valign="center" font="{light}" fontsize="100%" color="{clrWhite}" text="{rectotal}" />
            <drawtext condition="{timeshift}" align="right" valign="center" font="{light}" fontsize="100%" color="{clrWhite}" text="{timeshifttotal} ({rectotal})" />
        </area>
    </totaltime>

    <endtime>
        <area x="63%" y="92%" width="20%" height="7%" layer="2">
            <drawtext align="center" valign="bottom" font="{light}" fontsize="60%" color="{clrWhite}" text="{tr(endsat)}: {recend}" />
        </area>
    </endtime>
    
    <progressbar>
        <area condition="not{timeshift}" x="5%" y="89%" width="90%" height="3%" layer="2">
            <fill color="{clrDarkGray}" />
            <drawrectangle x="0" y="0" width="{current}/{total}*{areawidth}" height="100%" color="{clrTransBlueLight}" />
        </area>
        <area condition="{timeshift}" x="5%" y="89%" width="90%" height="3%" layer="2">
            <fill color="{clrDarkGray}" />
            <drawrectangle x="0" y="0" width="{total}/{timeshifttotal}*{areawidth}" height="100%" color="{clrTransWhite}" />
            <drawrectangle x="0" y="0" width="{current}/{timeshifttotal}*{areawidth}" height="100%" color="{clrTransBlueLight}" />
        </area>
    </progressbar>

    <cutmarks>
        <area condition="not{timeshift}" x="5%" y="89%" width="90%" height="3%" layer="3">
            <loop name="marks" x="0" y="0" orientation="absolute">
                <!-- draw mark -->
                <drawrectangle condition="not{marks[active]}" x="{marks[position]}/{marks[total]}*{areawidth}" y="0" width="1" height="100%" color="{clrWhite}" />
                <drawrectangle condition="not{marks[active]} ++ {marks[startmark]}" x="{marks[position]}/{marks[total]}*{areawidth}" y="0" width="5" height="1" color="{clrWhite}" />
                <drawrectangle condition="not{marks[active]} ++ {marks[startmark]}" x="{marks[position]}/{marks[total]}*{areawidth}" y="{areaheight}-1" width="5" height="1" color="{clrWhite}" />
                <drawrectangle condition="not{marks[active]} ++ not{marks[startmark]}" x="{marks[position]}/{marks[total]}*{areawidth} - 5" y="0" width="5" height="1" color="{clrWhite}" />
                <drawrectangle condition="not{marks[active]} ++ not{marks[startmark]}" x="{marks[position]}/{marks[total]}*{areawidth} - 5" y="{areaheight}-1" width="5" height="1" color="{clrWhite}" />
                <!-- draw active mark -->
                <drawrectangle condition="{marks[active]}" x="{marks[position]}/{marks[total]}*{areawidth}" y="0" width="1" height="100%" color="{clrRed}" />
                <drawrectangle condition="{marks[active]} ++ {marks[startmark]}" x="{marks[position]}/{marks[total]}*{areawidth}" y="0" width="5" height="1" color="{clrRed}" />
                <drawrectangle condition="{marks[active]} ++ {marks[startmark]}" x="{marks[position]}/{marks[total]}*{areawidth}" y="{areaheight}-1" width="5" height="1" color="{clrRed}" />
                <drawrectangle condition="{marks[active]} ++ not{marks[startmark]}" x="{marks[position]}/{marks[total]}*{areawidth} - 5" y="0" width="5" height="1" color="{clrRed}" />
                <drawrectangle condition="{marks[active]} ++ not{marks[startmark]}" x="{marks[position]}/{marks[total]}*{areawidth} - 5" y="{areaheight}-1" width="5" height="1" color="{clrRed}" />
                <!-- 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="{clrWhite}" />
            </loop>
        </area>
        <area condition="{timeshift}" x="5%" y="89%" width="90%" height="3%" layer="3">
            <loop name="marks" x="0" y="0" orientation="absolute">
                <!-- draw mark -->
                <drawrectangle condition="not{marks[active]}" x="{marks[position]}/{marks[timeshifttotal]}*{areawidth}" y="0" width="1" height="100%" color="{clrWhite}" />
                <drawrectangle condition="not{marks[active]} ++ {marks[startmark]}" x="{marks[position]}/{marks[timeshifttotal]}*{areawidth}" y="0" width="5" height="1" color="{clrWhite}" />
                <drawrectangle condition="not{marks[active]} ++ {marks[startmark]}" x="{marks[position]}/{marks[timeshifttotal]}*{areawidth}" y="{areaheight}-1" width="5" height="1" color="{clrWhite}" />
                <drawrectangle condition="not{marks[active]} ++ not{marks[startmark]}" x="{marks[position]}/{marks[timeshifttotal]}*{areawidth} - 5" y="0" width="5" height="1" color="{clrWhite}" />
                <drawrectangle condition="not{marks[active]} ++ not{marks[startmark]}" x="{marks[position]}/{marks[timeshifttotal]}*{areawidth} - 5" y="{areaheight}-1" width="5" height="1" color="{clrWhite}" />
                <!-- draw active mark -->
                <drawrectangle condition="{marks[active]}" x="{marks[position]}/{marks[timeshifttotal]}*{areawidth}" y="0" width="1" height="100%" color="{clrRed}" />
                <drawrectangle condition="{marks[active]} ++ {marks[startmark]}" x="{marks[position]}/{marks[timeshifttotal]}*{areawidth}" y="0" width="5" height="1" color="{clrRed}" />
                <drawrectangle condition="{marks[active]} ++ {marks[startmark]}" x="{marks[position]}/{marks[timeshifttotal]}*{areawidth}" y="{areaheight}-1" width="5" height="1" color="{clrRed}" />
                <drawrectangle condition="{marks[active]} ++ not{marks[startmark]}" x="{marks[position]}/{marks[timeshifttotal]}*{areawidth} - 5" y="0" width="5" height="1" color="{clrRed}" />
                <drawrectangle condition="{marks[active]} ++ not{marks[startmark]}" x="{marks[position]}/{marks[timeshifttotal]}*{areawidth} - 5" y="{areaheight}-1" width="5" height="1" color="{clrRed}" />
                <!-- draw bar to next mark if mark is startmark-->                
                <drawrectangle condition="{marks[startmark]}" x="{marks[position]}/{marks[timeshifttotal]}*{areawidth}" y="30%" width="{marks[endposition]}/{marks[timeshifttotal]}*{areawidth} - {marks[position]}/{marks[timeshifttotal]}*{areawidth}" height="40%" color="{clrWhite}" />
            </loop>
        </area>
    </cutmarks>

    <controlicons>
        <area x="30%" y="93%" width="40%" height="7%" layer="3">
            <drawimage condition="not{rewind} ++ not{rewind1x} ++ not{rewind2x} ++ not{rewind3x}" imagetype="icon" path="ico_rew_off" x="{areawidth}/2 - 2*{areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{rewind}" imagetype="icon" path="ico_rew" x="{areawidth}/2 - 2*{areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{rewind1x}" imagetype="icon" path="ico_rew_1x" x="{areawidth}/2 - 2*{areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{rewind2x}" imagetype="icon" path="ico_rew_2x" x="{areawidth}/2 - 2*{areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{rewind3x}" imagetype="icon" path="ico_rew_3x" x="{areawidth}/2 - 2*{areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            
            <drawimage condition="not{pause}" imagetype="icon" path="ico_pause_off" x="{areawidth}/2 - {areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{pause}" imagetype="icon" path="ico_pause" x="{areawidth}/2 - {areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>

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

            <drawimage condition="not{forward} ++ not{forward1x} ++ not{forward2x} ++ not{forward3x}" imagetype="icon" path="ico_ff_off" x="{areawidth}/2 + {areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{forward}" imagetype="icon" path="ico_ff" x="{areawidth}/2 + {areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{forward1x}" imagetype="icon" path="ico_ff_1x" x="{areawidth}/2 + {areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{forward2x}" imagetype="icon" path="ico_ff_2x" x="{areawidth}/2 + {areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{forward3x}" imagetype="icon" path="ico_ff_3x" x="{areawidth}/2 + {areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
        </area>
    </controlicons>

    <controliconsmodeonly>
        <area x="25%" y="85%" width="50%" height="10%" layer="3">
            <drawimage condition="not{rewind} ++ not{rewind1x} ++ not{rewind2x} ++ not{rewind3x}" imagetype="icon" path="ico_rew_off" x="{areawidth}/2 - 2*{areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{rewind}" imagetype="icon" path="ico_rew" x="{areawidth}/2 - 2*{areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{rewind1x}" imagetype="icon" path="ico_rew_1x" x="{areawidth}/2 - 2*{areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{rewind2x}" imagetype="icon" path="ico_rew_2x" x="{areawidth}/2 - 2*{areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{rewind3x}" imagetype="icon" path="ico_rew_3x" x="{areawidth}/2 - 2*{areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            
            <drawimage condition="not{pause}" imagetype="icon" path="ico_pause_off" x="{areawidth}/2 - {areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{pause}" imagetype="icon" path="ico_pause" x="{areawidth}/2 - {areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>

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

            <drawimage condition="not{forward} ++ not{forward1x} ++ not{forward2x} ++ not{forward3x}" imagetype="icon" path="ico_ff_off" x="{areawidth}/2 + {areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{forward}" imagetype="icon" path="ico_ff" x="{areawidth}/2 + {areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{forward1x}" imagetype="icon" path="ico_ff_1x" x="{areawidth}/2 + {areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{forward2x}" imagetype="icon" path="ico_ff_2x" x="{areawidth}/2 + {areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
            <drawimage condition="{forward3x}" imagetype="icon" path="ico_ff_3x" x="{areawidth}/2 + {areaheight}" y="0" width="{areaheight}" height="{areaheight}"/>
        </area>
    </controliconsmodeonly>

    <jump>
        <area x="35%" y="45%" width="30%" height="10%" layer="1">
            <fill color="{clrTransBlack}" />
        </area>
        <area x="35%" y="45%" width="30%" height="10%" layer="2">
            <drawtext align="center" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{jump}" />
        </area>
    </jump>

    <onpause delay="30" fadetime="{fadetime}">
        <area x="0" y="0" width="100%" height="100%" layer="7">
            <fill color="{clrSemiTransBlack}" />
        </area>
    </onpause>

    <onpausemodeonly delay="20" fadetime="{fadetime}">
        <area x="0" y="0" width="100%" height="100%" layer="6">
            <fill color="{clrSemiTransBlack}" />
        </area>
        <area x="0" y="0" width="100%" height="100%" layer="7">
            <drawtext align="center" valign="center" font="{semibold}" fontsize="25%" color="{clrWhite}" text="{tr(pause)}" />
            <drawimage condition="{isseries}" imagetype="image" path="{seriesbanner1path}" align="center" y="10" width="{areawidth}*0.5" height="{areawidth} * 0.5 * {seriesbanner1height} / {seriesbanner1width}"/>
            <drawimage condition="{ismovie}" imagetype="image" path="{posterpath}" x="10" y="10" width="{areaheight} * 0.4  * {posterwidth} / {posterheight}" height="{areaheight} * 0.4"/>
        </area>
    </onpausemodeonly>

    <message>
        <area x="10%" y="45%" width="80%" height="10%" layer="1">
            <fill color="{clrTransBlack}" />
            <drawrectangle condition="{status}" x="20" y="0" width="20" height="100%" color="{clrGreen}" />
            <drawrectangle condition="{info}" x="20" y="0" width="20" height="100%" color="{clrBlue}" />
            <drawrectangle condition="{warning}" x="20" y="0" width="20" height="100%" color="{clrYellow}" />
            <drawrectangle condition="{error}" x="20" y="0" width="20" height="100%" color="{clrRed}" />
            <drawtext align="center" valign="center" width="{areawidth} - 80" font="{light}" fontsize="40%" color="{clrWhite}" text="{text}" />
        </area>
    </message>
</displayreplay>
