<?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"
    viewSourceURL="srcview/index.html" 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>