<?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/mx" minWidth="955" minHeight="600" xmlns:local="*" viewSourceURL="srcview/index.html">
    
    <fx:Script>
    <![CDATA[
        import mx.core.ILayoutElement;
        import mx.core.IVisualElement;
        
        import spark.components.Label;
        
        private var string:String = "Scientists and academics who study how " +
            "we interact with technology say people often try to import those behaviors " +
            "into their lives, as anyone who has ever wished they could lower the volume" +
            " on a loud conversation or Google  their brain for an answer knows well. " +
            "But they say touching screens has seeped into people’s day-to-day existence " +
            "more quickly and completely than other technological behaviors because it " +
            "is so natural, intimate and intuitive."
        
        private var array:Array;
            
        private function addMoreItems(amount:Number = 7):void
        {
            if (!array)
                array = string.split(" ");
            
            for (var i:int = 0; i < amount; i++)
            {
                var label:Label = new Label();
                var textIndex:int = Math.floor(Math.random() * (array.length - 0.01));
                label.text = array[textIndex];
                var fontSize:Number = 10 + Math.round(Math.random() * 30);
                label.setStyle("fontSize", fontSize);
                group.addElement(label);
            }
        }
        
        private function removeAllItems():void
        {
            var n:int = group.numElements;
            for (var i:int = n - 1; i >= 0; i--)
            {
                var element:IVisualElement = group.getElementAt(i);
                if (element.includeInLayout)
                    group.removeElementAt(i);
            }
        }
    ]]>
    </fx:Script>
    
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
    </s:layout>
    
    <mx:Form>
        <mx:FormItem label="horizongalAlign">
            <s:DropDownList id="horizongalAlign" selectedIndex="1"
                change="cloudLayout.horizontalAlign = horizongalAlign.selectedItem">
                <s:dataProvider>
                    <s:ArrayCollection>
                        <fx:String>left</fx:String>
                        <fx:String>center</fx:String>
                        <fx:String>right</fx:String>
                    </s:ArrayCollection>
                </s:dataProvider>
            </s:DropDownList>
        </mx:FormItem>
        <mx:FormItem label="verticalAlign">
            <s:DropDownList id="verticalAlign" selectedIndex="1"
                change="cloudLayout.verticalAlign = verticalAlign.selectedItem">
                <s:dataProvider>
                    <s:ArrayCollection>
                        <fx:String>top</fx:String>
                        <fx:String>middle</fx:String>
                        <fx:String>bottom</fx:String>
                    </s:ArrayCollection>
                </s:dataProvider>
            </s:DropDownList>
        </mx:FormItem>
        <mx:FormItem label="horizontalGap">
            <s:HSlider id="horizontalGap" change="cloudLayout.horizontalGap = horizontalGap.value" maximum="30"/>
        </mx:FormItem>
        <mx:FormItem label="verticalGap">
            <s:HSlider id="verticalGap" change="cloudLayout.verticalGap = verticalGap.value" maximum="30"/>
        </mx:FormItem>
        <mx:FormItem label="width">
            <s:HSlider id="widthSlider" change="group.width = widthSlider.value" 
                maximum="800" value="{group.width}"/>
        </mx:FormItem>
        <mx:FormItem label="height">
            <s:HSlider id="heightSlider" change="group.height = heightSlider.value" 
                maximum="800" value="{group.height}"/>
        </mx:FormItem>
        <mx:FormItem label="">
            <s:Button label="Add item" click="addMoreItems(1)"/>
            <s:Button label="Add more items" click="addMoreItems()"/>
            <s:Button label="Remove all items" click="removeAllItems()"/>
        </mx:FormItem>
    </mx:Form>
    
    <s:Group id="group" width="400" height="300" creationComplete="addMoreItems(15)">
        <s:layout>
            <local:CloudLayout id="cloudLayout" paddingBottom="2" paddingLeft="2"
                paddingRight="2" paddingTop="2"/>
        </s:layout>
        <s:Rect includeInLayout="false" width="{group.width}" height="{group.height}">
            <s:fill>
                <s:SolidColor color="0xF0F0F0"/>
            </s:fill>
        </s:Rect>
    </s:Group>
    
</s:Application>