<?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"
    applicationComplete="onApplicationComplete(event)">
    
    <s:layout>
        <s:VerticalLayout
            gap="15"
            paddingRight="15"
            paddingLeft="15"
            paddingBottom="15"
            paddingTop="15"/>
    </s:layout>
    

    <fx:Script>
        <![CDATA[
            import com.adobe.viewsource.ViewSource;
            
            import mx.controls.Alert;
            import mx.core.IChildList;
            import mx.core.UIComponent;
            
            
            
            protected function onApplicationComplete(event:Event=null):void
            {
                ViewSource.addMenuItem(this, "wp-content/demos/CoreFlex4ElementsDemo/srcview/CoreFlex4ElementsDemo02.html");
            }
            
            
            
            protected function showChildrenButton_clickHandler(event:MouseEvent):void
            {
                var messageText:String = "There are " + testGroup.numChildren + " children in the Group.";
                
                for (var i:int = 0; i < testGroup.numChildren; i++)
                {
                    var stringName:String = testGroup.getChildAt(i) + "";
                    if (stringName.indexOf(".") > 0)
                    {
                        stringName = stringName.substr(stringName.lastIndexOf(".")+1, stringName.length);
                    }
                    messageText += "\n" + (i+1) + ". " + stringName;
                }
                
                Alert.show(messageText, "Show Children", Alert.OK);
            }
            
            
            
            protected function showElementsButton_clickHandler(event:MouseEvent):void
            {
                var messageText:String = "There are " + testGroup.numElements + " elements in the Group.";
                
                for (var i:int = 0; i < testGroup.numElements; i++)
                {
                    var stringName:String = testGroup.getElementAt(i) + "";
                    if (stringName.indexOf(".") > 0)
                    {
                        stringName = stringName.substr(stringName.lastIndexOf(".")+1, stringName.length);
                    }
                    messageText += "\n" + (i+1) + ". " + stringName;
                }
                
                Alert.show(messageText, "Show Elements", Alert.OK);
            }
            
        ]]>
    </fx:Script>
    
    <s:Label 
        id="topLabel"
        text="Children and Elements in a Spark Group" />

    <s:HGroup>
        
        <mx:Button
            id="showElementsButton"
            label="Show Elements"
            click="showElementsButton_clickHandler(event)" />
        
        <mx:Button
            id="showChildrenButton"
            label="Show Children"
            click="showChildrenButton_clickHandler(event)" />
        
    </s:HGroup>
    
    <s:Label 
        id="groupLabel"
        text="Elements below this label are all contained in a Spark Group" />
    
    <s:Group
        id="testGroup"
        width="500" 
        height="500">
        
        <s:layout>
            <s:VerticalLayout />
        </s:layout>
        
        <mx:Panel
            id="subPanel1"
            width="150"
            height="100" />
        
        <s:Panel
            id="subPanel2"
            width="150"
            height="100"
            title="SubPanel2-Spark Panel" />
            
        <mx:Button 
            id="button1"
            width="150"
            height="24"
            label="button1 - mx" />
        
        <mx:Button 
            id="button2"
            width="150"
            height="24"
            label="button2 - mx" />
        
        <s:Button
            id="button3"
            width="150"
            height="24"
            label="button3 - spark" />
        
        <s:Button
            id="button4"
            width="150"
            height="24"
            label="button4 - spark" />
        
        
        <s:SkinnableContainer
            id="skinnableContainer1"
            chromeColor="0x555555"
            backgroundColor="#7999C7">
            
            <s:layout>
                <s:HorizontalLayout 
                    gap="10" 
                    paddingBottom="10"
                    paddingLeft="10"
                    paddingRight="10"
                    paddingTop="10"/>
            </s:layout>
        
            <mx:Label
                id="label1"
                width="100"
                height="24"
                text="Label 1 - mx" />
            
            <s:HSlider
                id="hslider1"
                width="150"
                height="24"
                minimum="0"
                maximum="100"
                value="25" />
                
        </s:SkinnableContainer>
        
        
        <s:Rect
            id="rectangle1"
            width="50"
            height="50">
            <s:stroke>
                <s:SolidColorStroke 
                    color="0x000000" 
                    weight="1" />
            </s:stroke>
        </s:Rect>
        
        
        <s:Rect
            id="rectangle2"
            width="50"
            height="50">
            <s:stroke>
                <s:SolidColorStroke 
                    color="0x69FF42" 
                    weight="1" />
            </s:stroke>
        </s:Rect>
        
        
        <s:Rect
            id="rectangle3"
            width="70"
            height="70">
            <s:stroke>
                <s:SolidColorStroke 
                    color="0x6BACFF" 
                    weight="1" />
            </s:stroke>
        </s:Rect>
        
        <s:Rect
            id="rectangle4"
            width="80"
            height="80"
            rotation="45">
            <s:stroke>
                <s:SolidColorStroke 
                    color="0xFF5147"
                    weight="1" />
            </s:stroke>
        </s:Rect>
    </s:Group>
    
</s:Application>