<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:mhc="com.mh.containers.*"
    layout="absolute" 
    backgroundGradientColors="[#008040, #008080]" 
    backgroundGradientAlphas="[0.5, 0.5]">
    
    <mx:Script>
        <![CDATA[
            import flash.net.navigateToURL;
            import mx.containers.BoxDirection;
            import mx.containers.Canvas;
            import mx.controls.Alert;
            import mx.controls.Button;
            
            
            /**
             * Add a child with random size to the FlowBox container
             */
            private function addChildComponent():void
            {
                var tmp2:Canvas = new Canvas();
                tmp2.width = 20 + 30*Math.random();
                tmp2.height = 20 + 10*Math.random();
                tmp2.setStyle( "backgroundColor", 0xFFFFFF*Math.random() );
                fb_test.addChild( tmp2 );
            }
            
            
            /**
             * Remove the last child from the FlowBox container
             */
            private function removeChildComponent():void
            {
                if( fb_test.getChildren().length > 0 )
                    fb_test.removeChildAt( fb_test.getChildren().length - 1 );
            }
            
            
            private function linkClickHanlder():void
            {
                navigateToURL( new URLRequest( "http://www.munkiihouse.com" ), "_blank" );
            }
        ]]>
    </mx:Script>    


    <mx:Panel x="288" y="10" layout="absolute" title="Flow Layout Component" backgroundColor="#000000">
    
        <!--
        ========================================
        * The FlowBox container
        ========================================
        -->
        <mhc:FlowBox id="fb_test" 
            width="{ns_width.value}" 
            height="{ns_height.value}" 
            direction="{cb_direction.selectedItem.value}"
            horizontalAlign="{cb_hAlign.selectedItem.value}"
            verticalAlign="{cb_vAlign.selectedItem.value}"
            verticalGap="{ns_vGap.value}"
            horizontalGap="{ns_hGap.value}"
            paddingLeft="{ns_lPadding.value}"
            paddingTop="{ns_tPadding.value}"
            paddingBottom="{ns_bPadding.value}"
            paddingRight="{ns_rPadding.value}"
            backgroundColor="#ffffff">
            
            <!-- Children can be added through both MXML and ActionScript -->
            <mx:Canvas width="{20 + 30*Math.random()}" height="{20 + 10*Math.random()}" backgroundColor="{0xFFFFFF*Math.random()}" />
            <mx:Canvas width="{20 + 30*Math.random()}" height="{20 + 10*Math.random()}" backgroundColor="{0xFFFFFF*Math.random()}" />
            <mx:Canvas width="{20 + 30*Math.random()}" height="{20 + 10*Math.random()}" backgroundColor="{0xFFFFFF*Math.random()}" />
            <mx:Canvas width="{20 + 30*Math.random()}" height="{20 + 10*Math.random()}" backgroundColor="{0xFFFFFF*Math.random()}" />
            <mx:Canvas width="{20 + 30*Math.random()}" height="{20 + 10*Math.random()}" backgroundColor="{0xFFFFFF*Math.random()}" />
            <mx:Canvas width="{20 + 30*Math.random()}" height="{20 + 10*Math.random()}" backgroundColor="{0xFFFFFF*Math.random()}" />
            <mx:Canvas width="{20 + 30*Math.random()}" height="{20 + 10*Math.random()}" backgroundColor="{0xFFFFFF*Math.random()}" />
            <mx:Canvas width="{20 + 30*Math.random()}" height="{20 + 10*Math.random()}" backgroundColor="{0xFFFFFF*Math.random()}" />
            <mx:Canvas width="{20 + 30*Math.random()}" height="{20 + 10*Math.random()}" backgroundColor="{0xFFFFFF*Math.random()}" />
            
        </mhc:FlowBox>
        
    </mx:Panel>

    
    <mx:Panel x="10" y="10" width="270" layout="absolute" title="Properties" verticalScrollPolicy="off" horizontalScrollPolicy="off">
        <mx:Form width="100%" height="100%">

            <mx:FormItem >
                <mx:Button label="Add Child" click="addChildComponent()" width="110"/>                
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button label="Remove Child" click="removeChildComponent()" width="110"/>                
            </mx:FormItem>

            <mx:Spacer/>

            <mx:FormItem label="width">
                <mx:NumericStepper value="250" minimum="0" maximum="1000" width="70" stepSize="1" id="ns_width"/>
            </mx:FormItem>
            <mx:FormItem label="height">
                <mx:NumericStepper width="70" minimum="0" maximum="1000" stepSize="1" value="300" id="ns_height"/>
            </mx:FormItem>
            
            <mx:Spacer/>
            
            <mx:FormItem label="direction">
                <mx:ComboBox id="cb_direction" selectedIndex="0" width="110">
                    <mx:Array>
                        <mx:Object label="Horizontal" value="{BoxDirection.HORIZONTAL}" />
                        <mx:Object label="Vertical" value="{BoxDirection.VERTICAL}" />
                    </mx:Array>
                </mx:ComboBox>
            </mx:FormItem>
            
            <mx:FormItem label="horizontal align">
                <mx:ComboBox id="cb_hAlign" selectedIndex="0" width="110">
                    <mx:Array>
                        <mx:Object label="Left" value="left" />
                        <mx:Object label="Center" value="center" />
                        <mx:Object label="Right" value="right" />
                    </mx:Array>
                </mx:ComboBox>
            </mx:FormItem>
            
            <mx:FormItem label="vertical align">
                <mx:ComboBox id="cb_vAlign" selectedIndex="0" width="110">
                    <mx:Array>
                        <mx:Object label="Top" value="top" />
                        <mx:Object label="Middle" value="middle" />
                        <mx:Object label="Bottom" value="bottom" />
                    </mx:Array>
                </mx:ComboBox>
            </mx:FormItem>
            
            <mx:FormItem label="horizontal gap">
                <mx:NumericStepper id="ns_hGap" value="6" minimum="0" maximum="100" stepSize="1" width="70"/>
            </mx:FormItem>
            <mx:FormItem label="vertical gap">
                <mx:NumericStepper id="ns_vGap" value="6" minimum="0" maximum="100" stepSize="1" width="70"/>
            </mx:FormItem>
            
            <mx:Spacer/>
            
            <mx:FormItem label="padding left">
                <mx:NumericStepper id="ns_lPadding" value="0" minimum="0" maximum="100" stepSize="1"/>
            </mx:FormItem>
            <mx:FormItem label="padding top">
                <mx:NumericStepper id="ns_tPadding" value="0" minimum="0" maximum="100" stepSize="1"/>
            </mx:FormItem>
            <mx:FormItem label="padding right">
                <mx:NumericStepper id="ns_rPadding" value="0" minimum="0" maximum="100" stepSize="1"/>
            </mx:FormItem>
            <mx:FormItem label="padding bottom">
                <mx:NumericStepper id="ns_bPadding" value="0" minimum="0" maximum="100" stepSize="1"/>
            </mx:FormItem>
            
        </mx:Form>
    </mx:Panel>
    
    
    <mx:ApplicationControlBar x="360" y="570" dock="true" fillColors="[#008040, #008080]" fillAlphas="[0.5, 0.5]" verticalAlign="middle">
        <mx:HBox horizontalGap="-4">
            <mx:Label text="Flow" fontWeight="bold" fontSize="24" color="#ff8000"/>
            <mx:Label text="Box" fontSize="24" fontWeight="bold" color="#000000"/>            
        </mx:HBox>
        <mx:Label text="Container" fontSize="24" fontWeight="bold" color="#000000"/>
        <mx:LinkButton label="Developed by Tony Fendall" paddingTop="11" height="26" click="linkClickHanlder()"/>
    </mx:ApplicationControlBar>
    
    
</mx:Application>