<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" xmlns:ns1="com.cynergysystems.components.*" viewSourceURL="srcview/index.html">
    
    <!-- 
        ALL OF THESE SKIN EXAMPLES IN THIS PROJET ARE BASED OFF OF THE DEFAULT HALO THEME
        C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\frameworks\source\mx\skins\halo
    -->
    
    <mx:Style source="styles.css" />
    
    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            import mx.effects.easing.Back;
            
            private function onTabCornerRadiusChange() : void
            {
                for ( var x : int = 0; x < tabNavigator.numChildren; x++ )
                {
                    UIComponent(tabNavigator.getTabAt(x)).setStyle("cornerRadius", tabCornerRadius.value);
                }
            }
            
            private function onPanelCornerRadiusChange() : void
            {
                panel.setStyle("cornerRadius", panelCornerRadius.value);
            }
            
            private function onColorChange() : void
            {
                UIComponent( Application.application ).setStyle("themeColor", colorPicker.selectedColor);
                UIComponent( Application.application ).setStyle("backgroundGradientColors", [0x999999, colorPicker.selectedColor]);
            }
            
        ]]>
    </mx:Script>
    
    
    
    <mx:HDividedBox top="10" left="10" right="10" bottom="10" width="100%">
        <mx:TabNavigator width="280" height="100%" id="tabNavigator">
            
            <mx:Canvas label="tab 1 test ">
                
                <mx:Accordion id="accordion" top="10" left="10" right="10" bottom="10" openEasingFunction="Back.easeOut" openDuration="350" >
                    
                    <mx:Canvas label="accordion 1 " width="100%" height="100%" />
                    <mx:Canvas label="accordion 2 " width="100%" height="100%" />
                    <mx:Canvas label="accordion 3" width="100%" height="100%" />
                    
                </mx:Accordion>
                
            </mx:Canvas>
            <mx:Canvas label="tab 2 test " />
            <mx:Canvas label="tab 3 test" />
            
        </mx:TabNavigator>
        
        
        <mx:Panel 
            width="100%" height="100%" 
            id="panel" layout="absolute"
            title="Customize My UI!" 
            titleBackgroundSkin="@Embed('assets/transparent.png')" 
            borderSkin="com.cynergysystems.skins.BorderSkin">
            
            <mx:ColorPicker id="colorPicker" change="onColorChange()" selectedColor="#0000FF" x="225" y="10"/>
            <mx:HSlider id="tabCornerRadius" change= "onTabCornerRadiusChange()" value="10" minimum="0" maximum="20"  x="218" y="40"/>
            <mx:HSlider id="panelCornerRadius" change= "onPanelCornerRadiusChange()" value="15" minimum="0" maximum="30"  x="218" y="66"/>
            <mx:Label x="10" y="10" text="Change Application Theme Color:" height="22"/>
            <mx:Label x="10" y="40" text="Change Tab Corner Radius:"/>
            <mx:Label x="10" y="66" text="Change Panel Corner Raduis"/>
            
        </mx:Panel>
        
    </mx:HDividedBox>
    
    
</mx:Application>