<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="515"
    verticalGap="8"
    show="customerNameInput.setFocus();">
    
    <mx:Metadata>
        [Event(name="checkout",type="events.OrderEvent")]
    </mx:Metadata>
        
    <mx:Script>
        <![CDATA[
            import valueObjects.Photo;
            import valueObjects.Order;
            import events.OrderEvent;
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            import mx.validators.Validator;
            
            [Bindable]
            public var cartItems:ArrayCollection;
            
            private function checkOut():void 
            {
                var validArray:Array = Validator.validateAll([customerValidator, emailValidator]);
        
                if (validArray.length == 0) 
                {
                    var newOrder:Order = new Order();
                    newOrder.customerName=customerNameInput.text;
                    newOrder.email=emailInput.text;
                    newOrder.lineItems=cartItems;
                    var orderEvent:OrderEvent = new OrderEvent( newOrder, "checkout");
                    dispatchEvent(orderEvent);
                   }
                   else 
                   {
                   Alert.show("There are form errors");
                }        
            }
            public function resetForm():void 
            {
                customerNameInput.text='';
                emailInput.text='';
            }
        ]]>
    </mx:Script>
    
    <mx:StringValidator id="customerValidator"
        source="{customerNameInput}" 
        property="text"
        triggerEvent=""/>
    <mx:EmailValidator id="emailValidator"
        source="{emailInput}" 
        property="text"
        triggerEvent=""/>
    
    <mx:Form width="100%"
        paddingBottom="15" 
        paddingLeft="15" 
        paddingRight="15" 
        fontSize="11"
        backgroundColor="#F8E5BB">
        <mx:Label 
            text="Enter your information to check out."/>
        <mx:FormItem 
            label="Customer Name:">
            <mx:TextInput id="customerNameInput"
                width="284" />
        </mx:FormItem>
        <mx:FormItem 
            label="Email Address:">
            <mx:TextInput id="emailInput"
                width="284" />
        </mx:FormItem>
        <mx:FormItem direction="horizontal">
            <mx:Button id="checkoutButton"
                label="finish order" 
                click="checkOut()"/>
            <mx:Label text="You have {cartItems.length} item(s) in your cart"/>
        </mx:FormItem>
    </mx:Form>
    
    <mx:Image 
        source="assets/fstop/park.jpg" />
    
</mx:VBox>