<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    layout="absolute"
      xmlns:mx="http://www.adobe.com/2006/mxml"
      backgroundColor="#FFFFFF"
      creationComplete="onCreationComplete()" viewSourceURL="srcview/index.html">

    <mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.core.UIComponent;
        import com.riaone.deval.rt.ImportStmt;
        import com.riaone.deval.D;
        
        [Bindable]
        private var codeSnippets : Array = [
            {
                label : "Connected Lines",
                code  : 'g.clear();\n' +
                        'for ( var x = 0; x < 100; x ++ )\n' +
                        '{\n' +
                        '   g.lineStyle( 3, Math.random() * 0xFFFFFF );\n' +
                           'g.lineTo( Math.random() * w,  Math.random() * h );\n' +
                        '}'
            },
            
            {
                label : "Disconnected Lines",
                code  : 'g.clear();\n' +
                        'for ( var x = 0; x < 100; x ++ )\n' +
                        '{\n' +
                        '   g.lineStyle( 3, Math.random() * 0xFFFFFF );\n' +
                        '   g.moveTo( Math.random() * w,  Math.random() * h );\n' +
                        '   g.lineTo( Math.random() * w,  Math.random() * h );\n' +
                        '}'
            },
            
            {
                label : "Circles",
                code  : 'g.clear();\n' +
                        'for ( var x = 0; x < 50; x ++ )\n' +
                        '{\n' +
                        '   g.lineStyle( 3, Math.random() * 0xFFFFFF );\n' +
                        '   g.drawCircle( Math.random() * w,  Math.random() * h, Math.random() * 100 );\n' +
                        '}'
            
            },
            
            {
                label : "Rectangles",
                code  : 'g.clear();\n' +
                        'for ( var x = 0; x < 50; x ++ )\n' +
                        '{\n' +
                        '   g.lineStyle( 3, Math.random() * 0xFFFFFF );\n' +
                        '   g.drawRect( Math.random() * w,  Math.random() * h, Math.random() * 100, Math.random() * 100 );\n' +
                        '}'
            
            },
            
            {
                label : "Round Rectangles",
                code  : 'g.clear();\n' +
                        'for ( var x = 0; x < 100; x ++ )\n' +
                        '{\n' +
                        '   var radius : Number = Math.random() * 25;\n' +
                        '   g.lineStyle( 3, Math.random() * 0xFFFFFF );\n' +
                        '   g.drawRoundRect( Math.random() * w,  Math.random() * h, Math.random() * 50, Math.random() * 50, radius, radius );\n' +
                        '}'
            
            
            },
            
            {
                label : "Filled Circles",
                code  : 'g.clear();\n' +
                        'for ( var x = 0; x < 50; x ++ )\n' +
                        '{\n' +
                        '   g.beginFill( Math.random() * 0xFFFFFF );\n' +
                        '   g.drawCircle( Math.random() * w,  Math.random() * h, Math.random() * 100 );\n' +
                        '}\n' +
                        'g.endFill();\n'
            },
            
            {
                label : "Filled Rectangles",
                code  : 'g.clear();\n' +
                        'for ( var x = 0; x < 50; x ++ )\n' +
                        '{\n' +
                        '   g.beginFill( Math.random() * 0xFFFFFF );\n' +
                        '   g.drawRect( Math.random() * w,  Math.random() * h, Math.random() * 100, Math.random() * 100 );\n' +
                        '}\n' +
                        'g.endFill();'
            
            },
            
            {
                label : "Filled Round Rectangles",
                code  : 'g.clear();\n' +
                        'for ( var x = 0; x < 100; x ++ )\n' +
                        '{\n' +
                        '   var radius : Number = Math.random() * 25;\n' +
                        '   g.beginFill( Math.random() * 0xFFFFFF );\n' +
                        '   g.drawRoundRect( Math.random() * w,  Math.random() * h, Math.random() * 50, Math.random() * 50, radius, radius );\n' +
                        '}\n' +
                        'g.endFill();'
            
            
            },
            
            {
                label : "Complex Shapes",
                code  : 'g.clear();\n' +
                        'var centerX : Number = w/2;\n' +
                        'var centerY : Number = h/2;\n' +
                        'var radius : Number = 10;\n' +
                        'g.lineStyle( 1, Math.random() * 0xFFFFFF );\n' +
                        'for ( var x = 0; x < 180; x ++ )\n' +
                        '{\n' +
                        '   (x==0 ? g.moveTo : g.lineTo)( centerX + (Math.sin( x ) * radius ), centerY + (Math.cos( x ) * radius ) );\n' +
                        '   radius ++;\n' +
                        '}\n'
            
            },
            
            {
                label : "Circle Patterns",
                code  : 'g.clear();\n' +
                        'var centerX : Number = w/2;\n' +
                        'var centerY : Number = h/2;\n' +
                        'var radius : Number = 10;\n' +
                        'g.lineStyle( 1, Math.random() * 0xFFFFFF );\n' +
                        'for ( var x = 0; x < 360; x ++ )\n' +
                        '{\n' +
                        '   g.drawCircle( centerX + (Math.sin( x ) * radius ), centerY + (Math.cos( x ) * radius ), 4 );\n' +
                        '   radius += .5;\n' +
                        '}'
            },
            
            {
                label : "Filled Circle Patterns",
                code  : 'g.clear();\n' +
                        'var centerX : Number = w/2;\n' +
                        'var centerY : Number = h/2;\n' +
                        'var radius : Number = 15;\n' +
                        'g.beginFill( Math.random() * 0xFFFFFF );\n' +
                        'for ( var x = 0; x < 360; x ++ )\n' +
                        '{\n' +
                        '   g.drawCircle( centerX + (Math.sin( x ) * radius ), centerY + (Math.cos( x ) * radius ), 8 );\n' +
                        '   radius += .5;\n' +
                        '}\n' +
                        'g.endFill();'
            },
            
            {
                label : "Concentric Circles",
                code  : 'g.clear();\n' +
                        'var centerX : Number = w/2;\n' +
                        'var centerY : Number = h/2;\n' +
                        'var increment : Number = 10;\n' +
                        'g.lineStyle( 1, Math.random() * 0xFFFFFF );\n' +
                        'for ( var r = 0; r < 400; r ++ )\n' +
                        '{\n' +
                        '   g.drawCircle( centerX, centerY, r );\n' +
                        '   r += 10\n' +
                        '}\n' +
                        'g.endFill();'
            },
            
            {
                label : "Zig-Zag Cone",
                code  : 'g.clear();\n' +
                        'var centerX : Number = w/2;\n' +
                        'var centerY : Number = h/2;\n' +
                        'g.lineStyle( 1, Math.random() * 0xFFFFFF );\n' +
                        'for ( var x = 0; x < 400; x ++ )\n' +
                        '{\n' +
                        '   g.lineTo( x, centerY + (Math.cos( x ) * x/2 ) );\n' +
                        '   r += 10\n' +
                        '}\n' +
                        'g.endFill();'
            },
            
            {
                label : "Sin Wave",
                code  : 'g.clear();\n' +
                        'var centerX : Number = w/2;\n' +
                        'var centerY : Number = h/2;\n' +
                        'g.lineStyle( 1, Math.random() * 0xFFFFFF );\n' +
                        'for ( var x = 0; x < w; x ++ )\n' +
                        '{\n' +
                        '   g.lineTo( x, centerY + (Math.sin( x/3 ) * 50 ) );\n' +
                        '   r += 10\n' +
                        '}\n' +
                        'g.endFill();'
            }  ];
 
 
 
        private function onCreationComplete() : void
        {
            D.importFunction( "getGraphics", getGraphics );
            D.importFunction( "getWidth", getWidth );
            D.importFunction( "getHeight", getHeight );
            D.importClass( Graphics );
            D.importClass( Math );
            D.importClass( Matrix );
            
            code.text = codeSnippets[ 8 ].code;
            executeCode( code.text );
        }
        
        private function getGraphics() : Graphics
        {
            return drawTarget.graphics;
        }
        
        private function getWidth() : Number
        {
            return drawTarget.width;
        }
        
        private function getHeight() : Number
        {
            return drawTarget.height;
        }
        
        private function executeCode( code : String ):void 
        {
            try
            { 
                var _code : String = 
                    'var g = getGraphics();' +
                    'var w = getWidth();' +
                    'var h = getHeight();';
                
                _code += code;
                     
                var result:Object = D.eval( _code );
            }
            catch ( e : Error )
            {
                Alert.show( "Unable to execute code", "ERROR" );
            }
          
        }
        
        private function editCode( code : String ) : void
        {
            this.code.text = code;
            tabNav.selectedIndex = 0;
        }
    ]]>
    </mx:Script>


    <mx:VDividedBox width="100%" height="100%">
        <mx:UIComponent id="drawTarget" width="100%" height="100%" />
        <mx:TabNavigator width="100%" height="250" backgroundColor="#999999" id="tabNav">
            
            <mx:Canvas width="100%" height="100%" label="Edit Source Code">
            
                <mx:TextArea id="code" left="10" top="10" bottom="10" right="100" wordWrap="false" />
                <mx:Button label="Run" click="executeCode( code.text )" width="82" height="86" bottom="10" right="10" cornerRadius="8"/>
            
            </mx:Canvas>
            
            <mx:Canvas width="100%" height="100%" label="Code Examples" x="14" y="-18">
                
                <mx:List left="10" top="0" bottom="10" dataProvider="{ codeSnippets }" id="snippets" labelField="label"  width="150"/>
                <mx:TextArea left="168" top="0" right="10" bottom="40" text="{snippets.selectedItem.code}" editable="false" wordWrap="false"/>
                <mx:Button label="Run This Example" bottom="10" left="168" 
                    enabled="{ snippets.selectedItem != null }"
                    click="executeCode( snippets.selectedItem.code.toString() )"
                    paddingLeft="0" paddingRight="0" />
                <mx:Button label="Edit This Example" bottom="10" left="281" 
                    enabled="{ snippets.selectedItem != null }"
                    click="editCode( snippets.selectedItem.code.toString() )"
                    paddingLeft="0" paddingRight="0" />
                
            </mx:Canvas>
            
        </mx:TabNavigator>        
    </mx:VDividedBox>




</mx:Application>