<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:flex4layouts="flex4layouts.*"
    creationComplete="application1_creationCompleteHandler(event)"
    backgroundColor="#000000" viewSourceURL="srcview/index.html">
    
    <fx:Declarations>
        <flex4layouts:CoverFlowLayout id="horizontalCoverFlow"
            gap="{ gapSlider.value }"
            distance="{ distanceSlider.value }"
            index="{ indexSlider.value }" />
        <flex4layouts:CoverFlowLayout id="verticalCoverFlow" direction="vertical"
            gap="{ gapSlider.value }"
            distance="{ distanceSlider.value }"
            index="{ indexSlider.value }" />
        <flex4layouts:CarouselLayout id="carousel"
            index="{ indexSlider.value }" />
        <flex4layouts:AwesomeLayout id="awesome"
            index="{ indexSlider.value }" />
        <flex4layouts:SpiralLayout id="spiral"
            distance="{ distanceSlider.value }"
            rotations="{ rotationsSlider.value }" />
        <flex4layouts:TimeMachineLayout id="timeMachine"
            distance="{ distanceSlider.value }"
            index="{ indexSlider.value }" />
    </fx:Declarations>
    
    <s:List id="list" width="100%" height="100%"
        labelField="label"
        selectionChanged="event.target.invalidateDisplayList()"
        itemRenderer="mx.controls.Image"
        contentBackgroundColor="#000000"
        layout="{ layoutList.selectedItem.layout as LayoutBase }" />
        
    <s:VGroup x="10" y="10" color="#FFFFFF">
        <s:List id="layoutList" selectedIndex="0" labelField="label" color="#000000">
            <s:dataProvider>
                <mx:ArrayCollection>
                    <fx:Object label="Horizontal CoverFlow" layout="{ horizontalCoverFlow }" />
                    <fx:Object label="Vertical CoverFlow" layout="{ verticalCoverFlow }" />
                    <fx:Object label="Carousel" layout="{ carousel }" />
                    <fx:Object label="Awesome" layout="{ awesome }" />
                    <fx:Object label="Spiral" layout="{ spiral }" />
                    <fx:Object label="Time Machine" layout="{ timeMachine }" />
                </mx:ArrayCollection>
            </s:dataProvider>
        </s:List>
        
        <mx:Label text="Index"
            includeInLayout="{ layoutList.selectedItem.layout != spiral }"
            visible="{ layoutList.selectedItem.layout != spiral }" />
        <s:HSlider id="indexSlider" minimum="0" maximum="51" stepSize="1" liveDragging="true"
            value="{ list.selectedIndex }"
            includeInLayout="{ layoutList.selectedItem.layout != spiral }"
            visible="{ layoutList.selectedItem.layout != spiral }" />
        
        <mx:Label text="Gap"
            includeInLayout="{ layoutList.selectedItem.layout.hasOwnProperty('gap') }"
            visible="{ layoutList.selectedItem.layout.hasOwnProperty('gap') }" />
        <s:HSlider id="gapSlider" minimum="1" maximum="50" stepSize="1" value="5" liveDragging="true"
            includeInLayout="{ layoutList.selectedItem.layout.hasOwnProperty('gap') }"
            visible="{ layoutList.selectedItem.layout.hasOwnProperty('gap') }" />
        
        <mx:Label text="Distance"
            includeInLayout="{ layoutList.selectedItem.layout.hasOwnProperty('distance') }"
            visible="{ layoutList.selectedItem.layout.hasOwnProperty('distance') }" />
        <s:HSlider id="distanceSlider" minimum="1" maximum="100" stepSize="1" value="50" liveDragging="true"
            includeInLayout="{ layoutList.selectedItem.layout.hasOwnProperty('distance') }"
            visible="{ layoutList.selectedItem.layout.hasOwnProperty('distance') }" />
        
        <mx:Label text="Rotations"
            includeInLayout="{ layoutList.selectedItem.layout == spiral }"
            visible="{ layoutList.selectedItem.layout == spiral }" />
        <s:HSlider id="rotationsSlider" minimum="1" maximum="10" stepSize="1" value="5" liveDragging="true"
            includeInLayout="{ layoutList.selectedItem.layout == spiral }"
            visible="{ layoutList.selectedItem.layout == spiral }" />
    </s:VGroup>
    
    
    <fx:Script>
        <![CDATA[
            import spark.layouts.supportClasses.LayoutBase;
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
        
            public var loader:Loader;
        
            /**
             * App has loaded, load the deck of cards image
             */
            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                loader = new Loader();
                loader.contentLoaderInfo.addEventListener( Event.COMPLETE, loaderComplete );
                loader.load( new URLRequest( "cards.png" ) );
            }
            
            /**
             * Extract each card in the deck into their own object
             * The object includes a label (rank of suit) and a Bitmap image of the card
             */
            protected function loaderComplete( event:Event ):void
            {
                var suitsIdx:Number = 0;
                var ranksIdx:Number = 0;
                var cardWidth:Number = 79;
                var cardHeight:Number = 123;
                var a:Array = [];
                var img:BitmapData;
                
                var d:BitmapData = Bitmap( loader.content ).bitmapData;
        
                for ( var i:int = 0; i < 52; i++ )
                {
                    img = new BitmapData( cardWidth, cardHeight );
                    img.copyPixels( d, new Rectangle( ranksIdx * cardWidth, suitsIdx * cardHeight, cardWidth, cardHeight ), new Point( 0, 0 ) );
                    img.draw( img, new Matrix() );
                    a.push( new Bitmap( img ) );
                    
                    if ( i == 12 || i == 25 || i == 38 )
                    {                        
                        suitsIdx++;
                        ranksIdx = 0;
                    }
                    else
                    {
                        ranksIdx++;
                    }
                }
                
                   list.dataProvider = new ArrayCollection(a);
                   list.selectedIndex = 25;
            }

        ]]>
    </fx:Script>
</s:Application>