<?xml version="1.0" encoding="utf-8"?>
<mx:Application fontFamily="embeddedArial"
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:local="*"
    xmlns:containers="com.dougmccune.containers.*"
    xmlns:flexlib="flexlib.controls.*"
    layout="vertical"
    verticalGap="20"
    paddingLeft="0"
    paddingRight="0"
    frameRate="31" width="525"
    viewSourceURL="srcview/index.html"
    applicationComplete="init(event)">

    <mx:Script>
        <![CDATA[
            import com.adobe.viewsource.ViewSource;
            import org.generalrelativity.foam.dynamics.force.Gravity;
            import mx.events.SliderEvent;
            import mx.events.NumericStepperEvent;
            import mx.events.ItemClickEvent;
            import mx.containers.Panel;
            import mx.controls.Image;
        
            [Bindable]
            private var numberOfTiles:Number = 6;
            private var dragTarget:Panel = null;
            
            private var imageWidth:Number =  50;
            private var imageHeight:Number = 50;
            private var gap:Number = 25;
            private var columns:Number = 3;
            private var tilesArray:Array;
            
            private var physicsContainer:PhysicsContainer;
            
            [Embed(source="assets/images/flex.jpg")]
            [Bindable] private var imgCls:Class;
            
            private function init(event:Event=null):void
            {
                ViewSource.addMenuItem(this, "wp-content/demos/FOAMTileDemo/srcview/index.html");
                stage.align = StageAlign.TOP_LEFT;
                stage.quality = StageQuality.BEST;
                stage.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
                createTiles();
                layoutTiles();
                physicsContainer.foam.simulate();
            }
            
            
            private function createTiles():void
            {                                
                tilesArray = new Array();
                for (var i:int=0; i<numberOfTiles; i++)
                {
                    var newPanel:Panel = new Panel();
                    var newImage:Image = new Image();
                    newImage.source = imgCls;
                    newImage.width = imageWidth;
                    newImage.height = imageHeight;
                    newPanel.addChild(newImage);
                    newPanel.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
                    newPanel.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);                    
                    tilesArray.push(newPanel);
                }
            }
            
            
            private function layoutTiles():void
            {
                if (physicsContainer)
                {
                    physicsContainer.removeAllChildren();
                    removeChild(physicsContainer);
                }
                physicsContainer = null;
                physicsContainer = new PhysicsContainer();
                physicsContainer.percentWidth = 100;
                physicsContainer.percentHeight = 100;
                addChildAt(physicsContainer, 0);
                
                var currentRow:int = 0;
                var currentColumn:int = 0;
                
                var availableColumnWidth:int = Math.round(width/columns);
                
                for (var k:int=0; k<tilesArray.length; k++)
                {
                    tilesArray[k].x = (availableColumnWidth * currentColumn) + ((availableColumnWidth - imageWidth)/2);
                    tilesArray[k].y = currentRow * (imageHeight + gap);
                    physicsContainer.addChild(tilesArray[k]);
                    currentColumn++;
                    if (currentColumn > (columns-1))
                    {
                        currentRow++;       // increment the row counter
                        currentColumn = 0;  // reset the column counter
                    }
                }
                
                physicsContainer.setGravity(gravitySlider.value);
                physicsContainer.foam.useMouseDragger(true);
                physicsContainer.foam.simulate();
            }
            
            
            private function onMouseDown(mouseEvent:MouseEvent=null):void
            {
                dragTarget = mouseEvent.currentTarget as Panel;
            }
            
            
            private function onMouseUp(mouseEvent:MouseEvent=null):void
            {         
                dragTarget = null;
            }
            
            
            private function onMouseMove(mouseEvent:MouseEvent=null):void
            {
                if (dragTarget)
                {
                    dragTarget.x = mouseX;
                    dragTarget.y = mouseY;
                }
            }
            
            
            private function onMouseOut(mouseEvent:MouseEvent=null):void
            {
                dragTarget = null;
            }
            
            
            private function onGravityChange(event:SliderEvent):void
            {
                physicsContainer.setGravity(event.value);
            }
            
            
            private function onTileCountChange(event:NumericStepperEvent):void
            {
                numberOfTiles = event.value;
                reset();
            }
            
            
            private function reset(event:Event=null):void
            {
                gravitySlider.value = 0;
                createTiles();
                layoutTiles();
            }
            
        ]]>
    </mx:Script>
    
    <mx:Style>
        Application
        {
            background-color: #8195c2;
            background-gradient-colors: #8195c2, #8195c2;
            background-gradient-alphas: 0.9, 1.0;
        }
        ApplicationControlBar
        {
            font-family: Verdana, Arial, Helvetica, "_sans";
            font-style: normal;
            color: black;
            font-size: 10;
            font-weight: normal;
        }
        Panel
        {
            background-color: #989587;
            border-color: #989587;
            border-style: solid;
            border-thickness: 1px;
            border-thickness-bottom: 2px;
            border-thickness-left: 2px;
            border-thickness-right: 2px;
            border-thickness-top: 2px;
            padding-bottom: 0px;
            padding-top: 0px;
            padding-right: 0px;
            padding-left: 0px;            
            header-height: 0px;
            corner-radius: 2px;
            rounded-bottom-corners: true;
        }
        
    </mx:Style>
    
    
    <mx:ApplicationControlBar id="topControlBar" horizontalGap="1" horizontalAlign="center" dock="true">
        
        <mx:Label id="instructionsLabel" text="Drag the tiles around:" />
            
    </mx:ApplicationControlBar>
    
        
    <mx:ApplicationControlBar id="appControlBar" horizontalGap="1">
        
        <mx:Label id="gravityLabel" text="Gravity:" />
        
        <mx:Label id="gravityStatusLabel" text="{gravitySlider.value==0?'Off':gravitySlider.value.toString()}" paddingRight="10"
            fontWeight="bold" />
        
        <mx:HSlider id="gravitySlider" minimum="0" maximum="1" tickInterval=".2" snapInterval=".2" change="onGravityChange(event)"
            width="75" liveDragging="true" />
        
        <mx:Spacer width="10" />
        <mx:VRule height="15" />
        <mx:Spacer width="10" />
        
        <mx:Label id="numberOfTilesLabel" text="Number of Tiles:" />
            
        <mx:NumericStepper id="tileCount" width="45" value="{numberOfTiles}" change="onTileCountChange(event)" minimum="1" maximum="15"/>
            
        <mx:Spacer width="10" />
        <mx:VRule height="15" />
        <mx:Spacer width="10" />
        
        <mx:Button id="resetButton" label="Reset" click="reset()" />
            
    </mx:ApplicationControlBar>
    
</mx:Application>