<?xml version="1.0" encoding="utf-8"?>
<!--
* Pimp your Flex app using WSBackgroundPixelSkin [whithout images - pure CSS and AS]
* 
* @author    Jens Krause [www.websector.de]
* @date        07/06/07
* @see        http://www.websector.de/blog/2007/07/06/pimp-your-flex-app-using-wsbackgroundpixelskin/
* 
* Feel free to use the source - its licensed under the Mozilla Public License 1.1. (http://www.mozilla.org/MPL/MPL-1.1.html)
-->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="100%" height="100%"
    backgroundColor="0x000000"
    styleName="bg7"
    preloader="Preloader"
    creationComplete="onAppComplete(event)" 
    viewSourceURL="srcview/index.html">

    <mx:Style source="css/styles.css"/>

    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
        
            [Bindable]
            private var _stylesData: Array;
        
            private var _maxStyles: uint = 10;
            
            private function onAppComplete(event: FlexEvent): void
            {
                _stylesData = new Array();
                
                for (var i: uint = 0; i < _maxStyles; i++)
                {
                    _stylesData[i] = {label:"Pixel Style " + (i + 1), data: i};
                }
                
                styleApp.dataProvider
                = styleCBox1.dataProvider
                = styleCBox2.dataProvider
                = _stylesData;
                
                styleApp.selectedIndex = 8;
                styleCBox1.selectedIndex = 0;
                styleCBox2.selectedIndex = 4;                            
            }
            
            private function changeBGStyles(event: Event):void
            {
                var styleId: uint = event.target.value;
            
                switch(event.target)
                {
                    case styleApp:
                        this.styleName = "bg" + styleId;
                    break;                    
                    case styleCBox1:
                        cBox1.styleName = "bg" + styleId;                        
                    break;                    
                    case styleCBox2:
                        cBox2.styleName = "bg" + styleId;
                    break;                    
                    default:
                    
                }
            }
            
            private function gotoWSBlog( ):void
            {
                 var url:URLRequest = new URLRequest( "http://www.websector.de/blog/2007/07/06/pimp-your-flex-app-using-wsbackgroundpixelskin/" );
                navigateToURL(url);
            }
        ]]>
    </mx:Script>
        
    <mx:VBox id="vBox"
        height="100%" width="100%"
        horizontalAlign="center"
        verticalGap="50">

        <mx:VBox
            horizontalAlign="center"
            backgroundColor="0">
            <mx:LinkButton 
                label="Pimp your Flex app using WSBackgroundPixelSkin" 
                click="gotoWSBlog()"/>
            <mx:Text text="* without images - pure CSS and AS *" 
                fontSize="15" color="#FFFFFF"/>    
            
        </mx:VBox>
                
        <mx:Form>
            <mx:Text text="App background"
                styleName="formH1" />
            <mx:ComboBox id="styleApp"
                width="100%"
                dataProvider="{_stylesData}"
                change="changeBGStyles(event)"
                selectedIndex="0">
                
            </mx:ComboBox>
        </mx:Form>

        <!-- canvas example-->
        <mx:HBox id="hBox"
            width="90%" height="300"
            borderStyle="solid" borderThickness="10" borderColor="0xFFFFFF"
            backgroundColor="0xFFFFFF"
            horizontalAlign="center" verticalAlign="middle">
    
            <mx:Canvas id="cBox1"
                styleName="bg0"
                width="50%" height="100%">
                <mx:Form
                    horizontalCenter="0" verticalCenter="0">
                    <mx:Text text="Left Canvas background"
                        styleName="formH1" />
                    <mx:ComboBox id="styleCBox1"
                        width="100%"
                        change="changeBGStyles(event)"
                        selectedIndex="1">
                        
                    </mx:ComboBox>
                </mx:Form>            
            </mx:Canvas>
            
            <mx:Spacer width="10" />
    
            <mx:Canvas id="cBox2"
                styleName="bg4"
                width="50%" height="100%">
                <mx:Form
                    horizontalCenter="0" verticalCenter="0">
                    <mx:Text text="Right Canvas background"
                        styleName="formH1" />
                    <mx:ComboBox id="styleCBox2"
                        width="100%"
                        dataProvider="{_stylesData}"
                        change="changeBGStyles(event)"
                        selectedIndex="2">                        
                    </mx:ComboBox>
                </mx:Form>
            </mx:Canvas>
                    
        </mx:HBox>        
    </mx:VBox>    
                    
</mx:Application>