package {
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.MouseEvent;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;
    import flash.utils.setTimeout;

public class DrawingApp2 extends Sprite {
        private var tracks:Array;
        private var replayBtn:TextField;
        private var clearBtn:TextField;
        private var TIMEOUT:int = 10;
        private var penSize:Number = 10;
        private var penColor:uint = 0x000000;

public function DrawingApp2() {
            init();
        }
        private function init():void {
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;

tracks = new Array();

var d:TextField = makeTextField('Draw!!!');
                        addChild(d);
                        d.backgroundColor = 0xff0000;

replayBtn = makeTextField('Replay');
            addChild(replayBtn);
            clearBtn = makeTextField('Clear');
                        replayBtn.x = d.width + 5;
            addChild(clearBtn);
            clearBtn.x = d.width + 5 + replayBtn.width + 5;

///d.x = replayBtn.width + 5 + clearBtn.width + 5;

stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
            stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
            replayBtn.addEventListener(MouseEvent.CLICK, onClickReplay);
            clearBtn.addEventListener(MouseEvent.CLICK, onClickClear);
        }
        private function onMouseDown(event:MouseEvent):void {
            graphics.lineStyle(penSize, penColor);
            graphics.moveTo(mouseX, mouseY);
            tracks.push({x:mouseX, y:mouseY, down:true});
            stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
        }
        private function onMouseUp(event:MouseEvent):void {
            tracks.push({x:mouseX, y:mouseY, down:false});
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
        }
        private function onMouseMove(event:MouseEvent):void {
            graphics.lineTo(mouseX, mouseY);
            tracks.push({x:mouseX, y:mouseY, down:true});
        }
        private function onClickReplay(event:MouseEvent):void {
            trace('click replay: ' + tracks.length);
            graphics.clear();
            graphics.lineStyle(penSize, penColor);
            var i:int = 0;
            setTimeout(function():void{
                if (i < tracks.length) {
                    var track:Object = tracks[i] as Object;
                    //trace([track.x,track.y,track.down].join(':'));
                    if (i == 0 || tracks[i-1].down == false) {
                        graphics.moveTo(track.x, track.y);
                    } else {
                        graphics.lineTo(track.x, track.y);
                    }
                    i++;
                    setTimeout(arguments.callee, TIMEOUT);
                }
            }, TIMEOUT);
        }
        private function onClickClear(event:MouseEvent):void {
            graphics.clear();
            graphics.lineStyle(penSize, penColor);
            tracks = new Array();
        }
        private function makeTextField(str:String):TextField {
            var tf:TextField = new TextField();
            tf.text = str;

var tf1:TextFormat = new TextFormat();
            tf1.color = 0xffffff;
            tf1.size = 14;
            tf1.font = 'Arial';
            tf1.align = TextFormatAlign.CENTER;
            tf.setTextFormat(tf1);

tf.background = true;
            tf.backgroundColor = 0x666666;
            tf.border = true;
            tf.borderColor = 0x000000;
            tf.width = 50;
            tf.height = 20;
            return tf;
        }
    }
}