<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns="*" 
    xmlns:flexlib="http://code.google.com/p/flexlib/"
    layout="vertical" viewSourceURL="srcview/index.html">
    
    <mx:Style>
        Application {
            backgroundGradientColors: #FFFFFF, #FFFFFF;
            backgroundGradientAlphas: 1, 1;
            vertical-align: middle;
            horizontal-align: center;
        }
        
        VAccordion {
           headerHeight: 80;
           vertical-gap: 5;
           background-alpha:0;
           open-duration:500;
           border-style:none;
           padding-bottom:5;
           header-style-name: gradientHeader;
        }
        
        .gradientHeader {
            upSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
            overSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
            downSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
            disabledSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
            selectedUpSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
            selectedOverSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
            selectedDownSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
            selectedDisabledSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
            font-family:Arial;
            cornerRadii: 0, 0, 10, 10;
            borderColors: #FFFFFF, #FFFFFF;
            overBorderColors: #FFFFFF, #FFFFFF;
            selectedBorderColors: #FFFFFF, #FFFFFF;
            borderThickness: 2;
            borderAlpha: 1;
            fillColors: #FFFFFF, #FFFFFF;
            fillAlphas: 1, 1;
            fillColorRatios: 0, 255;
            overFillColors: #FFFFFF, #BAC2CF;
            overFillAlphas: 1, 1;
            overFillColorRatios: 0, 169;
            selectedFillColors: #FFFFFF, #BAC2CF;
            selectedFillAlphas: 1,1;
            selectedFillColorRatios: 0, 169;
        }
        
        Panel {
           borderStyle: solid;
           borderColor: #b7babc;
           corner-radius:10;
           borderAlpha: 1;
           roundedBottomCorners: true;
           headerHeight: 24;
           highlightAlphas: 0, 0;
           headerColors: #b1b7c4, #8392ab;
          
           titleStyleName: "mypanelTitle";
           border-thickness-left:1;
           border-thickness-right:1;
           border-thickness-top:0;
           border-thickness-bottom:-5;
            
           border-thickness:1;   
        }
        
        .mypanelTitle {
           color: #ffffff;
           fontSize: 12;
        }

    </mx:Style>
    

    <mx:Panel title="Essentials">
    
        <flexlib:VAccordion id="accordion" 
            headerLocation="below" width="200" 
            resizeToContent="true" headerRenderer="Header" >
            
            <AccordionItem title="iTunes 7" 
                image="@Embed('assets/essentials_itunes20070611.png')"
                description="Music. Movies. TV Shows. Podcasts." />
            
            <AccordionItem title="QuickTime"
                image="@Embed('assets/essentials_quicktime20070611.png')" 
                description="Enjoy crystal clear video with H.264 support." />
            
            <AccordionItem title="Widgets"
                image="@Embed('assets/essentials_widgets20070611.png')"
                description="Amazing widgets for your Mac OS X Dashboard." />
            
            <AccordionItem title="Safari 3 Public Beta"
                image="@Embed('assets/essentials_safari20070611.png')"
                description="The world's best browser. Now on Windows, too." />
            
            <AccordionItem title="Movie Trailers"
                image="@Embed('assets/essentials_trailers20070703.png')"
                description="The latest previews. Many in gorgeous high-def." />
                
        </flexlib:VAccordion>
        
    </mx:Panel>
    
</mx:Application>