<?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
          xmlns:coverflow="com.dougmccune.coverflow.*"
          layout="vertical" horizontalAlign="center" verticalAlign="middle"
          xmlns:containers="com.dougmccune.containers.*"
  >
          <mx:Script>
                  <![CDATA[
                          import mx.events.FlexEvent;
                  ]]>
          </mx:Script>
          <mx:Style>
                  Panel {
                     borderColor: #99CDEE;
                     borderAlpha: 1;
                     borderThickness: 1;
                     borderThicknessLeft: 1;
                     borderThicknessTop: 0;
                     borderThicknessBottom: 1;
                     borderThicknessRight: 1;
                     roundedBottomCorners: false;
                     cornerRadius: 5;
                     headerColors: #b5e6f3, #81b3e6;
                     dropShadowEnabled: false;
                     titleStyleName: "mypanelTitle";
                     vertical-align:middle;
                     horizontal-align:center;
                  }
                  
                  .mypanelTitle {
                     letterSpacing: 1;
                     color: #333333;
                     fontSize: 12;
                     fontWeight: bold;
                  }
          </mx:Style>
          
          
                  <mx:VBox id="box" verticalGap="0" height="100%" width="100%" maxWidth="600" maxHeight="300" >
                          
                          <containers:CoverFlowContainer id="coverflow" width="100%" height="100%" 
                                  horizontalGap="40" borderStyle="inset" backgroundColor="0x000000"
                                  segments="6" reflectionEnabled="true">
                                  
                                  
                                  <mx:Panel width="200" height="200" title="Coverflow Rocks!" >
                                          <mx:NumericStepper/>
                                          <mx:Button label="Button"/>
                                          <mx:CheckBox label="Checkbox"/>
                                          <mx:RadioButton label="Radio"/>
                                          <mx:HSlider/>
                                  </mx:Panel>
                                  
                                  <mx:Panel width="200" height="200" title="ZOMGZ! Look at the 3D!">
                                          <mx:DateChooser width="90%" height="90%"/>
                                  </mx:Panel>
                                  
                                  <mx:Panel width="200" height="200" title="Configuration">
                                          <mx:Form width="100%">
                                                  <mx:FormItem label="Background color">
                                                          <mx:ColorPicker change="coverflow.setStyle('backgroundColor', event.color)"/>
                                                  </mx:FormItem>
                                                  <mx:FormItem label="Spacing" width="100%">
                                                          <mx:HSlider minimum="0" maximum="200" liveDragging="true" width="50" 
                                                                  value="40" change="coverflow.setStyle('horizontalSpacing', event.value)" />
                                                  </mx:FormItem>
                                          </mx:Form>
                                  </mx:Panel>
                                  
                                  <mx:Panel width="200" height="200" title="DataGrid Example">
                                          <mx:DataGrid width="100%" height="100%">
                                                  <mx:columns>
                                                          <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
                                                          <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
                                                          <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
                                                  </mx:columns>
                                          </mx:DataGrid>
                                  </mx:Panel>
                                  
                                  <!-- here we're dispatching an UPDATE_COMPLETE event every frame. This is so our PV3D material will
                                           update itself properly for this component, since we want the animation to show correctly.
                                    -->
                                  <mx:Panel width="200" height="200" title="Showing Animation" 
                                          enterFrame="event.currentTarget.dispatchEvent(new FlexEvent(FlexEvent.UPDATE_COMPLETE))">
                                          <mx:ProgressBar width="90%" indeterminate="true" trackHeight="30" labelPlacement="center" />
                                  </mx:Panel>
                                  
                          </containers:CoverFlowContainer>
                          
                          <mx:HScrollBar id="scrollbar" width="100%" pageSize="1" maxScrollPosition="{coverflow.numChildren - 1}"
                                  scrollPosition="{coverflow.selectedIndex}" 
                                  scroll="coverflow.selectedIndex = Math.round(scrollbar.scrollPosition)" />
                                  
                  </mx:VBox>
                  
          
  </mx:Application>