<?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/halo" 
    minWidth="1024" 
    minHeight="768" 
    xmlns:local="*"
       frameRate="99" viewSourceURL="srcview/index.html">

    <fx:Script>
        <![CDATA[
            import myLibrary.Train;
        
            private var iconCycle:Array = [myLibrary.Train, myLibrary.Bus, myLibrary.Plane];
            private var iconCyclePtr:int = 0;
            
            protected function toggleIcon(event:MouseEvent):void
            {
                var btn:Button = Button(event.currentTarget);
                if (iconCyclePtr >= iconCycle.length) {
                    iconCyclePtr = 0;
                }
                btn.setStyle("iconClass", iconCycle[iconCyclePtr++]);
            }
        ]]>
    </fx:Script>

    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    
    <fx:Style>
        
        @namespace local "*";
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace s "library://ns.adobe.com/flex/spark";
        
        s|Button {
            skinClass: ClassReference('AHGenericFXGIconButtonSkin');
            baseColor: "0x505050" ; 
            color: #FFFFFF;
            iconColor: #e0e0e0;
            iconScale: 0.75;
            iconClass: ClassReference("myLibrary.Bus");
            color: "0xe0e0e0";
        }
        
        s|Button:over {
            baseColor: "0x40c0ff" ; 
            iconColor: #ffffff;
            color: "0xffffff";
        }
        
        s|Button:down {
            baseColor: "0x60e0ff" ;
            iconColor: #ffffff;
            color: "0xffffff";
        }
        
        .busButton:over {
            iconName: "bus";
            
        }
        
        .busButton:over {
            baseColor: "0x60e000";
            color: "0xffffff";
        }
                        
        .busButton:down {
            baseColor: "0x80ff00";
            color: "0xffffff";
        }
        
        .trainButton {
            iconClass: ClassReference("myLibrary.Train");
        }
        
                            
        .trainButton:over {
            baseColor: "0xd52A03";
        }
                                
        .trainButton:down {
            baseColor: "0xE53A13";
        }
        
        .planeButton {
            iconClass: ClassReference("myLibrary.Plane");
            iconColor: #FFFFFF;
            baseColor: #505050;
        }
                            
        .planeButton:over {
            baseColor: #F9BD00;
            iconColor: #00EAE4;
        }
                                
        .planeButton:down {
            baseColor: #F9BD00;
            iconColor: #00EAE4;
        }
        
        .payloadButton {
            iconClass: ClassReference("myLibrary.Payload");
            iconColor: #FFFFFF;
            baseColor: #505050;
        }
                            
        .payloadButton:over {
            iconClass: ClassReference("myLibrary.PayloadOver");
            baseColor: #F9BD00;
            iconColor: #B23200;
        }
                                
        .payloadButton:down {
            iconClass: ClassReference("myLibrary.PayloadDown");
            baseColor: #F9BD00;
            iconColor: #c24210;
        }
        
        .magnifierButton {
            iconClass: ClassReference("myLibrary.Magnifier");
            iconColor: #FFFFFF;
            baseColor: #40F0F0;
        }
                            
        .magnifierButton:over {
            baseColor: #60FFFF;
            iconColor: #B23200;
        }
        
        .checkButton {
            iconClass: ClassReference("myLibrary.Check");
            iconColor: #FFFFFF;
            baseColor: #305000;
        }
        
        .checkButton:over {
            baseColor: #406000;
        }
        
        .checkButton:down {
            baseColor: #608000;
        }
        
        .cancelButton {
            iconClass: ClassReference("myLibrary.Cross");
            iconColor: #FFFFFF;
            baseColor: #800000;
        }
        
        .cancelButton:over {
            baseColor: #a02000;
            iconColor: #ff8000;
        }
        
        .cancelButton:down {
            iconColor: #ff8000;
            baseColor: #c04000;
        }
                    
        
    </fx:Style>
    

    <s:VGroup horizontalCenter="0" verticalCenter="0">
    <s:RichText lineHeight="120%" whiteSpaceCollapse="preserve" kerning="on" y="87"  x="81"  color="0x505050" >
            <s:content><s:p><s:span fontSize="14" >FXG Icon Buttons using a single generic skin</s:span></s:p>
            <s:p><s:span>Leverages different icons, colors and gradients per state and</s:span></s:p><s:p><s:span>manipulation at runtime via styles and pseudo selectors</s:span></s:p></s:content>        </s:RichText>
    
        <s:HGroup  gap="5" >
            <s:Button label="Switch Transportation" mouseDown="toggleIcon(event)" />
            <s:Button label="Bus" styleName="busButton" />
            <s:Button label="Train" styleName="trainButton" />
            <s:Button label="Plane" styleName="planeButton" />
        </s:HGroup>
        <s:HGroup  gap="5" >
            <s:Button label="Payload" styleName="payloadButton" />
            <s:Button label="Search" styleName="magnifierButton" />
            <s:Button label="Submit" styleName="checkButton" />
            <s:Button label="Cancel" styleName="cancelButton" />
        </s:HGroup>
    </s:VGroup>
</s:Application>