<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE mythuitheme SYSTEM "http://www.mythtv.org/schema/mythuitheme.dtd">
<mythuitheme>

    <window name="gallery">

        <!--shows path to current image -->
        <textarea name="breadcrumbs" from="basetextarea">
            <area>15,5,100%-170,30</area>
            <font>title</font>
            <cutdown>no</cutdown>
            <scroll direction="horizontal" startdelay="0" returndelay="0"/>
        </textarea>

        <!-- shows the name of the folder or image -->
        <textarea name="caption" from="basetextarea">
            <area>15,30,100%-100,30</area>
            <font>title</font>
            <cutdown>no</cutdown>
            <scroll direction="horizontal" startdelay="0" returndelay="0"/>
        </textarea>

        <!-- shows current position in grid eg '1/123' -->
        <textarea name="position" from="basetextarea">
            <area>100%-170,5,155,30</area>
            <font>title</font>
            <align>right</align>
        </textarea>

        <!-- Mandatory: the image list 10 columns x 6 rows -->
        <buttonlist name="images0">
            <area>10,30,100%-10,100%-30</area>
            <buttonarea>0,25,100%,100%</buttonarea>
            <wrapstyle>flowing</wrapstyle>
            <layout>grid</layout>
            <arrange>fixed</arrange>
            <align>allcenter</align>
            <spacing>0</spacing>  <!-- (100% - 10*10%) / (10-1) or 0% -->
            <statetype name="buttonitem">
                <area>0,0,100%,100%</area>
                <state name="active" from="galleryactivebutton">
                    <area>0,0,10%,16%</area>
                </state>
                <state name="selectedactive" from="galleryselectedbutton">
                    <area>0,0,10%,16%</area>
                </state>
                <state name="inactive" from="active"/>
                <state name="selectedinactive" from="active"/>
            </statetype>
            <statetype name="upscrollarrow">
                <position>100%-70,5</position>
                <state type="off">
                    <imagetype name="upon">
                        <filename>lb-uparrow-reg.png</filename>
                    </imagetype>
                </state>
                <state type="full">
                    <imagetype name="upoff">
                        <filename>lb-uparrow-sel.png</filename>
                    </imagetype>
                </state>
            </statetype>

            <!-- Show the arrow image that indicates that there are
                more images below -->
            <statetype name="downscrollarrow">
                <position>100%-30,5</position>
                <state type="off">
                    <imagetype name="dnon">
                        <filename>lb-dnarrow-reg.png</filename>
                    </imagetype>
                </state>
                <state type="full">
                    <imagetype name="dnoff">
                        <filename>lb-dnarrow-sel.png</filename>
                    </imagetype>
                </state>
            </statetype>

        </buttonlist>

        <!-- the image list 8 columns x 4 rows -->
        <buttonlist name="images1" from="images0">
            <spacing>7</spacing>  <!-- (100% - 8*12%) / (8-1) or 0.57% -->
            <statetype name="buttonitem">
                <state name="active" from="galleryactivebutton">
                    <area>0,0,12%,24%</area>
                </state>
                <state name="selectedactive" from="galleryselectedbutton">
                    <area>0,0,12%,24%</area>
                </state>
            </statetype>
        </buttonlist>

        <!-- the image list 6 columns x 3 rows -->
        <buttonlist name="images2" from="images0">
            <spacing>10</spacing>  <!-- (100% - 6*16%) / (6-1) or 0.8% -->
            <statetype name="buttonitem">
                <state name="active" from="galleryactivebutton">
                    <area>0,0,16%,32%</area>
                </state>
                <state name="selectedactive" from="galleryselectedbutton">
                    <area>0,0,16%,32%</area>
                </state>
            </statetype>
        </buttonlist>

        <!-- the image list 4 columns x 2 rows -->
        <buttonlist name="images3" from="images0">
            <spacing>0</spacing>  <!-- (100% - 4*25%) / (4-1) or 0% -->
            <statetype name="buttonitem">
                <state name="active" from="galleryactivebutton">
                    <area>0,0,25%,50%</area>
                </state>
                <state name="selectedactive" from="galleryselectedbutton">
                    <area>0,0,25%,50%</area>
                </state>
            </statetype>
        </buttonlist>

        <!-- shows a message when no images are available
             in the current directory -->
         <textarea name="noimages" from="basetextarea">
             <area>0,0,100%,100%</area>
             <align>allcenter</align>
             <multiline>yes</multiline>
         </textarea>

      <!-- Mandatory: Shows file info overlay -->
        <buttonlist name="infolist" from="galleryinfolist">
            <drawfrombottom>true</drawfrombottom>
        </buttonlist>

        <!--Shows scan progress-->
        <group name="progress">
            <area>0,0,100%,100%</area>
            <animation trigger="AboutToShow">
                <section duration="2000">
                    <alpha start="0" end="255" easingcurve="OutQuad"/>
                </section>
            </animation>
            <animation trigger="AboutToHide">
                <section duration="2000">
                    <alpha start="255" end="0" easingcurve="InQuad"/>
                </section>
            </animation>
            <!-- Progress bar-->
            <progressbar name="scanprogressbar" from="baseprogressbar">
                <area>20%,100%-28,75%,28</area>
                <imagetype name="background">
                    <area>0,0,100%,100%</area>
                </imagetype>
                <imagetype name="progressimage">
                    <area>0,0,100%,100%</area>
                </imagetype>
            </progressbar>
            <!--Shows numerical scan progress-->
            <textarea name="scanprogresstext" from="basetextarea">
                <area>20%,100%-29,75%,30</area>
                <align>center</align>
            </textarea>
        </group>

        <!-- shows state of type filter -->
        <textarea name="typefilter" from="basetextarea">
            <area>15,100%-29,180,30</area>
            <align>vcenter</align>
        </textarea>

        <!-- shows state of hidden filter -->
        <textarea name="hidefilter" from="basetextarea">
            <area>100%-180,100%-29,165,30</area>
            <align>vcenter,right</align>
        </textarea>

    </window>

    <!-- Gallery Slideshow window which shows the a single image only or a slideshow. -->
    <window name="slideshow">

        <!-- Extra small text for Gallery images -->
        <fontdef name="gallerytext" from="basesmall">
            <outlinecolor>#000000</outlinecolor>
            <outlinesize>2</outlinesize>
        </fontdef>

        <!-- the background behind the images -->
        <shape name="background_shape">
            <area>0,0,100%,100%</area>
            <fill color="#000000" alpha="255"/>
        </shape>

        <!-- an image  -->
        <imagetype name="image">
            <area>0,0,100%,100%</area>
            <preserveaspect>yes</preserveaspect>
        </imagetype>

        <!-- Represents "Show Captions" state for use as a dependancy by other widgets
         Set = Hide; empty = Show  -->
        <textarea name="hidecaptions" from="basetextarea">
            <area>0,0,0,0</area>
        </textarea>

        <!-- End/Loading/Failed to load status -->
        <textarea name="status" from="basetextarea" depends="!hidecaptions">
            <area>10,0,100%-200,30</area>
            <font>gallerytext</font>
        </textarea>

        <!-- Slide count -->
        <textarea name="slidecount" from="basetextarea" depends="!hidecaptions">
            <area>100%-200,0,190,30</area>
            <font>gallerytext</font>
            <align>right, vcentre</align>
        </textarea>

        <!-- Date/Comment -->
        <textarea name="caption" from="basetextarea" depends="!hidecaptions">
            <area>10,100%-28,100%-20,30</area>
            <font>gallerytext</font>
            <align>centre, vcentre</align>
            <cutdown>no</cutdown>
            <scroll direction="horizontal"/>
        </textarea>

      <!-- Shows file info overlay -->
        <buttonlist name="infolist" from="galleryinfolist"/>

    </window>

</mythuitheme>


