<?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 wireframe skin class for the fullScreen button of a Spark VideoPlayer 
      component while in one of the <code>fullScreen</code> skin state.  

      @see spark.components.VideoPlayer
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"  
      alpha.disabled="0.5">

    <!-- host component -->
    <fx:Metadata>
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
    
    <!-- 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:SolidColor color="#FFFFFF"
                          color.over="#EEEEEE" 
                          color.down="#EEEEEE" />
        </s:fill>
    </s:Rect>
    
    <!-- layer 2: One pixel stroke on inside (there is no bottom highlight 
         and the top highlight is 2 pixels big and darker on top) only in downStates -->
    <s:Line left="1" right="1" top="1" includeIn="down">
        <s:stroke>
            <s:SolidColorStroke color="#D0D0D0" />
        </s:stroke>
    </s:Line>
    <s:Rect left="1" right="1" top="2" bottom="0" includeIn="down">
        <s:stroke>
            <s:SolidColorStroke color="#EEEEEE" />
        </s:stroke>
    </s:Rect>
        
    <!-- layer 3: 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="#707070" />
        </s:stroke>
    </s:Rect>
    
    <!--- Defines the full screen symbol. -->
    <s:Group horizontalCenter="0" verticalCenter="-1" id="fullScreenSymbol">
        <!-- size of area so left, right, bottom, top work well -->
        <s:Rect left="0" top="0" width="28" height="17">
            <s:fill>
                <s:SolidColor alpha="0" />
            </s:fill>
        </s:Rect>
    
        <!-- background for big rectangle -->
        <s:Rect left="5" top="3" right="5" bottom="3">
            <s:fill>
                <s:SolidColor color="#707070" />
            </s:fill>
        </s:Rect>
        
        <!-- inside rect1 -->
        <s:Rect left="6" top="4" right="6" bottom="4">
            <s:fill>
                <s:SolidColor color="#FFFFFF" />
            </s:fill>
        </s:Rect>
        
        <!-- inside rect2 -->
        <s:Rect left="7" top="5" right="7" bottom="5">
            <s:fill>
                <s:SolidColor color="#707070" />
            </s:fill>
        </s:Rect>
        
        <!-- top-left -->
        <s:Rect left="0" top="2" width="3" height="1">
            <s:fill>
                <s:SolidColor color="#707070" />
            </s:fill>
        </s:Rect>
        <s:Rect left="2" top="0" width="1" height="2">
            <s:fill>
                <s:SolidColor color="#707070" />
            </s:fill>
        </s:Rect>
        
        <!-- top-right -->
        <s:Rect right="0" top="2" width="3" height="1">
            <s:fill>
                <s:SolidColor color="#707070" />
            </s:fill>
        </s:Rect>
        <s:Rect right="2" top="0" width="1" height="2">
            <s:fill>
                <s:SolidColor color="#707070" />
            </s:fill>
        </s:Rect>
        
        <!-- bottom-left -->
        <s:Rect left="0" bottom="3" width="3" height="1">
            <s:fill>
                <s:SolidColor color="#707070" />
            </s:fill>
        </s:Rect>
        <s:Rect left="2" bottom="1" width="1" height="2">
            <s:fill>
                <s:SolidColor color="#707070" />
            </s:fill>
        </s:Rect>
        
        <!-- bottom-right -->
        <s:Rect right="0" bottom="3" width="3" height="1">
            <s:fill>
                <s:SolidColor color="#707070" />
            </s:fill>
        </s:Rect>
        <s:Rect right="2" bottom="1" width="1" height="2">
            <s:fill>
                <s:SolidColor color="#707070" />
            </s:fill>
        </s:Rect>
        
        <!-- bar down below -->
        <s:Rect left="10" bottom="1" right="10" height="1">
            <s:fill>
                <s:SolidColor color="#707070" />
            </s:fill>
        </s:Rect>
    </s:Group>
    
</s:Skin>