<?variable-resolver class="org.zkoss.spring.DelegatingVariableResolver"?>
<zk>
    <window id="areaenvironmentalenvelopewindow" use="org.ala.spatial.analysis.web.AreaEnvironmentalEnvelope"
    apply="org.ala.spatial.analysis.web.AreaEnvironmentalEnvelope" 
    width="400px" xmlns:n="http://www.zkoss.org/2005/zk/native"
    style="position:absolute;left:20px;top:20px" draggable="false">
        <n:div class="left-cover" />
        <n:div class="fancybox-bg" id="fancybox-bg-ne" />
        <n:div class="fancybox-bg" id="fancybox-bg-se" />
        <n:div class="fancybox-bg" id="fancybox-bg-sw" />
        <n:div class="fancybox-bg" id="fancybox-bg-nw" />
        <n:div class="fancybox-bg" id="fancybox-bg-n" />
        <n:div class="fancybox-bg" id="fancybox-bg-e" />
        <n:div class="fancybox-bg" id="fancybox-bg-s" />
        <n:div class="fancybox-bg" id="fancybox-bg-w" />
        <a sclass="fancybox-close" onClick="areaenvironmentalenvelopewindow.onClick$btnCancel(null)" style="display: inline" />

        <caption label="Environmental Envelope" />

        <vbox>
            <div>
                <hbox width="100%">
                    <label value="Area name" sclass="h3" />
                    <textbox id="txtLayerName" width="250px"/>
                </hbox>
            </div>
            <label value="Search for a layer to add" />
            <combobox id="cbEnvLayers" use="org.ala.spatial.analysis.web.EnvLayersCombobox" autodrop="true" width="350px" >
                <comboitem label=""/>
            </combobox>
            <label sclass="exampleText">e.g. Annual Mean Temperature</label>
            <separator />
            <separator />
            <button style="float:left" id="btnClearSelection" label="Clear layers" sclass="goButton" />
                <listbox id="lbSelLayers" multiple="false" checkmark="false" height="300px" >
                    <listhead>
                        <listheader label="Layer" width="40%" ></listheader>
                        <listheader>
                            <label value="Envelope extent" width="40%"></label>
                        </listheader>
                        <listheader width="20%">
                            <vbox>
                                <label value="Species"></label>
                                <label value="count"></label>
                            </vbox>
                        </listheader>
                    </listhead>
                    <listfoot>
                        <listfooter span="3">
                            <div id="popup_continous" visible="false" width="100%" >

                                <label sclass="word-wrap"
                                       style="white-space: normal; font-weight:bold"
                                       value="edit envelope for this layer" id="label_continous"
                                       multiline="true"/>

                                <vbox width="100%">
                                    <hbox><label value="Full layer extent"/><label id="popup_range"/></hbox>
                                    <hbox>
                                        <slider id="popup_slider_min" slidingtext="">
                                        </slider>
                                        <doublebox id="popup_minimum" width="80px"></doublebox>
                                    </hbox>

                                    <hbox>
                                        <slider id="popup_slider_max" slidingtext="">
                                        </slider>
                                        <doublebox id="popup_maximum" width="80px"></doublebox>
                                        <textbox id="popup_idx" visible="false"></textbox>
                                    </hbox>
                                    <hbox>
                                        <button label="Update species count" id="apply_continous" sclass="goButton" autodisable="self"/>
                                        <button label="Remove" id="remove_continous" sclass="goButton" />
                                    </hbox>
                                </vbox>
                            </div>
                        </listfooter>
                    </listfoot>
                </listbox>
                <separator />
                <separator />
            </vbox>
        <div style="float:right;margin-right:5px">
            <hbox>                
                <button sclass="goButton" label="Cancel" id="btnCancel" onClick="areaenvironmentalenvelopewindow.detach()"/>
                <button label="Next" id="filter_done" sclass="goButton" disabled="true" autodisable="self"/>
            </hbox>
        </div>

    </window>
</zk>