<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:cm="com.craftymind.controls.*" creationComplete="switchCSS()" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            private var selectedStyle:Boolean = true;
            private function switchCSS():void{
                if(selectedStyle){
                    StyleManager.loadStyleDeclarations("assets/style1.swf");
                }else{
                    StyleManager.loadStyleDeclarations("assets/style2.swf");
                }
                selectedStyle = !selectedStyle;
            }
        ]]>
    </mx:Script>
    <cm:extHBox styleName="header">
        <mx:Label text="Header Text"/>
    </cm:extHBox>
    <cm:extHBox id="nav" styleName="navContainer">
        <cm:extHBox styleName="navItem">
            <mx:Label text="Nav Item 1"/>
        </cm:extHBox>
        <cm:extHBox styleName="navItem">
            <mx:Label text="Nav Item 2"/>
        </cm:extHBox>
        <cm:extHBox styleName="navItem">
            <mx:Label text="Nav Item 3"/>
        </cm:extHBox>
    </cm:extHBox>
    <mx:Button label="Switch CSS" click="switchCSS()" y="{nav.y+nav.height+2}"/>
</mx:Application>