<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:controls="controls.*" layout="absolute" viewSourceURL="srcview/index.html" width="200" height="250" backgroundColor="#000000">
    
    <mx:Style>
        NavButton
        {
            themeColor    :    "#B7BABC";
            
            downSkin            :ClassReference("skins.HaloButtonTrans");
            overSkin            :ClassReference("skins.HaloButtonTrans");
            
            selectedDownSkin    :ClassReference("skins.HaloButtonTrans");
            selectedOverSkin    :ClassReference("skins.HaloButtonTrans");
        }
    </mx:Style>
    <mx:Script>
        <![CDATA[
            
            [Embed( source="./images/rightArrow.png") ]
            public static const RIGHT_ARROW:Class; 
            
            [Embed( source="./images/leftArrow.png") ]
            public static const LEFT_ARROW:Class;
            
            private function handleLeft():void
            {
                if( container.x != 0 && !myMove.isPlaying )
                {
                    trace('[handleLeft - container.x]' + container.x);
                    myMove.xBy = 100;
                    myMove.play();
                }
            }
            private function handleRight():void
            {
                if( container.x > -200 && !myMove.isPlaying )
                {
                    trace('[handleRight - container.x]' + container.x);
                    myMove.xBy = -100;
                    myMove.play();
                }
            }
        ]]>
    </mx:Script>
    
    <mx:Move id="myMove" target="{container}" xBy="100" />
            
    <controls:NavButton icon="{LEFT_ARROW}" click="handleLeft()" y="125"/>
    <controls:NavButton icon="{RIGHT_ARROW}" click="handleRight()" y="125" x="160"/>
        
    <mx:Canvas id="parentContainer" width="100" height="150" x="50" y="50" horizontalScrollPolicy="off" verticalScrollPolicy="off">

    
        <mx:Canvas id="container" width="300" height="150" verticalScrollPolicy="off" horizontalScrollPolicy="off">
            <mx:Canvas 
                id                        =    "box1"
                x                        =    "0"
                width                    =    "100" 
                height                    =    "150" 
                verticalScrollPolicy    =    "off" 
                horizontalScrollPolicy    =    "off"
                borderColor                =    "#FFFFFF"
                borderStyle                =    "solid"
                >
                <mx:Image source="./images/gt22.jpg" bottom="0"/>
            </mx:Canvas>
            <mx:Canvas 
                id                        =    "box2"
                x                        =    "{box1.x + box1.width}"
                width                    =    "100" 
                height                    =    "150" 
                verticalScrollPolicy    =    "off" 
                horizontalScrollPolicy    =    "off"
                borderColor                =    "#FFFFFF"
                borderStyle                =    "solid"
                >
                <mx:Image source="./images/gt23.jpg" bottom="0"/>
            </mx:Canvas>
            <mx:Canvas 
                id                        =    "box3"
                x                        =    "{box2.x + box2.width}"
                width                    =    "100" 
                height                    =    "150" 
                verticalScrollPolicy    =    "off" 
                horizontalScrollPolicy    =    "off"
                borderColor                =    "#FFFFFF"
                borderStyle                =    "solid"
                >
                <mx:Image source="./images/gt25.jpg" bottom="0"/>
            </mx:Canvas>
        </mx:Canvas>
        
    </mx:Canvas>
    
</mx:Application>