<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical"
    width="500"
    height="520"
     viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import flexlib.events.ImageMapEvent;
            import mx.managers.CursorManager;
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.core.UIComponent;

            [Bindable] public var timeSpent : Number = 0;
            private var tab:Array = new Array();
            
            //dessine le point et la shapeArea sur le composant graphique
            public function initDrawing(nbPoint:int) : void
            {
                this.backgroundCanvas.removeAllChildren();
                
                this.imgMap = new ImageMap();
                initImageMap();
                this.backgroundCanvas.addChildAt(this.imgMap, 0);
                
                this.uic = new UIComponent();
                this.backgroundCanvas.addChildAt(this.uic, 1);
                
                this.backgroundCanvas.removeChild(imgMap);
                
                for(var i:int=0; i<nbPoint; i++)
                {
                    var xCoord:Number = Math.random()*450;
                    var yCoord:Number = Math.random()*350;
                    var diam:Number = 4;

                    tab = createShapeArea(xCoord, yCoord, diam, tab);
                }
                
                this.backgroundCanvas.addChildAt(imgMap, 0);
                this.imgMap.source = this.uic;
                this.imgMap.map = tab;
            }
            
            
            public function initImageMap() : void
            {
                this.imgMap.scaleContent = true;
                this.imgMap.setStyle('outlineAlpha', 0.5);
                this.imgMap.setStyle('outlineColor', Math.random() * 0xffffff);
                this.imgMap.setStyle('fillAlpha', 0.5);
                this.imgMap.setStyle('fillColor', Math.random() * 0xffffff);
                this.imgMap.showToolTips = true;
                this.imgMap.addEventListener(ImageMapEvent.SHAPE_CLICK, clickOnShape);

                this.imgMap.map = new Array();
            }
            
            
            private function clickOnShape(event:ImageMapEvent) : void
            {
                navigateToURL(new URLRequest(event.href), event.linkTarget);
            }
            
            
            //crée le shape cliquable en rapport avec le composant graphique
            private function createShapeArea(xCoord:Number, yCoord:Number, diam:Number, tab:Array) : Array
            {            
                var shapeArea:flexlib.controls.area = new flexlib.controls.area();
                shapeArea['alt'] = 'mon point test';
                shapeArea['shape'] = 'CIRCLE';
                shapeArea['coords'] = xCoord+', '+yCoord+', '+diam;
                shapeArea['href'] = 'http://cdsweb';
                shapeArea['target'] = '_blank';
                
                tab.push(shapeArea);
                
                return tab;
            }
            
            public function addDrawing(nbPoint:int) : void
            {
                for(var i:int=0; i<nbPoint; i++)
                {
                    var xCoord:Number = Math.random()*450;
                    var yCoord:Number = Math.random()*350;
                    var diam:Number = 4;

                    tab = createShapeArea(xCoord, yCoord, diam, tab);
                }
                
                this.backgroundCanvas.addChildAt(imgMap, 0);
                this.imgMap.source = this.uic;
                this.imgMap.map = tab;
            }
            
            
            /************** One by one *******************/
            
            public function initDrawingOneByOne(nbPoints:int) : void
            {
                this.backgroundCanvas.removeAllChildren();
                
                this.imgMap = new ImageMap();
                initImageMap();
                this.backgroundCanvas.addChildAt(this.imgMap, 0);
                
                var timer:Timer = new Timer(1000, 30);
                timer.addEventListener(TimerEvent.TIMER, drawOneCircle);
                timer.start();
            }
            
            private function drawOneCircle(event:TimerEvent) : void
            {
                this.backgroundCanvas.removeAllChildren();
                var shapeA:flexlib.controls.area = new flexlib.controls.area();
                shapeA = createShapeAreaOne(Math.random()*450, Math.random()*350, 4);
                this.imgMap.map.push(shapeA);
                this.backgroundCanvas.addChild(this.imgMap);
            }
            
            private function createShapeAreaOne(xCoord:Number, yCoord:Number, diam:Number) : flexlib.controls.area
            {            
                var shapeArea:flexlib.controls.area = new flexlib.controls.area();
                shapeArea['alt'] = 'mon point test';
                shapeArea['shape'] = 'CIRCLE';
                shapeArea['coords'] = xCoord+', '+yCoord+', '+diam;
                shapeArea['href'] = 'http://cdsweb';
                shapeArea['target'] = '_blank';
                
                return shapeArea;
            }
            
            
            /************ byEnterFrame *********************/
            
            private var numDrawByEnterFrame:int = 50;
            
            public function initDrawingByEnterFrame(nbPoints:int) : void
            {
                initImageMap();
                this.imgMap.addEventListener(Event.ENTER_FRAME, drawCircleByEnterFrame);
                this.imgMap.setConstraintValue('nbPoints', nbPoints);
            }
            
            private function drawCircleByEnterFrame(event:Event) : void
            {
                var drawCount:int = this.imgMap.getConstraintValue('nbPoints');
                if (drawCount <= 0)
                {
                    this.imgMap.removeEventListener(Event.ENTER_FRAME, drawCircleByEnterFrame);
                }
                else
                {
                    for (var i:int = 0; i<numDrawByEnterFrame; i++)
                    {
                        var shapeA:flexlib.controls.area = new flexlib.controls.area();
                        shapeA = createShapeAreaOne(Math.random()*450, Math.random()*350, 4);
                        this.imgMap.map.push(shapeA);
                    }
                    
                    //this.backgroundCanvas.addChildAt(imgMap, 0);
                    //this.imgMap.source = this.uic;
                    //this.imgMap.map = tabByEnterFrame;
                    
                    drawCount -= numDrawByEnterFrame;
                    this.imgMap.setConstraintValue('nbPoints', drawCount);
                 }
            }
            
        ]]>
    </mx:Script>
    
    <mx:VBox
        width="100%"
        height="20%"
        >

        <mx:HBox>
            <mx:Label
                text="Number of circle to draw"
            />
            <mx:TextInput
                id="nbPoints"
                text="1000"
            />
        </mx:HBox>

        <mx:HBox>
            <mx:Button
                label="Draw"
                click="initDrawing(parseInt(nbPoints.text));"
            />
            <mx:Button
                label="Add circles"
                click="addDrawing(parseInt(nbPoints.text));"
            />
        </mx:HBox>
        
        <mx:HBox>
            <mx:Button
                label="Draw one by one"
                click="initDrawingOneByOne(parseInt(nbPoints.text));"
            />
        </mx:HBox>
        
        <mx:HBox>
            <mx:Button
                label="Draw by enter frame"
                click="initDrawingByEnterFrame(parseInt(nbPoints.text));"
            />
        </mx:HBox>
    </mx:VBox>
    
    <mx:HBox
        width="100%"
        height="80%"
        >
        <mx:Canvas
            id="backgroundCanvas"
            borderColor="red"
            borderStyle="solid"
            width="100%"
            height="100%"
            >
            
            <mx:UIComponent
                id="uic"
                height="100%"
                width="100%"
            />
            
            <ImageMap 
                id="imgMap"
                width="100%" 
                height="100%"
                xmlns="flexlib.controls.*"  
                >
            </ImageMap>
        </mx:Canvas>    
    </mx:HBox>
    
</mx:Application>