<?xml version="1.0" encoding="utf-8"?>
<mx:HBox 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"
         >
    
    <fx:Script>
        <![CDATA[
            import com.flexicious.example.model.organizations.Organization;
            import com.flexicious.utils.UIUtils;
            [Bindable(private var organization:Organization;
            
            public override function set data(val:Object):void{
                super.data=val;
                organization = data as Organization;
                myChart.dataProvider = organization.deals
            }
        ]]>
    </fx:Script>
    <mx:VBox width="50%">
        <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="Financials" 
                  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="Annual Revenue:">
                    <mx:Label text="{UIUtils.formatCurrency(organization.annualRevenue)}"/>
                </mx:FormItem>    
                <mx:FormItem label="EPS:">
                    <mx:Label text="{UIUtils.formatCurrency(organization.earningsPerShare)}"/>
                </mx:FormItem>    
                <mx:FormItem label="Last Stock Price:">
                    <mx:Label text="{UIUtils.formatCurrency(organization.lastStockPrice)}"/>
                </mx:FormItem>    
                <mx:FormItem label="Employee Strength:">
                    <mx:Label text="{UIUtils.formatCurrency(organization.numEmployees)}"/>
                </mx:FormItem>    
            </mx:Form>
        </mx:Panel>
    </mx:VBox>
    <mx:Panel width="50%" verticalGap="0" horizontalGap="0" title="Deals" 
              paddingTop="0" height="100%"  paddingBottom="0" paddingLeft="0" paddingRight="0">
        
    <mx:PieChart id="myChart"  height="100%" width="100%"
                 showDataTips="true"
                 >
        <mx:series>
            <mx:PieSeries 
                field="dealAmount" 
                nameField="dealDescription" 
                labelPosition="callout"
                />
        </mx:series>
    </mx:PieChart>
    </mx:Panel>
</mx:HBox>