<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="http://www.degrafa.com/2007"
    layout="absolute"
    backgroundGradientColors="[#333333,#666666]" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import mx.utils.ColorUtil;
        ]]>
    </mx:Script>
    
    <mx:Style source="assets/style/style.css"/>
    
    <mx:Label text="CS4 Icon Previewer" top="30" right="30" styleName="title"/>
    
    <GeometryComposition graphicsTarget="{[iconBox]}">
        
        <!-- Drawing the icon background -->
        <RegularRectangle width="200" height="200" x="0" y="0">
            <fill>
                <RadialGradientFill cx="10" cy="10" angle="45" radius="300">
                    <GradientStop color="{iconColor.selectedColor}"/>
                    <GradientStop color="{ColorUtil.adjustBrightness(iconColor.selectedColor,-100)}"/>
                </RadialGradientFill>
            </fill>
            <filters>
                <mx:GlowFilter color="#000000" blurX="10" blurY="10" alpha=".5"/>
            </filters>
            
            <!-- Drawing the text highlight -->
            <RasterText text="{iconLetters.text}" color="{iconColor.selectedColor}" fontSize="200"
                fontFamily="Myriad Pro Semibold" embedFonts="true" letterSpacing="-4"
                align="center" verticalCenter="1" left="0" right="0"/>
            
            <!-- Drawing the top text -->
            <RasterText text="{iconLetters.text}" color="#161616" fontSize="200"
                fontFamily="Myriad Pro Semibold" embedFonts="true" letterSpacing="-4"
                align="center" verticalCenter="0" left="0" right="0">
                <filters>
                    <mx:DropShadowFilter inner="true" color="#000000" blurX="4" blurY="4" angle="90" distance="1" alpha=".9"/>
                </filters>
            </RasterText>
            
            <!-- HACK to get RasterText to update (Binding coming soon!) -->
            <RegularRectangle height="{iconLetters.text.length}"/>
            
        </RegularRectangle>
        
    </GeometryComposition>
    
    <mx:Canvas top="100" left="40" right="40" bottom="100" fontSize="14">
        <mx:HBox top="0" left="0">
            <mx:Label text="Icon Color" width="100" textAlign="right" paddingTop="2"/>
            <mx:ColorPicker id="iconColor" selectedColor="#62ABCD"/>
        </mx:HBox>
        <mx:HBox top="40" left="0">
            <mx:Label text="Icon Letters" width="100" textAlign="right" paddingTop="2"/>
            <mx:TextInput id="iconLetters" text="Dg" color="#333333" paddingTop="2" maxChars="2"/>
        </mx:HBox>
    </mx:Canvas>
    
    <Surface id="iconBox" width="200" height="200" verticalCenter="0" horizontalCenter="0"/>
    
</mx:Application>