<?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:mx="library://ns.adobe.com/flex/mx" 
          xmlns:magnifier="ardisia.components.magnifier.*"
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <magnifier:Magnifier id="mag"
                             displacementScale="{zoomStrengthSelect.value}"/>
        
    </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="Magnifier Description"
                                       description="Creates a magnification effect over any visual element that is a UIComponent or extends UIComponent.&#13;&#13;Can either zoom in or zoom out depending on the strength property."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>API</data:label>
                <data:content>
                    <s:FormHeading label="Properties"/>
                    <s:FormItem label="Zoom Strength:">
                        <s:HSlider id="zoomStrengthSelect"
                                   width="100"
                                   minimum="-100" maximum="100" value="75"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Positive values will zoom in and negative values will zoom out.&#13;&#13;Think of it as a strength indicator for the zoom."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Zoom Width:">
                        <s:HSlider id="zoomWidthSelect"
                                   width="100"
                                   minimum="1" maximum="200" value="100"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Width of the magnified region."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Zoom Height:">
                        <s:HSlider id="zoomHeightSelect"
                                   width="100"
                                   minimum="1" maximum="200" value="100"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Height of the magnified region."/>
                        </s:helpContent>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Image Example</data:tabLabel>
                <data:exampleDescription>Mouse over the image below to apply the magnification to an image.&#13;&#13;For this example, the mouse cursor is hidden when the magnification is applied.</data:exampleDescription>
                <data:primaryContent>
                    <s:Image id="laikaToysImg" 
                             horizontalCenter="0" verticalCenter="0"
                             source="@Embed(source='images/laika-toys.jpg')"
                             rollOut="mag.remove();Mouse.show();"
                             rollOver="mag.magnify(laikaToysImg, zoomWidthSelect.value, zoomHeightSelect.value, event.stageX, event.stageY);Mouse.hide();"
                             mouseMove="mag.magnify(laikaToysImg, zoomWidthSelect.value, zoomHeightSelect.value, event.stageX, event.stageY);"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>Text Example</data:tabLabel>
                <data:exampleDescription>Magnification can be applied to any UIComponent, not just images.  Mouse over the components below to observe the magnification effect over text and buttons.&#13;&#13;For this example, the mouse cursor is hidden when the magnification is applied.</data:exampleDescription>
                <data:toolbarContent>
                    <s:FormItem top="10">
                        <s:TextArea id="textSelect" 
                                    text="Mouse over this text to see the magnification.  Adjust this text in the textarea in the controlbar to see how the magnification can dynamically update.&#13;&#13;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Use this field to set the text that appears below.&#13;&#13;The magnification can be applied to dynamic content."/>
                        </s:helpContent>
                    </s:FormItem>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:BorderContainer id="test" 
                                       horizontalCenter="0" verticalCenter="0"
                                       rollOut="mag.remove();Mouse.show();"
                                       rollOver="mag.magnify(test, zoomWidthSelect.value, zoomHeightSelect.value, event.stageX, event.stageY);Mouse.hide();"
                                       mouseMove="mag.magnify(test, zoomWidthSelect.value, zoomHeightSelect.value, event.stageX, event.stageY);">
                        <s:Rect top="0" right="0" bottom="0" left="0">
                            <s:fill>
                                <s:SolidColor color="#000000"
                                              alpha="0.1"/>
                            </s:fill>
                        </s:Rect>
                        <s:VGroup top="10" right="10" bottom="10" left="10">
                            <s:Button label="Button " />
                            <s:RichText id="textDisplay" 
                                        maxWidth="300"
                                        horizontalCenter="0" verticalCenter="0"
                                        text="{textSelect.text}"/>
                            <s:HGroup>
                                <s:Button label="Button " />
                                <s:Button label="Button " />
                            </s:HGroup>
                        </s:VGroup>
                    </s:BorderContainer>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>