<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         xmlns:comps="comps.*">

    <!-- A set of controls that will hopefully help work with EffectTesting.as -->

    <fx:Script>
        <![CDATA[
            import mx.core.IVisualElement;
            import mx.effects.Effect;
            
            import spark.components.Application;
            public var rootDocument:Object;
            
            public var effect:Effect;
            
            public var inspectionTarget:Object;
            
            private function assertClick():String {
                if (postLayout.selected){
                    return EffectTesting.assertPostLayoutPropertySet(inspectionTarget as IVisualElement, propertyNameInput.text, expectedOutput.text, tolerance.value)
                } else {
                    return EffectTesting.assertPropertySet(inspectionTarget as IVisualElement, propertyNameInput.text, expectedOutput.text, tolerance.value)
                }
            }
            
            private function generateClick(propertyNamesString:String, tolerance:Number = 0, postLayout:Boolean = false):String {
                var output:String = '';
                var expectedValueString:String = '';
                
                output += '<AssertMethodValue method="value=EffectTesting.';
                
                if (postLayout){
                    output += 'assertPostLayoutPropertySet';
                    expectedValueString = EffectTesting.generatePropertySet(inspectionTarget as IVisualElement, propertyNamesString, true);
                } else {
                    output += 'assertPropertySet';
                    expectedValueString = EffectTesting.generatePropertySet(inspectionTarget as IVisualElement, propertyNamesString, false);
                }
                
                var pathToTarget:String = "";
                if (!(rootDocument is Application)){
                    pathToTarget += rootDocument.id + ".";
                }
                
                pathToTarget += inspectionTarget.id;
                
                output += '(application.' + pathToTarget + ', \'' + propertyNamesString + '\', \'' + expectedValueString + '\'';
                
                if (tolerance != 0){
                    output +=  ', ' + tolerance;
                }
                
                output +=  ')" value="PASS" />';
                
                return output;
            }
            
            private function dump():void {
                trace('-- dump --');
                trace(generateClick('width,height,x,y,z', 1));
                trace(generateClick('rotation,rotationX,rotationY,rotationZ'));
                trace(generateClick('scaleX,scaleY,scaleZ'));
                trace(generateClick('x,y,z,rotationX,rotationY,rotationZ,scaleX,scaleY,scaleZ', 0.01, true));
            }
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        
        <fx:Component className="SeekTimeChooser">
            <s:Group>
                <fx:Metadata>
                    [Event(name="change", type="mx.events.FlexEvent")]
                </fx:Metadata> 
                <fx:Script>
                    <![CDATA[
                        import mx.events.FlexEvent;
                        
                        private var _value:Number;
                        private var valueRemember:Number;
                        
                        public function set value(v:Number):void {
                            
                            if (isNaN(v)){
                                valueRemember = (isNaN(_value) ? 0 : _value);
                                theTextInput.enabled = false;
                                nanCheckBox.selected = true;
                            } else {
                                theTextInput.text = v + "";
                                theTextInput.enabled = true;
                                nanCheckBox.selected = false;
                            }
                            
                            _value = v;
                        }
                        
                        public function changeValueFromUI(v:Number):void {
                            this.value = v;
                            dispatchEvent(new FlexEvent("change")); 
                        }
                        
                        [Bindable(event="change")]
                        public function get value():Number {
                            return _value;
                        }
                        
                    ]]>
                </fx:Script>
                
                <s:Rect top="0" left="0" right="0" bottom="0">
                    <s:fill>
                        <s:SolidColor color="0xe2e2FF" alpha="0" />
                    </s:fill>
                </s:Rect>
                
                <s:HGroup verticalAlign="middle">
                    <s:Label text="time:" toolTip="requestedSeekTime" />
                    <s:TextInput id="theTextInput" width="35" change="changeValueFromUI(Number(theTextInput.text))" />
                    <s:CheckBox id="nanCheckBox" label="NaN" change="changeValueFromUI((nanCheckBox.selected) ? NaN : valueRemember)" />
                </s:HGroup>
                
            </s:Group>
        </fx:Component>
        <fx:Component className="StateChooser">
            <s:Group creationComplete="loadStates()">
                <fx:Script>
                    <![CDATA[
                        import mx.collections.ArrayList;
                        
                        import spark.components.List;
                        import spark.events.IndexChangeEvent;
                        
                        public var target:Object = null;
                        
                        [Bindable] private var statesCollection:ArrayList = new ArrayList(); 
                        
                        private function loadStates():void {
                            // use the parentDocument unless another target document is specified
                            if (target == null)
                                target = parentDocument;
                            
                            // get a list of the states in the parent document
                            var states:Array = target.states;
                            
                            for(var i:int = 0; i < states.length; i++){
                                statesCollection.addItem(states[i].name);
                            }
                            
                            // set the selected state to the current state of the parent document
                            chooser.selectedItem = target.currentState;
                        }
                        
                        private function buttonSelected(event:IndexChangeEvent):void{
                            if (event.newIndex != -1){
                                // only change the state when the selected button changed
                                
                                var newState:String = (event.target as List).selectedItem;
                                trace("go to state: " + newState);
                                target.currentState = newState;
                            }
                        }
                        
                    ]]>
                </fx:Script>
                <s:DropDownList id="chooser" toolTip="Change state" change="buttonSelected(event)" requireSelection="true" dataProvider="{statesCollection}" width="100%" />
            </s:Group>
        </fx:Component>
    </fx:Declarations>
    <s:HGroup gap="15">
        
        <s:VGroup horizontalAlign="justify">
            <s:Label text="Seek Options" fontWeight="bold" />
            <s:CheckBox id="requestedSeek" label="requestedSeek" change="EffectTesting.requestedSeek = requestedSeek.selected;" />
            <comps:SeekTimeChooser id="seekTimeChooser" enabled="{requestedSeek.selected}" value="NaN" change="EffectTesting.requestedSeekTime=seekTimeChooser.value" />
            <s:Label text="more seeking" />
            <s:HSlider id="hseek" change="EffectTesting.seekCurrentEffectTo(hseek.value)" minimum="0" maximum="1000" />
        </s:VGroup>
        
        <s:VGroup horizontalAlign="justify">
            <s:Label text="Effect Testing" fontWeight="bold" />
            <s:Button label="setup effect test" click="EffectTesting.setupEffectTest(rootDocument, effect);hseek.maximum=EffectTesting.getCurrentEffectDuration();" />
            <s:Button label="seek effect" click="EffectTesting.seekCurrentEffect();" />
            <s:Button label="resume effect" click="EffectTesting.resumeCurrentEffect();" />
        </s:VGroup>
        
        <s:VGroup horizontalAlign="justify">
            <s:Label text="Transition Testing" fontWeight="bold" />
            <s:Button label="setup transition test" click="EffectTesting.setupTransitionTest(rootDocument)" />
            <comps:StateChooser target="{parentDocument}" />
            <s:Button label="end transition" click="EffectTesting.resumeCurrentEffect();" />
        </s:VGroup>
        
        <s:VGroup horizontalAlign="justify">
            <s:Label text="Assertion" fontWeight="bold" />
            <s:CheckBox id="postLayout" label="postLayoutTransformOffsets" />
            
            <s:HGroup verticalAlign="middle">
                <s:Label text="Property names:" />            
                <s:TextInput id="propertyNameInput" text="width,height,x,y,z" />
            </s:HGroup>
            
            <s:HGroup verticalAlign="middle">
                <s:Label text="Expected output:" />
                <s:TextInput id="expectedOutput" text="127,325,200,100,0|127,99,0,0,0|24,99,0,0,0|24,99,103,0,0|24,99,50,0,0|127,313,0,6,0|24,99,0,108,0|24,99,103,108,0|24,99,51,108,0|59,313,34,0,0|127,99,0,226,0|24,99,0,0,0|24,99,103,0,0|24,99,50,0,0" />
            </s:HGroup>
            
            <s:HGroup verticalAlign="middle">
                <s:Label text="tolerance:"/>
                <s:NumericStepper id="tolerance" value="0" minimum="0" maximum="10" stepSize="0.1" width="50" />
            </s:HGroup>

            <s:HGroup>
                <s:Button label="assert values" click="assertOutput.text = assertClick(); dg.dataProvider = EffectTesting.getLastResult()" />
                <s:Button label="generate line" click="trace(generateClick(propertyNameInput.text, tolerance.value, postLayout.selected))" />
            </s:HGroup>
                <s:Button label="generate set" click="dump()" />
        </s:VGroup>
        
        <s:VGroup>
            <s:Label id="assertOutput" />            
            <s:Scroller width="350" height="150">
                <s:DataGroup id="dg">
                    <s:layout>
                        <s:VerticalLayout gap="0" />
                    </s:layout>
                    <s:itemRenderer>
                        <fx:Component>
                            <s:ItemRenderer width="100%" dataChange="init()">
                                <fx:Script>
                                    <![CDATA[
                                      
                                        private function describeProperty(id:String, propertyName:String, postLayout:Boolean):String{
                                            var output:String = "";
                                            
                                            output += id;
                                            
                                            if (postLayout)
                                                output += ".postLayoutTransformOffsets";
                                            
                                            output += "." + propertyName;
                                            
                                            return output;
                                        }
                                        
                                        private function init():void {
                                            if (data == null){
                                                return;
                                            }
                                            
                                            if (data is String){
                                                // decide if this was a fail notice
                                                var s:String = String(data);
                                                
                                                if (s.indexOf("FAIL") != -1){
                                                    // fail
                                                    bgColor.color = 0xCB2314;
                                                } else {
                                                    // pass
                                                    bgColor.color = 0x4ACB62;
                                                }
                                                
                                                bgColor.alpha = 1;
                                                lbl.left = 5;
                                                lbl.text = s;
                                                lbl.setStyle('fontWeight', 'bold');
                                            } else {
                                                if (String(data.result).indexOf("FAIL") != -1){
                                                    // fail
                                                    bgColor.color = 0xCB2314;
                                                } else {
                                                    // pass
                                                    bgColor.color = 0x4ACB62;
                                                }
                                                
                                                bgColor.alpha = 0.5;
                                                lbl.left = 15;
                                                lbl.text = describeProperty(data.target, data.propertyName, data.postLayout) + ": expected " + data.expected + " +/- " + data.tolerance +
                                                    " received " + data.actual;
                                                lbl.setStyle('fontWeight', 'normal');
                                            }
                                        }
                                    ]]>
                                </fx:Script>
                                <s:Rect width="100%" height="100%">
                                    <s:fill>
                                        <s:SolidColor id="bgColor" color="0xCCCCCC" />
                                    </s:fill>
                                </s:Rect>
                                <s:Label id="lbl" left="5" top="2" bottom="2" right="20" />
                            </s:ItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:DataGroup>
            </s:Scroller>
        </s:VGroup>
    </s:HGroup>
</s:Group>