<?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:miniViewport="ardisia.components.miniViewport.*" 
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:colorPicker="ardisia.components.colorPicker.*" 
          xmlns:scroller="ardisia.components.scroller.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import spark.events.IndexChangeEvent;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                viewport.horizontalScrollPosition=838;viewport.verticalScrollPosition=859;
                demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, function(event:IndexChangeEvent):void
                {
                    if (demoAppWrapper.viewstack.selectedIndex == 0)
                    {
                        viewport.horizontalScrollPosition=838;viewport.verticalScrollPosition=859;
                    }
                    if (demoAppWrapper.viewstack.selectedIndex == 1)
                    {
                        miniViewportB.update();
                    }
                });
            }
            
            protected function button1_clickHandler(event:MouseEvent):void
            {
                for (var i:int = 0; i < 20; i++)
                {
                    var addNum:Number = Math.round(Math.random() * 10);
                    dg.dataProvider.addItem(String(addNum));
                }
                miniViewportB.update();
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <fx:Object id="imgA" data="@Embed(source='images/noRedistribution/laika-connor.jpg')"/>
        <fx:Object id="imgB" data="@Embed(source='images/laika-sleeping.jpg')"/>
        
    </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="MiniViewport Description"
                                       description="The MiniViewport component is a small viewport designed to help users navigate scrollable content.&#13;&#13;Designed to be fast, performant, and to minimize memory usage and unnecessary drawing.&#13;&#13;To create the link between the scrollable content and the MiniViewport, simply send a reference to the viewport to the MiniViewport's 'viewport' property.&#13;&#13;The MiniViewport displays a bitmap representation of the linked viewport. The area that is visible within the viewport is indicated via a rectangular overlay. Users can update the scroll position of the viewport by dragging the visible rectangle overlay in the MiniViewport.&#13;&#13;When the scroll position of the viewport changes for any reason, such as scrollbars or resizing, the MiniViewport will update automatically.&#13;&#13;Can be skinned and uses a very efficient method of drawing the scrollable content."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>Styling</data:label>
                <data:content>
                    <s:FormHeading label="Border"/>
                    <s:FormItem label="Visible:">
                        <s:CheckBox id="borderVisibleSelect"
                                    selected="true"/>
                    </s:FormItem>
                    <s:FormItem enabled="{borderVisibleSelect.selected}" 
                                label="Color:">
                        <colorPicker:ColorPicker id="borderColorSelect"
                                                 selectedColor="{getStyle('borderColor')}"/>
                    </s:FormItem>
                    <s:FormItem enabled="{borderVisibleSelect.selected}" 
                                label="Alpha:">
                        <s:HSlider id="borderAlphaSelect" 
                                   width="100"
                                   minimum="0" maximum="1" snapInterval="0.05" stepSize="0.05" value="1"/>
                        
                    </s:FormItem>
                    
                    <s:FormHeading label="Visible Rect Border:"/>
                    <s:FormItem label="Color:">
                        <colorPicker:ColorPicker id="visibleRectBorderColorSelect"
                                                 selectedColor="#FF0000"/>
                    </s:FormItem>
                    <s:FormItem label="Alpha:">
                        <s:HSlider id="visibleRectBorderAlphaSelect" 
                                   width="100"
                                   minimum="0" maximum="1" snapInterval="0.05"  stepSize="0.05" value="1"/>
                    </s:FormItem>
                    
                    <s:FormHeading label="Visible Rect Background:"/>
                    <s:FormItem label="Color:">
                        <colorPicker:ColorPicker id="visibleRectBackgroundColorSelect"
                                                 selectedColor="#FFFFFF"/>
                    </s:FormItem>
                    <s:FormItem label="Alpha:">
                        <s:HSlider id="visibleRectBackgroundAlphaSelect" 
                                   width="100"
                                   minimum="0" maximum="1" snapInterval="0.05"  stepSize="0.05" value="0.25"/>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Image Example</data:tabLabel>
                <data:exampleDescription>Illustrates the classic use for the MiniViewport: traversing an image. Change the vertical and horizontal scroll of the viewport by dragging the visible rectangle in the MiniViewport or change the scroll positions directly within the Scroller and the MiniViewport's visible rectangle's position will automatically update.&#13;&#13;Viewport will update in real-time.  Try changing the image below or resizing the application window.&#13;&#13;The first image is of Connor neglecting his canine relationships. The second is Laika sleeping.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Button label="Change Viewport Image"
                              click="if(img.source==imgA.data){img.source=imgB.data}else{img.source=imgA.data};miniViewportA.update();"/>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:HGroup top="20" right="20" bottom="20" left="20">
                        <miniViewport:MiniViewport id="miniViewportA" 
                                                   width="200" height="200"
                                                   viewport="{viewport}"
                                                   borderVisible="{borderVisibleSelect.selected}"
                                                   borderAlpha="{borderAlphaSelect.value}"
                                                   borderColor="{borderColorSelect.selectedColor}"
                                                   visibleRectBorderColor="{visibleRectBorderColorSelect.selectedColor}"
                                                   visibleRectBorderAlpha="{visibleRectBorderAlphaSelect.value}"
                                                   visibleRectBackgroundColor="{visibleRectBackgroundColorSelect.selectedColor}"
                                                   visibleRectBackgroundAlpha="{visibleRectBackgroundAlphaSelect.value}"/>
                        <s:Group width="100%" height="100%">
                            <scroller:Scroller top="0" right="1" bottom="1" left="0"
                                               focusEnabled="true">
                                <s:Group id="viewport">
                                    <s:Image id="img" 
                                             source="{imgA.data}"/>
                                </s:Group>
                            </scroller:Scroller>
                            <s:Rect top="0" right="0" bottom="0" left="0">
                                <s:stroke>
                                    <s:SolidColorStroke weight="1"
                                                        pixelHinting="true"
                                                        caps="square"
                                                        joints="miter"
                                                        color="{getStyle('borderColor')}"/>
                                </s:stroke>
                            </s:Rect>
                        </s:Group>
                    </s:HGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>Rollup Example</data:tabLabel>
                <data:exampleDescription>Illustrates how the MiniViewport can be used to scroll elements other than images. The example below features a List, RichText, and an Image.&#13;&#13;Use the 'Add Renderers' button below to illustrate that the MiniViewport can update when the viewport content changes. Also, select renderers below and the miniViewport will automatically update.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Button label="Add Renderers"
                              click="button1_clickHandler(event)"/>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:HGroup top="20" right="20" bottom="20" left="20">
                        <miniViewport:MiniViewport id="miniViewportB" 
                                                   width="200" height="200"
                                                   viewport="{viewportB}"
                                                   borderVisible="{borderVisibleSelect.selected}"
                                                   borderAlpha="{borderAlphaSelect.value}"
                                                   borderColor="{borderColorSelect.selectedColor}"
                                                   visibleRectBorderColor="{visibleRectBorderColorSelect.selectedColor}"
                                                   visibleRectBorderAlpha="{visibleRectBorderAlphaSelect.value}"
                                                   visibleRectBackgroundColor="{visibleRectBackgroundColorSelect.selectedColor}"
                                                   visibleRectBackgroundAlpha="{visibleRectBackgroundAlphaSelect.value}"/>
                        <s:Group width="100%" height="100%">
                            <scroller:Scroller top="0" right="1" bottom="1" left="0"
                                               minViewportInset="5"
                                               focusEnabled="true">
                                <s:HGroup id="viewportB"
                                          gap="20">
                                    <s:List id="dg"
                                            useVirtualLayout="false"
                                            focusEnabled="false"
                                            skinClass="components.miniViewport.ListSkin"
                                            change="miniViewportB.update()">
                                        <s:dataProvider>
                                            <s:ArrayCollection>
                                                <fx:String>A</fx:String>
                                                <fx:String>B</fx:String>
                                                <fx:String>C</fx:String>
                                                <fx:String>D</fx:String>
                                                <fx:String>E</fx:String>
                                                <fx:String>F</fx:String>
                                                <fx:String>G</fx:String>
                                                <fx:String>H</fx:String>
                                                <fx:String>I</fx:String>
                                                <fx:String>J</fx:String>
                                                <fx:String>K</fx:String>
                                                <fx:String>L</fx:String>
                                                <fx:String>M</fx:String>
                                                <fx:String>N</fx:String>
                                                <fx:String>O</fx:String>
                                                <fx:String>P</fx:String>
                                                <fx:String>Q</fx:String>
                                                <fx:String>R</fx:String>
                                                <fx:String>S</fx:String>
                                                <fx:String>T</fx:String>
                                                <fx:String>U</fx:String>
                                                <fx:String>V</fx:String>
                                                <fx:String>W</fx:String>
                                                <fx:String>X</fx:String>
                                                <fx:String>Y</fx:String>
                                                <fx:String>Z</fx:String>
                                                <fx:String>1</fx:String>
                                                <fx:String>2</fx:String>
                                                <fx:String>3</fx:String>
                                                <fx:String>4</fx:String>
                                                <fx:String>5</fx:String>
                                                <fx:String>6</fx:String>
                                                <fx:String>7</fx:String>
                                                <fx:String>8</fx:String>
                                                <fx:String>9</fx:String>
                                                <fx:String>10</fx:String>
                                                <fx:String>11</fx:String>
                                                <fx:String>12</fx:String>
                                                <fx:String>13</fx:String>
                                                <fx:String>14</fx:String>
                                                <fx:String>15</fx:String>
                                                <fx:String>16</fx:String>
                                                <fx:String>17</fx:String>
                                                <fx:String>18</fx:String>
                                                <fx:String>19</fx:String>
                                                <fx:String>20</fx:String>
                                                <fx:String>21</fx:String>
                                                <fx:String>22</fx:String>
                                                <fx:String>23</fx:String>
                                                <fx:String>24</fx:String>
                                                <fx:String>25</fx:String>
                                                <fx:String>26</fx:String>
                                            </s:ArrayCollection>
                                        </s:dataProvider>
                                        <s:layout>
                                            <s:TileLayout requestedColumnCount="5"
                                                          horizontalAlign="justify" verticalAlign="justify"
                                                          columnAlign="justifyUsingGap" rowAlign="justifyUsingGap"/>
                                        </s:layout>
                                        <s:itemRenderer>
                                            <fx:Component>
                                                <s:ItemRenderer width="100%" height="100%"
                                                                autoDrawBackground="false">
                                                    <s:states>
                                                        <s:State name="normal"/>
                                                        <s:State name="hovered"/>
                                                        <s:State name="selected"/>
                                                    </s:states>
                                                    <s:Rect top="0" right="0" bottom="0" left="0">
                                                        <s:stroke>
                                                            <s:SolidColorStroke weight="2"/>
                                                        </s:stroke>
                                                        <s:fill>
                                                            <s:SolidColor color="#FFFFFF" color.hovered="#CCCCCC" color.selected="{outerDocument.getStyle('selectionColor')}"/>
                                                        </s:fill>
                                                    </s:Rect>
                                                    <s:Label top="16" right="10" bottom="10" left="10"
                                                             textAlign="center" verticalAlign="middle"
                                                             fontSize="50"
                                                             color.selected="#FFFFFF"
                                                             text="{data}"/>
                                                </s:ItemRenderer>
                                            </fx:Component>
                                        </s:itemRenderer>
                                    </s:List>
                                    <s:VGroup width="100%"
                                              horizontalAlign="justify">
                                        <s:RichText fontSize="20"
                                                    text="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 laborumLorem 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 laborumLorem 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 laborumLorem 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:Image source="@Embed(source='images/noRedistribution/logo-small.png')"/>
                                    </s:VGroup>
                                    
                                </s:HGroup>
                                
                            </scroller:Scroller>
                            <s:Rect top="0" right="0" bottom="0" left="0">
                                <s:stroke>
                                    <s:SolidColorStroke weight="1"
                                                        pixelHinting="true"
                                                        caps="square"
                                                        joints="miter"
                                                        color="{getStyle('borderColor')}"/>
                                </s:stroke>
                            </s:Rect>
                        </s:Group>
                    </s:HGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>