<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:cl="clases.*" layout="absolute" 
     backgroundColor="0xffffff" creationComplete="init()" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import mx.containers.Canvas;
            import classes.DrawingGradientFills;
            import mx.core.UIComponent;
            import classes.Polygon;
            import flash.display.Stage;
            import mx.managers.CursorManager;

            private var o:Polygon; 
            private var _polygon:Polygon;
            private var polygons:Vector.<Polygon>;
            private var UIRef:UIComponent = new UIComponent();
            private var isDrawing:Boolean = false;
            private var _polygonIndex:int;
            private var cursorID:Number = 0;
            
            [Bindable]
            [Embed(source="assets/targetCursor.png")]
            private var TargetCursor:Class;
            
            private function init():void
            {
                addChild(UIRef);
                UIRef.percentHeight = 100;
                UIRef.percentWidth = 100;
                canvas.addChild(UIRef);
                polygons = new Vector.<Polygon>;
                canvas.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
                canvas.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
            }
            
            private function onMouseOver(e:MouseEvent):void
            {
                if(isDrawing) {
                    cursorID = CursorManager.setCursor(TargetCursor);
                } //else CursorManager.removeCursor(cursorID); 
            }
            
            private function onMouseOut(e:MouseEvent):void
            {
                CursorManager.removeCursor(cursorID); 
            }
            
            private function onAddPolygon(e:Event):void
            {
                e.stopPropagation();
                
                msg.text = "Click on the stage to start drawing the polygon";
                
                canvas.addEventListener(MouseEvent.CLICK, onMouseClick);

                if(o) {
                    if(o.isDrawing) {
                        o.finishPolygon();
                        isDrawing = false;
                    }
                    stage.removeEventListener(KeyboardEvent.KEY_DOWN, o.onKeyDown);
                    hideAnchors();
                }

                o = new Polygon(canvas);
                isDrawing = o.isDrawing;
                UIRef.addChild(o);
                polygons.push(o);
                
                o.addEventListener("started", onPolygonStarted);
                o.addEventListener("finished", onPolygonFinished);
            }
            
            private function onPolygonStarted(e:Event):void
            {
                msg.text = "To finish the polygon click the 'END' key";
                o.removeEventListener("started", onPolygonStarted);
            }
            
            private function onPolygonFinished(e:Event):void
            {
                isDrawing = false;
                msg.text = "";
                onMouseOut(null);
                o.removeEventListener("finished", onPolygonFinished);
            }
            
            private function onMouseClick(e:MouseEvent):void
            {
                _polygonIndex = -1;
                
                if(e.target is Polygon){
                    _polygon = e.target as Polygon;
                    _polygonIndex = polygons.indexOf(_polygon);
                } 
                
                if(e.target.parent is Polygon && e.target is Sprite){
                    _polygonIndex = polygons.indexOf(e.target.parent);
                } 
                
                for(var i:int = 0; i< polygons.length; i++){
                    if(!polygons[i].isDrawing) {
                        polygons[i].hideAnchors();
                        stage.removeEventListener(KeyboardEvent.KEY_DOWN, polygons[i].onKeyDown);
                    }
                }
                
                if(_polygonIndex >=0) {
                    polygons[_polygonIndex].showAnchors();
                    stage.addEventListener(KeyboardEvent.KEY_DOWN, polygons[_polygonIndex].onKeyDown);
                }
            }
            
            private function hideAnchors():void
            {
                o.hideAnchors();
                o._anchor = null;
                o._anchorIndex = NaN;
            }
            
        ]]>
    </mx:Script>
    
    <mx:Canvas id="canvas" width="100%" height="100%" left="10" top="40" right="10" bottom="10" backgroundColor="0xffffff" />
    <mx:Button id="addPolygon" x="10" y="10" label="Add Polygon" click="onAddPolygon(event)" />
    <mx:Text id="msg" x="150" y="10" selectable="false" />
</mx:Application>