<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               width="525" height="500" viewSourceURL="srcview/index.html">
    
    <fx:Script>
        <![CDATA[
            import flash.utils.*;
            import mx.core.IVisualElement;
            import mx.core.IVisualElementContainer;
            
            /**
             * 
             * displayNode() method returns a string that describes a IVisualElement
             * 
             **/
            public function displayNode(source:IVisualElement, depth:int):String {
                var str:String = "\n";
                
                for(var i:int = 0; i < depth; i++)
                    str += "+";
                
                var obj:Object = source as Object;
                
                if (obj.id){
                    // print the id of the element
                    str += ": " + obj.id;
                } else {
                    // print the class name of the element if it doesnt have an id
                    var bits:Array = (getQualifiedClassName(source)).split("::");
                    str += ": " + bits[bits.length-1];
                }
                
                return str;
            }
            
            /**
             * 
             * climb the layout tree from the source element 
             * 
             **/                                   
            public function climbParent(output:TextArea, source:IVisualElement, depth:int):void {
                
                if(source == null)
                    return;
                
                climbParent(output, source.parent as IVisualElement, depth + 1);
                
                output.text += displayNode(source, depth);
                
            }
            
            /**
             * 
             * climb the tree from the source element
             * 
             **/ 
            public function climbOwner(output:TextArea, source:IVisualElement, depth:int):void {
                
                if(source == null)
                    return;
                
                climbOwner(output, source.owner as IVisualElement, depth + 1);
                
                output.text += displayNode(source, depth);
                
            }   
            
        ]]>
    </fx:Script>
    
    <s:layout>
        <s:HorizontalLayout paddingTop="10" paddingBottom="10" />
    </s:layout>
    
    <!-- first column -->
    
    <s:VGroup id="vgroupForColumn1" horizontalAlign="center">
        
        <s:Label text="Group" fontWeight="bold" />
        
        <s:TextArea id="output1" width="250" height="275" />
        
        <s:Button label="climb owner" click="output1.text = 'climbOwner()\n';climbOwner(output1, startItem1, 0);" />
        <s:Button label="climb parent" click="output1.text = 'climbParent()\n';climbParent(output1, startItem1, 0);" />
        
        <s:Group id="group1" top="25" left="25">
            <s:Rect width="100%" height="100%"><s:fill><s:SolidColor color="0xCCCCCC" /></s:fill></s:Rect>
            <s:Label text="group1" />
            
            <s:Group id="group2"  top="25" left="25">
                <s:Rect width="100%" height="100%"><s:fill><s:SolidColor color="0x888888" /></s:fill></s:Rect>
                <s:Label text="group2" />
                
                <s:Group id="group3"  top="25" left="25">
                    <s:Rect width="100%" height="100%"><s:fill><s:SolidColor color="0x555555" /></s:fill></s:Rect>
                    <s:Label text="group3" />
                    
                    <s:Button id="startItem1" y="50" label="Start IVisualElement" />
                </s:Group>
            </s:Group>
        </s:Group>
    </s:VGroup>        
    
    <!-- second column -->
    
    <s:VGroup id="vgroupForColumn10" horizontalAlign="center">
        
        <s:Label text="SkinnableContainer" fontWeight="bold" />
        
        <s:TextArea id="output10" width="250" height="275" />
        
        <s:Button label="climb owner" click="output10.text = 'climbOwner()\n'; climbOwner(output10, startItem10, 0);" />
        <s:Button label="climb parent" click="output10.text = 'climbParent()\n'; climbParent(output10, startItem10, 0);" />
        
        <s:SkinnableContainer id="skinnableContainer10" top="25" left="25">
            <s:Rect width="100%" height="100%"><s:fill><s:SolidColor color="0xCCCCCC" /></s:fill></s:Rect>
            <s:Label text="skinnableContainer10" />
            
            <s:SkinnableContainer id="skinnableContainer20"  top="25" left="25">
                <s:Rect width="100%" height="100%"><s:fill><s:SolidColor color="0x888888" /></s:fill></s:Rect>
                <s:Label text="skinnableContainer20" />
                
                <s:SkinnableContainer id="skinnableContainer30"  top="25" left="25">
                    <s:Rect width="100%" height="100%"><s:fill><s:SolidColor color="0x555555" /></s:fill></s:Rect>
                    <s:Label text="skinnableContainer30" />
                    
                    <s:Button id="startItem10" y="50" label="Start IVisualElement" />
                </s:SkinnableContainer>
            </s:SkinnableContainer>
        </s:SkinnableContainer>
    </s:VGroup>
    
</s:Application>