<?xml version="1.0" encoding="utf-8"?>
  <mx:Application pageTitle="Flex 2 Style Explorer" xmlns:mx="http://www.adobe.com/2006/mxml" 
   width="100%" height="100%" backgroundSize="100%" 
  xmlns:views="*"
  xmlns:navigator="*">
  
  <!-- 
  Copyright 2005-2006 Adobe Systems Inc., Adobe Consulting, and Peter Baird
  
  Thanks to Ryan Hicks for design guidance in the original Flex Style Explorer (v1), 
  Tinic Uro and Matt MacLean for code contributed to the advanced color picker, and 
  Derek Wischusen for code contributed to the "Export All CSS" functionality.
  
  This work is licensed under a Creative Commons License.  You may freely 
  duplicate, distribute, display and alter this application for both 
  commercial and non-commercial uses, but you must include this attribution, 
  as well as the links to Adobe Systems and Adobe Consulting if the footer 
  of the application.
  
  For more information contact pbaird@adobe.com.
  
  -->
  
  <mx:Style source="lib-flex-style-explorer-css-flexStyleExplorer.css" />
  <mx:Script source="lib-flex-style-explorer-as-main.ax" />
  
  <mx:VBox horizontalAlign="left" width="100%" verticalGap="5">
          <mx:HBox verticalAlign="middle">
                  <mx:Image source="@Embed('lib-flex-style-explorer-assets-fseLogo.png')" />
                  <mx:Label text="Flex Style Explorer" styleName="styleExplorerTitle">
                          <mx:filters>
                                    <flash.filters:DropShadowFilter xmlns:flash.filters="flash.filters.*" angle="90" blurX="5" blurY="5"
                                             distance="2" alpha=".3" color="0x000000" />
                            </mx:filters>
                  </mx:Label>
                  <mx:Box height="20" verticalAlign="bottom" >
                          <mx:Label text="v 2.0.1" fontFamily="Myriad" color="#FFFFFF" fontSize="8" />        
                  </mx:Box>
                  
          </mx:HBox>
          
  </mx:VBox>
  
  <mx:HBox width="100%" height="100%">
          <mx:Canvas width="180" height="100%" id="box1">
                  <mx:Box width="100%" height="100%" styleName="fseControlBar" />
                  <mx:Box width="100%" height="100%" styleName="fseControlBar" backgroundAlpha="1" >
                          <mx:filters>
                                    <flash.filters:BevelFilter xmlns:flash.filters="flash.filters.*" angle="90" blurX="1" blurY="1"
                                             distance="1" highlightAlpha=".4" shadowAlpha=".4" highlightColor="0x000000" shadowColor="0xFFFFFF" knockout="true" />
                            </mx:filters>
                  </mx:Box>
                  
                  <mx:Image source="{isClosed == false?(closeNav):openNav}" useHandCursor="true" buttonMode="true" mouseChildren="false"
                           click="discloseNav()" id="closeNavBtn" right="5" top="5" />
                  
                  <mx:ViewStack left="5" top="20" bottom="30" right="5" id="navStack" change="{syncChecks()}">
                          
                          <navigator:lib_flex_style_explorer_navigators_treeNav id="treeNav" change="currentView = treeNav.currentView;"  />
                          <navigator:lib_flex_style_explorer_navigators_listNav id="listNav" change="currentView = listNav.currentView; " currentView="{currentView}"   />
                          <navigator:lib_flex_style_explorer_navigators_miniNav id="miniNav" change="currentView = miniNav.currentView;" currentView="{currentView}"  />
                          
                          
                  </mx:ViewStack>
                  
                          <mx:ToggleButtonBar left="5" bottom="5" id="viewToggle" styleName="fseToggleButtons"
                                   itemClick="navStack.selectedIndex = viewToggle.selectedIndex">
                                   <mx:dataProvider>
                                          <mx:Array>
                                                  <mx:Object icon="{navCategories}"  toolTip="Categories"/>                   
                                                  <mx:Object icon="{navList}" toolTip="Alphabetical List"/>
                                                  
                                          </mx:Array>
                                  </mx:dataProvider>
                          </mx:ToggleButtonBar>
                          
                          <mx:LinkButton label="Export All CSS" id="export" bottom="5" right="5" styleName="undoLink" labelPlacement="left"
                                  click="exportCSS()" height="22" icon="{exportIcon}" />
                          
          </mx:Canvas>
          
  <mx:ViewStack width="100%" height="100%" id="myViewstack" selectedIndex="{currentView}" change="{syncChecks()}" >
          
          <views:lib_flex_style_explorer_views_applicationView name="Application" swatches="{globalColors}"    /> 
          <views:lib_flex_style_explorer_views_accordionView name="Accordion"  swatches="{globalColors}" /> 
          <views:lib_flex_style_explorer_views_applicationControlBarView name="ApplicationControlBar"  swatches="{globalColors}" /> 
          <views:lib_flex_style_explorer_views_buttonView name="Button" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_buttonBarView name="ButtonBar" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_checkBoxView name="CheckBox" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_colorPickerView name="ColorPicker"  swatches="{globalColors}" /> 
          <views:lib_flex_style_explorer_views_comboBoxView name="ComboBox" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_dataGridView name="DataGrid" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_dateChooserView name="DateChooser" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_hDividedBoxView name="HDividedBox"  swatches="{globalColors}" /> 
          <views:lib_flex_style_explorer_views_hRuleView name="HRule" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_hScrollBarView name="HScrollBar" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_hSliderView name="HSlider" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_linkBarView name="LinkBar" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_linkButtonView name="LinkButton"  swatches="{globalColors}" /> 
          <views:lib_flex_style_explorer_views_listView name="List" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_menuBarView name="MenuBar"  swatches="{globalColors}" /> 
          <views:lib_flex_style_explorer_views_numericStepperView name="NumericStepper" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_panelView name="Panel" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_popUpButtonView name="PopUpButton" swatches="{globalColors}"  />
          <views:lib_flex_style_explorer_views_progressBarView name="ProgressBar"  swatches="{globalColors}" /> 
          <views:lib_flex_style_explorer_views_radioButtonView name="RadioButton" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_tabsView name="TabNavigator" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_textAreaView name="TextArea" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_textInputView name="TextInput" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_toggleButtonBarView name="ToggleButtonBar" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_toolTipView name="ToolTip" swatches="{globalColors}"  />
          <views:lib_flex_style_explorer_views_treeView name="Tree" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_vDividedBoxView name="VDividedBox" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_vRuleView name="VRule" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_vScrollBarView name="VScrollBar" swatches="{globalColors}"  /> 
          <views:lib_flex_style_explorer_views_vSliderView name="VSlider" swatches="{globalColors}"  /> 
          
  
  </mx:ViewStack>
  
          
          
  </mx:HBox>
  
  <mx:HBox width="100%" height="26">
          <mx:LinkButton label="Copyright (c) 2007 Adobe Systems, Inc. All Rights Reserved" 
                  click="navigateToURL(new URLRequest('http://www.adobe.com/'));"
                  styleName="footerLink" alpha="0.2"
                  />
          <mx:Spacer width="100%" />
          <mx:LinkButton label="Created by Adobe Consulting" 
                  click="navigateToURL(new URLRequest('http://weblogs.macromedia.com/mc/'));"
                  styleName="footerLink"
                  textDecoration="underline" alpha="0.2"
                  />
  </mx:HBox>
  
          <mx:Resize id="shrink" widthTo="50" target="{box1}" duration="1000" effectEnd="navStack.visible = true; export.visible = true;" />
          <mx:Resize id="grow" widthTo="180" target="{box1}" duration="1000" 
                  effectEnd="navStack.visible = true; viewToggle.visible = true; export.label = 'Export All CSS'; export.visible = true;" />
  
  </mx:Application>