<?xml version="1.0" encoding="utf-8"?>
<!--

////////////////////////////////////////////////////////////////////////////////
//
//    Copyright 2014 Ardisia Labs LLC. All Rights Reserved.
//
//    This file is licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

-->
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:captcha="ardisia.components.captcha.*"
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:colorPicker="ardisia.components.colorPicker.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import components.captcha.CaptchaButtonSkin;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function removedFromStageHandler(event:Event):void
            {
                captchaAudio.abort();
            }
            
        ]]>
    </fx:Script>    
    
    
    <!-- declarations -->
    <fx:Declarations>
        
        <captcha:CaptchaAudio id="captchaAudio"
                              assetURLFunction="{function(char:String):String
                              {
                              return 'sound/captcha/english/' + char.toUpperCase() + '.mp3';
                              }
                              }"
                              loadStart="eventLabel.text+='&quot;' + event.type + '&quot; event dispatched \n'"
                              loadEnd="eventLabel.text+='&quot;' + event.type + '&quot; event dispatched \n'"
                              loadError="eventLabel.text+='&quot;' + event.type + '&quot; event dispatched \n'"
                              speechStart="eventLabel.text+='&quot;' + event.type + '&quot; event dispatched \n'"
                              speechEnd="eventLabel.text+='&quot;' + event.type + '&quot; event dispatched \n'"/>
        
    </fx:Declarations>
    
    <!-- states -->
    <s:states>
        <s:State name="stockholm" />
        <s:State name="london" />
        <s:State name="spark" />
    </s:states>
    
    <!-- application -->
    <containers:DemoApplicationWrapper id="demoAppWrapper" 
                                       width="100%" height="100%"
                                       westRegionTitle="CAPTCHA Description"
                                       eastRegionTitle="Event Log"
                                       description="A visual and audio CAPTCHA used to test if the application user is human.&#13;&#13;The package includes two components: (1) a visual CAPTCHA that displays the token visually and (2) an audio CAPTCHA that reads out the token.&#13;&#13;The audio CAPTCHA can use any sound files to read out the CAPTCHA token, but a set of female midwestern USA accent voice files are bundled with the component."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:eastContent>
            <s:RichText id="eventLabel"
                        top="10" right="10" bottom="10" left="10"/>
        </containers:eastContent>
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>API</data:label>
                <data:content>
                    <s:FormItem label="Token:">
                        <s:TextInput id="tokenSelect" 
                                     width="100"
                                     restrict="A-Za-z0-9" 
                                     text="{captcha.token}"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The CAPTCHA token."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"/>
                    <s:FormHeading label="Random Token:"/>
                    <s:FormItem label="Random Length:">
                        <s:NumericStepper id="lenStepper"
                                          width="100"
                                          minimum="1" maximum="100" value="6" snapInterval="1"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Select the number of characters for a random token."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Use Random:">
                        <s:Button label="Randomize" 
                                  click="captcha.text=captcha.getRandomString();"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Click to set a randomized token string."/>
                        </s:helpContent>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
            <!--- expanding container #2 -->
            <data:ExpandingContainerData>
                <data:label>Visual CAPTCHA Styling</data:label>
                <data:content>
                    <s:FormItem label="Tracking Right:">
                        <s:HSlider id="trackingRightStepper" 
                                   width="100"
                                   minimum="-10" maximum="10" value="3" snapInterval="1"/>
                    </s:FormItem>
                    <s:FormItem label="Tracking Left:">
                        <s:HSlider id="trackingLeftStepper"
                                   width="100"
                                   minimum="-10" maximum="10" value="3" snapInterval="1"/>
                    </s:FormItem>
                    <s:FormItem label="Color:">
                        <colorPicker:ColorPicker id="colorPicker" 
                                                 selectedColor="0" />
                    </s:FormItem>
                    <s:FormItem label="Noise:">
                        <s:CheckBox id="noiseSelect" 
                                    selected="true"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="True to display a perlin noise profile behind the token."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Polyline:">
                        <s:CheckBox id="polyLineSelect" 
                                    selected="true"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="True to display a poly line over the token."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Drop Shadow:">
                        <colorPicker:ColorPicker id="colorPickerDS" 
                                                 selectedColor="0xFFFFFF" change="captcha.dropShadowFilterPart.color=colorPickerDS.selectedColor" />
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingBottom="6" paddingTop="6"/>
                    
                    <s:FormHeading label="Displacement Filter"/>
                    <s:FormItem label="ScaleX:">
                        <s:HSlider id="scaleXStepper" 
                                   width="100"
                                   minimum="0" maximum="30" snapInterval="1" value="7" 
                                   change="captcha.displacementFilterPart.scaleX=scaleXStepper.value"/>
                    </s:FormItem>
                    <s:FormItem label="ScaleY:">
                        <s:HSlider id="scaleYStepper" 
                                   width="100"
                                   minimum="0" maximum="30" snapInterval="1" 
                                   value="20" change="captcha.displacementFilterPart.scaleY=scaleYStepper.value"/>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>CAPTCHA Example (visual and audio)</data:tabLabel>
                <data:exampleDescription>The implementation below demonstrates both the audio and the visual CAPTCHA components.</data:exampleDescription>
                <data:primaryContent>
                    <s:Panel horizontalCenter="0" verticalCenter="0" 
                             focusEnabled="true" tabEnabled="true"
                             title="CAPTCHA (are you a human?)"
                             defaultButton="{submitButton}">
                        <s:VGroup top="20" right="20" bottom="20" left="20"
                                  gap="20">
                            <s:HGroup>
                                <captcha:CaptchaVisual id="captcha" 
                                                       top="0" right="0" bottom="0" left="0"
                                                       token="{tokenSelect.text}"
                                                       trackingLeft="{trackingLeftStepper.value}"
                                                       trackingRight="{trackingRightStepper.value}"
                                                       color="{colorPicker.selectedColor}"
                                                       randomTokenLength="{lenStepper.value}"
                                                       drawPolyLine="{polyLineSelect.selected}"
                                                       drawNoise="{noiseSelect.selected}"
                                                       change="eventLabel.text+='&quot;' + event.type + '&quot; event dispatched \n'"/>
                                <s:VGroup>
                                    <s:HGroup verticalAlign="middle">
                                        <s:Button icon="@Embed(source='icons/arrow-rotate.png')"
                                                  toolTip="Try a different CAPTCHA"
                                                  skinClass="components.captcha.CaptchaButtonSkin"
                                                  click="captcha.text=captcha.getRandomString();"/>
                                        <s:Label text="Try Another" />
                                    </s:HGroup>
                                    <s:HGroup verticalAlign="middle">
                                        <s:Button icon="@Embed(source='icons/audio.png')"
                                                  toolTip="Play an audio version of the CAPTCHA"
                                                  skinClass="components.captcha.CaptchaButtonSkin"
                                                  click="captchaAudio.charsToSpeech(captcha.text)"/>
                                        <s:Label text="Play Audio" />
                                    </s:HGroup>
                                    <s:HGroup verticalAlign="middle">
                                        <s:Button icon="@Embed(source='icons/captcha-information.png')"
                                                  toolTip="Enter the string to the left in the input box below to continue"
                                                  skinClass="components.captcha.CaptchaButtonSkin"/>
                                        <s:Label text="Information" />
                                    </s:HGroup>
                                </s:VGroup>
                            </s:HGroup>
                            <s:HGroup verticalAlign="baseline">
                                <s:TextInput id="sf"/>
                                <s:Button id="submitButton" 
                                          label="Submit" 
                                          click="if(sf.text.toLowerCase()==captcha.text.toLowerCase()){notificationLabel.text='Success! You are human.';}else{notificationLabel.text='Incorrect. You may not be human.';}"/>
                                <s:Label id="notificationLabel" />
                            </s:HGroup>
                        </s:VGroup>
                    </s:Panel>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>