<?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" 
               width="550" height="500"
               xmlns:local="*" viewSourceURL="srcview/index.html">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]private var stuff1:ArrayCollection = new ArrayCollection();
            
            [Bindable]private var stuff2:ArrayCollection = new ArrayCollection();
            
            private const SEED:Number = 25;
            
            private var total1:Number = 0;
            private var total2:Number = 0;
            
            private function addMoreStuff(isVLOff:Boolean):void
            {
                var random:Number = Math.round(Math.random()*(SEED-1))+1;
                var temp:String;
                
                for (var i:int = 0; i < random; i++)
                {
                    if (isVLOff)
                    {
                        stuff1.addItem(total1.toString());
                        total1++;
                    }
                    else
                    {
                        stuff2.addItem(total2.toString());
                        total2++;
                    }
                }
            }
            
            private function removeSomeStuff(isVLOff:Boolean):void
            {
                var random:Number = Math.round(Math.random()*(SEED-1))+1;
                
                for (var i:int = 0; i < random; i++)
                {
                    if (isVLOff && stuff1.length > 0)
                        stuff1.removeItemAt(0);
                    else if (stuff2.length > 0)
                        stuff2.removeItemAt(0);
                }
            }
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <fx:Component className="CustomListItemRenderer">
            <s:ItemRenderer>
                <s:layout>
                    <s:HorizontalLayout verticalAlign="middle"
                                        paddingLeft="5" paddingRight="5"
                                        paddingTop="5" paddingBottom="5" />
                </s:layout>
                <s:states>
                    <s:State name="normal" />
                    <s:State name="hovered" />
                    <s:State name="selected" />
                </s:states>
                
                <s:Label text="Item #:" />
                <s:Button label="{data}" color.hovered="green" color="black" color.selected="red" />
                <s:CheckBox selected.selected="true" mouseEnabled="false"/>
            </s:ItemRenderer>
        </fx:Component>
    </fx:Declarations>
    
    <s:controlBarContent>
        <s:HGroup width="100%" horizontalAlign="center">
            <s:Button label="+" width="30" click="addMoreStuff(true);" />
            <s:Button label="-" width="30" click="removeSomeStuff(true);" />
            <s:Button label="- All" width="50" click="stuff1.removeAll();" />
            <s:Rect width="60" />
            <s:Button label="+" width="30" click="addMoreStuff(false);" />
            <s:Button label="-" width="30" click="removeSomeStuff(false);" />
            <s:Button label="- All" width="50" click="stuff2.removeAll();" />
        </s:HGroup>
    </s:controlBarContent>
    
    <s:HGroup gap="20" horizontalAlign="center" width="100%">
        <s:VGroup paddingTop="10" gap="1">
            <s:Label text="useVirtualLayout=false" />
            <s:List id="placeForStuff1" dataProvider="{stuff1}" useVirtualLayout="false" height="325" width="175" itemRenderer="CustomListItemRenderer" />
        </s:VGroup>
        <s:VGroup paddingTop="10" gap="1">
            <s:Label text="useVirtualLayout=true" />
            <s:List id="placeForStuff2" dataProvider="{stuff2}" useVirtualLayout="true" height="325" width="175" itemRenderer="CustomListItemRenderer" />
        </s:VGroup>
    </s:HGroup>

    <s:HGroup width="100%" horizontalAlign="center" bottom="10">
        <local:SimpleMemoryGraph />
        <local:MemoryGraph />
    </s:HGroup>
    
</s:Application>