<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" preinitialize="onPreinitialize (event)" applicationComplete="setWindow()" showFlexChrome="false" width="600" height="500" layout="absolute" xmlns:techlabs="com.justinimhoff.techlabs.*" viewSourceURL="srcview/index.html">
    <mx:states>
        <!---
             When using states you are calling setStyle on object directly
             Notice the difference between the setStyle and setProperty, anything that say setStyle can be embedded
             in the styleSheet and then the object's style can be applied through the object's styleName
        -->
        <mx:State name="MAC">
            <mx:RemoveChild target="{button1}"/>
            <mx:SetStyle target="{userPlatformControl}" name="top" value="50"/>
            <mx:SetStyle target="{techLabsFooter}" name="bottom" value="79"/>
            <mx:SetStyle target="{techLabsFooter}" name="left" value="40"/>
            <mx:SetStyle target="{techLabsFooter}" name="right" value="40"/>
            <mx:SetStyle target="{capabilitiesList}" name="top" value="79"/>
            <mx:SetStyle target="{capabilitiesList}" name="right" value="40"/>
            <mx:SetStyle target="{capabilitiesList}" name="bottom" value="129"/>
            <mx:SetStyle target="{capabilitiesList}" name="left" value="40"/>
            <mx:SetStyle target="{capabilitiesList}" name="left" value="40"/>
            <mx:SetStyle target="{userPlatformControl}" name="left" value="48"/>
            <mx:SetStyle target="{label1}" name="fontSize" value="16"/>
            <mx:SetStyle target="{label1}" name="fontWeight" value="bold"/>
            <mx:SetStyle target="{label1}" name="horizontalCenter" value="0"/>
            <mx:SetStyle target="{label1}" name="top" value="40"/>
            <mx:SetStyle target="{label1}" name="color" value="#333333"/>
            <mx:SetStyle target="{techLabsFooter}" name="verticalAlign" value="middle"/>
            <mx:SetProperty target="{techLabsFooter}" name="height" value="51"/>
            <mx:SetProperty target="{button2}" name="styleName" value="toolBarButtons"/>
            <mx:SetProperty target="{button2}" name="label"/>
        </mx:State>
        <mx:State name="WIN">
            <mx:RemoveChild target="{button2}"/>
            <mx:SetStyle target="{userPlatformControl}" name="left" value="40"/>
            <mx:SetStyle target="{userPlatformControl}" name="right" value="40"/>
            <mx:SetStyle target="{userPlatformControl}" name="top" value="78"/>
            <mx:SetStyle target="{techLabsFooter}" name="bottom" value="79"/>
            <mx:SetStyle target="{techLabsFooter}" name="left" value="40"/>
            <mx:SetStyle target="{techLabsFooter}" name="right" value="40"/>
            <mx:SetStyle target="{capabilitiesList}" name="top" value="107"/>
            <mx:SetStyle target="{capabilitiesList}" name="right" value="40"/>
            <mx:SetStyle target="{capabilitiesList}" name="bottom" value="129"/>
            <mx:SetStyle target="{capabilitiesList}" name="left" value="40"/>
            <mx:SetStyle target="{capabilitiesList}" name="left" value="40"/>
            <mx:SetStyle target="{techLabsFooter}" name="verticalAlign" value="middle"/>
            <mx:SetStyle target="{label1}" name="horizontalCenter" value="0"/>
            <mx:SetStyle target="{label1}" name="top" value="40"/>
            <mx:SetStyle target="{label1}" name="fontSize" value="16"/>
            <mx:SetStyle target="{label1}" name="fontWeight" value="bold"/>
            <mx:SetStyle target="{label1}" name="color" value="#FFFFFF"/>
            <mx:SetProperty target="{userPlatformControl}" name="styleName" value="toolBar"/>
            <mx:SetProperty target="{button1}" name="styleName" value="toolBarButtons"/>
            <mx:SetProperty target="{userPlatformControl}" name="height" value="30"/>
            <mx:SetProperty target="{button1}" name="height" value="25"/>
            <mx:SetProperty target="{techLabsFooter}" name="height" value="51"/>
        </mx:State>
    </mx:states>
    <techlabs:AppWindow width="100%" height="100%" id="appWindow">
        <mx:Label text="Native Window Explorer" id="label1"/>
        <mx:DataGrid id="capabilitiesList"/>
        <mx:HBox id="techLabsFooter" backgroundColor="#333333">
            <mx:Image source="@Embed(source='images/logo-trans1.png')" id="techLabsLogo" left="15"/>
        </mx:HBox>
        <mx:HBox id="userPlatformControl">
            <mx:Button label="MAC Style" click="switchPlatform('MAC')" enabled="{platform == 'WIN'}" id="button1"/>
            <mx:Button label="PC Style" click="switchPlatform('WIN')" enabled="{platform == 'MAC'}" id="button2"/>
        </mx:HBox>
    </techlabs:AppWindow>
    <!--- This compiles the global style in the SWF -->
    <mx:Style source="skins/Default.css"/>
    <mx:Script>
        <![CDATA[
            import mx.core.Container;
            import mx.controls.Text;
            import flash.utils.describeType;
            import mx.collections.ArrayCollection;
            import mx.events.StyleEvent;
            import mx.events.FlexEvent;
            import mx.managers.SystemManager;
            import mx.events.AIREvent;
            import flash.utils.*;

            [Bindable]
            private var platform:String;

            //We are not overriding preinitialization, but are instead adding on to the cycel
            private function onPreinitialize(event:FlexEvent):void {
                var findPlatform:Array=Capabilities.version.split(" ", 1);
                platform=findPlatform[0];
                if (platform != "MAC") {
                    platform="WIN"
                }
                var eventDispatcher:IEventDispatcher;
                //Dispatch a styleEvent that the remote style SWF has been successfully loaded
                eventDispatcher=StyleManager.loadStyleDeclarations("skins/" + platform + ".swf");
                eventDispatcher.addEventListener(StyleEvent.COMPLETE, onStyleComplete);
            }

            // We do not want Flex to continue onto initialization until the style SWF is loaded and we are ready to initialize
            override public function set initialized(value:Boolean):void {
                // wait until the style swf is done loading!
            }

            private function onStyleComplete(event:StyleEvent):void {
                //Tell the app that we are ready to initialize
                event.stopImmediatePropagation();
                super.initialized=true;
            }

            //This is used to set the state of the application and set the view of the AppWindow
            private function setWindow():void {
                appWindow.os=platform;
                currentState=platform;
                //Center the window on the desktop
                nativeWindow.x=Capabilities.screenResolutionX / 4;
                nativeWindow.y=Capabilities.screenResolutionY / 4;
                //In the native OS environment we will have multiple window open and we need to notify the user that they have or donot have
                // focuse on the window
                addEventListener(AIREvent.APPLICATION_ACTIVATE, setApplicationFoucs);
                addEventListener(AIREvent.APPLICATION_DEACTIVATE, setApplicationFoucs);
                // Take the current Flash Player Capabilities class and dump it into a datagrid
                printCapabilities(Capabilities);
            }

            private function setApplicationFoucs(event:AIREvent):void {
                event.stopImmediatePropagation();
                if (event.type == "applicationDeactivate") {
                    appWindow.active=false;
                } else {
                    appWindow.active=true;
                }
            }

            //Dump the Capabilites to a datagrid
            private function printCapabilities(o:Object):void {
                var def:XML=describeType(o);
                var props:XMLList=def..variable.@name;
                props+=def..accessor.@name;
                var capArray:Array=new Array();
                for each (var prop:String in props) {
                    var capObj:Object=new Object();
                    capObj.propName=prop;
                    capObj.propValue=o[prop]
                    capArray.push(capObj);
                }
                capabilitiesList.dataProvider=capArray;
            }

            //User defined switch of the current platform
            private function switchPlatform(os:String):void {
                StyleManager.loadStyleDeclarations("skins/" + os + ".swf");
                appWindow.os=os;
                platform=os;
                currentState=os;
            }
        ]]>
    </mx:Script>
</mx:WindowedApplication>