<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="handleCreationComplete(event)"
    layout="absolute"
    backgroundGradientAlphas="1,1"
    backgroundColor="#ffffff" xmlns:component="com.timothyhuertas.component.*" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import com.timothyhuertas.component.IDrum;

            import com.timothyhuertas.motion.HitEvent;
            import com.timothyhuertas.motion.MonitorableRegion;
            import mx.controls.Alert;
            import com.timothyhuertas.motion.MotionDetector;

            private var _motionDetector:MotionDetector;
            
            protected function handleCreationComplete(event:Event) : void
            {
                IEventDispatcher(event.currentTarget).removeEventListener(event.type, handleCreationComplete);
                
                
                
                _motionDetector = new MotionDetector(video);
                addMonitorableRegionForDrum(bongo);
                addMonitorableRegionForDrum(clap);
                addMonitorableRegionForDrum(kick);
                addMonitorableRegionForDrum(snare);
                addMonitorableRegionForDrum(work);

                //motionDetector.debug = debug;
                _motionDetector.start();    
            }
            
            protected function addMonitorableRegionForDrum(drum:IDrum) : void
            {
                //perhaps this belongs in a util class
                var region:MonitorableRegion = new MonitorableRegion(new Rectangle(drum.x/video.width,drum.y/video.height,drum.width/video.width,drum.height/video.height), drum);    
                region.addEventListener(HitEvent.HIT, handleDrumHit);
                _motionDetector.monitorRegion(region);
            }
            
            protected function handleDrumHit(e:Event) : void
            {
                var drum:IDrum = MonitorableRegion(e.currentTarget).boundData as IDrum;
                drum.play();
            }

        ]]>
    </mx:Script>
    
        <mx:Image source="assets/troubleShootWebcam.png" top="20" horizontalCenter="0"/>
        <mx:Canvas width="1010" height="600" horizontalCenter="0">
            
            <component:Mirror id="video" width="100%" height="100%" />
            <mx:HBox horizontalGap="200" paddingLeft="5">
                <component:Bongo id="bongo" width="40" height="40"/>
                <component:Clap id="clap" width="40" height="40" />
                <component:Kick id="kick" width="40" height="40" />
                <component:Snare id="snare"  width="40" height="40" />
                <component:Work id="work" width="40" height="40" />
            </mx:HBox>
            
        </mx:Canvas>

</mx:Application>