<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()" xmlns:local="*" viewSourceURL="srcview/index.html">
    
    <mx:Style source="styles.css" />
    
    
    <mx:Script>
        <![CDATA[
            import assets.AssetManager;
            
            private var layerChanged:Boolean = false;
            private var layer:Array =    [[    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0    ],
                                        [    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0    ],
                                        [    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0    ],
                                        [    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0    ],
                                        [    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0    ],
                                        [    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0    ],
                                        [    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0    ],
                                        [    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0    ],
                                        [    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0,    0    ]];
            
            
            private var bitmap:BitmapData = new BitmapData(512, 288);
            
            private var assetManager:AssetManager = new AssetManager();
            
            [Bindable]
            private var selectedAsset:Number = 3;
            
            
            private function onCreationComplete():void
            {
                // Bind bitmap to view
                view.graphics.beginBitmapFill(bitmap);
                view.graphics.drawRect(0,0,512,288);
                view.graphics.endFill();
                
                // Add mouse listeners for drawing
                view.addEventListener(MouseEvent.MOUSE_OUT, onViewMouseOut);
                view.addEventListener(MouseEvent.MOUSE_OVER, onViewMouseOver);
                view.addEventListener(MouseEvent.CLICK, onViewMouseClick);
                
                // Draw the map
                layerChanged = true;
                invalidateDisplayList();
                
                // Populate pallet
                grass.graphics.beginBitmapFill(assetManager.getCellTypeIcon(0));
                grass.graphics.drawRect(0,0,32,32);

                water.graphics.beginBitmapFill(assetManager.getCellTypeIcon(1));
                water.graphics.drawRect(0,0,32,32);

                shaddow.graphics.beginBitmapFill(assetManager.getCellTypeIcon(2));
                shaddow.graphics.drawRect(0,0,32,32);

                ground1.graphics.beginBitmapFill(assetManager.getCellTypeIcon(3));
                ground1.graphics.drawRect(0,0,32,32);

                ground2.graphics.beginBitmapFill(assetManager.getCellTypeIcon(4));
                ground2.graphics.drawRect(0,0,32,32);

                road1.graphics.beginBitmapFill(assetManager.getCellTypeIcon(5));
                road1.graphics.drawRect(0,0,32,32);

                road2.graphics.beginBitmapFill(assetManager.getCellTypeIcon(6));
                road2.graphics.drawRect(0,0,32,32);
            }
            
            private function onViewMouseOver(event:MouseEvent):void
            {
                view.addEventListener(MouseEvent.MOUSE_MOVE, onViewMouseMove);
            
                updateOverlayPosition(event.localX, event.localY);
                marker.visible = true;
            }
            
            private function onViewMouseOut(event:MouseEvent):void
            {
                view.removeEventListener(MouseEvent.MOUSE_MOVE, onViewMouseMove);
                
                marker.visible = false;
            }
            
            private function onViewMouseMove(event:MouseEvent):void
            {
                updateOverlayPosition(event.localX, event.localY);
                
                if(event.buttonDown)
                    updateCell(event.localX, event.localY, selectedAsset);
            }
            
            private function updateOverlayPosition(x:Number, y:Number):void
            {
                var px:Number = x - x%32;
                var py:Number = y - y%32;
                
                if(px > 480)
                    px = 480;
                if(py > 480)
                    py = 480;
                
                marker.x = px;
                marker.y = py;
            }
            
            private function onViewMouseClick(event:MouseEvent):void
            {
                updateCell(event.localX, event.localY, selectedAsset);
            }
            
            private function updateCell(x:Number, y:Number, value:Number = 1):void
            {
                var px:Number = x - x%32;
                var py:Number = y - y%32;
                
                if(px > 480)
                    px = 480;
                if(py > 480)
                    py = 480;
                
                var celX:Number = px / 32;
                var celY:Number = py / 32;
                
                try {
                    layer[celY][celX] = value;
                    layerChanged = true;
                    invalidateDisplayList();
                } catch(e:Error){}
            }
            
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                
                if(layerChanged)
                {
                    layerChanged = false;
                    draw(256, 256, bitmap);
                }                    
            } 
            
            public function draw(width:Number, height:Number, bitmap:BitmapData):void
            {
                
                // Draw layer one
                for( var y:int = 0; y < 16; y++ )
                {
                    for(var x:int = 0; x < 16; x++ )
                    {
                        var posX:Number = 32*x;
                        var posY:Number = 32*y;
                
                        assetManager.drawMapCell(bitmap, posX, posY, x, y, layer);
                    }
                } 
            }
            
            private function getCell(x:Number, y:Number):Number
            {
                try 
                {
                    return layer[y][x];
                } 
                catch(e:Error)
                {
                    return 0;
                }
                return 0;
            }
                
            
        ]]>
    </mx:Script>
    
    
    <mx:HBox top="20" horizontalCenter="0" horizontalGap="0">
        
        <!-- tile selection -->
        <mx:VBox>
            
            <mx:Canvas id="road1" width="32" height="32" click="{selectedAsset=5;}" 
                borderStyle="solid" borderColor="#FFFFFF" borderThickness="{(selectedAsset==5)?2:0}"
                toolTip="Road 1">
                <mx:filters>
                    <mx:DropShadowFilter />
                </mx:filters>
            </mx:Canvas>
            
            <mx:Canvas id="road2" width="32" height="32" click="{selectedAsset=6;}" 
                borderStyle="solid" borderColor="#FFFFFF" borderThickness="{(selectedAsset==6)?2:0}"
                toolTip="Road 2">
                <mx:filters>
                    <mx:DropShadowFilter />
                </mx:filters>
            </mx:Canvas>

            <mx:Canvas id="water" width="32" height="32" click="{selectedAsset=1;}" 
                borderStyle="solid" borderColor="#FFFFFF" borderThickness="{(selectedAsset==1)?2:0}"
                toolTip="Water">
                <mx:filters>
                    <mx:DropShadowFilter />
                </mx:filters>
            </mx:Canvas>
            
            <mx:Canvas id="ground1" width="32" height="32" click="{selectedAsset=3;}" 
                borderStyle="solid" borderColor="#FFFFFF" borderThickness="{(selectedAsset==3)?2:0}"
                toolTip="Ground 1">
                <mx:filters>
                    <mx:DropShadowFilter />
                </mx:filters>
            </mx:Canvas>
            
            <mx:Canvas id="ground2" width="32" height="32" click="{selectedAsset=4;}" 
                borderStyle="solid" borderColor="#FFFFFF" borderThickness="{(selectedAsset==4)?2:0}"
                toolTip="Ground 2">
                <mx:filters>
                    <mx:DropShadowFilter />
                </mx:filters>
            </mx:Canvas>
            
            <mx:Canvas id="shaddow" width="32" height="32" click="{selectedAsset=2;}" 
                borderStyle="solid" borderColor="#FFFFFF" borderThickness="{(selectedAsset==2)?2:0}"
                toolTip="Shaddow">
                <mx:filters>
                    <mx:DropShadowFilter />
                </mx:filters>
            </mx:Canvas>
            
            <mx:Canvas id="grass" width="32" height="32" click="{selectedAsset=0;}" 
                borderStyle="solid" borderColor="#FFFFFF" borderThickness="{(selectedAsset==0)?2:0}"
                toolTip="Grass">
                <mx:filters>
                    <mx:DropShadowFilter />
                </mx:filters>
            </mx:Canvas>
            
        </mx:VBox>
        
        <mx:Spacer width="20" />
        
        <mx:Canvas  width="512" height="288" backgroundColor="#3d3d3d" >
        
            <!-- view -->
            <mx:Canvas id="view" width="512" height="288" />
            
            <local:Marker id="marker" />
            
            <mx:filters>
                <mx:DropShadowFilter />
            </mx:filters>
        </mx:Canvas>
    
        <mx:Spacer width="4" />
    </mx:HBox>

    
    
    <!-- Application Control Bar -->     
    <mx:ApplicationControlBar dock="true">
        <mx:Label text="World" styleName="headderText"/>        
        <mx:Spacer width="-20" />        
        <mx:Label text="Builder" styleName="headderTextBlue"/>
        <mx:Label text="Demo" styleName="headderText"/>
        <mx:Script>
            <![CDATA[ import flash.net.navigateToURL; ]]>
        </mx:Script>
        <mx:LinkButton label="created by Tony Fendall" color="#FFFFFF" click="{navigateToURL( new URLRequest('http://www.munkiihouse.com'))}" />
    </mx:ApplicationControlBar>   
    
</mx:Application>