<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
    <mx:Script>
    <![CDATA[

        import mx.styles.StyleManager;
        import mx.events.StyleEvent;
        import mx.collections.*;
        
        private function changeCSS( panelTitle:String, name:String ):void {
            var styleEvent:IEventDispatcher = StyleManager.loadStyleDeclarations( name, true );
        }
        
        [Bindable]
        public var menuBarCollection:XMLListCollection;
        
        //Initialize Data Collections.
        private function initCollections():void {
            menuBarCollection = new XMLListCollection(menuBarXML);
        }
        

        // Initialize the data provider for the Tree.
        private function initTree():void {
            tree.dataProvider = treeData;
        }
        
        private var menuBarXML:XMLList =
            <>
                <menuitem label="Item 1">
                    <menuitem label="Item 1">
                        <menuitem label="Item 1"/>
                        <menuitem label="Item 2"/>
                        <menuitem label="Item 3"/>
                    </menuitem>
                    <menuitem label="Item 2">
                        <menuitem label="Item 1"/>
                        <menuitem label="Item 2"/>
                    </menuitem>
                    <menuitem label="Item 3">
                        <menuitem label="Item 1"/>
                        <menuitem label="Item 2"/>
                        <menuitem label="Item 3"/>
                        <menuitem label="Item 4"/>
                        <menuitem label="Item 5"/>
                    </menuitem>
                </menuitem>
                <menuitem label="Item 2">
                    <menuitem label="Item 1">
                        <menuitem label="Item 1"/>
                        <menuitem label="Item 2"/>
                        <menuitem label="Item 3"/>
                    </menuitem>
                </menuitem>
                <menuitem label="Item 3">
                    <menuitem label="Item 1">
                        <menuitem label="Item 1"/>
                        <menuitem label="Item 2"/>
                        <menuitem label="Item 3"/>
                    </menuitem>
                    <menuitem label="Item 2">
                        <menuitem label="Item 1"/>
                        <menuitem label="Item 2"/>
                    </menuitem>
                </menuitem>
            </>;

    ]]>
