<menuschedules x="0" y="0" width="100%" height="100%" fadetime="0">
    <header>
        <area x="0" y="0" width="38%" height="10%" layer="2">
            <drawimage condition="{whatsonnow}||{whatsonnext}||{whatsonfavorites}" name="menuicon" imagetype="menuicon" path="{icon}" x="5" valign="center" width="{areaheight}*8/10" height="80%"/>
            <drawtext condition="{whatsonnow}||{whatsonnext}||{whatsonfavorites}" x="{width(menuicon)} + 15" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{title}" />
            <drawimage name="logo" condition="{whatson}" imagetype="channellogo" path="{channelid}" x="0" width="15%" height="100%" align="left" valign="center" />
            <drawtext condition="{whatson}" x="{width(logo)}+20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{channelnumber} - {channelname}" />
        </area>
    </header>

    <menuitems x="0" y="10%" orientation="vertical" width="100%" height="82%" align="center" numlistelements="16">
        <listelement>
            <!-- Background -->
            <area x="1%" width="58%" layer="2">
                <fill condition="not{current}" color="{clrTransparent}" />
                <fill condition="{current}" color="{clrTransBlueLight}" />
                <fill condition="{separator}" color="{clrSemiTransBlack}" />
            </area>
            <!-- WHATSON -->
            <areacontainer x="1%" width="58%" condition="not{separator}++{whatson}">
                <areascroll condition="not{running}" scrollelement="menutext" mode="forthandback" orientation="horizontal" delay="1000" scrollspeed="medium" layer="3">
                    <drawtext name="menutext" x="20" valign="center" font="{light}" fontsize="95%" color="{clrWhite}" text="{start} {title}" />
                </areascroll>
                <areascroll condition="{running}" scrollelement="menutext" mode="forthandback" orientation="horizontal" delay="1000" scrollspeed="medium" width="80%" layer="3">
                    <drawtext name="menutext" x="20" valign="center" font="{light}" fontsize="95%" color="{clrWhite}" text="{start} {title}" />
                </areascroll>
                <area layer="3">
                    <drawimage condition="{timerfull}" imagetype="icon" path="ico_activetimer" x="{areawidth} - 0.9*{areaheight} - 10" width="0.9*{areaheight}" height="0.9*{areaheight}" valign="center" />
                    <drawimage condition="{timerpartitial}" imagetype="icon" path="ico_activetimer" x="{areawidth} - 0.5*{areaheight} - 10" width="0.5*{areaheight}" height="0.5*{areaheight}" valign="center" />
                    <drawrectangle condition="{running}" x="{areawidth}*0.85 - 10" y="{areaheight}/3" width="{areawidth}*0.15" height="{areaheight}/3" color="{clrWhite}" />
                    <drawrectangle condition="{running}" x="{areawidth}*0.85 - 8" y="{areaheight}/3 + 2" width="{areawidth}*0.15 - 4" height="{areaheight}/3 - 4" color="{clrTransparent}" />
                    <drawrectangle condition="{running}" x="{areawidth}*0.85 - 6" y="{areaheight}/3 + 4" width="{areawidth}*0.15 * {elapsed} / {duration} - 8" height="{areaheight}/3 - 8" color="{clrWhite}" />
                </area>
            </areacontainer>
            <!-- WHATSONNOW -->
            <areacontainer condition="not{separator}++{whatsonnow}">
                <area x="1%" width="6%" layer="3">
                    <drawimage name="logo" imagetype="channellogo" path="{channelid}" x="0" width="100%" height="100%" valign="center" />
                </area>
                <area condition="{running}" x="8%" width="7%" layer="3">
                    <drawrectangle condition="{current}" x="0" y="{areaheight}/3" width="{areawidth}" height="{areaheight}/3" color="{clrWhite}" />
                    <drawrectangle condition="not{current}" x="0" y="{areaheight}/3" width="{areawidth}" height="{areaheight}/3" color="{clrTransBlueLight}" />
                    <drawrectangle x="2" y="{areaheight}/3 + 2" width="{areawidth} - 4" height="{areaheight}/3 - 4" color="{clrTransparent}" />
                    <drawrectangle x="4" y="{areaheight}/3 + 4" width="{areawidth} * {elapsed} / {duration} - 8" height="{areaheight}/3 - 8" color="{clrWhite}" />
                </area>
                <area condition="{timerfull}" x="53%" width="6%" layer="4">
                    <drawimage imagetype="icon" path="ico_activetimer" x="{areawidth} - 0.9*{areaheight} - 10" width="0.9*{areaheight}" height="0.9*{areaheight}" valign="center" />
                </area>
                <area condition="{timerpartitial}" x="53%" width="6%" layer="5">
                    <drawimage imagetype="icon" path="ico_activetimer" x="{areawidth} - 0.5*{areaheight} - 10" width="0.5*{areaheight}" height="0.5*{areaheight}" valign="center" />
                </area>
                <areascroll scrollelement="menutext" mode="forthandback" orientation="horizontal" delay="1000" scrollspeed="medium" x="15%" width="44%" layer="4">
                    <drawtext name="menutext" x="10" valign="center" font="{light}" fontsize="95%" color="{clrWhite}" text="{start} {title}" />
                </areascroll>
            </areacontainer>
            <!-- WHATSONNEXT -->
            <areacontainer condition="not{separator}++{whatsonnext}">
                <area x="1%" width="6%" layer="3">
                    <drawimage name="logo" imagetype="channellogo" path="{channelid}" x="0" width="100%" height="100%" valign="center" />
                </area>
                <area condition="{timerfull}" x="53%" width="6%" layer="4">
                    <drawimage imagetype="icon" path="ico_activetimer" x="{areawidth} - 0.9*{areaheight} - 10" width="0.9*{areaheight}" height="0.9*{areaheight}" valign="center" />
                </area>
                <area condition="{timerpartitial}" x="53%" width="6%" layer="5">
                    <drawimage imagetype="icon" path="ico_activetimer" x="{areawidth} - 0.5*{areaheight} - 10" width="0.5*{areaheight}" height="0.5*{areaheight}" valign="center" />
                </area>
                <areascroll scrollelement="menutext" mode="forthandback" orientation="horizontal" delay="1000" scrollspeed="medium" x="7%" width="52%" layer="4">
                    <drawtext name="menutext" x="10" valign="center" font="{light}" fontsize="95%" color="{clrWhite}" text="{start} {title}" />
                </areascroll>
            </areacontainer>
            <!-- WHATSONFAVORITES -->
            <areacontainer condition="not{separator}++{whatsonfavorites}">
                <area x="1%" width="6%" layer="3">
                    <drawimage name="logo" imagetype="channellogo" path="{channelid}" x="0" width="100%" height="100%" valign="center" />
                </area>
                <area condition="{timerfull}" x="53%" width="6%" layer="4">
                    <drawimage imagetype="icon" path="ico_activetimer" x="{areawidth} - 0.9*{areaheight} - 10" width="0.9*{areaheight}" height="0.9*{areaheight}" valign="center" />
                </area>
                <area condition="{timerpartitial}" x="53%" width="6%" layer="5">
                    <drawimage imagetype="icon" path="ico_activetimer" x="{areawidth} - 0.5*{areaheight} - 10" width="0.5*{areaheight}" height="0.5*{areaheight}" valign="center" />
                </area>
                <areascroll scrollelement="menutext" mode="forthandback" orientation="horizontal" delay="1000" scrollspeed="medium" x="7%" width="52%" layer="4">
                    <drawtext name="menutext" x="10" valign="center" font="{light}" fontsize="95%" color="{clrWhite}" text="{start} {title}" />
                </areascroll>
            </areacontainer>
            <!-- Separator -->
            <area condition="{separator}" x="0" width="68%" layer="3">
                <drawtext x="20" valign="center" font="{light}" fontsize="95%" color="{clrBlueLight}" text="{title}" />
            </area>
        </listelement>
        <currentelement fadetime="300">
            <area condition="{whatson}" x="63%" y="0" width="36%" height="100%" layer="5">
                <!-- title -->
                <drawtext align="center" y="0" font="{semibold}" width="{areawidth}-20" fontsize="8%" color="{clrWhite}" text="{title}" />
                <!-- progress bar if event is running -->
                <drawtext condition="{running}" name="start" x="{areawidth}/4 - {width(start)}" y="{areaheight}/16 + 20" font="{light}" fontsize="{areaheight}/18" color="{clrWhite}" text="{start}" />
                <drawtext condition="{running}" name="stop" x="{areawidth}*3/4" y="{areaheight}/16 + 20" font="{light}" fontsize="{areaheight}/18" color="{clrWhite}" text="{stop}" />
                <drawrectangle condition="{running}" x="{areawidth}/4+10" y="{areaheight}/16 + 20 + {areaheight}/36" width="{areawidth}/2 - 20" height="1" color="{clrWhite}" />
                <drawrectangle condition="{running}" x="{areawidth}/4+10" y="{areaheight}/16 + 20 + {areaheight}/36 -2" width="{areawidth}/2 * {elapsed} / {duration} - 20 * {elapsed} / {duration}" height="5" color="{clrWhite}" />
                <!-- start and stop if event is not running -->
                <drawtext condition="not{running}" x="10" y="{areaheight}/18 + 20" font="{light}" fontsize="{areaheight}/20" color="{clrWhite}" text="{start} - {stop} ({duration} min)" />
                <!-- scraper poster -->
                <drawimage condition="{hasposter}" name="poster" imagetype="image" path="{posterpath}" x="10" y="{posy(start)} + {height(start)} + 20" width="{areawidth}/3" height="{areawidth}/3 * {posterheight} / {posterwidth}"/>
                <!-- description -->
                <drawtextbox condition="{hasposter}" x="10" y="{posy(poster)}" width="99%" height="{areaheight} - {posy(poster)}" float="topleft" floatwidth="{width(poster)} + 10" floatheight="{height(poster)} + 20" font="{light}" fontsize="{areaheight}/20" color="{clrWhite}" text="{description}" />
                <drawtextbox condition="not{hasposter}" x="10" y="{posy(poster)}" width="{areawidth} - 20" height="{areaheight} - {posy(poster)}" font="{light}" fontsize="{areaheight}/20" color="{clrWhite}" text="{description}" />
            </area>
            <areacontainer condition="{whatsonnow}||{whatsonnext}||{whatsonfavorites}">
                <area x="63%" y="0" width="36%" height="85%" layer="2">
                    <!-- title -->
                    <drawtext align="center" y="0" font="{semibold}" width="{areawidth}-20" fontsize="10%" color="{clrWhite}" text="{title}" />
                    <!-- progress bar if event is running -->
                    <drawtext condition="{running}" name="start" x="{areawidth}/4 - {width(start)}" y="{areaheight}/16 + 15" font="{light}" fontsize="{areaheight}/15" color="{clrWhite}" text="{start}" />
                    <drawtext condition="{running}" name="stop" x="{areawidth}*3/4" y="{areaheight}/16 + 15" font="{light}" fontsize="{areaheight}/15" color="{clrWhite}" text="{stop}" />
                    <drawrectangle condition="{running}" x="{areawidth}/4+10" y="{areaheight}/16 + 15 + {areaheight}/30" width="{areawidth}/2 - 20" height="1" color="{clrWhite}" />
                    <drawrectangle condition="{running}" x="{areawidth}/4+10" y="{areaheight}/16 + 15 + {areaheight}/30 -2" width="{areawidth}/2 * {elapsed} / {duration} - 20 * {elapsed} / {duration}" height="5" color="{clrWhite}" />
                    <!-- start and stop if event is not running -->
                    <drawtext condition="not{running}" x="10" y="{areaheight}/18 + 15" font="{light}" fontsize="{areaheight}/20" color="{clrWhite}" text="{start} - {stop} ({duration} min)" />
                    <!-- scraper poster -->
                    <drawimage condition="{hasposter}" name="poster" imagetype="image" path="{posterpath}" x="10" y="{posy(start)} + {height(start)} + 10" width="{areawidth}/3" height="{areawidth}/3 * {posterheight} / {posterwidth}"/>
                    <!-- description -->
                    <drawtextbox condition="{hasposter}" x="10" y="{posy(poster)}" width="99%" height="{areaheight} - {posy(poster)}" float="topleft" floatwidth="{width(poster)} + 10" floatheight="{height(poster)} + 10" font="{light}" fontsize="{areaheight}/18" color="{clrWhite}" text="{description}" />
                    <drawtextbox condition="not{hasposter}" x="10" y="{posy(poster)}" width="99%" height="{areaheight} - {posy(poster)}" font="{light}" fontsize="{areaheight}/18" color="{clrWhite}" text="{description}" />
                </area>
                <areascroll mode="forthandback" orientation="vertical" delay="1000" scrollspeed="medium" x="63%" y="85%" width="36%" height="15%" layer="2">
                    <drawtext x="10" y="0" font="{semibold}" fontsize="30%" color="{clrWhite}" text="Next Schedules:" />
                    <loop name="schedule" x="0" y="{areaheight}/4 + 5" orientation="vertical">
                        <drawtext x="10" font="{light}" width="{areawidth}-20" fontsize="30%" color="{clrWhite}" text="{schedule[start]} {schedule[title]}" />
                    </loop>
                </areascroll>
            </areacontainer>
        </currentelement>
    </menuitems>
    
</menuschedules>
