<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	    <mx:Script>

        <![CDATA[
        import mx.rpc.events.ResultEvent;

        private var isDrawing:Boolean=false;

        private var x1:int;
        private var y1:int;
        private var x2:int;
        private var y2:int;
        
        private var bSize:Number = 1;
        
        [Bindable]
        private var brushArray:Array = new Array(1,2,3,4,5,6,7,8,9,10);
        
        private var drawColor:uint;

        private function doErase():void
        {
            canvas.graphics.clear();
        }

        private function doMouseDown():void
        {
            x1 = canvas.mouseX;
            y1 = canvas.mouseY;
            isDrawing = true;
        }

        private function doMouseMove():void
        {
            x2 = canvas.mouseX;
            y2 = canvas.mouseY;
            if (isDrawing)
            {
                canvas.graphics.lineStyle(bSize, drawColor);
                canvas.graphics.moveTo(x1, y1);
                canvas.graphics.lineTo(x2, y2);
                x1 = x2;
                y1 = y2;
            }
        }

        private function doMouseUp():void
        {
            isDrawing = false;
        }

        private function doSave():void
        {
            var bd:BitmapData = new BitmapData(canvas.width,canvas.height);
            bd.draw(canvas);

            var ba:ByteArray = PNGEnc.encode(bd);

            //ro.doUpload(ba);
        }

        private function handleResult(event:ResultEvent):void
        {
            var u:URLRequest = new URLRequest("servlet/DownloadImage?fileId=" +
                event.result.toString());
            navigateToURL(u,"_blank");
        }

        ]]>

    </mx:Script>

    <mx:RemoteObject id="ro" destination="UploadImage-ro"
        result="handleResult(event)"/>

    <mx:Panel width="100%" height="100%" headerHeight="0">

        <mx:Canvas id="canvas" width="100%" height="100%"
            horizontalScrollPolicy="off" verticalScrollPolicy="off"
            mouseDown="doMouseDown()"
            mouseMove="doMouseMove()"
            mouseUp="doMouseUp()"/>

        <mx:ControlBar>
            <mx:ColorPicker change="drawColor = event.target.selectedColor" />
            <mx:ComboBox id="brushSize" change="bSize = brushArray[brushSize.selectedIndex]" dataProvider="{brushArray}"  selectedIndex="0"/>
            <mx:Button label="Erase" click="doErase()"/>
            <mx:Button label="Save Image" click="doSave()"/>
        </mx:ControlBar>

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