<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
    
    <!-- 
    
    Great resources for understanding scale9 at:
    http://livedocs.macromedia.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000976.html#186094
    http://livedocs.macromedia.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000970.html
    http://www.flex.org/ACDS/FlexSkinsAndThemes.pdf
    http://livedocs.macromedia.com/flex/2/langref/flash/display/DisplayObject.html#scale9Grid
    -->
    
    <mx:Style>
        
        .simpleButton
        {
            upSkin:     Embed(source="assets/demo.png");
            overSkin:    Embed(source="assets/demo_over.png");
            downSkin:     Embed(source="assets/demo_down.png");
        }
        
        .scale9Button
        {
            upSkin:     Embed(source="assets/demo.png", scaleGridTop="5", scaleGridBottom="10", scaleGridLeft="5", scaleGridRight="10");
            overSkin:    Embed(source="assets/demo_over.png", scaleGridTop="5", scaleGridBottom="10", scaleGridLeft="5", scaleGridRight="10");
            downSkin:     Embed(source="assets/demo_down.png", scaleGridTop="5", scaleGridBottom="10", scaleGridLeft="5", scaleGridRight="10");
        }
        
        
        .simplePanel
        {
            borderSkin: Embed(source="assets/demo.png");
        }
        .scale9Panel
        {
            borderSkin: Embed(source="assets/demo.png", scaleGridTop="5", scaleGridBottom="10", scaleGridLeft="5", scaleGridRight="10");
        }
        
        
    </mx:Style>
    
     <mx:Script>
        <![CDATA[
            [Embed(source="assets/demo.png", scaleGridTop="5", scaleGridBottom="10", scaleGridLeft="5", scaleGridRight="10")]
            [Bindable]
            public var imgCls:Class;
        ]]>
    </mx:Script>
    
    <mx:TabNavigator top="10" bottom="10" left="10" right="10">
        
        <mx:VBox label="Original Image" width="100%" height="100%" paddingLeft="10" paddingTop="10">
            <mx:Image source="@Embed('assets/demo.png')" />
            <mx:Image source="@Embed('assets/demo.png')" width="100" height="100"/>
            <mx:Image source="{imgCls}" width="100" height="100"/>
        </mx:VBox>
        
        <mx:VBox label="Scale9 Buttons" width="100%" height="100%" paddingLeft="10" paddingTop="10">
            <mx:Button label="Button 1" styleName="simpleButton" />
            <mx:Button label="Button 2" styleName="scale9Button" />
            <mx:Button label="Button 3" styleName="scale9Button" width="100" height="25" />
        </mx:VBox>
        
        <mx:HBox label="Scale9 Panels" width="100%" height="100%" paddingLeft="10" paddingTop="10">    
            <mx:Panel styleName="simplePanel" width="300" height="250" title="simplePanel" />
            <mx:Panel styleName="scale9Panel" width="300" height="250" title="scale9Panel" />
        </mx:HBox>
    
    </mx:TabNavigator>    
    
</mx:Application>