<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:container="com.appdivision.view.container.*" viewSourceURL="srcview/index.html">
        <container:FlowContainer id="fc"
            verticalGap="{hGSlider.value}" horizontalGap="{vGSlider.value}"
            width="{wSlider.value}" height="{hSlider.value}"
            />
        <mx:VBox
            backgroundColor="white"
            right="0" top="0"
            >
            <mx:FormItem
                label="width">
                <mx:HSlider id="wSlider"
                    liveDragging="true"
                    tickInterval="50"
                    value="500"
                    minimum="10" maximum="{this.width}"/>
            </mx:FormItem>
            <mx:FormItem
                label="height">
                <mx:HSlider id="hSlider"
                    liveDragging="true"
                    tickInterval="50"
                    value="500"
                    minimum="10" maximum="{this.height}"/>
            </mx:FormItem>
            <mx:FormItem
                label="vertical gap">
                <mx:HSlider id="hGSlider"
                    liveDragging="true"
                    tickInterval="1"
                    value="1"
                    minimum="1" maximum="100"/>
            </mx:FormItem>
            <mx:FormItem
                label="horizontal gap">
                <mx:HSlider id="vGSlider"
                    liveDragging="true"
                    tickInterval="1"
                    value="1"
                    minimum="1" maximum="100"/>
            </mx:FormItem>
            <mx:FormItem
                label="Direction">
                <mx:ComboBox id="directionCombo"
                    change="{fc.direction = directionCombo.selectedLabel}"
                    dataProvider="{[FlowContainerLayout.HORIZONTAL, FlowContainerLayout.VERTICAL]}"/>
            </mx:FormItem>
            <mx:FormItem
                label="Horizontal Align">
                <mx:ComboBox id="hAlignCombo"
                    change="{fc.setStyle('horizontalAlign', hAlignCombo.selectedLabel)}"
                    dataProvider="{['left','center','right']}"/>
            </mx:FormItem>
            <mx:FormItem
                label="Vertical Align">
                <mx:ComboBox id="vAlignCombo"
                    change="{fc.setStyle('verticalAlign', vAlignCombo.selectedLabel)}"
                    dataProvider="{['top','middle','bottom']}"/>
            </mx:FormItem>
        </mx:VBox>
        <mx:Script>
            <![CDATA[
                import mx.effects.Move;
                import mx.effects.easing.Bounce;
                import com.appdivision.view.container.FlowContainerLayout;
                import mx.effects.Resize;
                import mx.controls.Button;
                override protected function childrenCreated():void{
                    super.childrenCreated();
                    
                    for(var i :Number = 0; i < 50; i ++){
                        var b:Button = new Button();
                        b.width = 150;
                        b.height = 25;
                        b.label = 'Click to expand';
                        var r:Resize = new Resize(b);
                        r.easingFunction = Bounce.easeOut;
                        b.setStyle('resizeEffect', r);
                        b.addEventListener(MouseEvent.CLICK, onClick);
                        fc.addChild(b);
                    }
                }
                
                private function onClick(e:MouseEvent):void{
                    var b:Button = e.target as Button;
                    if(!b)return;
                    if(b.width > 150 || b.height > 25){
                        b.width = 150;
                        b.height = 25;
                        b.label = 'Click to expand';
                    }else{
                        b.width = getRandom(b.width, 500);
                        b.height = getRandom(b.height, 500);
                        b.label = 'Click to contract';
                    }
                }
                
                public function getRandom(_min:Number, _max:Number):Number{
        
                  var tNumber:Number;
            
                  tNumber = Math.round(Math.random()*(_max-_min))+_min;
            
                  return tNumber;
                  
              }
            ]]>
        </mx:Script>
</mx:Application>