<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="146" height="26" creationComplete="init()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <fx:Script>
        <![CDATA[
            [Bindable]public var label:String;
            [Bindable]public var roundRight:Boolean = false;
            [Bindable]public var roundLeft:Boolean = false;
            [Bindable]public var active:Boolean = false;
            
            [Bindable]private var radiusLeft:Number = 0;
            [Bindable]private var radiusRight:Number = 0;
            [Bindable]private var backgroundColor:uint = 0x0;
            [Bindable]private var fadeColor:uint = 0x0;
            [Bindable]private var borderColor:uint = 0x0;
            [Bindable]private var glowColor:uint = 0x0;
            
            public function init():void {
                // Make Button
                this.mouseChildren = false;
                
                // Check for rounding
                if (roundRight) {
                    radiusRight = 8;
                }
                
                if (roundLeft) {
                    radiusLeft = 8;
                }
                
                // Check for active
                if (active) {
                    backgroundColor = 0x568309;
                    fadeColor = 0x9fd01c;
                    borderColor = 0x70ae2c;
                    glowColor = 0x113f5d;
                } else {
                    backgroundColor = 0x727272;
                    fadeColor = 0xb9b8b8;
                    borderColor = 0xaeaeae;
                    glowColor = 0x5a5a5a;
                }
            }
        ]]>
    </fx:Script>
    
    <s:states>
        <s:State name="off" />
        <s:State name="on" />
    </s:states>
    
    <s:Rect id="fill_over" left="0" top="0" bottom="0" right="0" 
            topLeftRadiusX="{radiusLeft}" 
            bottomLeftRadiusX="{radiusLeft}"
            bottomRightRadiusX="{radiusRight}"
            topRightRadiusX="{radiusRight}">
        <s:stroke>
            <s:SolidColorStroke color="{borderColor}" />
        </s:stroke>
        
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color.off="0xb9b8b8" color.on="0x9fd01c" />
                <s:GradientEntry color.off="0x727272" color.on="0x568309" />
            </s:LinearGradient>

        </s:fill>
        
    </s:Rect>
    <s:HGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
        <s:Label color="0xFFFFFF">
            {label}
        <s:filters>
            <s:GlowFilter 
                color.on="0x113f5d"
                color.off="0x5a5a5a"
                alpha=".75" 
                blurX="6" 
                blurY="6" 
                strength=".65" 
                inner="false" 
                knockout="false"/>
        </s:filters>
        </s:Label>
    </s:HGroup>
</s:Group>