<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:utils="com.dougmccune.utils.*" xmlns:controls="com.dougmccune.controls.*"
    verticalGap="0" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import mx.controls.Image;
            import mx.core.UIComponent;
            
            //if motion is greater than this we take a snapshot and add it to the tile container
            private var threshold:Number = .2;
            
            private function motionHandler(event:Event):void {
                if(detector.percentChange > threshold) {
                    
                    if(tile.numChildren > 30) {
                        tile.removeAllChildren();
                    }
                    
                    var image:Image = new Image();
                    image.source = new Bitmap(detector.lastSnapshot.clone());
                    image.width =  45;
                    image.height = 35;
                    
                    tile.addChild(image);
                    
                    bar.setStyle("trackColors", [0xff0000,0xff0000]);
                }
                else {
                    bar.clearStyle("trackColors");
                }
            }
        ]]>
    </mx:Script>
    <!-- the magic motion detector -->
    <utils:SimpleMotionDetector id="detector"  sampleRate="100"
        source="{cam}" change="motionHandler(event); bar.setProgress(detector.percentChange, 1)" />

    <!-- a custom VideoDisplay to show a webcam -->
    <controls:WebCamDisplay id="cam" />    
    
    <mx:ProgressBar mode="manual" minimum="0" maximum="1" id="bar" trackHeight="30" 
        labelPlacement="center" label="Motion: %3%%" width="{cam.width}" />
    
    <mx:Tile id="tile" width="100%" horizontalGap="0" verticalGap="0" />
    
</mx:Application>