<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white" creationComplete="tempXML.send();" viewSourceURL="srcview/index.html">

    <mx:HTTPService id="tempXML" url="xml/cuePoints.xml" resultFormat="e4x" />
    <mx:XMLListCollection id="cuePointXMLList" source="{tempXML.lastResult.CuePoint}" />
    <mx:XMLListCollection id="parametersXMLList" source="{dataGrid.selectedItem.Parameters.Parameter}" />

    <mx:Script>
        <![CDATA[
            private function parametersLabelFunction(item:Object, column:DataGridColumn):String {
                return item.Parameters.Parameter.length();
            }

            private function numericSortCompareFunction(objA:Object, objB:Object):int {
                var itemA:Number = parseInt(objA.Time.text()) as Number;
                var itemB:Number = parseInt(objB.Time.text()) as Number;

                if (itemA > itemB) {
                    return 1;
                } else if (itemA < itemB) {
                    return -1;
                } else {
                    return 0;
                }
            }
        ]]>
    </mx:Script>

    <mx:VBox>

        <mx:DataGrid id="dataGrid" dataProvider="{cuePointXMLList}" width="100%" rowCount="{cuePointXMLList.length + 1}">
            <mx:columns>
                <mx:DataGridColumn id="timeCol" dataField="Time" headerText="Time (ms):" sortCompareFunction="numericSortCompareFunction" />
                <mx:DataGridColumn id="typeCol" dataField="Type" headerText="Type:" />
                <mx:DataGridColumn id="nameCol" dataField="Name" headerText="Name:" />
                <mx:DataGridColumn id="parametersCol" dataField="Parameters" headerText="Parameters:" labelFunction="parametersLabelFunction" />
            </mx:columns>
        </mx:DataGrid>

        <mx:DataGrid id="parametersDataGrid" dataProvider="{parametersXMLList}" width="100%" visible="{parametersXMLList.length > 0}" rowCount="{parametersXMLList.length + 1}">
            <mx:columns>
                <mx:DataGridColumn id="parameterNameCol" dataField="Name" headerText="Parameter Name:" />
                <mx:DataGridColumn id="parameterValueCol" dataField="Value" headerText="Parameter Value:" />
            </mx:columns>
        </mx:DataGrid>

    </mx:VBox>

</mx:Application>