<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE mythuitheme SYSTEM "http://www.mythtv.org/schema/mythuitheme.dtd">
<mythuitheme>
    <!-- A gallery button showing a picture, video or folder -->
    <window name="gallery">

        <textarea name="heading" from="base_heading">
            <value>Image Gallery</value>
        </textarea>

        <shape name="help-instr-backdrop" from="base_backdrop">
            <area>0,36,1280,40</area>
            <type>box</type>
        </shape>

        <shape name="help-instr-top-line" from="base_line">
            <area>0,37,1280,2</area>
        </shape>

        <shape name="help-instr-bottom-line" from="base_line">
            <area>0,73,1280,2</area>
        </shape>

        <shape name="arrows-backdrop" from="base_backdrop">
            <area>1215,697,50,20</area>
        </shape>

        <!--shows path to current image -->
        <textarea name="breadcrumbs">
            <area>110,39,900,34</area>
            <font>basesmallyellow</font>
            <cutdown>no</cutdown>
            <scroll direction="horizontal" startdelay="0" returndelay="0"/>
            <align>left,vcenter</align>
        </textarea>

        <!-- shows current position in grid eg '1/123' -->
        <textarea name="position" from="basetextarea">
            <area>15,39,100,34</area>
            <font>basesmall</font>
            <align>left,vcenter</align>
        </textarea>

        <!-- Mandatory: the image list 10 columns x 6 rows -->
        <buttonlist name="images0">
            <area>15,80,100%-10,100%-30</area>
            <buttonarea>0,15,100%,100%-10</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">
                    <area>0,0,10%,16%</area>
                    <shape name="buttonbackground" from="base_backdrop">
                        <area>0,0,100%,100%</area>
                    </shape>
                    <shape name="buttonbackground-line" from="base_backdrop_line">
                        <area>1%,1%,99%,99%</area>
                    </shape>
                    <!-- Shows a picture image -->
                    <imagetype name="buttonimage">
                        <area>4%,4%,96%,96%</area>
                        <preserveaspect>yes</preserveaspect>
                    </imagetype>
                    <!-- Shows a single folder image -->
                    <imagetype name="folderimage" from="buttonimage">
                    </imagetype>
                    <!-- Shows image for default folder -->
                    <imagetype name="thumbimage0" from="buttonimage">
                    </imagetype>
                    <!-- Shows a video image -->
                    <imagetype name="videoimage"  from="buttonimage">
                    </imagetype>
                    <!-- Show a background image depending on node type -->
                    <statetype name="buttontype">
                        <area>0,0,100%,100%</area>
                        <state name="subfolder">
                            <area>0,0,100%,100%</area>
                            <imagetype name="background">
                                <area>30%,30%,55%,55%</area>
                                <filename>images/folderclosed.png</filename>
                                <preserveaspect>yes</preserveaspect>
                            </imagetype>
                        </state>
                        <state name="device" from="subfolder"/>
                        <state name="image">
                            <area>0,0,100%,100%</area>
                            <imagetype name="background">
                                <area>0,0,100%,100%</area>
                                <filename>images/image_gallery_no_image</filename>
                                <alpha>64</alpha>
                            </imagetype>
                        </state>
                        <state name="video">
                            <area>0,0,50%,50%</area>
                            <imagetype name="background">
                                <area>0,0,100%,100%</area>
                                <filename>images/no_preview_with_fanart.png</filename>
                                <preserveaspect>yes</preserveaspect>
                            </imagetype>
                        </state>
                    </statetype>
                    <!-- Show how many images / directories are in this directory -->
                    <textarea name="childcount">
                        <area>0,0,100%,100%</area>
                        <font>baseextrasmall</font>
                        <align>allcenter</align>
                    </textarea>
                    <!-- Show up arrow on parent dir with ancestors -->
                    <statetype name="parenttype">
                        <area>0,0,100%,100%</area>
                        <state name="upfolder">
                            <area>0,0,100%,100%</area>
                            <imagetype name="icon">
                                <area>30%,30%,55%,55%</area>
                                <filename>images/mv_gallery_dir_up.png</filename>
                                <preserveaspect>yes</preserveaspect>
                            </imagetype>
                        </state>
                    </statetype>
                    <!-- Darken hidden files/ folders -->
                    <statetype name="buttonstate">
                        <area>0,0,100%,100%</area>
                        <state name="visible"/>
                        <state name="hidden">
                            <area>0,0,100%,100%</area>
                            <shape name="hidden_background_shape">
                                <area>0,0,100%,100%</area>
                                <type>box</type>
                                <fill color="#000000" alpha="128"/>
                            </shape>
                        </state>
                    </statetype>
                    <!-- Shows that the image was marked/selected and
                    might be manipulated with other images -->
                    <statetype name="buttoncheck">
                        <area>0,0,100%,100%</area>
                        <state type="full">
                            <area>70%,5%,76%,26%</area>
                            <shape name="marked_background">
                                <area>0,0,100%,100%</area>
                                <type>ellipse</type>
                                <fill color="#000000"/>
                            </shape>
                            <imagetype name="marked">
                                <area>4%,4%,96%,96%</area>
                                <filename>images/checkmark.png</filename>
                                <preserveaspect>no</preserveaspect>
                            </imagetype>
                        </state>
                    </statetype>
                    <shape name="buttontext-backdrop" from="base_backdrop" depends="buttontext">
                        <area>3%,97%-22,97%,22</area>
                        <type>roundbox</type>
                        <cornerradius>4</cornerradius>
                    </shape>                   
                    <textarea name="buttontext">
                        <area>2%,97%-22,97%,22</area>
                        <font>baseextrasmall</font>
                        <align>allcenter</align>
                    </textarea>
                </state>

                <state name="selectedactive" from="active">
                    <area>-8,-8,10%+16,16%+16</area>
                    <shape name="buttonbackground">
                        <area>0,0,100%,100%</area>
                        <type>roundbox</type>
                        <fill color="#101017" alpha="255" />
                        <cornerradius>8</cornerradius>
                    </shape>
                    <shape name="buttonbackground-line">
                        <area>0,0,100%,100%</area>
                        <type>roundbox</type>
                        <fill color="#000000" alpha="0" />
                        <line color="#0072bc" alpha="45" width="4" />
                        <cornerradius>8</cornerradius>
                    </shape>
                    <shape name="buttonbackground-top-highlight-line">
                        <area>8%,0,92%,4</area>
                         <type>box</type>
                        <fill style="gradient">
                            <gradient direction="horizontal" alpha="0">
                                <stop position="0" color="#0072bc" />
                                <stop position="50" color="#0072bc" alpha="180" />
                                <stop position="100" color="#0072bc" />
                            </gradient>
                        </fill>
                    </shape>
                    <shape name="buttonbackground-bottom-highlight-line" from="buttonbackground-top-highlight-line">
                        <area>8%,100%-4,92%,4</area>
                    </shape>
                    <shape name="buttonbackground-left-highlight-line">
                        <area>0,8%,4,92%</area>
                        <type>box</type>
                        <fill style="gradient">
                            <gradient alpha="0" direction="vertical">
                                <stop position="0" color="#0072bc" />
                                <stop position="50" color="#0072bc" alpha="220" />
                                <stop position="100" color="#0072bc" />
                            </gradient>
                        </fill>
                    </shape>
                    <shape name="buttonbackground-right-highlight-line" from="buttonbackground-left-highlight-line">
                        <area>100%-4,8%,4,92%</area>
                    </shape>

                    <statetype name="buttontype" depends="!parenttype">
                        <area>0,0,100%,100%</area>
                        <state name="subfolder">
                            <area>0,0,100%,100%</area>
                            <imagetype name="background">
                                <area>30%,30%,55%,55%</area>
                                <filename>images/folderopen.png</filename>
                                <preserveaspect>yes</preserveaspect>
                            </imagetype>
                        </state>
                    </statetype>

                    <!-- Show up arrow on parent dir with ancestors -->
                    <statetype name="parenttype">
                        <state name="upfolder">
                            <imagetype name="icon">
                                <filename>images/mv_gallery_dir_up_open.png</filename>
                            </imagetype>
                        </state>
                    </statetype>
                    <!-- Show how many images / directories are in this directory -->
                    <textarea name="childcount">
                        <font>baseextrasmallyellow</font>
                    </textarea>
                    <textarea name="buttontext">
                        <area>2%,97%-22,97%,22</area>
                        <font>baseextrasmallyellow</font>
                        <align>allcenter</align>
                    </textarea>
                </state>

                <state name="inactive" from="active"/>

                <state name="selectedinactive" from="active"/>
            </statetype>

            <statetype name="upscrollarrow">
                <position>1207,623</position>
                <state type="off">
                    <imagetype name="upoff">
                        <filename>images/lists_up_arrow.png</filename>
                        <alpha>80</alpha>
                    </imagetype>
                </state>
                <state type="full">
                    <imagetype name="upon">
                        <filename>images/lists_up_arrow.png</filename>
                        <alpha>200</alpha>
                    </imagetype>
                </state>
            </statetype>
            <statetype name="downscrollarrow">
                <position>1227,623</position>
                <state type="off">
                    <imagetype name="dnoff">
                        <filename>images/lists_down_arrow.png</filename>
                        <alpha>80</alpha>
                    </imagetype>
                </state>
                <state type="full">
                    <imagetype name="dnon">
                        <filename>images/lists_down_arrow.png</filename>
                        <alpha>200</alpha>
                    </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">
                    <area>0,0,12%,24%</area>
                </state>
                <state name="selectedactive">
                    <area>-8,-8,12%+16,24%+16</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">
                    <area>0,0,16%,32%</area>
                </state>
                <state name="selectedactive">
                    <area>-10,-12,16%+20,32%+20</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">
                    <area>0,0,25%,50%</area>
                </state>
                <state name="selectedactive">
                    <area>-9,-9,25%+16,50%+10</area>
                </state>
            </statetype>
        </buttonlist>

        <!-- shows a message when no images are available
             in the current directory -->
        <textarea name="noimages" from="basetextarea">
            <area>20,76,1240,589</area>
            <font>basemedium</font>
            <align>allcenter</align>
        </textarea>

        <!-- Mandatory: Shows file info overlay -->
        <buttonlist name="infolist" from="base_list">
            <area>10,80,510,100%-30</area>
            <layout>vertical</layout>
            <spacing>0</spacing>
            <scrollstyle>free</scrollstyle>
            <arrange>stack</arrange>
            <wrapstyle>items</wrapstyle>
            <align>center</align>
            <buttonarea>0,0,100%,100%</buttonarea>
            <statetype name="buttonitem">
                <state name="active">
                    <area>0,0,100%,30</area>
                    <group name="select_bar" from="base_select_bar_active_group">
                        <area>0,0,100%,100%</area>
                        <shape name="select_bar">
                            <fill color="#000000" alpha="210" />
                            <type>box</type>
                        </shape>
                    </group>
                    <textarea name="name" from="basetextarea">
                        <area>10,0,100%-10,30</area>
                        <scroll direction="left" />
                        <cutdown>yes</cutdown>
                        <template>%NAME%: %VALUE%</template>
                    </textarea>
                </state>
                <state name="selectedactive" from="active" />
                <state name="selectedinactive" from="active" />
            </statetype>
            <statetype name="upscrollarrow">
                <position>20,-15</position>
                <state type="off">
                    <imagetype name="upoff">
                        <alpha>0</alpha>
                    </imagetype>
                </state>
                <state type="full">
                    <imagetype name="upon">
                        <filename>images/lists_up_arrow.png</filename>
                        <alpha>200</alpha>
                    </imagetype>
                </state>
            </statetype>
            <statetype name="downscrollarrow">
                <position>20,100%+10</position>
                <state type="off">
                    <imagetype name="dnoff">
                        <alpha>0</alpha>
                    </imagetype>
                </state>
                <state type="full">
                    <imagetype name="dnon">
                        <filename>images/lists_down_arrow.png</filename>
                        <alpha>200</alpha>
                    </imagetype>
                </state>
            </statetype>
        </buttonlist>

        <!--Shows scan progress-->
        <group name="progress">
            <area>0,0,100%,100%</area>

            <animation trigger="AboutToShow">
                <section>
                    <alpha start="0" end="255" easingcurve="OutQuart"/>
                    <zoom start="0" end="100" easingcurve="OutQuart"/>
                </section>
            </animation>

            <animation trigger="AboutToHide">
                <section>
                    <alpha start="255" end="0" easingcurve="InQuart"/>
                    <zoom start="100" end="0" easingcurve="InQuart"/>
                </section>
            </animation>

            <shape name="osd-status-backdrop" depends="scanprogresstext">
                <area>64,624,1152,60</area>
                <type>roundbox</type>
                <fill color="#000000" alpha="140" />
                <cornerradius>8</cornerradius>
            </shape>

            <shape name="osd-status-backdrop-line" depends="scanprogresstext">
                <area>65,625,1150,58</area>
                <type>roundbox</type>
                <fill color="#000000" alpha="0" />
                <line color="#ffffff" alpha="45" width="2" />
                <cornerradius>6</cornerradius>
            </shape>

            <shape name="top-line" depends="scanprogresstext">
                <area>66,626,1148,2</area>
                <type>box</type>
                <fill style="gradient">
                    <gradient direction="horizontal" alpha="0">
                        <stop position="0" color="#ffffff" />
                        <stop position="50" color="#ffffff" alpha="120" />
                        <stop position="100" color="#ffffff" />
                    </gradient>
                </fill>
            </shape>

            <shape name="bottom-line" from="top-line" depends="scanprogresstext">
                <area>66,680,1148,2</area>
            </shape>

            <shape name="left-line" depends="scanprogresstext">
                <area>66,628,2,52</area>
                <type>box</type>
                <fill style="gradient">
                    <gradient direction="vertical" alpha="0">
                        <stop position="0" color="#ffffff" />
                        <stop position="50" color="#ffffff" alpha="180" />
                        <stop position="100" color="#ffffff" />
                    </gradient>
                </fill>
            </shape>

            <shape name="right-line" from="left-line" depends="scanprogresstext">
                <area>1212,628,2,52</area>
            </shape>

            <!-- Progress bar-->
            <progressbar name="scanprogressbar">
                <area>90,650,1100,8</area>
                <layout>horizontal</layout>
                <style>reveal</style>
                <imagetype name="background">
                    <area>0,0,100%,100%</area>
                    <filename>images/osd/progressbar_background.png</filename>
                </imagetype>
                <imagetype name="progressimage">
                    <area>0,0,100%,100%</area>
                    <filename>images/osd/progressbar_fill.png</filename>
                </imagetype>
            </progressbar>

            <!--Shows numerical scan progress-->
            <textarea name="scanprogresstext" from="basetextarea">
                <area>90,657,1100,24</area>
                <font>basesmall</font>
                <align>allcenter</align>
            </textarea>
        </group>

        <!-- shows state of type filter -->
        <textarea name="typefilter" from="basetextarea">
            <area>1100,39,100,34</area>
            <font>basesmallblue</font>
            <align>left,vcenter</align>
        </textarea>
        <textarea name="typefilterAll" from="basetextarea" depends="!typefilter">
            <value>All</value>
            <area>1100,39,100,34</area>
            <font>basesmallblue</font>
            <align>left,vcenter</align>
        </textarea>
        <textarea name="typefilterlabel" from="basetextarea">
            <value>Show:</value>
            <area>1035,39,60,34</area>
            <font>basesmallblue</font>
            <align>right,vcenter</align>
        </textarea>

        <!-- shows state of hidden filter -->
        <textarea name="hidefilter" from="basetextarea">
            <area>1185,39,80,34</area>
            <font>basesmallblue</font>
            <align>right,vcenter</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>200,0,100%-200,30</area>
            <font>basesmall</font>
            <align>hcenter,top</align>
        </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%-10,30</area>
            <font>gallerytext</font>
            <align>right, vcenter</align>
            <cutdown>no</cutdown>
            <scroll direction="horizontal"/>
        </textarea>

        <!-- Shows file info overlay -->
        <buttonlist name="infolist" from="base_list">
            <area>10,30,510,100%-30</area>
            <layout>vertical</layout>
            <spacing>1</spacing>
            <scrollstyle>free</scrollstyle>
            <arrange>stack</arrange>
            <wrapstyle>items</wrapstyle>
            <align>center</align>
            <buttonarea>0,0,100%,100%</buttonarea>
            <statetype name="buttonitem">
                <state name="active">
                    <area>0,0,100%,30</area>
                    <group name="select_bar" from="base_select_bar_active_group">
                        <area>0,0,100%,100%</area>
                    </group>
                    <textarea name="name" from="basetextarea">
                        <area>15,0,100%,30</area>
                        <cutdown>yes</cutdown>
                        <template>%NAME%: %VALUE%</template>
                    </textarea>
                </state>
                <state name="selectedactive">
                    <area>0,0,100%,64</area>
                    <shape name="select_bar_backdrop_line" from="base_backdrop_line">
                        <area>0,0,100%,100%-2</area>
                        <type>box</type>
                    </shape>
                    <group name="select_bar" from="base_select_bar_selectedactive_group">
                        <area>1,1,100%-2,100%-2</area>
                    </group>

                    <shape name="select_bar_left_line" from="base_highlight_vertical_line">
                        <area>0,0,2,100%</area>
                    </shape>
                    <shape name="select_bar_right_line" from="base_highlight_vertical_line">
                        <area>100%-4,0,2,100%</area>
                    </shape>
                    <textarea name="name" from="basetextarea">
                        <area>15,5,100%,50</area>
                        <multiline>yes</multiline>
                        <scroll direction="up" rate="20"/>
                        <template>%NAME%: %VALUE%</template>
                        <font>basesmallyellow</font>
                    </textarea>
                </state>
                <state name="selectedinactive" from="active" />
            </statetype>
            <statetype name="upscrollarrow">
                <position>20,-15</position>
                <state type="off">
                    <imagetype name="upoff">
                        <alpha>0</alpha>
                    </imagetype>
                </state>
                <state type="full">
                    <imagetype name="upon">
                        <filename>images/lists_up_arrow.png</filename>
                        <alpha>200</alpha>
                    </imagetype>
                </state>
            </statetype>
            <statetype name="downscrollarrow">
                <position>20,100%+10</position>
                <state type="off">
                    <imagetype name="dnoff">
                        <alpha>0</alpha>
                    </imagetype>
                </state>
                <state type="full">
                    <imagetype name="dnon">
                        <filename>images/lists_down_arrow.png</filename>
                        <alpha>200</alpha>
                    </imagetype>
                </state>
            </statetype>
        </buttonlist>

    </window>

</mythuitheme>