<project name="slice-impl">
    <!--
    Uses the compiler to generate a special theme-only scss file containing
    rules for all framework / package / app components.  This is then used
    by the slicer example page to capture theme sprites
    -->
    <target name="-compile-slicer-sass" depends="-init-compiler">
        <x-normalize-path 
            path="${build.dir}/resources" 
            property="image.search.path"/>
        
        <x-compile refid="${compiler.ref.id}">
            <![CDATA[
                restore
                    page
                and
                include
                    -all
                and
                sass
                    +class-name-vars
                    +etc
                    +vars
                    +rules
                    -variable=$image-search-path:'${image.search.path}'
                    -variable=$theme-name: '${app.theme}' !default
                    -output=${app.example.scss}
                and
                restore
                    page
                and
                sass
                    +ruby
                    -output=${app.example.out.ruby}
            ]]>
        </x-compile>

        <x-get-relative-path from="${app.example.dir}"
                             to="${app.example.css}"
                             property="app.example.css.path"/>
        
<!--update the app's example to point to the build output-->
<echo file="${app.example.css.file}">
<![CDATA[
/*
 * This file is generated by Sencha Cmd and should NOT be edited. It redirects
 * to the most recently built CSS file for the application to allow theme.html
 * to load properly for image slicing (required to support non-CSS3 browsers
 * such as IE9 and below).
 */
@import '${app.example.css.path}';
]]>
</echo>         
    </target>

    <!--
    Compiles the scss file for the theme slicer page
    -->
    <target name="-compass-compile-slicer-css" depends="-compile-slicer-sass">
        <x-compass-compile
            dir="${app.example.build.dir}"
            trace="${compass.compile.trace}"
            boring="${compass.compile.boring}"
            force="${compass.compile.force}"
            sassdir="${app.example.build.dir}"
            cssdir="${app.example.build.dir}"
            config="${app.example.compass.config}"/>
    </target>

    <!--
    Generates theme images for Ext JS 4.2+ apps using theme packages
    '-detect-app-build-properties' is defined in js-impl.xml
    -->
    <target name="-slice-app-theme" depends="-detect-app-build-properties">
        <x-ant-call target="-compass-compile-slicer-css"/>
        <x-run-bootstrap file="${bootstrap.example.js}" 
                         basedir="${bootstrap.base.path}"/>
       
        <echo>Capture theme image to ${build.capture.png}</echo>
        <x-sencha-command>
            <![CDATA[
                theme
                    capture
                        -page=${app.example.theme.html}
                        -image=${build.capture.png}
                        -manifest=${build.capture.json}
            ]]>
        </x-sencha-command>

        <echo>Slicing theme images to ${build.resources.dir}</echo>
        <x-sencha-command>
            <![CDATA[
                fs
                    slice
                        ${build.slice.options}
                        -image=${build.capture.png}
                        -manifest=${build.capture.json}
                        -out=${build.resources.dir}
            ]]>
        </x-sencha-command>
    </target>

    <macrodef name="x-build-theme">
        <attribute name="theme" description="the path of the theme folder"/>
        <attribute name="buildsass" default="false"/>
        <attribute name="basetheme" default="default"/>
        <sequential>
            <local name="theme.name"/>

            <local name="framework.theme.dir"/>
            <local name="tmp.theme.dir"/>
            <local name="tmp.img.dir"/>
                        
            <basename property="theme.name" file="@{theme}"/>
            <local name="theme.base.name"/>
            <property name="theme.base.name" value="${theme.name}"/>
            <property name="theme.images.dir" location="@{theme}/images"/>
            <property name="theme.page.dir" location="@{theme}/${theme.page.name}"/>
            
            <property name="tmp.res.dir" value="${app.resources.dir}"/>
            <property name="tmp.theme.dir" value="${tmp.res.dir}/${theme.base.name}"/>
            <property name="tmp.img.dir" value="${tmp.theme.dir}/images"/>
            
            <property name="app.res.dir" location="${app.dir}/packages"/>
            <property name="app.img.dir" location="${app.res.dir}/images"/>
            
            <property name="framework.res.dir" location="${framework.dir}/resources"/>
            <property name="framework.img.dir" location="${framework.res.dir}/themes/images"/>
            <property name="framework.theme.dir" location="${framework.img.dir}/@{basetheme}"/>
            
            <echo>Copying base framework images from ${framework.theme.dir} to ${tmp.img.dir}</echo>
            <copy todir="${tmp.img.dir}">
                <fileset dir="${framework.theme.dir}" includes="**/*"/>
            </copy>

            <if>
                <equals arg1="@{buildsass}" arg2="true"/>
                <then>
                    <echo>Building sass for theme ${theme.name}</echo>
                    <!--x-build-sass is defined in sass-impl.xml-->
                    <x-build-sass theme="@{theme}"/>
                </then>
            </if>

            <echo>Slicing images for theme ${theme.name} to ${tmp.img.dir}</echo>
            <x-sencha-command>
                <![CDATA[
                theme
                    build
                        -data-file=${build.capture.json}
                        -image-file=${build.capture.png}
                        -page=${theme.page.dir}
                        -out=${tmp.img.dir}
                ]]>
            </x-sencha-command>

            <if>
                <available file="${theme.images.dir}"/>
                <then>
                    <echo>Copying user defined images from @{theme}/images to ${tmp.img.dir}</echo>
                    <copy todir="${tmp.img.dir}">
                        <fileset dir="${theme.images.dir}" includes="**/*"/>
                    </copy>
                </then>
            </if>

        </sequential>
    </macrodef>

    <!--
    This is a legacy macrodef for copying resources in theme-directory based themes.
    It is provided to support building Ext JS 4.1 app themes
    -->
    <macrodef name="x-copy-resources">
        <sequential>
            <copy todir="${build.resources.dir}" includeEmptyDirs="false">
                <fileset dir="${app.resources.dir}" 
                         includes="**/*"/>
            </copy>

            <x-get-relative-path from="${app.dir}"
                                 to="${framework.dir}"
                                 property="framework.rel.path"/>
            
            <copy toDir="${build.dir}/${framework.rel.path}">
                <fileset dir="${framework.dir}" 
                         includes="src/ux/**/css/**/*"/>
            </copy>
        </sequential>
    </macrodef>

    <!--
    Generates theme images for Ext JS 4.1 apps that use directory based
    themes.  These have been deprecated in favor of ExtJS 4.2 theme packages
    -->
    <target name="-slice-theme-directories">
        <echo>Processing theme directories from ${app.theme.dir}</echo>
        <for param="theme">
            <dirset dir="${app.theme.dir}" includes="*"/>
            <sequential>
                <x-build-theme theme="@{theme}"/>
            </sequential>
        </for>
        <x-copy-resources/>
    </target>
    
    <target name="-slice-images">
        <x-run-if-true value="${enable.ext42.themes}">
            <x-ant-call target="-slice-app-theme"/>
        </x-run-if-true>
        <x-run-if-true value="${enable.ext41.themes}">
            <x-ant-call target="-slice-theme-directories"/>
        </x-run-if-true>
    </target>

    <target name="-before-slice"/>
    <target name="-slice" depends="-slice-images"/>
    <target name="-after-slice"/>
    
    <!--
    Refresh Individual Theme
    -->
    <target name="-before-refresh-theme"/>
    <target name="-refresh-theme">
        <if>
            <x-is-true value="${enable.ext41.themes}"/>
            <then>
                <local name="theme.dir"/>
                <property name="theme.dir" location="${app.theme.dir}/${args.themeName}"/>
                <x-build-theme theme="${theme.dir}" buildsass="true"/>
                <x-copy-resources/>
            </then>
        </if>
    </target>
    <target name="-after-refresh-theme"/>
</project>