<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="600" height="300" cornerRadius="25" backgroundColor="#FFF8C6"
         borderStyle="solid" horizontalScrollPolicy="off" verticalScrollPolicy="off" verticalGap="0" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" xmlns:controls="com.flexicious.controls.*"
         >
    <fx:Declarations>
        <mx:Validator id="vldDealDate" source="{txtDealData}" property="selectedDate" required="true"/>
        <mx:Validator id="vldDealStatus" source="{cbxDealStatus}" property="selectedItem" required="true"/>
        <mx:Validator id="vldDealName" source="{txtDealName}" property="text" required="true"/>
    </fx:Declarations>    
    <fx:Script>
        <![CDATA[
            import com.flexicious.example.model.common.SystemConstants;
            import com.flexicious.example.model.organizations.Organization;
            import com.flexicious.example.model.transactions.Deal;
            import com.flexicious.utils.UIUtils;
            
            import mx.controls.Alert;
            import mx.events.CloseEvent;
            import mx.validators.Validator;
            [Bindable(public var organization:Organization;
            [Bindable(public var deal:Deal=new Deal();
            
            private function validate():Boolean{
                return Validator.validateAll([vldDealDate,vldDealStatus,vldDealName]).length==0;
            }
        ]]>
    </fx:Script>
    <mx:HBox width="100%">
        <mx:Panel width="100%" height="50%" verticalGap="0" horizontalGap="0" title="Basic Information" 
                  paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0">
            <mx:Form width="33%" verticalGap="0" horizontalGap="0" 
                     paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0">
                <mx:FormItem label="Organization Name">
                    <mx:Label text="{organization.legalName}"/>
                </mx:FormItem>    
                <mx:FormItem label="Sales Contact">
                    <mx:Label text="{organization.salesContact.displayName}"/>
                </mx:FormItem>    
                <mx:FormItem label="Sales Contact Phone">
                    <mx:Label text="{organization.salesContact.telephone}"/>
                </mx:FormItem>    
            </mx:Form>
        </mx:Panel>
        <mx:Panel width="100%" verticalGap="0" horizontalGap="0" title="Deal Info" 
                  paddingTop="0" height="50%"  paddingBottom="0" paddingLeft="0" paddingRight="0">
            <mx:Form width="100%" verticalGap="0" horizontalGap="0" 
                     paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0">
                <mx:FormItem label="Deal Date:">
                    <controls:DateField id="txtDealData" change="deal.dealDate=event.target.selectedDate"/>
                </mx:FormItem>
                <mx:FormItem label="Deal Status:">
                    <controls:ComboBox id="cbxDealStatus" dataProvider="{SystemConstants.dealStatuses}" labelField="name" change="deal.dealStatus=event.target.selectedItem"/>
                </mx:FormItem>    
                <mx:FormItem label="Deal Name:">
                    <controls:TextInput id="txtDealName" change="deal.dealDescription=event.target.text"/>
                </mx:FormItem>    

            </mx:Form>
        </mx:Panel>
    </mx:HBox>
    <mx:ControlBar>
        <mx:Button label="Ok" click="if(validate()){UIUtils.removePopUp(this);dispatchEvent(new CloseEvent(CloseEvent.CLOSE,false,false,Alert.OK))}"/>
        <mx:Button label="Cancel" click="UIUtils.removePopUp(this)"/>
    </mx:ControlBar>
</mx:TitleWindow>