<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" accessibilityEnabled="false"
         xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:Move id="backGroundMoveEffect" duration="1000">
        </s:Move>
        <s:Move id="cloudsMoveEffect" target="{sky}" duration="5000" xFrom="{xpos}" xTo="{xpos - 20}" effectEnd="onEffectEnd()"/>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            
            [Bindable]private var xpos:Number = 0;
            
            private function onEffectEnd():void{
                xpos = xpos - 20;
                cloudsMoveEffect.xFrom = xpos ;
                cloudsMoveEffect.xFrom = xpos - 20;
                cloudsMoveEffect.play();
            }
            
        ]]>
    </fx:Script>
    <s:Group width="100%" height="100%">
        <s:Group id="imagesContainer" width="100%" height="100%" >
            <s:Group >
            <mx:Image id="sky1" accessibilityEnabled="false" 
                      source="@Embed(source='../../assets/images/background_sky.jpg')"  width="100%" height="100%"/>
            <mx:Image id="sky" accessibilityEnabled="false" 
                      source="@Embed(source='../../assets/images/skyTile.png')" x="0" y="100" width="100%" height="100%" showEffect="{cloudsMoveEffect}"/>
            </s:Group>
            <s:Group width="100%" height="100%" id="inner" showEffect="{backGroundMoveEffect}" >
                <mx:Image id="bgImage" accessibilityEnabled="false"  
                          source="@Embed(source='../../assets/images/backgrnd.png')" x="0" y="500" height="300" width="100%" />
                <mx:Image id="midImage" accessibilityEnabled="false" 
                          source="@Embed(source='../../assets/images/midground.png')"  x="0" y="580" height="50" width="100%"/>
                <mx:Image id="foreImage" accessibilityEnabled="false" 
                      source="@Embed(source='../../assets/images/foreground2.png')" x="0"  y="500" width="100%" height="100%" scaleContent="false"/>
            </s:Group>
    </s:Group>
    </s:Group>
</s:Group>