    <?xml version="1.0" encoding="utf-8"?>

    <!--

        ADOBE SYSTEMS INCORPORATED
        Copyright 2008 Adobe Systems Incorporated
        All Rights Reserved.

        NOTICE: Adobe permits you to use, modify, and distribute this file
        in accordance with the terms of the license agreement accompanying it.

    -->

    <!--- The default skin class for the Spark Button component.

          @langversion 3.0
          @playerversion Flash 10
          @playerversion AIR 1.5
          @productversion Flex 4
    -->
    <s:SparkSkin 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="21" minHeight="21"
          alpha.disabled="0.5">

        <!-- host component -->
        <fx:Metadata>
            <![CDATA[
            /**
             * @copy spark.skins.spark.ApplicationSkin#hostComponent
             */
            [HostComponent("uk.co.mikecann.views.components.IconButton")]
            ]]>
        </fx:Metadata>

        <fx:Script>
        <![CDATA[
            import mx.events.StateChangeEvent;
            /* Define the skin elements that should not be colorized.
               For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];

            /**
             * @copy spark.skins.SparkSkin#colorizeExclusions
             */
                override public function get colorizeExclusions():Array {return exclusions;}

            private function onCurrentStateChanging(event:StateChangeEvent):void{
                switch(event.newState){
                    case "up":
                        setIcon("iconUp");
                        break;
                    case "over":
                        setIcon("iconOver");
                        break;
                    case "down":
                        setIcon("iconDown");
                        break;
                    case "disabled":
                        setIcon("iconDisabled");
                        break;
                }
            }
            private function setIcon(type:String):void{
                if(hostComponent.getStyle(type) != null){
                    icon.source = hostComponent.getStyle(type);
                }
            }

            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                var cr:Number = getStyle("cornerRadius");

                if (cornerRadius != cr)
                    cornerRadius = cr;

                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }

            [Bindable]
            public var cornerRadius:Number = 2;
            ]]>
        </fx:Script>

        <s:layout>
            <s:BasicLayout/>
        </s:layout>

        <!-- states -->
        <s:states>
            <s:State name="up" />
            <s:State name="over" />
            <s:State name="down" />
            <s:State name="disabled" />
        </s:states>

        <!-- layer 1: shadow -->
        <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="{cornerRadius}">
            <s:fill>
                <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0x000000"
                                       color.down="0xFFFFFF"
                                       alpha="0.01"
                                       alpha.down="0" />
                        <s:GradientEntry color="0x000000"
                                       color.down="0xFFFFFF"
                                       alpha="0.07"
                                       alpha.down="0.5" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>

        <!-- layer 2: fill -->
        <s:Rect left="1" right="1" top="1" bottom="1" radiusX="{cornerRadius}">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xFFFFFF"
                                   color.over="0xBBBDBD"
                                   color.down="0xAAAAAA"
                                   alpha="0.85" />
                    <s:GradientEntry color="0xD8D8D8"
                                   color.over="0x9FA0A1"
                                   color.down="0x929496"
                                   alpha="0.85" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>

        <!-- layer 3: fill lowlight -->
        <s:Rect left="1" right="1" bottom="1" height="9" radiusX="{cornerRadius}">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0x000000" alpha="0.0099" />
                    <s:GradientEntry color="0x000000" alpha="0.0627" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>

        <!-- layer 4: fill highlight -->
        <s:Rect left="1" right="1" top="1" height="9" radiusX="{cornerRadius}">
            <s:fill>
                <s:SolidColor color="0xFFFFFF"
                            alpha="0.33"
                            alpha.over="0.22"
                            alpha.down="0.12" />
            </s:fill>
        </s:Rect>

        <!-- layer 5: highlight stroke (all states except down) -->
        <s:Rect left="1" right="1" top="1" bottom="1" radiusX="{cornerRadius}" excludeFrom="down">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
                    <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Rect>

        <!-- layer 6: highlight stroke (down state only) -->
        <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
            <s:fill>
                <s:SolidColor color="0x000000" alpha="0.07" />
            </s:fill>
        </s:Rect>
        <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
            <s:fill>
                <s:SolidColor color="0x000000" alpha="0.07" />
            </s:fill>
        </s:Rect>
        <s:Rect left="2" top="1" right="2" height="1" includeIn="down">
            <s:fill>
                <s:SolidColor color="0x000000" alpha="0.25" />
            </s:fill>
        </s:Rect>
        <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
            <s:fill>
                <s:SolidColor color="0x000000" alpha="0.09" />
            </s:fill>
        </s:Rect>

        <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
        <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="{cornerRadius}">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0x000000"
                                   alpha="0.5625"
                                   alpha.down="0.6375" />
                    <s:GradientEntry color="0x000000"
                                   alpha="0.75"
                                   alpha.down="0.85" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Rect>

        <!-- layer 8: text -->
        <!---
            @copy spark.components.supportClasses.ButtonBase#labelDisplay
        -->

        <s:HGroup horizontalCenter="0" verticalCenter="1" left="10" right="10" top="2" bottom="2">

            <mx:Image
                id="icon"
                source="{hostComponent.getStyle('iconUp')}"
                verticalCenter="0"
                alpha="{(this.currentState == 'up')?.5:1}"
                />

            <s:Label id="labelDisplay"
                     textAlign="center"
                     verticalAlign="middle"
                     maxDisplayedLines="1"
                     horizontalCenter="0" verticalCenter="0"

                     includeInLayout="{( hostComponent.label != '' )}"
                     />

        </s:HGroup>

    </s:SparkSkin>