<?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%" viewSourceURL="srcview/index.html" xmlns:views="views.*"  xmlns:navigator="navigators.*">

<!-- 
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="css/flexStyleExplorer.css" />
<mx:Script source="as/main.as" />


<mx:VBox horizontalAlign="left" width="100%" verticalGap="5">
	<mx:HBox verticalAlign="middle">		<mx:Image source="@Embed('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:treeNav id="treeNav" change="currentView = treeNav.currentView;"  />
			<navigator:listNav id="listNav" change="currentView = listNav.currentView; " currentView="{currentView}"   />
			<navigator: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:applicationView name="Application" swatches="{globalColors}"    /> 
	<views:accordionView name="Accordion"  swatches="{globalColors}" /> 
	<views:applicationControlBarView name="ApplicationControlBar"  swatches="{globalColors}" /> 
	<views:buttonView name="Button" swatches="{globalColors}"  /> 
	<views:buttonBarView name="ButtonBar" swatches="{globalColors}"  /> 
	<views:checkBoxView name="CheckBox" swatches="{globalColors}"  /> 
	<views:colorPickerView name="ColorPicker"  swatches="{globalColors}" /> 
	<views:comboBoxView name="ComboBox" swatches="{globalColors}"  /> 
	<views:dataGridView name="DataGrid" swatches="{globalColors}"  /> 
	<views:dateChooserView name="DateChooser" swatches="{globalColors}"  /> 
	<views:hDividedBoxView name="HDividedBox"  swatches="{globalColors}" /> 
	<views:hRuleView name="HRule" swatches="{globalColors}"  /> 
	<views:hScrollBarView name="HScrollBar" swatches="{globalColors}"  /> 
	<views:hSliderView name="HSlider" swatches="{globalColors}"  /> 
	<views:linkBarView name="LinkBar" swatches="{globalColors}"  /> 
	<views:linkButtonView name="LinkButton"  swatches="{globalColors}" /> 
	<views:listView name="List" swatches="{globalColors}"  /> 
	<views:menuBarView name="MenuBar"  swatches="{globalColors}" /> 
	<views:numericStepperView name="NumericStepper" swatches="{globalColors}"  /> 
	<views:panelView name="Panel" swatches="{globalColors}"  /> 
	<views:popUpButtonView name="PopUpButton" swatches="{globalColors}"  />
	<views:progressBarView name="ProgressBar"  swatches="{globalColors}" /> 
	<views:radioButtonView name="RadioButton" swatches="{globalColors}"  /> 
	<views:tabsView name="TabNavigator" swatches="{globalColors}"  /> 
	<views:textAreaView name="TextArea" swatches="{globalColors}"  /> 
	<views:textInputView name="TextInput" swatches="{globalColors}"  /> 
	<views:toggleButtonBarView name="ToggleButtonBar" swatches="{globalColors}"  /> 
	<views:toolTipView name="ToolTip" swatches="{globalColors}"  />
	<views:treeView name="Tree" swatches="{globalColors}"  /> 
	<views:vDividedBoxView name="VDividedBox" swatches="{globalColors}"  /> 
	<views:vRuleView name="VRule" swatches="{globalColors}"  /> 
	<views:vScrollBarView name="VScrollBar" swatches="{globalColors}"  /> 
	<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>