<?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:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:colorPicker="ardisia.components.colorPicker.*" 
          xmlns:calculator="ardisia.components.calculator.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            
            import spark.effects.easing.Bounce;
            import spark.effects.easing.Elastic;
            import spark.effects.easing.Linear;
            import spark.effects.easing.Power;
            import spark.effects.easing.Sine;
            import spark.formatters.NumberFormatter;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                callLater(calculatorA.setFocus);
                
                // display locale ID
                var nf:NumberFormatter = new NumberFormatter();
                localeDisplay.text = nf.actualLocaleIDName;
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
    </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="Calculator Description"
                                       description="Simple Calculator class that evaluates simple expressions.&#13;&#13;Use the included CalculatorGridEditor to attach the calculator to numerical fields in the DataGrid as an item editor.&#13;&#13;Full keyboard and numpad support. Evaluates the expression on the ENTER key and when the EQUAL_SIGN key is clicked.&#13;&#13;The calculator also supports multiline calculation, very large numbers, numbers with precision, and validation to make sure the expression makes sense.&#13;&#13;Fully skinnable and is designed to allow developers to add additional mathematical operators if desired, E.G. powers, logs, etc."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>API</data:label>
                <data:content>
                    <s:FormItem label="Precision:">
                        <s:HSlider id="fractionalDigitsSelect"
                                   minimum="0" maximum="20" value="5"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The maximum number of digits after the decimal to display after an expression is evaluated (if any zeroes at all)."/>
                        </s:helpContent>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
            <!--- expanding container #2 -->
            <data:ExpandingContainerData>
                <data:label>Animation</data:label>
                <data:content>
                    <s:FormItem label="Duration:">
                        <s:HSlider id="animationDurationSelect" 
                                   width="100"
                                   minimum="0" maximum="1000" value="150" snapInterval="0"/>
                    </s:FormItem>
                    <s:FormItem label="Easer:">
                        <s:DropDownList id="easerSelect"
                                        width="100"
                                        labelField="name"
                                        selectedIndex="0">
                            <s:ArrayCollection>
                                <fx:Object name="Sine" easer="{new Sine(0.5)}"/>
                                <fx:Object name="Linear" easer="{new Linear()}"/>
                                <fx:Object name="Power" easer="{new Power()}"/>
                                <fx:Object name="Bounce" easer="{new Bounce()}"/> 
                                <fx:Object name="Elastic" easer="{new Elastic()}"/>
                            </s:ArrayCollection>
                        </s:DropDownList>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The easer to use with the cash register animation."/>
                        </s:helpContent>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
            <!--- expanding container #3 -->
            <data:ExpandingContainerData>
                <data:label>Styling</data:label>
                <data:content>
                    <s:FormItem label="Background Color:">
                        <colorPicker:ColorPicker id="backgroundColorSelect"
                                                 selectedColor="#C4C4C4"/>
                    </s:FormItem>
                    <s:FormItem label="Background Alpha:">
                        <s:HSlider id="backgroundAlphaSelect" 
                                   width="100"
                                   minimum="0" maximum="1" snapInterval="0.05"  stepSize="0.05" value="1"/>
                        
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Standalone Example</data:tabLabel>
                <data:exampleDescription>Standalone calculator. When the calculator has focus, the keyboard can be used to enter expressions.</data:exampleDescription>
                <data:toolbarContent>
                    <s:HGroup>
                        <s:Form>
                            <s:FormHeading label="Locale"/>
                            <s:FormItem label="Your Locale:">
                                <s:Label id="localeDisplay"
                                         verticalAlign="middle"
                                         verticalCenter="0"
                                         paddingTop="4"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Your locale is used to display the correct decimal mark (',' or '.') in the Calculator and as the label for the decimal mark button."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <calculator:Calculator id="calculatorA" 
                                           horizontalCenter="0" verticalCenter="0"
                                           animationDuration="{animationDurationSelect.value}" 
                                           easer="{easerSelect.selectedItem.easer}" 
                                           fractionalDigits="{fractionalDigitsSelect.value}" 
                                           backgroundAlpha="{backgroundAlphaSelect.value}"
                                           backgroundColor="{backgroundColorSelect.selectedColor}"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>Grid Example</data:tabLabel>
                <data:exampleDescription>Calculator component used as a Grid editor. Edit the values in the middle column to test the calculator editor. Focus, tabbing, and keyboard entry are all supported.</data:exampleDescription>
                <data:primaryContent>
                    <s:VGroup horizontalCenter="0" verticalCenter="0"
                              gap="20">
                        <s:VGroup>
                            <s:Label text="Example Instructions:"
                                     fontWeight="bold"/>
                            <s:Label width="600" 
                                     maxDisplayedLines="-1"
                                     text="Double click a cell below and tab to a cell in the middle column to open the CalculatorGridEditor. Next, click the calculator icon within the editor to open the calculator. Click outside the calculator or hit the TAB key to close the calculator." />
                        </s:VGroup>
                        <s:DataGrid width="600" 
                                    variableRowHeight="true" 
                                    editable="true">
                            <s:columns>
                                <s:ArrayList>
                                    <s:GridColumn dataField="product" 
                                                  headerText="Product"/>
                                    <s:GridColumn dataField="revenue" 
                                                  headerText="Moola (calculator enabled)">
                                        <s:itemEditor>
                                            <fx:Component>
                                                <calculator:CalculatorGridEditor creationComplete="calculatorgrideditor1_creationCompleteHandler(event)">
                                                    <fx:Script>
                                                        <![CDATA[
                                                            import ardisia.components.calculator.Calculator;
                                                            import mx.events.DynamicEvent;
                                                            import mx.events.FlexEvent;
                                                            
                                                            protected function calculatorgrideditor1_creationCompleteHandler(event:FlexEvent):void
                                                            {
                                                                addEventListener("calculatorOpen", function(event:DynamicEvent):void
                                                                {
                                                                    var calc:Calculator = event.calculator;
                                                                    calc.animationDuration = outerDocument.animationDurationSelect.value;
                                                                    calc.easer = outerDocument.easerSelect.selectedItem.easer;
                                                                    calc.fractionalDigits = outerDocument.fractionalDigitsSelect.value;
                                                                    calc.setStyle("backgroundAlpha", outerDocument.backgroundAlphaSelect.value);
                                                                    calc.setStyle("backgroundColor", outerDocument.backgroundColorSelect.selectedColor);
                                                                });
                                                                
                                                            }
                                                            
                                                        ]]>
                                                    </fx:Script>
                                                </calculator:CalculatorGridEditor>
                                                
                                            </fx:Component>
                                        </s:itemEditor>
                                    </s:GridColumn>
                                    <s:GridColumn dataField="color" 
                                                  headerText="color">
                                        <s:itemEditor> 
                                            <fx:Component> 
                                                <s:ComboBoxGridItemEditor> 
                                                    <s:dataProvider>
                                                        <s:ArrayList>
                                                            <fx:String>red</fx:String>
                                                            <fx:String>green</fx:String>
                                                            <fx:String>blue</fx:String>
                                                        </s:ArrayList>
                                                    </s:dataProvider>
                                                </s:ComboBoxGridItemEditor> 
                                            </fx:Component> 
                                        </s:itemEditor>    
                                    </s:GridColumn> 
                                </s:ArrayList> 
                            </s:columns >
                            <s:dataProvider>
                                <s:ArrayCollection>
                                    <fx:Object product="Gumballs" revenue="100" color="red"/>
                                    <fx:Object product="Suckers" revenue="200" color="green"/>
                                    <fx:Object product="Candy Bars" revenue="10" color="blue"/>
                                    <fx:Object product="Cookies" revenue="5000" color="red"/>
                                </s:ArrayCollection>
                            </s:dataProvider>
                        </s:DataGrid> 
                    </s:VGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>