<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    color="#000000">
    
    <mx:Metadata>
        [Event("checkout")]
    </mx:Metadata>
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]
            public var purchasedPhotos:ArrayCollection
            
            private function checkOut():void 
            {
                dispatchEvent( new Event("checkout") );
            }
        ]]>
    </mx:Script>
        
    <mx:states>
        <mx:State name="expandedCart">
            <mx:SetProperty 
                target="{cart}" 
                name="height" 
                value="472" />
            <mx:AddChild 
                relativeTo="{cart}" 
                position="lastChild">
                <mx:DataGrid 
                    x="10" y="60"
                    height="340"
                    dataProvider="{purchasedPhotos}" width="200">
                    <mx:columns>
                        <mx:DataGridColumn 
                            headerText="Picture" 
                            width="100"
                            dataField="filename"/>
                        <mx:DataGridColumn 
                            headerText="Information" 
                            width="100">
                            <mx:itemRenderer>
                                <mx:Component>
                                    <mx:VBox>
                                        <mx:Label text="{data.photographer}"/>
                                        <mx:Label text="{data.category}"/>
                                    </mx:VBox>
                                </mx:Component>
                            </mx:itemRenderer>
                        </mx:DataGridColumn>
                    </mx:columns>
                </mx:DataGrid>
            </mx:AddChild>
            <mx:AddChild 
                relativeTo="{cart}" 
                position="lastChild">
                <mx:Button 
                    label="delete" 
                    id="button3" 
                    x="10" y="410" />
            </mx:AddChild>
            <mx:AddChild 
                relativeTo="{cart}" 
                position="lastChild">
                <mx:Button id="button2"
                    label="check out" 
                    x="131" y="408" 
                    click="checkOut()"/>
            </mx:AddChild>

            <mx:SetProperty 
                target="{button1}" 
                name="label" 
                value="collapse details" />
            <mx:SetEventHandler 
                target="{button1}" 
                name="mouseUp" 
                handler="currentState=''" />
        </mx:State>
    </mx:states>

    <mx:transitions>
        <mx:Transition id="expandingCart"
            fromState="" toState="expandedCart">
            <mx:Resize target="{cart}" />
        </mx:Transition>
        <mx:Transition id="collapsingCart"
            fromState="expandedCart" toState="">
            <mx:Resize target="{cart}"
                duration="1000" />
        </mx:Transition>
    </mx:transitions>

    <mx:Image id="woman"
        y="100"
        source="assets/fstop/woman.jpg" />
    
    <mx:Panel id="cart"
        layout="absolute"
        width="225" height="90"
        title="Shopping Cart"
        borderAlpha="1"
        headerColors="[#63769E, #B5D2FA]"
        borderThicknessBottom="0"
        borderThicknessLeft="0"
        borderThicknessRight="0"
        paddingBottom="10">
        <mx:Label 
            x="10" y="8" 
            text="You have {purchasedPhotos.length} item(s) in your cart." />
        <mx:Button id="button1"
            x="10" y="30" 
            label="expand details"  
            mouseUp="currentState='expandedCart'" />
    </mx:Panel>

</mx:Canvas>