<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" 
    
    initialize="init();" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import org.nevis.cairngorm.samples.complexbinding.model.ModelLocator;

            [Bindable]
            public var testData:ArrayCollection;
            
            public var model:ModelLocator = ModelLocator.getInstance();            

            public var initDG:Array = [
                { Artist: 'Pavement', Price: '9.99', Album: 'Slanted and Enchanted'},
                { Artist: 'Pavement', Price: '9.99', Album: 'Brighten The Corners'} ];

            private function init():void {
                testData = new ArrayCollection( initDG );
            }
            
            private function randRange(min:Number, max:Number):Number {
                var randomNum:Number = Math.floor( Math.random() * (max - min + 1) ) + min;
                return randomNum;
            }
            
            private function createData():void {
                var numbers:Array = new Array();
                var itemsCount:Number = randRange( 12, 32 );
                for (var i:int = 0; i < itemsCount; i++) {
                    var obj:Object = new Object();
                    obj.name = "Name" + i;
                    obj.data1 = randRange(10, 100);
                    obj.data2 = randRange(60, 200);                    
                    numbers.push( obj );
                }
                model.hourData = new ArrayCollection( numbers );
                testData = new ArrayCollection( numbers );
            }
        ]]>
    </mx:Script>

    <mx:Panel width="95%" height="95%" title="Random Graphs - Showcase Complex Binding"
        paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20">
        <mx:Button id="test" label="Create Data" click="createData()"/>
        <ChartTemplate width="100%" />
        <mx:Label text="Same data no Complex Binding" fontSize="16" fontWeight="bold"/>
        <mx:LineChart width="100%" id="salesChart" dataProvider="{ testData }">
            <mx:horizontalAxis>
                <mx:CategoryAxis dataProvider="{ testData }" categoryField="name"/>
            </mx:horizontalAxis>    
            <mx:series>
                <mx:Array>
                    <mx:LineSeries yField="data1" form="curve" displayName="Data 1"/>
                    <mx:LineSeries yField="data2" form="curve" displayName="Data 2"/>                
                </mx:Array>
            </mx:series>    
        </mx:LineChart>
        <mx:Legend dataProvider="{ salesChart }"/>
        <mx:DataGrid width="100%" id="hourGrid" dataProvider="{ testData }"/>    

    </mx:Panel>
</mx:Application>