<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    backgroundColor="#333333" 
    creationComplete="onCreationComplete()"
    enterFrame="onEnterFrame()">
    
    <mx:Script>
        <![CDATA[
            
            import org.flashsandy.display.*;
            
            [Embed(source='assets/img/invaderzim.jpg')]
            private var MyImage:Class;
            
            private var shape:Shape = new Shape();
            private var bitmap:Bitmap = new MyImage();
            private var distortion:DistortImage = new DistortImage(500, 375, 3, 3);
            private var showGrid:Boolean = false;
            
            private function onCreationComplete ():void {
                this.shape.x = this.shape.y = 50;
                this.rawChildren.addChild(this.shape);
            }
            
            private function onEnterFrame ():void {
                this.shape.graphics.clear();
                if (this.showGrid || this.showGridCheckbox.selected){
                    this.shape.graphics.lineStyle(1, 0x00FF00);
                }
                distortion.setTransform(this.shape.graphics, 
                                        this.bitmap.bitmapData, 
                                        this.getDisplayObjectCenter(this.dragBtn1, -50, -50), 
                                        this.getDisplayObjectCenter(this.dragBtn2, -50, -50), 
                                        this.getDisplayObjectCenter(this.dragBtn3, -50, -50), 
                                        this.getDisplayObjectCenter(this.dragBtn4, -50, -50));
            }
            
            private function getDisplayObjectCenter (child:DisplayObject, x:Number=0, y:Number=0):Point {
                var center:Point = new Point();
                center.x = child.x + child.width/2 + x;
                center.y = child.y + child.height/2 + y;
                return center;
            }
            
        ]]>
    </mx:Script>
    
    <mx:Style>
        Button {
            upSkin: Embed('assets/skins/drag.swf');
            overSkin: Embed('assets/skins/drag.swf');
            downSkin: Embed('assets/skins/drag.swf');
            disabledSkin: Embed('assets/skins/drag.swf');
        }
    </mx:Style>
    
    <mx:Button id="dragBtn1" x="47"  y="47"  buttonMode="true" mouseDown="dragBtn1.startDrag()" mouseUp="dragBtn1.stopDrag()" />
    <mx:Button id="dragBtn2" x="547" y="47"  buttonMode="true" mouseDown="dragBtn2.startDrag()" mouseUp="dragBtn2.stopDrag()" />
    <mx:Button id="dragBtn3" x="547" y="422" buttonMode="true" mouseDown="dragBtn3.startDrag()" mouseUp="dragBtn3.stopDrag()" />
    <mx:Button id="dragBtn4" x="47"  y="422" buttonMode="true" mouseDown="dragBtn4.startDrag()" mouseUp="dragBtn4.stopDrag()" />
    
    <mx:CheckBox 
        id="showGridCheckbox" 
        x="80" y="442" 
        toolTip="Show grid" />
    <mx:HSlider 
        id="precisionSlider" 
        x="100" y="440" width="400" 
        value="3" 
        minimum="1" maximum="5" 
        liveDragging="true" snapInterval="1" 
        mouseDown="showGrid=true" mouseUp="showGrid=false" 
        change="distortion.setPrecision(precisionSlider.value, precisionSlider.value)" />
    
</mx:Application>