<?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 fullScreen button of a Spark VideoPlayer component
      in the normal skin state. The normal skin state means the component is not in 
      one of the <code>fullScreen</code> skin states.  

      @see spark.components.VideoPlayer
        
      @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:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">

    <!-- host component -->
    <fx:Metadata>
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
    
    <fx:Script fb:purpose="styling">
        /* Define the skin elements that should not be colorized. */
        static private const exclusions:Array = ["fullScreenSymbol"];
        
        /**
         * @private
         */
        override public function get colorizeExclusions():Array {return exclusions;}
        
        /* Define the symbol fill items that should be colored by the "symbolColor" style. */
        static private const symbols:Array = ["fullScreenSymbolFill1", "fullScreenSymbolFill2", "fullScreenSymbolFill3", 
                                              "fullScreenSymbolTopLeftFill1", "fullScreenSymbolTopLeftFill2", 
                                              "fullScreenSymbolTopRightFill1", "fullScreenSymbolTopRightFill2", 
                                              "fullScreenSymbolBottomLeftFill1", "fullScreenSymbolBottomLeftFill2", 
                                              "fullScreenSymbolBottomRightFill1", "fullScreenSymbolBottomRightFill2"];
        /**
         * @private
         */
        override public function get symbolItems():Array {return symbols};
        
        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
    </fx:Script>
    
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled"/>
    </s:states>
        
    <!-- layer 1: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                                 color.over="0xCACACA"
                                 color.down="0xA8A8A8" />
                <s:GradientEntry color="0xDCDCDC"
                                 color.over="0x8D8D8D" 
                                 color.down="0x6B6B6B"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 2: One pixel stroke inside border (exclude in down state) -->
    <s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="down">
        <s:stroke>
            <s:LinearGradientStroke weight="1">
                <s:GradientEntry color="0xFEFEFE" alpha.over="0.22" />
                <s:GradientEntry color="0xEAEAEA" alpha.over="0.22" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    <!-- layer 3: fill highlight  (exclude in down state) -->
    <s:Rect left="1" right="1" top="1" height="11" excludeFrom="down">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" 
                        alpha="0.3" 
                        alpha.over="0.12" />
        </s:fill>
    </s:Rect>
    
    <!-- layer 4: downstate inset border  (include only in down state) -->
    <s:Rect left="1" top="1" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.4" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
    
    <!-- layer 5: 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="38" height="24">
        <s:stroke>
            <s:SolidColorStroke color="0x131313" />
        </s:stroke>
    </s:Rect>
    
    <!--- Defines the full-screen symbol. -->
    <s:Group horizontalCenter="0" verticalCenter="0" id="fullScreenSymbol">
        <!-- size of area so left, right, bottom, top work well -->
        <s:Rect left="0" top="0" width="19" height="14">
            <s:fill>
                <s:SolidColor alpha="0" />
            </s:fill>
        </s:Rect>
    
        <!-- background for big rectangle -->
        <s:Rect left="2" top="2" right="2" bottom="2">
            <s:fill>
                <!--- @private -->
                <s:SolidColor color="0x3F3F3F" id="fullScreenSymbolFill1"/>
            </s:fill>
        </s:Rect>
        <!-- dropshadow -->
        <s:Rect bottom="1" left="2" right="2" height="1">
            <s:fill>
                <s:SolidColor color="0xFFFFFF"/>
            </s:fill>
        </s:Rect>
        
        <!-- inside rect1 -->
        <s:Rect left="3" top="3" right="3" bottom="3">
            <s:fill>
                <s:SolidColor color="0xFEFEFE"/>
            </s:fill>
        </s:Rect>
        
        <!-- inside rect2 -->
        <s:Rect left="4" top="4" right="4" bottom="4">
            <s:fill>
                <!--- @private -->
                <s:SolidColor color="0x444444" id="fullScreenSymbolFill2"/>
            </s:fill>
        </s:Rect>
        
        <!-- inside rect3 -->
        <s:Rect left="5" top="5" right="5" bottom="5">
            <s:fill>
                <!--- @private -->
                <s:SolidColor color="0x646464" id="fullScreenSymbolFill3"/>
            </s:fill>
        </s:Rect>
        
        <!-- top-left -->
        <!-- dropshadow -->
        <s:Rect left="0" top="1" width="3" height="1">
            <s:fill>
                <s:SolidColor color="0xFFFFFF"/>
            </s:fill>
        </s:Rect>
        <s:Rect left="0" top="2" width="1" height="2">
            <s:fill>
                <s:SolidColor color="0xFFFFFF"/>
            </s:fill>
        </s:Rect>
        <!-- symbol -->
        <s:Rect left="0" top="0" width="3" height="1">
            <s:fill>
                <!--- @private -->
                <s:SolidColor color="0x363636" id="fullScreenSymbolTopLeftFill1"/>
            </s:fill>
        </s:Rect>
        <s:Rect left="0" top="1" width="1" height="2">
            <s:fill>
                <!--- @private -->
                <s:SolidColor color="0x363636" id="fullScreenSymbolTopLeftFill2"/>
            </s:fill>
        </s:Rect>
        
        <!-- top-right -->
        <!-- dropshadow -->
        <s:Rect right="0" top="1" width="3" height="1">
            <s:fill>
                <s:SolidColor color="0xFFFFFF"/>
            </s:fill>
        </s:Rect>
        <s:Rect right="0" top="2" width="1" height="2">
            <s:fill>
                <s:SolidColor color="0xFFFFFF"/>
            </s:fill>
        </s:Rect>
        <!-- symbol -->
        <s:Rect right="0" top="0" width="3" height="1">
            <s:fill>
                <!--- @private -->
                <s:SolidColor color="0x363636" id="fullScreenSymbolTopRightFill1"/>
            </s:fill>
        </s:Rect>
        <s:Rect right="0" top="1" width="1" height="2">
            <s:fill>
                <!--- @private -->
                <s:SolidColor color="0x363636" id="fullScreenSymbolTopRightFill2"/>
            </s:fill>
        </s:Rect>
        
        <!-- bottom-left -->
        <!-- dropshadow -->
        <s:Rect left="0" bottom="-1" width="3" height="1">
            <s:fill>
                <s:SolidColor color="0xFFFFFF"/>
            </s:fill>
        </s:Rect>
        <s:Rect left="0" bottom="0" width="1" height="2">
            <s:fill>
                <s:SolidColor color="0xFFFFFF"/>
            </s:fill>
        </s:Rect>
        <!-- symbol -->
        <s:Rect left="0" bottom="0" width="3" height="1">
            <s:fill>
                <!--- @private -->
                <s:SolidColor color="0x363636" id="fullScreenSymbolBottomLeftFill1"/>
            </s:fill>
        </s:Rect>
        <s:Rect left="0" bottom="1" width="1" height="2">
            <s:fill>
                <!--- @private -->
                <s:SolidColor color="0x363636" id="fullScreenSymbolBottomLeftFill2"/>
            </s:fill>
        </s:Rect>
        
        <!-- bottom-right -->
        <!-- dropshadow -->
        <s:Rect right="0" bottom="-1" width="3" height="1">
            <s:fill>
                <s:SolidColor color="0xFFFFFF"/>
            </s:fill>
        </s:Rect>
        <s:Rect right="0" bottom="0" width="1" height="2">
            <s:fill>
                <s:SolidColor color="0xFFFFFF"/>
            </s:fill>
        </s:Rect>
        <!-- symbol -->
        <s:Rect right="0" bottom="0" width="3" height="1">
            <s:fill>
                <!--- @private -->
                <s:SolidColor color="0x363636" id="fullScreenSymbolBottomRightFill1"/>
            </s:fill>
        </s:Rect>
        <s:Rect right="0" bottom="1" width="1" height="2">
            <s:fill>
                <!--- @private -->
                <s:SolidColor color="0x363636" id="fullScreenSymbolBottomRightFill2"/>
            </s:fill>
        </s:Rect>
    </s:Group>
</s:SparkSkin>