<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#FFFFFF" backgroundAlpha="1"
    creationPolicy="all"
    xmlns:component="com.binarygame.component.*" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.events.CloseEvent;
            import mx.managers.PopUpManager;
            import com.binarygame.popups.Help;
            import mx.effects.easing.Bounce;
            import com.binarygame.util.BinaryUtil;
            import mx.controls.Alert;
            
            [Bindable]
            private var decimal:String;
            
            [Bindable]
            private var score:Number = 0;
            
            private var binary:String;
                    
            private function resetFlashCard() : void
            {
                flashCard.x = 0 - flashCard.width;
            }
            
            private function resetGame() : void
            {
                score = 0;
                populateQuestion();
                stopWatch.countDown(60);
            }
                    
            private function populateQuestion() : void
            {
                var tempDecimal:Number = Math.ceil(Math.random() * Number(level.selectedValue));
                decimal = tempDecimal.toString();
                binary = BinaryUtil.decimalToBinary(tempDecimal);
                txtBinary.text = "";
            }
            
                        
            private function txtBinaryChange(event:Event) : void
            {
                if(binary == txtBinary.text)
                {
                    score++;
                    rightAnswer.play();
                    populateQuestion();    
                }
            }
            
            private function timeUp() : void
            {
                level.enabled = true;
                gameCanvas.enabled = false;
                btnStart.enabled = true;
            }
            
            private function btnStartClick() : void
            {
                btnStart.enabled = false;
                gameCanvas.enabled = true;
                level.enabled = false;    
                txtBinary.setFocus();
                resetGame();    
            }
            
            private function btnHelpClick() : void
            {
                var help:Help = new Help();
                help.addEventListener(CloseEvent.CLOSE, closeHelp);
                PopUpManager.addPopUp(help, this);
                PopUpManager.centerPopUp(help);
            }
            
            private function closeHelp(event:CloseEvent) : void
            {
                PopUpManager.removePopUp(Help(event.target));
            }
            
            
        ]]>
    </mx:Script>
    <mx:Canvas id="gameCanvas" 
        horizontalScrollPolicy="off"
        verticalScrollPolicy="off"
        width="637" height="280" horizontalCenter="0" verticalCenter="0.5" cornerRadius="20" alpha="1.0" backgroundColor="#c0c0c0" borderStyle="solid" borderColor="#000000" themeColor="#000000">
        <mx:Canvas id="flashCardStage"  
            horizontalScrollPolicy="off"
            verticalScrollPolicy="off"
            height="123" verticalCenter="0" left="0" right="0" backgroundColor="#000000">
            <mx:Canvas 
                id="flashCard" 
                horizontalScrollPolicy="off"
                verticalScrollPolicy="off"
                width="301" height="106" 
                alpha="1.0" backgroundColor="#ffffff" 
                x="167" y="9">
                <mx:Label horizontalCenter="0" top="10" id="lblDecimal" fontSize="20" text="{decimal}"/>
                <mx:TextInput id="txtBinary" fontSize="22" restrict="0-1" verticalCenter="25" left="5" right="5" change="txtBinaryChange(event)"/>
            </mx:Canvas>
        </mx:Canvas>
        <mx:Label text="{score}" fontSize="16" color="#ffffff" horizontalCenter="-204" verticalCenter="-113"/>
        <component:BinaryStopWatch id="stopWatch" fontSize="16" color="#ffffff" width="141" countDownComplete="timeUp()" horizontalCenter="-167" verticalCenter="-81"/>
        <mx:Label text="Time:" fontSize="16" color="#ffffff" fontWeight="bold" horizontalCenter="-281" verticalCenter="-81"/>
        <mx:Label text="Score:" fontSize="16" color="#ffffff" fontWeight="bold" horizontalCenter="-276" verticalCenter="-113"/>
    </mx:Canvas>

    
    <mx:Sequence id="rightAnswer" target="{flashCard}">
        <mx:Move
            duration="2000"
            xTo="{flashCardStage.width + 10}" easingFunction="{Bounce.easeInOut}" effectEnd="resetFlashCard()"/>

        <mx:Move
            duration="1000"
            xTo="{(flashCardStage.width/2) - (flashCard.width/2)}" easingFunction="{Bounce.easeInOut}"/>
    </mx:Sequence>
    <mx:Button label="Start" verticalCenter="159.5" horizontalCenter="-291" click="btnStartClick()" id="btnStart"/>
    <mx:Button label="Help" id="btnHelp" click="btnHelpClick()" horizontalCenter="-230" verticalCenter="159.5"/>
    <mx:RadioButtonGroup id="level"/>
    <mx:RadioButton label="Easy" value="64" selected="true" groupName="level" id="easy" horizontalCenter="135" verticalCenter="157.5"/>
    <mx:RadioButton label="Medium" value="256" groupName="level" id="medium" horizontalCenter="212" verticalCenter="157.5"/>
    <mx:RadioButton label="Hard"  value="1028" groupName="level" id="hard" horizontalCenter="289" verticalCenter="157.5"/>
    
    
    
    
    
</mx:Application>