<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:apdev="com.apdevblog.examples.flexdatagrid2.*"
    width="550" height="350" 
    initialize="onInitialize(event)"
    backgroundColor="0xffffff"
    backgroundAlpha="0"
    verticalGap="0" horizontalGap="0"
    layout="vertical"
    viewSourceURL="srcview/index.html"
    >
    
    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.formatters.CurrencyFormatter;
            import mx.controls.TextInput;
            import mx.events.DataGridEventReason;
            import mx.events.DataGridEvent;
            import mx.collections.ArrayCollection;
            import mx.events.CollectionEvent;
            import mx.events.FlexEvent;
            
            //
            // variables
            private const MAX_EXPENSES:int = 5;

            [Bindable] private var _arr:ArrayCollection = new ArrayCollection([]);
            [Bindable] private var _vals:ArrayCollection = new ArrayCollection();
            
            [Bindable] private var _gridHeight:int = 100;
            [Bindable] private var _totalAmount1:Number = 0.0;
            
            private var _currencyFmt:CurrencyFormatter;
            private var _editorsLastValue:String;
            
            [Embed(source="assets/bitmaps/add.png")]
            [Bindable] private var imgAdd:Class;
            
            //
            // methods            
            private function _calculateHeight():void
            {
                if(grid.dataProvider)
                {
                    var len:int = grid.dataProvider.length;
                    _gridHeight = grid.measureHeightOfItems(-1, len);
                    _gridHeight += 3;
                }
            }
            
            private function _updateTotal():void
            {                
                var tempSum:Number = 0;
                for(var i:int=0;i<_arr.length;i++)
                {
                    var obj:Object = _arr.getItemAt(i);
                    var time:int = Number(obj["timeInterval"]);
                    if(time > 0)
                    {
                        tempSum += Number(obj["money"]) / time;
                    }
                }
                
                _totalAmount1 = tempSum;
            }
            
            /**
             * 
             */
            private function onInitialize(event:FlexEvent):void
            {
                _arr.addEventListener(CollectionEvent.COLLECTION_CHANGE, onCollectionChanged, false, 0, true);
                
                _vals.source = [{label:"Expense 1", val:1} ,
                                    {label:"Expense 2", val:2} ,
                                    {label:"Expense 3", val:3} ,
                                    {label:"Expense 4 with a very long name ... maybe we get a second line of text", val:4} ,
                                    {label:"Expense 5", val:5} 
                                    ];
                
                _currencyFmt = new CurrencyFormatter();
                
                _calculateHeight();
            }
            
            private function onChangeAddCost(event:ListEvent):void
            {
                var cmb:ComboBox = event.target as ComboBox;
                if(cmb != null)
                {
                    var obj:Object = cmb.selectedItem;
                    
                    _arr.addItem({question:obj.label, timeInterval:1, timeIntervalEditable:true, money:0});
                    
                    cmb.selectedItem = null;
                    
                    // set focus to this row's last cell
                    if(_arr.length-1 >= 0)
                    {
                        grid.editedItemPosition = {rowIndex: _arr.length-1, columnIndex: 2};
                    }
                }
            }
            
            private function onCollectionChanged(event:CollectionEvent):void
            {
                // delete items that were already selected
                for(var i:int = _arr.length-1; i >= 0; i--)
                {
                    var obj:Object = _arr.getItemAt(i) as Object;
                    
                    // check if any cost timeInterval is 0
                    if(obj.timeInterval == 0)
                    {
                        // delete it
                        _arr.removeItemAt(i);
                    }
                }
                
                // update height
                _calculateHeight();
                _updateTotal();
            }
            
            private function onEditBegin(event:DataGridEvent):void 
            {
                if(event.dataField == "money") 
                {
                    var item:Object = ((event.currentTarget as DataGrid).dataProvider as ArrayCollection)[event.rowIndex];
                    
                    // save current value
                    _editorsLastValue = String(item[event.dataField]);
                    
                    if(item.timeInterval == 0)
                    {
                        event.preventDefault();
                    } 
                }
            }
            
            private function onEditEnd(event:DataGridEvent):void
            {
                // it is OK if the user cancels the edit
                if(event.reason == DataGridEventReason.CANCELLED)
                {
                    return;
                }
                
                // if  the edit is on the part number column, make sure it is not blank
                if(event.dataField == "money")
                {
                    // grab the instance of the itemEditor. For this DataGrid, only the
                    // TextInput control is used as the editor, so it is safe to get the
                    // editor no matter what column has been edited.
                    var editor:TextInput = (event.currentTarget as DataGrid).itemEditorInstance as TextInput;
                    
                    if(editor.text.indexOf(",") != -1)
                    {
                        editor.text = editor.text.split(",").join(".");
                    }
                    
                    if(editor.text == "")
                    {
                        editor.text = _editorsLastValue;
                    }
                }
            }
            
            [Bindable]
            private function _checkVisibility():Boolean
            {
                return _arr.length <= 4;
            }
            
        ]]>
    </mx:Script>
    
    <mx:HBox 
        width="500" height="32" 
        paddingLeft="5" 
        borderSides="left top right"
        borderThickness="1" borderColor="#b7babc" borderStyle="solid" 
        verticalAlign="middle"
        horizontalGap="0"
        >
        
        <mx:Label text="Person 1" fontWeight="bold" />
        <mx:Label text='"Name"' fontSize="11" fontStyle="italic" />
        
        <mx:Spacer width="100%" />
        
        <mx:Text width="138" text="period of time?" fontSize="10" fontWeight="normal" leading="0" textAlign="center" />
        
        <mx:Spacer width="2" />
        
        <mx:Text width="98" text="amount" fontSize="10" fontWeight="normal" leading="0" textAlign="center" />
        
    </mx:HBox>
    
    <mx:DataGrid id="grid" 
        width="500" variableRowHeight="true"
        borderSides="top left right"
        verticalScrollPolicy="off"
        editable="true" 
        selectable="false"
        dataProvider="{_arr}"
        height="{_gridHeight}"
        dataChange="_calculateHeight();"
        focusRect="null"
        itemEditBeginning="onEditBegin(event);"
        itemEditEnd="onEditEnd(event);"
        showHeaders="false"
        verticalGridLines="false"
        verticalAlign="middle"
        >
        
        <mx:columns>
            <mx:DataGridColumn 
                headerText="Question"
                width="260" 
                editable="false"
                resizable="false" 
                draggable="false" 
                sortable="false" 
                wordWrap="true"
                dataField="question" 
                />
            
            <mx:DataGridColumn 
                headerText="Timeinterval"
                width="140" 
                editable="false"
                resizable="false" 
                draggable="false"
                sortable="false" 
                dataField="timeInterval" 
                rendererIsEditor="true"    
                itemRenderer="com.apdevblog.examples.flexdatagrid2.TimeIntervalRenderer"
                editorDataField="data"
                >
                
            </mx:DataGridColumn>
                
            <mx:DataGridColumn 
                headerText="Amount"
                width="100" 
                resizable="false" 
                draggable="false"
                sortable="false" 
                dataField="money"
                textAlign="right"
                itemRenderer="com.apdevblog.examples.flexdatagrid2.MoneyRenderer"
                >
                <mx:itemEditor>
                    <mx:Component>
                        <mx:TextInput restrict="0-9,." maxChars="8" />
                    </mx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
        
        </mx:columns>
        
    </mx:DataGrid>
    
    <mx:HBox 
        width="500" height="29" 
        paddingLeft="5" paddingTop="2"
        borderSides="left right"
        borderThickness="1" borderColor="#b7babc" borderStyle="solid" 
        horizontalGap="0"
        backgroundColor="{_arr.length % 2 == 0 ? 0xf7f7f7 : 0xFFFFFF}"
        visible="{_checkVisibility()}"
        includeInLayout="{_checkVisibility()}"
        >

        <mx:Box width="16" height="20" paddingTop="2">
            <mx:Image source="{imgAdd}" 
                width="16" height="16"
                verticalCenter="0" 
                verticalAlign="middle" 
                horizontalAlign="center"
             />
        </mx:Box>
        
        <mx:Spacer width="5" />
        
        <mx:ComboBox 
            id="addExpenseCmb"
            prompt="Add expense ..."
            height="20"
            maxHeight="20"
            dataProvider="{_vals}"
            change="onChangeAddCost(event);"
        />
        
    </mx:HBox>
    
    <mx:HBox 
        width="500" height="32" 
        paddingLeft="5" 
        borderSides="top left bottom right"
        borderThickness="1" borderColor="#b7babc" borderStyle="solid" 
        verticalAlign="middle"
        horizontalGap="0"
        >
        
        <mx:Label text="Total:" fontSize="10" fontWeight="normal" />
        
        <mx:Spacer width="100%" />
        
        <mx:Label width="138" text="per month" fontSize="10" fontWeight="normal" textAlign="center" />
        
        <mx:Spacer width="2" />
        
        <apdev:MoneyRenderer width="98" text="{_totalAmount1}" fontSize="10" textAlign="right" />
        
    </mx:HBox>
    
</mx:Application>