<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" viewSourceURL="srcview/index.html">
    
    <mx:creationComplete>
        <![CDATA[
            initApp();
        ]]>
    </mx:creationComplete>
    
    <mx:Script>
        <![CDATA[
            import mx.controls.TextInput;
            import mx.containers.Accordion;
            import mx.containers.Canvas;
            import mx.events.IndexChangedEvent;
            
            private function initApp():void
            {
                acd.historyManagementEnabled = true;
                acd.addEventListener(mx.events.IndexChangedEvent.CHANGE,changeHandler);
                
            }
            
            private function makeAccordion():void
            {
                var cvs:Canvas = null;
                var txi:TextInput = null;
                var rnd:uint = 0;
                var headerHeight:int = 0;
                for(var i:int = 0; i < nStep.value;i++)
                {
                    rnd = Math.ceil(Math.random()*16777215);
                    
                    cvs = new Canvas();
                    cvs.name = "cvs" + (acd.numChildren + 1).toString();
                    cvs.label = "Step " + (acd.numChildren + 1).toString();
                    cvs.setStyle("backgroundColor",rnd);
                    cvs.percentWidth = 100;
                    cvs.percentHeight = 100;
                    
                    txi = new TextInput();
                    txi.x = 19;
                    txi.y = 10;
                    cvs.addChild(txi);
                    
                    acd.addChild(cvs);
                }
            }
            
            private function clearAccordion():void
            {
                acd.removeAllChildren();
            }
            
            private function changeHandler(e:IndexChangedEvent):void
            {
                txt.text += '[Step ' + (acd.selectedIndex+1).toString() + '] selected\n';
            }
            
        ]]>
    </mx:Script>
    
    <mx:Label text="A sample of creating Accordion instance with ActionScript3" fontWeight="bold" fontSize="16"/>
    <mx:HRule width="100%" height="40" />
    <mx:HBox horizontalAlign="center" autoLayout="true">
        <mx:Label text="Number of accordion childs" fontWeight="bold" fontSize="14"/>
        <mx:NumericStepper id="nStep" minimum="2" maximum="1000"/>
        <mx:Button label="Add childs" click="makeAccordion()" />
        <mx:Button label="Clear childs" click="clearAccordion()" />
    </mx:HBox>
    <mx:Accordion id="acd" width="200" minHeight="200" resizeToContent="true"/>
    <mx:TextArea width="200" height="200" id="txt"/>
    
</mx:Application>