<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:v="views.*"
    layout="absolute"
    backgroundColor="#000000"
    backgroundAlpha="0"
    initialize="initApp()">
    
    <mx:Script>
        <![CDATA[
            import valueObjects.Photo;
            import mx.collections.ArrayCollection;
            import valueObjects.Order;
            import mx.messaging.events.MessageEvent;
            import mx.messaging.messages.AsyncMessage;
            
            [Bindable]
            private var orders:ArrayCollection;
            [Bindable]
            private var selectedOrder:Order;
            [Bindable]
            private var selectedPhoto:Photo;
        
            private function initApp():void 
            {
                consumer.subscribe();
                orders = new ArrayCollection();
            }
            private function messageHandler(event:MessageEvent):void 
            {
                var order:Order = event.message.body as Order;
                orders.addItem(order);
            }
        ]]>
    </mx:Script>
    
    <mx:Consumer id="consumer"
        destination="photoDestination"
        message="messageHandler(event)"/>
    
    <mx:Image 
        y="20" 
        left="101"
        source="assets/fstop/header.jpg" />
        
    <mx:DataGrid id="ordersGrid"
        dataProvider="{orders}" 
        left="101" y="117"
        rowCount="6"
        change="selectedOrder=event.target.selectedItem as Order;selectedPhoto=null">
        <mx:columns>
            <mx:DataGridColumn 
                dataField="orderNumber" 
                headerText="Order"
                width="50"/>
            <mx:DataGridColumn 
                dataField="customerName" 
                headerText="Customer"
                width="250"/>
        </mx:columns>
    </mx:DataGrid>

    <mx:DataGrid id="itemsGrid"
        dataProvider="{selectedOrder.lineItems}" 
        left="436" y="117"
        height="{ordersGrid.height}"
        change="selectedPhoto=event.target.selectedItem as Photo" width="415">
        <mx:columns>
            <mx:DataGridColumn 
                dataField="photographer" 
                headerText="Photographer"
                width="100"/>
            <mx:DataGridColumn 
                dataField="desc" 
                headerText="Description"
                width="250"/>
        </mx:columns>
    </mx:DataGrid>
    
    <mx:Image source="{'assets/gallery/'+selectedPhoto.filename}"
        x="436" y="264"
        width="{itemsGrid.width}"/>

</mx:Application>