</mx:Script>

    <mx:XML id="treeData">
            <node label="Item">
                <node label="Folder">
                    <node label="Item"/>
                    <node label="Item"/>
                    <node label="Iteml"/>
                    <node label="Item"/>
                </node>
                <node label="Folder">
                    <node label="Item"/>
                    <node label="Item"/>
                    <node label="Iteml"/>
                    <node label="Item"/>
                </node>
                <node label="Item"/>
                <node label="Item"/>
            </node>
    </mx:XML>
    
    <mx:XMLList id="dataGridData">
        <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
        </employee>
        <employee>
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
        </employee>
    </mx:XMLList>

  <mx:Style source="style/obsidian.css"/>
  
  <mx:TitleWindow width="700" height="500" layout="absolute" title="Title Window" showCloseButton="true" horizontalCenter="0" verticalCenter="0">
        <mx:TabNavigator x="0" y="0" width="100%" height="100%" borderStyle="none">
            <mx:Canvas label="Form Elements" width="100%" height="100%" borderStyle="solid" borderThickness="0">
                <mx:ToggleButtonBar x="10" y="10">
                    <mx:dataProvider>
                                <mx:Array>
                                    <mx:Object label="Item 1"/>
                                    <mx:Object label="Item 2"/>
                                    <mx:Object label="Item 3"/>
                                </mx:Array>
                            </mx:dataProvider>
                </mx:ToggleButtonBar>
                <mx:Button x="10" y="39" label="Button" width="60" toolTip="Hello, I'm a Tool Tip"/>
                <mx:CheckBox x="10" y="126" label="Checkbox"/>
                <mx:ComboBox x="78" y="39">
                    <mx:dataProvider>
                                <mx:Array>
                                    <mx:Object label="Item 1"/>
                                    <mx:Object label="Item 2"/>
                                    <mx:Object label="Item 3"/>
                                    <mx:Object label="Item 4"/>
                                    <mx:Object label="Item 5"/>
                                </mx:Array>
                            </mx:dataProvider>
                </mx:ComboBox>
                <mx:NumericStepper x="13" y="68"/>
                <mx:RadioButton x="10" y="100" label="Radio"/>
                <mx:HSlider x="10" y="276.9" minimum="0" maximum="10" snapInterval="1" tickInterval="1" showTrackHighlight="true" thumbCount="2" values="[2,5]"/>
                <mx:DateField x="10" y="152"/>
                <mx:ColorPicker x="10" y="182"/>
                <mx:TextInput x="10" y="212" text="Text Input"/>
                <mx:TextArea x="231" y="10"/>
                <mx:PopUpMenuButton x="78" y="67" label="PopUpMenuButton" showRoot="false" labelField="@label" dataProvider="{menuBarXML}"/>
            </mx:Canvas>
            <mx:Canvas label="Navigation" width="100%" height="100%">
                <mx:Accordion x="10" y="50" width="200" height="200">
                    <mx:Canvas label="Accordion Pane 1" width="100%" height="100%">
                    </mx:Canvas>
                    <mx:Canvas label="Accordion Pane 2" width="100%" height="100%">
                    </mx:Canvas>
                    <mx:Canvas label="Accordion Pane 3" width="100%" height="100%">
                    </mx:Canvas>
                </mx:Accordion>
                <mx:ApplicationControlBar x="10" y="10">
                    <mx:Label text="Application Control Bar"/>
                    <mx:LinkButton label="LinkButton"/>
                    <mx:LinkButton label="LinkButton"/>
                </mx:ApplicationControlBar>
                <mx:TextArea x="218" y="49" height="201" width="200">
                    <mx:text><![CDATA[Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec massa orci, molestie ut, interdum sed, cursus vel, lacus. Praesent in velit. Suspendisse vehicula, magna at lobortis ultrices, velit nunc accumsan ipsum, non vehicula tellus felis quis metus. Duis est elit, laoreet sit amet, dignissim in, vestibulum id, nibh. In purus. Curabitur quis eros ut leo tempus gravida. Praesent suscipit mi sit amet augue. Aenean volutpat dictum arcu. Sed nonummy nunc. Fusce mattis tempor nunc. Cras pellentesque posuere nisl. Nullam sed tortor. Fusce massa quam, ornare at, pharetra eu, dictum vel, sapien. Quisque aliquet viverra nisl. Donec eu wisi eget ligula convallis pellentesque. Vivamus purus. Sed dignissim odio ut ligula. Nulla nonummy. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ]]></mx:text>
                </mx:TextArea>
                <mx:Tree id="tree" x="426" y="49" showRoot="false" labelField="@label" creationComplete="initTree();" width="200" height="200"/>
            </mx:Canvas>
            <mx:Canvas label="Cursors" width="100%" height="100%">
                <mx:Label x="42" y="14" text="Busy"/>
            </mx:Canvas>
            <mx:Canvas label="Other" width="100%" height="100%">
                <mx:DataGrid x="10" y="10" dataProvider="{dataGridData}" width="477" height="178">
                    <mx:columns>
                        <mx:DataGridColumn headerText="Column 1" dataField="name"/>
                        <mx:DataGridColumn headerText="Column 2" dataField="phone"/>
                        <mx:DataGridColumn headerText="Column 3" dataField="email"/>
                    </mx:columns>
                </mx:DataGrid>
                <mx:DateChooser x="495" y="10"/>
            </mx:Canvas>
        </mx:TabNavigator>
        <mx:ControlBar>
            <mx:Label text="Control Bar" color="#000000"/>
            <mx:Button label="Button" width="50"/>
            <mx:Button label="Button" width="50"/>
            <mx:Button label="Button" width="50"/>
        </mx:ControlBar>
    </mx:TitleWindow>
    <mx:RadioButtonGroup id="radiogroup1"/>
    <mx:MenuBar x="0" y="40" width="100%" labelField="@label" dataProvider="{menuBarXML}">
    </mx:MenuBar>
    <mx:ApplicationControlBar x="0" y="0" width="100%" height="40" verticalAlign="middle">
        <mx:Label text="Theme Swapper" fontFamily="Georgia" fontSize="18" color="#ffffff"/>
        <mx:Spacer width="100%" height="30"/>
        <mx:Label text="Choose a theme:" color="#ffffff"/>
        
        <!-- NOTE: In order for the runtime CSS to work all CSS files must be set to "Compile CSS to SWF".
        //// To do this, right-click on a CSS file in the "style" folder and select "Compile CSS to SWF".
        //// This must be done for every CSS file otherwise an error will pop up stating that "SWF can't be found".-->
        
        
        <mx:Button label="Obsidian" click="changeCSS( 'obsidian','style/obsidian.swf' )"/>
        <mx:Button label="iTunes 7" click="changeCSS( 'jukebox','style/jukebox.swf' )"/>
        <mx:Button label="WMP 11" click="changeCSS( 'wmp11','style/wmp11.swf' )" color="#ffffff"/>
        <mx:Button label="Messenger" click="changeCSS( 'messenger','style/messenger.swf' )"/>
    </mx:ApplicationControlBar>
</mx:Application>