<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" xmlns:containers="flexlib.containers.*" 
    xmlns:controls="flexlib.controls.*" xmlns:degrafa="com.degrafa.*"
    xmlns:paint="com.degrafa.paint.*" xmlns:geometry="com.degrafa.geometry.*"
    xmlns:flexlib="http://code.google.com/p/flexlib/"   viewSourceURL="srcview/index.html">
    
    <mx:Style source="assets/style/style.css" />
    
    <mx:VBox width="100%" height="100%" paddingRight="10"
        verticalAlign="top" horizontalAlign="right">
        
    
    <containers:WindowShade id="shade" opened="false"
        openIcon="{null}" closeIcon="{null}" 
        paddingTop="0" headerLocation="bottom">
        
        <containers:headerRenderer>
            <mx:Component>
                
                <flexlib:CanvasButton width="100%" height="20" skin="mx.skins.ProgrammaticSkin">
                    
                    <mx:Script>
                    <![CDATA[
                        import flexlib.containers.WindowShade;
                    ]]>
                    </mx:Script>
                    
                    <mx:Box width="100%" horizontalAlign="center">
                        <degrafa:Surface width="80">    
                            <degrafa:GeometryGroup>
                         
                              <geometry:EllipticalArc closureType="pie" 
                                  arc="180" startAngle="-180" width="80" height="35" y="-18">
                                  
                                <geometry:fill>
                                    <paint:GradientFill angle="90">
                                        <paint:GradientStop color="#920000" />
                                        <paint:GradientStop color="#D31F1F" />
                                    </paint:GradientFill>
                                   </geometry:fill>
                              </geometry:EllipticalArc>
                    
                                <geometry:Polygon>
                                    <geometry:data>40,5 35,13 45,13</geometry:data>
                                    <geometry:stroke>
                                        <paint:SolidStroke color="#333333" alpha="{WindowShade(parent).opened ? 1 : 0}" weight="1" />
                                    </geometry:stroke>
                                    <geometry:fill>
                                        <paint:SolidFill color="#ffffff" alpha="{WindowShade(parent).opened ? 1 : 0}" />
                                    </geometry:fill>
                                </geometry:Polygon>
                                
                                <geometry:Polygon>
                                    <geometry:data>40,13 35,5 45,5</geometry:data>
                                    <geometry:stroke>
                                        <paint:SolidStroke color="#333333" alpha="{WindowShade(parent).opened ? 0 : 1}" weight="1" />
                                    </geometry:stroke>
                                    <geometry:fill>
                                        <paint:SolidFill color="#ffffff" alpha="{WindowShade(parent).opened ? 0 : 1}" />
                                    </geometry:fill>
                                </geometry:Polygon>
                                
                            </degrafa:GeometryGroup> 
                        </degrafa:Surface>
                    </mx:Box>
                </flexlib:CanvasButton>
            </mx:Component>
        </containers:headerRenderer>
        
        <mx:Panel paddingLeft="10" paddingTop="30" paddingBottom="20" paddingRight="10"
            horizontalAlign="right">
            <flexlib:PromptingTextInput prompt="username" />
            <flexlib:PromptingTextInput prompt="password" displayAsPassword="true" />
            <mx:Button label="Login" />
        </mx:Panel>
        
        <containers:filters>
            <mx:DropShadowFilter alpha=".3" angle="90" />
        </containers:filters>
    </containers:WindowShade>
    
    </mx:VBox>
    
</mx:Application>